fix(k8s-services): avoid rerendering services table [r8s-387] (#832)

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

@@ -0,0 +1,148 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HttpResponse } from 'msw';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { createMockUsers } from '@/react-tools/test-mocks';
+import { server, http } from '@/setup-tests/server';
+
+import { ServicesDatatable } from './ServicesDatatable';
+
+vi.mock('@/react/hooks/useEnvironmentId', () => ({
+  useEnvironmentId: () => 1,
+}));
+
+vi.mock('@/portainer/services/notifications', () => ({
+  notifyError: vi.fn(),
+  notifySuccess: vi.fn(),
+}));
+function createMockServices(count: number) {
+  return Array.from({ length: count }, (_, i) => {
+    let namespace = 'default';
+    if (i % 3 === 0) {
+      namespace = 'kube-system';
+    } else if (i % 2 !== 0) {
+      namespace = 'my-namespace';
+    }
+
+    let type = 'ClusterIP';
+    if (i % 4 === 1) {
+      type = 'NodePort';
+    } else if (i % 4 === 2) {
+      type = 'LoadBalancer';
+    } else if (i % 4 === 3) {
+      type = 'ExternalName';
+    }
+
+    return {
+      UID: `service-${i}`,
+      Name: `service-${i}`,
+      Namespace: namespace,
+      Type: type,
+      Ports: [{ Port: 80 + i, TargetPort: 8080 + i, Protocol: 'TCP' }],
+      Selector: { app: `app-${i}` },
+      CreationTimestamp: new Date(Date.now() - i * 1000 * 60).toISOString(),
+      ApplicationOwner: '',
+      Applications: [{ Name: `app-${i}` }],
+    };
+  });
+}
+
+const mockServices = createMockServices(4);
+
+const mockNamespaces = [
+  {
+    Name: 'default',
+    IsSystem: false,
+    Status: 'Active',
+    CreationTimestamp: '2024-01-01T00:00:00Z',
+  },
+  {
+    Name: 'kube-system',
+    IsSystem: true,
+    Status: 'Active',
+    CreationTimestamp: '2024-01-01T00:00:00Z',
+  },
+  {
+    Name: 'my-namespace',
+    IsSystem: false,
+    Status: 'Active',
+    CreationTimestamp: '2024-01-01T00:00:00Z',
+  },
+];
+
+beforeEach(() => {
+  server.use(
+    http.get('/api/kubernetes/1/services', () =>
+      HttpResponse.json(mockServices)
+    ),
+    http.get('/api/kubernetes/1/namespaces', () =>
+      HttpResponse.json(mockNamespaces)
+    )
+  );
+});
+const mockUser = {
+  ...createMockUsers(1)[0],
+  PortainerAuthorizations: {
+    K8sAccessSystemNamespaces: true,
+    K8sServiceW: true,
+  },
+};
+
+function createTestComponent() {
+  return withTestRouter(
+    withUserProvider(withTestQueryProvider(ServicesDatatable), mockUser),
+    {
+      route: '/kubernetes/services',
+      stateConfig: [
+        {
+          name: 'kubernetes.services',
+          url: '/kubernetes/services',
+          params: { endpointId: '1' },
+        },
+      ],
+    }
+  );
+}
+
+describe('ServicesDatatable', () => {
+  it('renders services data correctly', async () => {
+    const TestComponent = createTestComponent();
+    render(<TestComponent />);
+
+    expect(await screen.findByText('service-1')).toBeInTheDocument();
+    expect(screen.getByText('service-2')).toBeInTheDocument();
+  });
+
+  it('should filter system resources correctly when toggled', async () => {
+    const TestComponent = createTestComponent();
+    render(<TestComponent />);
+
+    const settingsButton = screen.getByRole('button', { name: /settings/i });
+    await userEvent.click(settingsButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('service-0')).not.toBeInTheDocument();
+    });
+
+    const systemToggle = await screen.findByTestId('show-system-resources');
+    await userEvent.click(systemToggle);
+
+    await waitFor(() => {
+      expect(screen.queryByText('service-0')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('service-3')).toBeInTheDocument();
+    expect(screen.getByText('service-1')).toBeInTheDocument();
+    expect(screen.getByText('service-2')).toBeInTheDocument();
+  });
+
+  it('should show loading state when data is loading', async () => {
+    const TestComponent = createTestComponent();
+    render(<TestComponent />);
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+});

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

@@ -16,6 +16,7 @@ import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultD
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 
 import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
 import { useTableState } from '@@/datatables/useTableState';
@@ -25,7 +26,6 @@ import { useMutationDeleteServices, useClusterServices } from '../../service';
 import { Service } from '../../types';
 
 import { columns } from './columns';
-import { createStore } from './datatable-store';
 import { ServiceRowData } from './types';
 
 const storageKey = 'k8sServicesDatatable';
@@ -34,52 +34,53 @@ const settingsStore = createStore(storageKey);
 export function ServicesDatatable() {
   const tableState = useTableState(settingsStore, storageKey);
   const environmentId = useEnvironmentId();
-  const { data: namespacesArray, ...namespacesQuery } =
-    useNamespacesQuery(environmentId);
+  const { data: namespaces, ...namespacesQuery } = useNamespacesQuery(
+    environmentId,
+    {
+      select: (namespacesArray) =>
+        namespacesArray?.reduce<Record<string, PortainerNamespace>>(
+          (acc, namespace) => {
+            acc[namespace.Name] = namespace;
+            return acc;
+          },
+          {}
+        ),
+    }
+  );
+  const { authorized: canWrite } = useAuthorizations(['K8sServiceW']);
+  const { authorized: canAccessSystemResources } = useAuthorizations(
+    'K8sAccessSystemNamespaces'
+  );
   const { data: services, ...servicesQuery } = useClusterServices(
     environmentId,
     {
       autoRefreshRate: tableState.autoRefreshRate * 1000,
       withApplications: true,
+      select: (services) =>
+        services?.filter(
+          (service) =>
+            (canAccessSystemResources && tableState.showSystemResources) ||
+            !namespaces?.[service.Namespace]?.IsSystem
+        ),
     }
   );
 
-  const namespaces: Record<string, PortainerNamespace> = {};
-  if (Array.isArray(namespacesArray)) {
-    for (let i = 0; i < namespacesArray.length; i++) {
-      const namespace = namespacesArray[i];
-      namespaces[namespace.Name] = namespace;
-    }
-  }
-
-  const { authorized: canWrite } = useAuthorizations(['K8sServiceW']);
-  const readOnly = !canWrite;
-  const { authorized: canAccessSystemResources } = useAuthorizations(
-    'K8sAccessSystemNamespaces'
-  );
-  const filteredServices = services?.filter(
-    (service) =>
-      (canAccessSystemResources && tableState.showSystemResources) ||
-      !namespaces?.[service.Namespace]?.IsSystem
-  );
-
-  const servicesWithIsSystem = useServicesRowData(
-    filteredServices || [],
-    namespaces
-  );
+  const servicesWithIsSystem = useServicesRowData(services || [], namespaces);
 
   return (
     <Datatable
       dataset={servicesWithIsSystem || []}
       columns={columns}
       settingsManager={tableState}
-      isLoading={servicesQuery.isLoading || namespacesQuery.isLoading}
+      isLoading={
+        servicesQuery.isInitialLoading || namespacesQuery.isInitialLoading
+      }
       emptyContentLabel="No services found"
       title="Services"
       titleIcon={Shuffle}
       getRowId={(row) => row.UID}
       isRowSelectable={(row) => !namespaces?.[row.original.Namespace]?.IsSystem}
-      disableSelect={readOnly}
+      disableSelect={!canWrite}
       renderTableActions={(selectedRows) => (
         <TableActions selectedItems={selectedRows} />
       )}