update service account type and isSystem check for new api endpoint

app/react/components/Badge/SystemBadge.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@@/Badge';
 
 export function SystemBadge() {
-  return <Badge type="success">system</Badge>;
+  return <Badge type="success">System</Badge>;
 }

app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/index.tsx

@@ -1,7 +1,9 @@
+import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
+
 import { name } from './name';
 import { namespace } from './namespace';
 import { created } from './created';
 
-export function useColumns() {
+export function useColumns(namespaces?: PortainerNamespace[]) {
-  return [name, namespace, created];
+  return [name(namespaces), namespace, created];
 }

app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/name.tsx

@@ -1,28 +1,30 @@
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
+
 import { SystemBadge } from '@@/Badge/SystemBadge';
-import { UnusedBadge } from '@@/Badge/UnusedBadge';
 
 import { columnHelper } from './helper';
 
-export const name = columnHelper.accessor(
+export function name(namespaces?: PortainerNamespace[]) {
-  (row) => {
+  return columnHelper.accessor(
-    let result = row.name;
+    (row) => {
-    if (row.isSystem) {
+      let result = row.name;
-      result += ' system';
+      if (isSystemNamespace(row.namespace, namespaces)) {
+        result += ' system';
+      }
+      return result;
+    },
+    {
+      header: 'Name',
+      id: 'name',
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <div>{row.original.name}</div>
+          {isSystemNamespace(row.original.namespace, namespaces) && (
+            <SystemBadge />
+          )}
+        </div>
+      ),
     }
-    if (row.isUnused) {
+  );
-      result += ' unused';
+}
-    }
-    return result;
-  },
-  {
-    header: 'Name',
-    id: 'name',
-    cell: ({ row }) => (
-      <div className="flex gap-2">
-        <div>{row.original.name}</div>
-        {row.original.isSystem && <SystemBadge />}
-        {!row.original.isSystem && row.original.isUnused && <UnusedBadge />}
-      </div>
-    ),
-  }
-);

app/react/kubernetes/more-resources/ServiceAccountsView/types.ts

@@ -1,10 +1,5 @@
 export type ServiceAccount = {
   name: string;
   namespace: string;
-  resourceVersion: string;
-  uid: string;
   creationDate: string;
-
-  isSystem: boolean;
-  isUnused: boolean;
 };