refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

app/react/components/Badge/UnusedBadge.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@@/Badge';
 
 export function UnusedBadge() {
-  return <Badge type="warn">unused</Badge>;
+  return <Badge type="warn">Unused</Badge>;
 }

app/react/components/buttons/DeleteButton.tsx

@@ -6,6 +6,7 @@ import { AutomationTestingProps } from '@/types';
 import { confirmDelete } from '@@/modals/confirm';
 
 import { Button } from './Button';
+import { LoadingButton } from './LoadingButton';
 
 type ConfirmOrClick =
   | {
@@ -24,6 +25,8 @@ export function DeleteButton({
   disabled,
   size,
   children,
+  isLoading,
+  loadingText = 'Removing',
   'data-cy': dataCy,
   ...props
 }: PropsWithChildren<
@@ -31,10 +34,28 @@ export function DeleteButton({
     ConfirmOrClick & {
       size?: ComponentProps<typeof Button>['size'];
       disabled?: boolean;
+      isLoading?: boolean;
+      loadingText?: string;
     }
 >) {
+  if (isLoading === undefined) {
+    return (
+      <Button
+        size={size}
+        color="dangerlight"
+        disabled={disabled || isLoading}
+        onClick={() => handleClick()}
+        icon={Trash2}
+        className="!m-0"
+        data-cy={dataCy}
+      >
+        {children || 'Remove'}
+      </Button>
+    );
+  }
+
   return (
-    <Button
+    <LoadingButton
       size={size}
       color="dangerlight"
       disabled={disabled}
@@ -42,9 +63,11 @@ export function DeleteButton({
       icon={Trash2}
       className="!m-0"
       data-cy={dataCy}
+      isLoading={isLoading}
+      loadingText={loadingText}
     >
       {children || 'Remove'}
-    </Button>
+    </LoadingButton>
   );
 
   async function handleClick() {

app/react/components/datatables/Filter.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
-import { Column } from '@tanstack/react-table';
+import { Column, Row } from '@tanstack/react-table';
 import { Check, Filter } from 'lucide-react';
 
 import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
@@ -73,7 +73,15 @@ export function MultipleSelectionFilter({
   }
 }
 
-export function filterHOC<TData extends DefaultType>(menuTitle: string) {
+export type FilterOptionsTransformer<TData extends DefaultType> = (
+  rows: Row<TData>[],
+  id: string
+) => string[];
+
+export function filterHOC<TData extends DefaultType>(
+  menuTitle: string,
+  filterOptionsTransformer: FilterOptionsTransformer<TData> = defaultFilterOptionsTransformer
+) {
   return function Filter({
     column: { getFilterValue, setFilterValue, getFacetedRowModel, id },
   }: {
@@ -81,15 +89,10 @@ export function filterHOC<TData extends DefaultType>(menuTitle: string) {
   }) {
     const { flatRows } = getFacetedRowModel();
 
-    const options = useMemo(() => {
-      const options = new Set<string>();
-      flatRows.forEach(({ getValue }) => {
-        const value = getValue<string>(id);
-
-        options.add(value);
-      });
-      return Array.from(options);
-    }, [flatRows, id]);
+    const options = useMemo(
+      () => filterOptionsTransformer(flatRows, id),
+      [flatRows, id]
+    );
 
     const value = getFilterValue();
 
@@ -106,3 +109,15 @@ export function filterHOC<TData extends DefaultType>(menuTitle: string) {
     );
   };
 }
+
+function defaultFilterOptionsTransformer<TData extends DefaultType>(
+  rows: Row<TData>[],
+  id: string
+) {
+  const options = new Set<string>();
+  rows.forEach(({ getValue }) => {
+    const value = getValue<string>(id);
+    options.add(value);
+  });
+  return Array.from(options);
+}