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

app/react/components/form-components/InputList/InputList.module.css

@@ -1,25 +0,0 @@
-.items > * + * {
-  margin-top: 2px;
-}
-
-.label {
-  text-align: left;
-  font-size: 0.9em;
-  padding-top: 7px;
-  margin-bottom: 0;
-  display: inline-block;
-  max-width: 100%;
-  font-weight: 700;
-}
-
-.item-line {
-  display: flex;
-}
-
-.item-line.has-error {
-  margin-bottom: 20px;
-}
-
-.default-item {
-  width: 100% !important;
-}

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

@@ -1,5 +1,4 @@
 import { ComponentType } from 'react';
-import clsx from 'clsx';
 import { FormikErrors } from 'formik';
 import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react';
 
@@ -10,7 +9,6 @@ import { TextTip } from '@@/Tip/TextTip';
 import { Input } from '../Input';
 import { FormError } from '../FormError';
 
-import styles from './InputList.module.css';
 import { arrayMove } from './utils';
 
 type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[]
@@ -94,12 +92,9 @@ export function InputList<T = DefaultType>({
 }: Props<T>) {
   const isAddButtonVisible = !(isAddButtonHidden || readOnly);
   return (
-    <div
-      className={clsx('form-group', styles.root)}
-      aria-label={ariaLabel || label}
-    >
+    <div className="form-group" aria-label={ariaLabel || label}>
       {label && (
-        <div className={clsx('col-sm-12', styles.header)}>
+        <div className="col-sm-12">
           <span className="control-label space-right pt-2 text-left !font-bold">
             {label}
             {tooltip && <Tooltip message={tooltip} />}
@@ -121,14 +116,7 @@ export function InputList<T = DefaultType>({
               typeof errors === 'object' ? errors[index] : undefined;
 
             return (
-              <div
-                key={key}
-                className={clsx(
-                  styles.itemLine,
-                  { [styles.hasError]: !!error },
-                  'vertical-center'
-                )}
-              >
+              <div key={key} className="flex">
                 {Item ? (
                   <Item
                     item={item}
@@ -183,7 +171,7 @@ export function InputList<T = DefaultType>({
       )}
 
       {isAddButtonVisible && (
-        <div className="col-sm-12 mt-5">
+        <div className="col-sm-12 mt-3">
           <Button
             onClick={handleAdd}
             disabled={disabled}
@@ -272,7 +260,7 @@ function DefaultItem({
       <Input
         value={item.value}
         onChange={(e) => onChange({ value: e.target.value })}
-        className={styles.defaultItem}
+        className="!w-full"
         disabled={disabled}
         readOnly={readOnly}
       />

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