fix: Fix more problematic react immutability (kyma-project#4479)

* fix all

* try to fix ColumnInput

Author: dbadura

eslint.config.ts

@@ -29,7 +29,6 @@ export default defineConfig(
         'react/react-in-jsx-scope': 'off',
         'react/prop-types': 'off',
         'react-hooks/refs': 'warn',
-        'react-hooks/immutability': 'warn',
 
         // TypeScript
         '@typescript-eslint/no-explicit-any': 'off',

src/components/BusolaExtensions/ColumnsInput.tsx

@@ -30,7 +30,7 @@ export function ColumnsInput({
     );
   }
 
-  return columns.map((value) => {
+  return columns.map((value, index) => {
     return (
       <div key={value.path} className="columns-input">
         <CheckBox
@@ -45,13 +45,14 @@ export function ColumnsInput({
         <Input
           value={value.name}
           onInput={(e) => {
-            value.name = e.target.value;
-            setColumns([...columns]);
+            const columnsCopy = [...columns];
+            columnsCopy[index].name = e.target.value;
+            setColumns(columnsCopy);
           }}
           className="full-width"
           required
           placeholder={t('extensibility.starter-modal.headers.field-name')}
-          disabled={!value.isSelected ? true : false}
+          disabled={!value.isSelected}
           accessibleName={t('common.labels.name')}
         />
         <Input

src/resources/ServiceAccounts/ServiceAccountCreate.jsx

@@ -53,13 +53,18 @@ export default function ServiceAccountCreate({
   useEffect(() => {
     if (layoutState?.showEdit?.resource) return;
 
-    setServiceAccount(
-      cloneDeep(initialServiceAccount) ||
-        createServiceAccountTemplate(namespace),
-    );
-    setInitialResource(
-      initialServiceAccount || createServiceAccountTemplate(namespace),
-    );
+    const timeoutID = setTimeout(() => {
+      setServiceAccount(
+        cloneDeep(initialServiceAccount) ||
+          createServiceAccountTemplate(namespace),
+      );
+      setInitialResource(
+        initialServiceAccount || createServiceAccountTemplate(namespace),
+      );
+    }, 0);
+    return () => {
+      clearTimeout(timeoutID);
+    };
   }, [initialServiceAccount, namespace, layoutState?.showEdit?.resource]);
 
   const isEdit = useMemo(
@@ -90,9 +95,10 @@ export default function ServiceAccountCreate({
     });
     jp.value(serviceAccount, '$.imagePullSecrets', newImages);
 
-    if (!newImages.length) delete serviceAccount.imagePullSecrets;
+    const newServiceAccount = { ...serviceAccount };
+    if (!newImages.length) delete newServiceAccount.imagePullSecrets;
 
-    setServiceAccount({ ...serviceAccount });
+    setServiceAccount(newServiceAccount);
   };
 
   async function afterServiceAccountCreate(defaultAfterCreateFn) {

src/shared/ResourceForm/fields/MultiInput.jsx

@@ -86,6 +86,7 @@ export function MultiInput({
   };
 
   const setEntry = (newVal, index) => {
+    // eslint-disable-next-line react-hooks/immutability
     internalValue[index] = newVal;
     setInternalValue([...internalValue]);
   };