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/more-resources/ClusterRolesView/ClusterRolesDatatable/ClusterRolesDatatable.tsx

@@ -0,0 +1,152 @@
+import { Trash2, UserCheck } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+import { useMemo } from 'react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
+
+import { confirmDelete } from '@@/modals/confirm';
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { LoadingButton } from '@@/buttons';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+
+import { ClusterRole } from './types';
+import { columns } from './columns';
+import { useGetClusterRolesQuery } from './queries/useGetClusterRolesQuery';
+import { useDeleteClusterRolesMutation } from './queries/useDeleteClusterRolesMutation';
+
+const storageKey = 'clusterRoles';
+const settingsStore = createStore(storageKey);
+
+export function ClusterRolesDatatable() {
+  const environmentId = useEnvironmentId();
+  const tableState = useTableState(settingsStore, storageKey);
+  const clusterRolesQuery = useGetClusterRolesQuery(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+
+  const { authorized: isAuthorizedToAddEdit } = useAuthorizations([
+    'K8sClusterRolesW',
+  ]);
+  const filteredClusterRoles = useMemo(
+    () =>
+      clusterRolesQuery.data?.filter(
+        (cr) => tableState.showSystemResources || !cr.isSystem
+      ),
+    [clusterRolesQuery.data, tableState.showSystemResources]
+  );
+
+  return (
+    <Datatable
+      dataset={filteredClusterRoles || []}
+      columns={columns}
+      isLoading={clusterRolesQuery.isLoading}
+      settingsManager={tableState}
+      emptyContentLabel="No supported cluster roles found"
+      title="Cluster Roles"
+      titleIcon={UserCheck}
+      getRowId={(row) => row.uid}
+      isRowSelectable={(row) => !row.original.isSystem}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings settings={tableState} />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources}
+        />
+      }
+      disableSelect={!isAuthorizedToAddEdit}
+      data-cy="k8s-clusterroles-datatable"
+    />
+  );
+}
+
+interface SelectedRole {
+  name: string;
+}
+
+type TableActionsProps = {
+  selectedItems: ClusterRole[];
+};
+
+function TableActions({ selectedItems }: TableActionsProps) {
+  const environmentId = useEnvironmentId();
+  const deleteClusterRolesMutation =
+    useDeleteClusterRolesMutation(environmentId);
+  const router = useRouter();
+
+  async function handleRemoveClick(roles: SelectedRole[]) {
+    const confirmed = await confirmDelete(
+      <>
+        <p>Are you sure you want to delete the selected cluster role(s)?</p>
+        <ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
+          {roles.map((s, index) => (
+            <li key={index}>{s.name}</li>
+          ))}
+        </ul>
+      </>
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: string[] = [];
+    roles.forEach((r) => {
+      payload.push(r.name);
+    });
+
+    deleteClusterRolesMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Roles successfully removed',
+            roles.map((r) => `${r.name}`).join(', ')
+          );
+          router.stateService.reload();
+        },
+        onError: (error) => {
+          notifyError(
+            'Unable to delete cluster roles',
+            error as Error,
+            roles.map((r) => `${r.name}`).join(', ')
+          );
+        },
+      }
+    );
+    return roles;
+  }
+
+  return (
+    <Authorized authorizations="K8sClusterRolesW">
+      <LoadingButton
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={() => handleRemoveClick(selectedItems)}
+        icon={Trash2}
+        isLoading={deleteClusterRolesMutation.isLoading}
+        loadingText="Removing cluster roles..."
+        data-cy="k8sClusterRoles-removeRoleButton"
+      >
+        Remove
+      </LoadingButton>
+
+      <CreateFromManifestButton
+        params={{ tab: 'clusterRoles' }}
+        data-cy="k8s-cluster-roles-deploy-button"
+      />
+    </Authorized>
+  );
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/created.tsx

@@ -0,0 +1,12 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor(
+  (row) => formatDate(row.creationDate),
+  {
+    header: 'Created',
+    id: 'created',
+    cell: ({ getValue }) => getValue(),
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/helper.ts

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

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/index.tsx

@@ -0,0 +1,4 @@
+import { name } from './name';
+import { created } from './created';
+
+export const columns = [name, created];

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx

@@ -0,0 +1,28 @@
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    let result = row.name;
+    if (row.isSystem) {
+      result += ' system';
+    }
+    if (row.isUnused) {
+      result += ' unused';
+    }
+    return result;
+  },
+  {
+    header: 'Name',
+    id: 'name',
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        {row.original.name}
+        {row.original.isSystem && <SystemBadge />}
+        {row.original.isUnused && <UnusedBadge />}
+      </div>
+    ),
+  }
+);

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/query-keys.ts

@@ -0,0 +1,6 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'kubernetes', 'cluster_roles'] as const,
+};

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/useDeleteClusterRolesMutation.ts

@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { withGlobalError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from './query-keys';
+
+export function useDeleteClusterRolesMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+  return useMutation(deleteClusterRoles, {
+    onSuccess: () =>
+      queryClient.invalidateQueries(queryKeys.list(environmentId)),
+    ...withGlobalError('Unable to delete cluster roles'),
+  });
+}
+
+export async function deleteClusterRoles({
+  environmentId,
+  data,
+}: {
+  environmentId: EnvironmentId;
+  data: string[];
+}) {
+  try {
+    return await axios.post(
+      `kubernetes/${environmentId}/cluster_roles/delete`,
+      data
+    );
+  } catch (e) {
+    throw parseAxiosError(e, `Unable to delete cluster roles`);
+  }
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/useGetClusterRolesQuery.ts

@@ -0,0 +1,39 @@
+import { compact } from 'lodash';
+import { useQuery } from '@tanstack/react-query';
+
+import { withGlobalError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { ClusterRole } from '../types';
+
+import { queryKeys } from './query-keys';
+
+export function useGetClusterRolesQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => {
+      const clusterRoles = await getClusterRoles(environmentId);
+      return compact(clusterRoles);
+    },
+    {
+      ...withGlobalError('Unable to get cluster roles'),
+      ...options,
+    }
+  );
+}
+
+async function getClusterRoles(environmentId: EnvironmentId) {
+  try {
+    const { data: roles } = await axios.get<ClusterRole[]>(
+      `kubernetes/${environmentId}/cluster_roles`
+    );
+
+    return roles;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get cluster roles');
+  }
+}

app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/types.ts

@@ -0,0 +1,23 @@
+export type Rule = {
+  verbs: string[];
+  apiGroups: string[];
+  resources: string[];
+};
+
+export type ClusterRole = {
+  name: string;
+  uid: string;
+  namespace: string;
+  resourceVersion: string;
+  creationDate: string;
+  annotations?: Record<string, string>;
+
+  rules: Rule[];
+
+  isUnused: boolean;
+  isSystem: boolean;
+};
+
+export type DeleteRequestPayload = {
+  clusterRoles: string[];
+};