fix(slider): update rc-slider [EE-5011] (#8611)

* fix(slider): update rc-slider [EE-5011] * fix PasswordLengthSlider tooltip * fix unnecessarily bulky className for SliderTooltip * remove SliderTooltip inner div * center slider handle value * relative tooltip * update z index --------- Co-authored-by: testa113 <testa113>
2023-04-21 16:52:05 +12:00 · 2023-04-21 16:52:05 +12:00 · 3654109332
parent bf9dc8c2d0
commit 3654109332
10 changed files with 159 additions and 135 deletions
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@ -773,7 +773,7 @@
                      (!ctrl.state.resourcePoolHasQuota || (ctrl.state.resourcePoolHasQuota && !ctrl.resourceQuotaCapacityExceeded())) && ctrl.formValues.Containers.length <= 1
                    "
                  >
-                    <label for="memory-limit" class="col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
+                    <label for="memory-limit" class="space-right col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
                      Memory limit (MB)
                      <portainer-tooltip
                        message="'An instance of this application will reserve this amount of memory. If the instance memory usage exceeds the reservation, it might be subject to OOM.'"
@ -816,7 +816,7 @@
                      (!ctrl.state.resourcePoolHasQuota || (ctrl.state.resourcePoolHasQuota && !ctrl.resourceQuotaCapacityExceeded())) && ctrl.formValues.Containers.length <= 1
                    "
                  >
-                    <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
+                    <label for="cpu-limit" class="space-right col-sm-3 col-lg-2 control-label flex flex-row items-center text-left">
                      CPU limit
                      <portainer-tooltip
                        message="'An instance of this application will reserve this amount of CPU. If the instance CPU usage exceeds the reservation, it might be subject to CPU throttling.'"
--- a/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
+++ b/app/react/components/Tip/SliderTooltip/SliderTooltip.module.css
@ -0,0 +1,30 @@
+:global(portainer-tooltip) {
+  @apply inline-flex;
+}
+
+.tooltip {
+  background-color: var(--bg-tooltip-color) !important;
+  color: var(--text-tooltip-color) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  max-width: 400px;
+  min-width: 50px;
+  font-size: 1rem !important;
+  font-weight: 400;
+  text-align: left;
+  width: max-content;
+}
+
+.tooltip-container {
+  line-height: 18px;
+  padding: 8px 10px !important;
+  font-size: 12px !important;
+}
+
+.tooltip-centered .tooltip-container {
+  text-align: center;
+}
+
+.tooltip-message a {
+  color: var(--blue-15) !important;
+}
--- a/app/react/components/Tip/SliderTooltip/SliderTooltip.tsx
+++ b/app/react/components/Tip/SliderTooltip/SliderTooltip.tsx
@ -0,0 +1,42 @@
+import Tippy from '@tippyjs/react';
+import clsx from 'clsx';
+
+import 'tippy.js/dist/tippy.css';
+
+import styles from './SliderTooltip.module.css';
+
+export interface Props {
+  value: string;
+  child: React.ReactElement;
+  delay: number;
+  zIndex?: number;
+}
+
+export function SliderTooltip({ value, child, delay, zIndex = 50 }: Props) {
+  return (
+    <Tippy
+      appendTo="parent"
+      zIndex={zIndex} // make the z index lower than the dialog
+      className={clsx(styles.tooltipCentered, styles.tooltip)}
+      content={messageHTML(value)}
+      placement="top"
+      showOnCreate
+      hideOnClick={false}
+      trigger="manual"
+      delay={delay}
+      arrow
+      allowHTML
+    >
+      {child}
+    </Tippy>
+  );
+}
+
+function messageHTML(value: string) {
+  let message = value;
+  if (message === '0') {
+    message = 'unlimited';
+  }
+
+  return <div className={styles.tooltipContainer}>{message}</div>;
+}
--- a/app/react/components/Tip/SliderTooltip/index.ts
+++ b/app/react/components/Tip/SliderTooltip/index.ts
@ -0,0 +1 @@
+export { SliderTooltip } from './SliderTooltip';
--- a/app/react/components/form-components/Slider/Slider.module.css
+++ b/app/react/components/form-components/Slider/Slider.module.css
@ -1,58 +1,40 @@
 .root {
-  margin: 0 25px;
-}
-
-.slider {
  padding-top: 50px;
 }

-.slider :global .rc-slider-handle {
+.root :global .rc-slider .rc-slider-handle-dragging {
+  @apply border-2 border-blue-8;
+}
+
+.root :global .rc-slider-dot {
+  display: none;
+}
+
+.root :global .rc-slider-handle {
  @apply border-2 border-blue-8;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: 16px;
-  cursor: pointer;
+  opacity: 1;
  background-color: #ffffff;
 }

-.slider :global .rc-slider-track {
+.root :global .rc-slider-track {
  @apply bg-blue-8;
+  height: 8px;
 }

-.slider :global .rc-slider-handle:after {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  width: 9px;
-  height: 9px;
-  background: #ffffff;
-  border-radius: 5px;
-  content: '';
+.root :global .rc-slider-rail {
+  height: 8px;
 }

-.slider :global .rc-slider-mark-text {
+.root :global .rc-slider-mark {
+  top: -28px;
+}
+
+.root :global .rc-slider-mark-text {
  font-size: 14px;
  color: var(--text-body-color);
-}
-
-.slider :global .rc-slider-tooltip-arrow {
-  bottom: 2px;
-  border-top-color: var(--bg-tooltip-color);
-}
-
-.slider :global .rc-slider-tooltip-placement-top {
-  padding: 6px 0px;
-}
-
-.slider :global .rc-slider-tooltip-inner {
-  font-size: 14px;
-  color: var(--text-tooltip-color);
-  height: fit-content;
-  background-color: var(--bg-tooltip-color);
-  box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%), 0 2px 10px 0 rgb(34 36 38 / 15%);
-  padding: 8px 12px;
-  text-align: center;
  user-select: none;
-  cursor: pointer;
 }
--- a/app/react/components/form-components/Slider/Slider.stories.tsx
+++ b/app/react/components/form-components/Slider/Slider.stories.tsx
@ -28,7 +28,13 @@ function Template({
      max={max}
      step={step}
      value={sliderValue}
-      onChange={setSliderValue}
+      onChange={(value) => {
+        if (Array.isArray(value)) {
+          setSliderValue(value[0]);
+        } else {
+          setSliderValue(value);
+        }
+      }}
      dataCy={dataCy}
      visibleTooltip={visibleTooltip}
    />
--- a/app/react/components/form-components/Slider/Slider.tsx
+++ b/app/react/components/form-components/Slider/Slider.tsx
@ -1,5 +1,8 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';

+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import styles from './Slider.module.css';
 import 'rc-slider/assets/index.css';

@ -8,7 +11,7 @@ export interface Props {
  max: number;
  step: number;
  value: number;
-  onChange: (value: number) => void;
+  onChange: (value: number | number[]) => void;
  // true if you want to always show the tooltip
  dataCy: string;
  visibleTooltip?: boolean;
@ -23,29 +26,33 @@ export function Slider({
  dataCy,
  visibleTooltip: visible,
 }: Props) {
-  const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-  // if the tooltip is always visible, hide the marks when tooltip value gets close to the edges
  const marks = {
    [min]: visible && value / max < 0.1 ? '' : translateMinValue(min),
    [max]: visible && value / max > 0.9 ? '' : max.toString(),
  };

+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={translateMinValue(handleProps.value)}
+        child={node}
+        delay={0}
+      />
+    ),
+    []
+  );
+
  return (
    <div className={styles.root}>
-      <SliderWithTooltip
-        tipFormatter={translateMinValue}
+      <RcSlider
+        handleRender={sliderTooltip}
        min={min}
        max={max}
-        step={step}
        marks={marks}
-        defaultValue={value}
-        onAfterChange={onChange}
-        className={styles.slider}
-        tipProps={{ visible }}
-        railStyle={{ height: 8 }}
-        trackStyle={{ height: 8 }}
-        dotStyle={{ visibility: 'hidden' }}
+        step={step}
        data-cy={dataCy}
+        value={value}
+        onChange={onChange}
      />
    </div>
  );
--- a/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
+++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
@ -1,7 +1,10 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';
 import clsx from 'clsx';
 import { Lock, XCircle, CheckCircle } from 'lucide-react';

+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import 'rc-slider/assets/index.css';

 import { Badge } from '../Badge';
@ -13,7 +16,7 @@ export interface Props {
  max: number;
  step: number;
  value: number;
-  onChange(value: number): void;
+  onChange(value: number | number[]): void;
 }

 type Strength = 'weak' | 'good' | 'strong' | 'veryStrong';
@ -44,8 +47,6 @@ const sliderProperties: Record<
  },
 };

-const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-
 export function PasswordLengthSlider({
  min,
  max,
@ -85,31 +86,32 @@ export function PasswordLengthSlider({
    }
  }

-  function handleChange(sliderValue: number) {
+  function handleChange(sliderValue: number | number[]) {
    onChange(sliderValue);
  }

+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={`${handleProps.value} characters`}
+        child={node}
+        delay={800}
+      />
+    ),
+    []
+  );
+
  return (
    <div className={clsx(styles.root, styles[sliderProps.strength])}>
      <div className="col-sm-4">
-        <SliderWithTooltip
-          tipFormatter={(value) => `${value} characters`}
+        <RcSlider
+          handleRender={sliderTooltip}
          min={min}
          max={max}
          step={step}
          defaultValue={12}
          value={value}
          onChange={handleChange}
-          handleStyle={{
-            height: 25,
-            width: 25,
-            borderWidth: 1.85,
-            borderColor: sliderProps.color,
-            top: 1.5,
-            boxShadow: 'none',
-          }}
-          railStyle={{ height: 10 }}
-          trackStyle={{ backgroundColor: sliderProps.color, height: 10 }}
        />
      </div>

--- a/package.json
+++ b/package.json
@ -136,7 +136,7 @@
    "mustache": "^4.2.0",
    "ng-file-upload": "~12.2.13",
    "parse-duration": "^1.0.2",
-    "rc-slider": "^9.7.5",
+    "rc-slider": "^10.0.0",
    "react": "^17.0.2",
    "react-datetime-picker": "^4.2.0",
    "react-dom": "^17.0.2",
--- a/yarn.lock
+++ b/yarn.lock
@ -2139,7 +2139,7 @@
    core-js-pure "^3.19.0"
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.17.2"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@ -2167,6 +2167,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.18.3":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.18.6":
  version "7.20.7"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
@ -7392,7 +7399,7 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

-classnames@2.x, classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
+classnames@^2.2.5, classnames@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@ -8668,11 +8675,6 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz#79d5846c4f90eba3e617d9031e921de9324f84ed"
  integrity sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==

-dom-align@^1.7.0:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.2.tgz#0f8164ebd0c9c21b0c790310493cd855892acd4b"
-  integrity sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg==
-
 dom-converter@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@ -15693,65 +15695,22 @@ raw-loader@^4.0.2:
    loader-utils "^2.0.0"
    schema-utils "^3.0.0"

-rc-align@^4.0.0:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.11.tgz#8198c62db266bc1b8ef05e56c13275bf72628a5e"
-  integrity sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    dom-align "^1.7.0"
-    lodash "^4.17.21"
-    rc-util "^5.3.0"
-    resize-observer-polyfill "^1.5.1"
-
-rc-motion@^2.0.0:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.4.4.tgz#e995d5fa24fc93065c24f714857cf2677d655bb0"
-  integrity sha512-ms7n1+/TZQBS0Ydd2Q5P4+wJTSOrhIrwNxLXCZpR7Fa3/oac7Yi803HDALc2hLAKaCTQtw9LmQeB58zcwOsqlQ==
-  dependencies:
-    "@babel/runtime" "^7.11.1"
-    classnames "^2.2.1"
-    rc-util "^5.2.1"
-
-rc-slider@^9.7.5:
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-9.7.5.tgz#193141c68e99b1dc3b746daeb6bf852946f5b7f4"
-  integrity sha512-LV/MWcXFjco1epPbdw1JlLXlTgmWpB9/Y/P2yinf8Pg3wElHxA9uajN21lJiWtZjf5SCUekfSP6QMJfDo4t1hg==
+rc-slider@^10.0.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.1.1.tgz#5e82036e60b61021aba3ea0e353744dd7c74e104"
+  integrity sha512-gn8oXazZISEhnmRinI89Z/JD/joAaM35jp+gDtIVSTD/JJMCCBqThqLk1SVJmvtfeiEF/kKaFY0+qt4SDHFUDw==
  dependencies:
    "@babel/runtime" "^7.10.1"
    classnames "^2.2.5"
-    rc-tooltip "^5.0.1"
-    rc-util "^5.16.1"
-    shallowequal "^1.1.0"
+    rc-util "^5.27.0"

-rc-tooltip@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.1.1.tgz#94178ed162d0252bc4993b725f5dc2ac0fccf154"
-  integrity sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==
+rc-util@^5.27.0:
+  version "5.28.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.28.0.tgz#9e5e441d5875b8bf0ba56c2f295042a28dcff580"
+  integrity sha512-KYDjhGodswVj29v0TRciKTqRPgumIFvFDndbCD227pitQ+0Cei196rxk+OXb/blu6V8zdTRK5RjCJn+WmHLvBA==
  dependencies:
-    "@babel/runtime" "^7.11.2"
-    rc-trigger "^5.0.0"
-
-rc-trigger@^5.0.0:
-  version "5.2.10"
-  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.2.10.tgz#8a0057a940b1b9027eaa33beec8a6ecd85cce2b1"
-  integrity sha512-FkUf4H9BOFDaIwu42fvRycXMAvkttph9AlbCZXssZDVzz2L+QZ0ERvfB/4nX3ZFPh1Zd+uVGr1DEDeXxq4J1TA==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    classnames "^2.2.6"
-    rc-align "^4.0.0"
-    rc-motion "^2.0.0"
-    rc-util "^5.5.0"
-
-rc-util@^5.16.1, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0:
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.17.0.tgz#6b0788038075c3d5c215541539573a4a03827070"
-  integrity sha512-HWuTIKzBeZQQ7IBqdokE0wMp/xx39/KfUJ0gcquBigoldDCrf3YBcWFHrrQlJG7sI82Wg8mwp1uAKV3zMGfAgg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+    "@babel/runtime" "^7.18.3"
    react-is "^16.12.0"
-    shallowequal "^1.1.0"

 react-calendar@^4.0.0:
  version "4.0.0"
@ -16450,11 +16409,6 @@ requires-port@^1.0.0:
  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
				`@ -0,0 +1 @@`
				`export { SliderTooltip } from './SliderTooltip';`