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}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Input } from '../Input';
+
+import { Slider } from './Slider';
+
+export function SliderWithInput({
+  value,
+  onChange,
+  max,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+  max: number;
+}) {
+  return (
+    <div className="flex items-center gap-4">
+      {max && (
+        <div className="mr-2 flex-1">
+          <Slider
+            onChange={(value) =>
+              onChange(typeof value === 'number' ? value : value[0])
+            }
+            value={value}
+            min={0}
+            max={max}
+            step={256}
+          />
+        </div>
+      )}
+      <Input
+        type="number"
+        min="0"
+        max={max}
+        value={value}
+        onChange={(e) => onChange(e.target.valueAsNumber)}
+        className="w-32"
+      />
+    </div>
+  );
+}