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

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

@@ -0,0 +1,269 @@
+import { useEffect, useState } from 'react';
+
+import Route from '@/assets/ico/route.svg?c';
+
+import { confirm } from '@@/modals/confirm';
+import { ModalType } from '@@/modals';
+import { Datatable } from '@@/datatables';
+import { Button, ButtonGroup } from '@@/buttons';
+import { createPersistedStore } from '@@/datatables/types';
+import { buildConfirmButton } from '@@/modals/utils';
+import { useTableState } from '@@/datatables/useTableState';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { IngressControllerClassMap } from '../types';
+
+import { columns } from './columns';
+
+const storageKey = 'ingressClasses';
+const settingsStore = createPersistedStore(storageKey, 'name');
+
+interface Props {
+  onChangeControllers: (
+    controllerClassMap: IngressControllerClassMap[]
+  ) => void; // angular function to save the ingress class list
+  description: string;
+  ingressControllers: IngressControllerClassMap[] | undefined;
+  initialIngressControllers: IngressControllerClassMap[] | undefined;
+  allowNoneIngressClass: boolean;
+  isLoading: boolean;
+  noIngressControllerLabel: string;
+  view: string;
+}
+
+// This is a legacy component that has more state logic than the new one, for angular views
+// Delete this component when the namespace edit view is migrated to react
+export function IngressClassDatatableAngular({
+  onChangeControllers,
+  description,
+  initialIngressControllers,
+  ingressControllers,
+  allowNoneIngressClass,
+  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: IngressControllerClassMap[];
+    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 || []}
+        columns={columns}
+        isLoading={isLoading}
+        emptyContentLabel={noIngressControllerLabel}
+        title="Ingress Controllers"
+        titleIcon={Route}
+        getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
+        renderTableActions={(selectedRows) => renderTableActions(selectedRows)}
+        description={renderIngressClassDescription()}
+      />
+    </div>
+  );
+
+  function renderTableActions(selectedRows: IngressControllerClassMap[]) {
+    return (
+      <div className="flex items-start">
+        <ButtonGroup>
+          <Button
+            disabled={
+              selectedRows.filter((row) => row.Availability === true).length ===
+              0
+            }
+            color="dangerlight"
+            size="small"
+            onClick={() =>
+              updateIngressControllers(
+                selectedRows,
+                ingControllerFormValues || [],
+                false
+              )
+            }
+          >
+            Disallow selected
+          </Button>
+          <Button
+            disabled={
+              selectedRows.filter((row) => row.Availability === false)
+                .length === 0
+            }
+            color="default"
+            size="small"
+            onClick={() =>
+              updateIngressControllers(
+                selectedRows,
+                ingControllerFormValues || [],
+                true
+              )
+            }
+          >
+            Allow selected
+          </Button>
+        </ButtonGroup>
+      </div>
+    );
+  }
+
+  function renderIngressClassDescription() {
+    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>}
+      </div>
+    );
+  }
+
+  async function updateIngressControllers(
+    selectedRows: IngressControllerClassMap[],
+    ingControllerFormValues: IngressControllerClassMap[],
+    availability: boolean
+  ) {
+    const updatedIngressControllers = getUpdatedIngressControllers(
+      selectedRows,
+      ingControllerFormValues || [],
+      availability
+    );
+
+    if (ingressControllers && ingressControllers.length) {
+      const newAllowed = updatedIngressControllers.map(
+        (ingController) => ingController.Availability
+      );
+      if (view === 'namespace') {
+        setIngControllerFormValues(updatedIngressControllers);
+        onChangeControllers(updatedIngressControllers);
+        return;
+      }
+
+      const usedControllersToDisallow = ingressControllers.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 (
+            ingController.Availability &&
+            ingController.Used &&
+            !newAllowed[index]
+          ) {
+            return true;
+          }
+          return false;
+        }
+      );
+
+      if (usedControllersToDisallow.length > 0) {
+        const confirmed = await confirm({
+          title: 'Disallow in-use ingress controllers?',
+          modalType: ModalType.Warn,
+          message: (
+            <div>
+              <p>
+                There are ingress controllers you want to disallow that are in
+                use:
+              </p>
+              <ul className="ml-6">
+                {usedControllersToDisallow.map((controller) => (
+                  <li key={controller.ClassName}>{controller.ClassName}</li>
+                ))}
+              </ul>
+              <p>
+                No new ingress rules can be created for the disallowed
+                controllers.
+              </p>
+            </div>
+          ),
+          confirmButton: buildConfirmButton('Disallow', 'warning'),
+        });
+
+        if (!confirmed) {
+          return;
+        }
+      }
+      setIngControllerFormValues(updatedIngressControllers);
+      onChangeControllers(updatedIngressControllers);
+    }
+  }
+}
+
+function isUnsavedChanges(
+  oldIngressControllers: IngressControllerClassMap[],
+  newIngressControllers: IngressControllerClassMap[]
+) {
+  if (oldIngressControllers.length !== newIngressControllers.length) {
+    return true;
+  }
+  for (let i = 0; i < newIngressControllers.length; i += 1) {
+    if (
+      oldIngressControllers[i]?.Availability !==
+      newIngressControllers[i]?.Availability
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function getUpdatedIngressControllers(
+  selectedRows: IngressControllerClassMap[],
+  allRows: IngressControllerClassMap[],
+  allow: boolean
+) {
+  const selectedRowClassNames = selectedRows.map((row) => row.ClassName);
+  const updatedIngressControllers = allRows?.map((row) => {
+    if (selectedRowClassNames.includes(row.ClassName)) {
+      return { ...row, Availability: allow };
+    }
+    return row;
+  });
+  return updatedIngressControllers;
+}

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

@@ -4,7 +4,7 @@ import { Check, X } from 'lucide-react';
 import { Badge } from '@@/Badge';
 import { Icon } from '@@/Icon';
 
-import type { IngressControllerClassMapRowData } from '../../types';
+import type { IngressControllerClassMap } from '../../types';
 
 import { columnHelper } from './helper';
 
@@ -16,9 +16,7 @@ export const availability = columnHelper.accessor('Availability', {
   sortingFn: 'basic',
 });
 
-function Cell({
-  getValue,
-}: CellContext<IngressControllerClassMapRowData, boolean>) {
+function Cell({ getValue }: CellContext<IngressControllerClassMap, boolean>) {
   const availability = getValue();
 
   return (

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/helper.ts

@@ -1,6 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
 
-import { IngressControllerClassMapRowData } from '../../types';
+import { IngressControllerClassMap } from '../../types';
 
-export const columnHelper =
-  createColumnHelper<IngressControllerClassMapRowData>();
+export const columnHelper = createColumnHelper<IngressControllerClassMap>();

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

@@ -2,7 +2,7 @@ import { CellContext } from '@tanstack/react-table';
 
 import { Badge } from '@@/Badge';
 
-import type { IngressControllerClassMapRowData } from '../../types';
+import type { IngressControllerClassMap } from '../../types';
 
 import { columnHelper } from './helper';
 
@@ -15,7 +15,7 @@ export const name = columnHelper.accessor('ClassName', {
 function NameCell({
   row,
   getValue,
-}: CellContext<IngressControllerClassMapRowData, string>) {
+}: CellContext<IngressControllerClassMap, string>) {
   const className = getValue();
 
   return (

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/utils.ts

@@ -0,0 +1,37 @@
+import { IngressControllerClassMap } from '../types';
+
+export function getIngressClassesFormValues(
+  allowNoneIngressClass: boolean,
+  ingressClasses?: IngressControllerClassMap[]
+) {
+  const ingressClassesFormValues = ingressClasses ? [...ingressClasses] : [];
+  const noneIngressClassIndex = ingressClassesFormValues.findIndex(
+    (ingressClass) =>
+      ingressClass.Name === 'none' &&
+      ingressClass.ClassName === 'none' &&
+      ingressClass.Type === 'custom'
+  );
+  // add the none ingress class if it doesn't exist
+  if (allowNoneIngressClass && noneIngressClassIndex === -1) {
+    return [
+      ...ingressClassesFormValues,
+      {
+        Name: 'none',
+        ClassName: 'none',
+        Type: 'custom',
+        Availability: true,
+        New: false,
+        Used: false,
+      },
+    ];
+  }
+  // remove the none ingress class if it exists
+  if (!allowNoneIngressClass && noneIngressClassIndex > -1) {
+    return [
+      ...ingressClassesFormValues.slice(0, noneIngressClassIndex),
+      ...ingressClassesFormValues.slice(noneIngressClassIndex + 1),
+    ];
+  }
+  // otherwise return the ingress classes as is
+  return ingressClassesFormValues;
+}