refactor(containers): migrate resources tab to react [EE-5214] (#10355)

app/react/components/form-components/Slider/Slider.tsx

@@ -1,9 +1,11 @@
-import { useCallback } from 'react';
+import { ReactElement } from 'react';
 import RcSlider from 'rc-slider';
+import { HandleProps } from 'rc-slider/lib/Handles/Handle';
 
 import { SliderTooltip } from '@@/Tip/SliderTooltip';
 
 import styles from './Slider.module.css';
+
 import 'rc-slider/assets/index.css';
 
 export interface Props {
@@ -12,8 +14,8 @@ export interface Props {
   step: number;
   value: number;
   onChange: (value: number | number[]) => void;
+  dataCy?: string;
   // true if you want to always show the tooltip
-  dataCy: string;
   visibleTooltip?: boolean;
 }
 
@@ -31,17 +33,6 @@ export function Slider({
     [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}>
       <RcSlider
@@ -64,3 +55,16 @@ function translateMinValue(value: number) {
   }
   return value.toString();
 }
+
+function sliderTooltip(
+  node: ReactElement<HandleProps>,
+  handleProps: { value: number }
+) {
+  return (
+    <SliderTooltip
+      value={translateMinValue(handleProps.value)}
+      child={node}
+      delay={0}
+    />
+  );
+}