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}
       />