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/kubernetes/namespaces/ListView/columns/actions.tsx

@@ -7,8 +7,8 @@ import { Environment } from '@/react/portainer/environments/types';
 import { Link } from '@@/Link';
 import { Button } from '@@/buttons';
 
-import { NamespaceViewModel } from '../types';
 import { isDefaultNamespace } from '../../isDefaultNamespace';
+import { PortainerNamespace } from '../../types';
 
 import { helper } from './helper';
 
@@ -18,15 +18,15 @@ export const actions = helper.display({
 });
 
 function Cell({
-  row: { original: item },
-}: CellContext<NamespaceViewModel, unknown>) {
+  row: { original: namespace },
+}: CellContext<PortainerNamespace, unknown>) {
   const environmentQuery = useCurrentEnvironment();
 
   if (!environmentQuery.data) {
     return null;
   }
 
-  if (!canManageAccess(item, environmentQuery.data)) {
+  if (!canManageAccess(namespace, environmentQuery.data)) {
     return '-';
   }
 
@@ -36,22 +36,24 @@ function Cell({
       color="link"
       props={{
         to: 'kubernetes.resourcePools.resourcePool.access',
-        params: { id: item.Namespace.Name },
+        params: {
+          id: namespace.Name,
+        },
       }}
       icon={Users}
-      data-cy={`manage-access-button-${item.Namespace.Name}`}
+      data-cy={`manage-access-button-${namespace.Name}`}
     >
       Manage access
     </Button>
   );
 
-  function canManageAccess(item: NamespaceViewModel, environment: Environment) {
-    const name = item.Namespace.Name;
-    const isSystem = item.Namespace.IsSystem;
-
+  function canManageAccess(
+    { Name, IsSystem }: PortainerNamespace,
+    environment: Environment
+  ) {
     return (
-      !isSystem &&
-      (!isDefaultNamespace(name) ||
+      !IsSystem &&
+      (!isDefaultNamespace(Name) ||
         environment.Kubernetes.Configuration.RestrictDefaultNamespace)
     );
   }

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

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

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

@@ -21,7 +21,7 @@ export function useColumns() {
   return useMemo(
     () =>
       _.compact([
-        helper.accessor('Namespace.Name', {
+        helper.accessor('Name', {
           header: 'Name',
           id: 'Name',
           cell: ({ getValue, row: { original: item } }) => {
@@ -38,7 +38,7 @@ export function useColumns() {
                 >
                   {name}
                 </Link>
-                {item.Namespace.IsSystem && (
+                {item.IsSystem && (
                   <span className="ml-2">
                     <SystemBadge />
                   </span>
@@ -47,14 +47,18 @@ export function useColumns() {
             );
           },
         }),
-        helper.accessor('Namespace.Status', {
+        helper.accessor('Status', {
           header: 'Status',
           cell({ getValue }) {
             const status = getValue();
-            return <StatusBadge color={getColor(status)}>{status}</StatusBadge>;
+            return (
+              <StatusBadge color={getColor(status.phase)}>
+                {status.phase}
+              </StatusBadge>
+            );
 
-            function getColor(status: string) {
-              switch (status.toLowerCase()) {
+            function getColor(status?: string) {
+              switch (status?.toLowerCase()) {
                 case 'active':
                   return 'success';
                 case 'terminating':
@@ -65,7 +69,8 @@ export function useColumns() {
             }
           },
         }),
-        helper.accessor('Quota', {
+        helper.accessor('ResourceQuota', {
+          header: 'Quota',
           cell({ getValue }) {
             const quota = getValue();
 
@@ -76,15 +81,13 @@ export function useColumns() {
             return <Badge type="warn">Enabled</Badge>;
           },
         }),
-        helper.accessor('Namespace.CreationDate', {
+        helper.accessor('CreationDate', {
           header: 'Created',
           cell({ row: { original: item } }) {
             return (
               <>
-                {isoDate(item.Namespace.CreationDate)}{' '}
-                {item.Namespace.ResourcePoolOwner
-                  ? ` by ${item.Namespace.ResourcePoolOwner}`
-                  : ''}
+                {isoDate(item.CreationDate)}{' '}
+                {item.NamespaceOwner ? ` by ${item.NamespaceOwner}` : ''}
               </>
             );
           },