refactor(kube/namespaces): migrate table to react [EE-4694] (#10988)

app/react/kubernetes/namespaces/ListView/columns/actions.tsx

@@ -0,0 +1,57 @@
+import { CellContext } from '@tanstack/react-table';
+import { Users } from 'lucide-react';
+
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { Environment } from '@/react/portainer/environments/types';
+
+import { Link } from '@@/Link';
+import { Button } from '@@/buttons';
+
+import { NamespaceViewModel } from '../types';
+import { isDefaultNamespace } from '../../isDefaultNamespace';
+
+import { helper } from './helper';
+
+export const actions = helper.display({
+  header: 'Actions',
+  cell: Cell,
+});
+
+function Cell({
+  row: { original: item },
+}: CellContext<NamespaceViewModel, unknown>) {
+  const environmentQuery = useCurrentEnvironment();
+
+  if (!environmentQuery.data) {
+    return null;
+  }
+
+  if (!canManageAccess(item, environmentQuery.data)) {
+    return '-';
+  }
+
+  return (
+    <Button
+      as={Link}
+      color="link"
+      props={{
+        to: 'kubernetes.resourcePools.resourcePool.access',
+        params: { id: item.Namespace.Name },
+      }}
+      icon={Users}
+    >
+      Manage access
+    </Button>
+  );
+
+  function canManageAccess(item: NamespaceViewModel, environment: Environment) {
+    const name = item.Namespace.Name;
+    const isSystem = item.Namespace.IsSystem;
+
+    return (
+      !isSystem &&
+      (!isDefaultNamespace(name) ||
+        environment.Kubernetes.Configuration.RestrictDefaultNamespace)
+    );
+  }
+}

app/react/kubernetes/namespaces/ListView/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NamespaceViewModel } from '../types';
+
+export const helper = createColumnHelper<NamespaceViewModel>();

app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx

@@ -0,0 +1,95 @@
+import _ from 'lodash';
+import { useMemo } from 'react';
+
+import { isoDate } from '@/portainer/filters/filters';
+import { useAuthorizations } from '@/react/hooks/useUser';
+
+import { Link } from '@@/Link';
+import { StatusBadge } from '@@/StatusBadge';
+import { Badge } from '@@/Badge';
+import { SystemBadge } from '@@/Badge/SystemBadge';
+
+import { helper } from './helper';
+import { actions } from './actions';
+
+export function useColumns() {
+  const hasAuthQuery = useAuthorizations(
+    'K8sResourcePoolsAccessManagementRW',
+    undefined,
+    true
+  );
+  return useMemo(
+    () =>
+      _.compact([
+        helper.accessor('Namespace.Name', {
+          header: 'Name',
+          id: 'Name',
+          cell: ({ getValue, row: { original: item } }) => {
+            const name = getValue();
+
+            return (
+              <>
+                <Link
+                  to="kubernetes.resourcePools.resourcePool"
+                  params={{
+                    id: name,
+                  }}
+                >
+                  {name}
+                </Link>
+                {item.Namespace.IsSystem && (
+                  <span className="ml-2">
+                    <SystemBadge />
+                  </span>
+                )}
+              </>
+            );
+          },
+        }),
+        helper.accessor('Namespace.Status', {
+          header: 'Status',
+          cell({ getValue }) {
+            const status = getValue();
+            return <StatusBadge color={getColor(status)}>{status}</StatusBadge>;
+
+            function getColor(status: string) {
+              switch (status.toLowerCase()) {
+                case 'active':
+                  return 'success';
+                case 'terminating':
+                  return 'danger';
+                default:
+                  return 'info';
+              }
+            }
+          },
+        }),
+        helper.accessor('Quota', {
+          cell({ getValue }) {
+            const quota = getValue();
+
+            if (!quota) {
+              return '-';
+            }
+
+            return <Badge type="warn">Enabled</Badge>;
+          },
+        }),
+        helper.accessor('Namespace.CreationDate', {
+          header: 'Created',
+          cell({ row: { original: item } }) {
+            return (
+              <>
+                {isoDate(item.Namespace.CreationDate)}{' '}
+                {item.Namespace.ResourcePoolOwner
+                  ? ` by ${item.Namespace.ResourcePoolOwner}`
+                  : ''}
+              </>
+            );
+          },
+        }),
+        hasAuthQuery.authorized && actions,
+      ]),
+    [hasAuthQuery.authorized]
+  );
+}