feat(namespace): migrate create ns to react [EE-2226] (#10377)

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import Route from '@/assets/ico/route.svg?c';
 
 import { confirm } from '@@/modals/confirm';
@@ -11,7 +9,7 @@ import { buildConfirmButton } from '@@/modals/utils';
 import { useTableState } from '@@/datatables/useTableState';
 import { TextTip } from '@@/Tip/TextTip';
 
-import { IngressControllerClassMapRowData } from '../types';
+import { IngressControllerClassMap } from '../types';
 
 import { columns } from './columns';
 
@@ -19,82 +17,31 @@ const storageKey = 'ingressClasses';
 const settingsStore = createPersistedStore(storageKey, 'name');
 
 interface Props {
-  onChangeControllers: (
-    controllerClassMap: IngressControllerClassMapRowData[]
-  ) => void; // angular function to save the ingress class list
+  onChange: (controllerClassMap: IngressControllerClassMap[]) => void; // angular function to save the ingress class list
   description: string;
-  ingressControllers: IngressControllerClassMapRowData[] | undefined;
-  initialIngressControllers: IngressControllerClassMapRowData[] | undefined;
-  allowNoneIngressClass: boolean;
+  values: IngressControllerClassMap[] | undefined;
+  initialValues: IngressControllerClassMap[] | undefined;
   isLoading: boolean;
   noIngressControllerLabel: string;
   view: string;
 }
 
 export function IngressClassDatatable({
-  onChangeControllers,
+  onChange,
   description,
-  initialIngressControllers,
-  ingressControllers,
-  allowNoneIngressClass,
+  initialValues,
+  values,
   isLoading,
   noIngressControllerLabel,
   view,
 }: Props) {
   const tableState = useTableState(settingsStore, storageKey);
 
-  const [ingControllerFormValues, setIngControllerFormValues] = useState(
-    ingressControllers || []
-  );
-
-  // set the ingress controller form values when the ingress controller list changes
-  // and the ingress controller form values are not set
-  useEffect(() => {
-    if (
-      ingressControllers &&
-      ingControllerFormValues.length !== ingressControllers.length
-    ) {
-      setIngControllerFormValues(ingressControllers);
-    }
-  }, [ingressControllers, ingControllerFormValues]);
-
-  useEffect(() => {
-    if (allowNoneIngressClass === undefined || isLoading) {
-      return;
-    }
-
-    let newIngFormValues: IngressControllerClassMapRowData[];
-    const isCustomTypeExist = ingControllerFormValues.some(
-      (ic) => ic.Type === 'custom'
-    );
-    if (allowNoneIngressClass) {
-      newIngFormValues = [...ingControllerFormValues];
-      // add the ingress controller type 'custom' with a 'none' ingress class name
-      if (!isCustomTypeExist) {
-        newIngFormValues.push({
-          Name: 'none',
-          ClassName: 'none',
-          Type: 'custom',
-          Availability: true,
-          New: false,
-          Used: false,
-        });
-      }
-    } else {
-      newIngFormValues = ingControllerFormValues.filter(
-        (ingController) => ingController.ClassName !== 'none'
-      );
-    }
-    setIngControllerFormValues(newIngFormValues);
-    onChangeControllers(newIngFormValues);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allowNoneIngressClass, onChangeControllers]);
-
   return (
     <div className="-mx-[15px]">
       <Datatable
         settingsManager={tableState}
-        dataset={ingControllerFormValues || []}
+        dataset={values || []}
         columns={columns}
         isLoading={isLoading}
         emptyContentLabel={noIngressControllerLabel}
@@ -107,9 +54,7 @@ export function IngressClassDatatable({
     </div>
   );
 
-  function renderTableActions(
-    selectedRows: IngressControllerClassMapRowData[]
-  ) {
+  function renderTableActions(selectedRows: IngressControllerClassMap[]) {
     return (
       <div className="flex items-start">
         <ButtonGroup>
@@ -121,11 +66,7 @@ export function IngressClassDatatable({
             color="dangerlight"
             size="small"
             onClick={() =>
-              updateIngressControllers(
-                selectedRows,
-                ingControllerFormValues || [],
-                false
-              )
+              updateIngressControllers(selectedRows, values || [], false)
             }
           >
             Disallow selected
@@ -138,11 +79,7 @@ export function IngressClassDatatable({
             color="default"
             size="small"
             onClick={() =>
-              updateIngressControllers(
-                selectedRows,
-                ingControllerFormValues || [],
-                true
-              )
+              updateIngressControllers(selectedRows, values || [], true)
             }
           >
             Allow selected
@@ -156,38 +93,34 @@ export function IngressClassDatatable({
     return (
       <div className="text-muted flex w-full flex-col !text-xs">
         <div className="mt-1">{description}</div>
-        {initialIngressControllers &&
-          ingControllerFormValues &&
-          isUnsavedChanges(
-            initialIngressControllers,
-            ingControllerFormValues
-          ) && <TextTip>Unsaved changes.</TextTip>}
+        {initialValues && values && isUnsavedChanges(initialValues, values) && (
+          <TextTip>Unsaved changes.</TextTip>
+        )}
       </div>
     );
   }
 
   async function updateIngressControllers(
-    selectedRows: IngressControllerClassMapRowData[],
-    ingControllerFormValues: IngressControllerClassMapRowData[],
+    selectedRows: IngressControllerClassMap[],
+    values: IngressControllerClassMap[],
     availability: boolean
   ) {
     const updatedIngressControllers = getUpdatedIngressControllers(
       selectedRows,
-      ingControllerFormValues || [],
+      values || [],
       availability
     );
 
-    if (ingressControllers && ingressControllers.length) {
+    if (values && values.length) {
       const newAllowed = updatedIngressControllers.map(
         (ingController) => ingController.Availability
       );
       if (view === 'namespace') {
-        setIngControllerFormValues(updatedIngressControllers);
-        onChangeControllers(updatedIngressControllers);
+        onChange(updatedIngressControllers);
         return;
       }
 
-      const usedControllersToDisallow = ingressControllers.filter(
+      const usedControllersToDisallow = values.filter(
         (ingController, index) => {
           // if any of the current controllers are allowed, and are used, then become disallowed, then add the controller to a new list
           if (
@@ -229,15 +162,14 @@ export function IngressClassDatatable({
           return;
         }
       }
-      setIngControllerFormValues(updatedIngressControllers);
-      onChangeControllers(updatedIngressControllers);
+      onChange(updatedIngressControllers);
     }
   }
 }
 
 function isUnsavedChanges(
-  oldIngressControllers: IngressControllerClassMapRowData[],
-  newIngressControllers: IngressControllerClassMapRowData[]
+  oldIngressControllers: IngressControllerClassMap[],
+  newIngressControllers: IngressControllerClassMap[]
 ) {
   if (oldIngressControllers.length !== newIngressControllers.length) {
     return true;
@@ -254,8 +186,8 @@ function isUnsavedChanges(
 }
 
 function getUpdatedIngressControllers(
-  selectedRows: IngressControllerClassMapRowData[],
-  allRows: IngressControllerClassMapRowData[],
+  selectedRows: IngressControllerClassMap[],
+  allRows: IngressControllerClassMap[],
   allow: boolean
 ) {
   const selectedRowClassNames = selectedRows.map((row) => row.ClassName);