fix(ui): mark resources system correctly [EE-6558] (#10996)

* fix(ui): mark resources system correctly [EE-6558]

* address review comments

app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -1,14 +1,15 @@
+import { useMemo } from 'react';
 import { Shuffle, Trash2 } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
 import clsx from 'clsx';
 import { Row } from '@tanstack/react-table';
 
+import { Namespaces } from '@/react/kubernetes/namespaces/types';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { pluralize } from '@/portainer/helpers/strings';
 import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
-import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
 
@@ -52,12 +53,17 @@ export function ServicesDatatable() {
   const filteredServices = services?.filter(
     (service) =>
       (canAccessSystemResources && tableState.showSystemResources) ||
-      !isSystemNamespace(service.Namespace)
+      !namespaces?.[service.Namespace].IsSystem
+  );
+
+  const servicesWithIsSystem = useServicesRowData(
+    filteredServices || [],
+    namespaces
   );
 
   return (
     <Datatable
-      dataset={filteredServices || []}
+      dataset={servicesWithIsSystem || []}
       columns={columns}
       settingsManager={tableState}
       isLoading={servicesQuery.isLoading || namespacesQuery.isLoading}
@@ -65,7 +71,7 @@ export function ServicesDatatable() {
       title="Services"
       titleIcon={Shuffle}
       getRowId={(row) => row.UID}
-      isRowSelectable={(row) => !isSystemNamespace(row.original.Namespace)}
+      isRowSelectable={(row) => !namespaces?.[row.original.Namespace].IsSystem}
       disableSelect={readOnly}
       renderTableActions={(selectedRows) => (
         <TableActions selectedItems={selectedRows} />
@@ -87,6 +93,21 @@ export function ServicesDatatable() {
   );
 }
 
+// useServicesRowData appends the `isSyetem` property to the service data
+function useServicesRowData(
+  services: Service[],
+  namespaces?: Namespaces
+): Service[] {
+  return useMemo(
+    () =>
+      services.map((service) => ({
+        ...service,
+        IsSystem: namespaces ? namespaces?.[service.Namespace].IsSystem : false,
+      })),
+    [services, namespaces]
+  );
+}
+
 // needed to apply custom styling to the row cells and not globally.
 // required in the AC's for this ticket.
 function servicesRenderRow(row: Row<Service>, highlightedItemId?: string) {

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx

@@ -1,5 +1,4 @@
 import { Authorized } from '@/react/hooks/useUser';
-import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
 
 import { Badge } from '@@/Badge';
 
@@ -11,13 +10,12 @@ export const name = columnHelper.accessor(
 
     const isExternal =
       !row.Labels || !row.Labels['io.portainer.kubernetes.application.owner'];
-    const isSystem = isSystemNamespace(row.Namespace);
 
-    if (isExternal && !isSystem) {
+    if (isExternal && !row.IsSystem) {
       name = `${name} external`;
     }
 
-    if (isSystem) {
+    if (row.IsSystem) {
       name = `${name} system`;
     }
     return name;
@@ -27,7 +25,6 @@ export const name = columnHelper.accessor(
     id: 'name',
     cell: ({ row }) => {
       const name = row.original.Name;
-      const isSystem = isSystemNamespace(row.original.Namespace);
 
       const isExternal =
         !row.original.Labels ||
@@ -38,13 +35,13 @@ export const name = columnHelper.accessor(
           <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
             {name}
 
-            {isSystem && (
+            {row.original.IsSystem && (
               <Badge type="success" className="ml-2">
                 System
               </Badge>
             )}
 
-            {isExternal && !isSystem && (
+            {isExternal && !row.original.IsSystem && (
               <Badge className="ml-2">External</Badge>
             )}
           </Authorized>