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/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx

@@ -1,58 +1,35 @@
 import { useMemo } from 'react';
 import { FileCode } from 'lucide-react';
-import { ConfigMap, Pod } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
-import {
-  DefaultDatatableSettings,
-  TableSettings as KubeTableSettings,
-} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
-import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { useIsDeploymentOptionHidden } from '@/react/hooks/useIsDeploymentOptionHidden';
 import { pluralize } from '@/portainer/helpers/strings';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
-import { Namespaces } from '@/react/kubernetes/namespaces/types';
+import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { usePods } from '@/react/kubernetes/applications/usePods';
-import { useJobs } from '@/react/kubernetes/applications/useJobs';
-import { useCronJobs } from '@/react/kubernetes/applications/useCronJobs';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { AddButton } from '@@/buttons';
+import { useTableState } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
-import {
-  type FilteredColumnsTableSettings,
-  filteredColumnsSettings,
-} from '@@/datatables/types';
-import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
-import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
-import {
-  useConfigMapsForCluster,
-  useMutationDeleteConfigMaps,
-} from '../../configmap.service';
-import { IndexOptional } from '../../types';
+import { IndexOptional, Configuration } from '../../types';
+import { useDeleteConfigMaps } from '../../queries/useDeleteConfigMaps';
+import { useConfigMapsForCluster } from '../../queries/useConfigmapsForCluster';
 
-import { getIsConfigMapInUse } from './utils';
 import { ConfigMapRowData } from './types';
 import { columns } from './columns';
 
-interface TableSettings
-  extends KubeTableSettings,
-    FilteredColumnsTableSettings {}
-
 const storageKey = 'k8sConfigMapsDatatable';
+const settingsStore = createStore(storageKey);
 
 export function ConfigMapsDatatable() {
-  const tableState = useKubeStore<TableSettings>(
-    storageKey,
-    undefined,
-    (set) => ({
-      ...filteredColumnsSettings(set),
-    })
-  );
+  const tableState = useTableState(settingsStore, storageKey);
   const { authorized: canWrite } = useAuthorizations(['K8sConfigMapsW']);
   const readOnly = !canWrite;
   const { authorized: canAccessSystemResources } = useAuthorizations(
@@ -60,42 +37,23 @@ export function ConfigMapsDatatable() {
   );
 
   const environmentId = useEnvironmentId();
-  const { data: namespaces, ...namespacesQuery } = useNamespacesQuery(
-    environmentId,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
-  const namespaceNames = Object.keys(namespaces || {});
-  const { data: configMaps, ...configMapsQuery } = useConfigMapsForCluster(
-    environmentId,
-    namespaceNames,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
-  const podsQuery = usePods(environmentId, namespaceNames);
-  const jobsQuery = useJobs(environmentId, namespaceNames);
-  const cronJobsQuery = useCronJobs(environmentId, namespaceNames);
-  const isInUseLoading =
-    podsQuery.isLoading || jobsQuery.isLoading || cronJobsQuery.isLoading;
-
-  const filteredConfigMaps = useMemo(
-    () =>
-      configMaps?.filter(
-        (configMap) =>
+  const namespacesQuery = useNamespacesQuery(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const configMapsQuery = useConfigMapsForCluster(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+    select: (configMaps) =>
+      configMaps.filter(
+        (configmap) =>
           (canAccessSystemResources && tableState.showSystemResources) ||
-          !namespaces?.[configMap.metadata?.namespace ?? '']?.IsSystem
-      ) || [],
-    [configMaps, tableState, canAccessSystemResources, namespaces]
-  );
+          !isSystemNamespace(configmap.Namespace, namespacesQuery.data)
+      ),
+    isUsed: true,
+  });
+
   const configMapRowData = useConfigMapRowData(
-    filteredConfigMaps,
-    podsQuery.data ?? [],
-    jobsQuery.data ?? [],
-    cronJobsQuery.data ?? [],
-    isInUseLoading,
-    namespaces
+    configMapsQuery.data ?? [],
+    namespacesQuery.data
   );
 
   return (
@@ -104,11 +62,12 @@ export function ConfigMapsDatatable() {
       columns={columns}
       settingsManager={tableState}
       isLoading={configMapsQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No ConfigMaps found"
       title="ConfigMaps"
       titleIcon={FileCode}
-      getRowId={(row) => row.metadata?.uid ?? ''}
-      isRowSelectable={(row) =>
-        !namespaces?.[row.original.metadata?.namespace ?? ''].IsSystem
+      getRowId={(row) => row.UID ?? ''}
+      isRowSelectable={({ original: configmap }) =>
+        !isSystemNamespace(configmap.Namespace, namespacesQuery.data)
       }
       disableSelect={readOnly}
       renderTableActions={(selectedRows) => (
@@ -125,36 +84,26 @@ export function ConfigMapsDatatable() {
         />
       }
       data-cy="k8s-configmaps-datatable"
-      extendTableOptions={mergeOptions(
-        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
-      )}
     />
   );
 }
 
-// useConfigMapRowData appends the `inUse` property to the ConfigMap data (for the unused badge in the name column)
-// and wraps with useMemo to prevent unnecessary calculations
 function useConfigMapRowData(
-  configMaps: ConfigMap[],
-  pods: Pod[],
-  jobs: Job[],
-  cronJobs: CronJob[],
-  isInUseLoading: boolean,
-  namespaces?: Namespaces
+  configMaps: Configuration[],
+  namespaces?: PortainerNamespace[]
 ): ConfigMapRowData[] {
   return useMemo(
     () =>
-      configMaps.map((configMap) => ({
+      configMaps?.map((configMap) => ({
         ...configMap,
-        inUse:
-          // if the apps are loading, set inUse to true to hide the 'unused' badge
-          isInUseLoading ||
-          getIsConfigMapInUse(configMap, pods, jobs, cronJobs),
+        inUse: configMap.IsUsed,
         isSystem: namespaces
-          ? namespaces?.[configMap.metadata?.namespace ?? '']?.IsSystem
+          ? namespaces.find(
+              (namespace) => namespace.Name === configMap.Namespace
+            )?.IsSystem ?? false
           : false,
-      })),
-    [configMaps, isInUseLoading, pods, jobs, cronJobs, namespaces]
+      })) || [],
+    [configMaps, namespaces]
   );
 }
 
@@ -163,17 +112,9 @@ function TableActions({
 }: {
   selectedItems: ConfigMapRowData[];
 }) {
+  const isAddConfigMapHidden = useIsDeploymentOptionHidden('form');
   const environmentId = useEnvironmentId();
-  const deleteConfigMapMutation = useMutationDeleteConfigMaps(environmentId);
-
-  async function handleRemoveClick(configMaps: ConfigMap[]) {
-    const configMapsToDelete = configMaps.map((configMap) => ({
-      namespace: configMap.metadata?.namespace ?? '',
-      name: configMap.metadata?.name ?? '',
-    }));
-
-    await deleteConfigMapMutation.mutateAsync(configMapsToDelete);
-  }
+  const deleteConfigMapMutation = useDeleteConfigMaps(environmentId);
 
   return (
     <Authorized authorizations="K8sConfigMapsW">
@@ -187,13 +128,15 @@ function TableActions({
         data-cy="k8sConfig-removeConfigButton"
       />
 
-      <AddButton
-        to="kubernetes.configmaps.new"
-        data-cy="k8sConfig-addConfigWithFormButton"
-        color="secondary"
-      >
-        Add with form
-      </AddButton>
+      {!isAddConfigMapHidden && (
+        <AddButton
+          to="kubernetes.configmaps.new"
+          data-cy="k8sConfig-addConfigWithFormButton"
+          color="secondary"
+        >
+          Add with form
+        </AddButton>
+      )}
 
       <CreateFromManifestButton
         params={{
@@ -203,4 +146,13 @@ function TableActions({
       />
     </Authorized>
   );
+
+  async function handleRemoveClick(configMaps: ConfigMapRowData[]) {
+    const configMapsToDelete = configMaps.map((configMap) => ({
+      namespace: configMap.Namespace ?? '',
+      name: configMap.Name ?? '',
+    }));
+
+    await deleteConfigMapMutation.mutateAsync(configMapsToDelete);
+  }
 }

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/created.tsx

@@ -1,8 +1,6 @@
 import { formatDate } from '@/portainer/filters/filters';
-import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
 import { ConfigMapRowData } from '../types';
-import { configurationOwnerUsernameLabel } from '../../../constants';
 
 import { columnHelper } from './helper';
 
@@ -13,9 +11,7 @@ export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
 });
 
 function getCreatedAtText(row: ConfigMapRowData) {
-  const owner =
-    row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-    row.metadata?.labels?.[appOwnerLabel];
-  const date = formatDate(row.metadata?.creationTimestamp);
+  const owner = row.ConfigurationOwner || row.ConfigurationOwnerId;
+  const date = formatDate(row.CreationDate);
   return owner ? `${date} by ${owner}` : date;
 }

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx

@@ -1,7 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
-import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
 import { ExternalBadge } from '@@/Badge/ExternalBadge';
 import { SystemBadge } from '@@/Badge/SystemBadge';
@@ -9,22 +8,18 @@ import { UnusedBadge } from '@@/Badge/UnusedBadge';
 import { Link } from '@@/Link';
 
 import { ConfigMapRowData } from '../types';
-import { configurationOwnerUsernameLabel } from '../../../constants';
 
 import { columnHelper } from './helper';
 
 export const name = columnHelper.accessor(
   (row) => {
-    const name = row.metadata?.name;
+    const name = row.Name;
 
     const isSystemToken = name?.includes('default-token-');
     const isSystemConfigMap = isSystemToken || row.isSystem;
-
     const hasConfigurationOwner = !!(
-      row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-      row.metadata?.labels?.[appOwnerLabel]
+      row.ConfigurationOwner || row.ConfigurationOwnerId
     );
-
     return `${name} ${isSystemConfigMap ? 'system' : ''} ${
       !isSystemToken && !hasConfigurationOwner ? 'external' : ''
     } ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
@@ -37,14 +32,12 @@ export const name = columnHelper.accessor(
 );
 
 function Cell({ row }: CellContext<ConfigMapRowData, string>) {
-  const name = row.original.metadata?.name;
-
+  const name = row.original.Name;
   const isSystemToken = name?.includes('default-token-');
   const isSystemConfigMap = isSystemToken || row.original.isSystem;
 
   const hasConfigurationOwner = !!(
-    row.original.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-    row.original.metadata?.labels?.[appOwnerLabel]
+    row.original.ConfigurationOwner || row.original.ConfigurationOwnerId
   );
 
   return (
@@ -53,7 +46,7 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
         <Link
           to="kubernetes.configmaps.configmap"
           params={{
-            namespace: row.original.metadata?.namespace,
+            namespace: row.original.Namespace,
             name,
           }}
           title={name}

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/namespace.tsx

@@ -8,37 +8,33 @@ import { ConfigMapRowData } from '../types';
 
 import { columnHelper } from './helper';
 
-export const namespace = columnHelper.accessor(
-  (row) => row.metadata?.namespace,
-  {
-    header: 'Namespace',
-    id: 'namespace',
-    cell: ({ getValue }) => {
-      const namespace = getValue();
-
-      return (
-        <Link
-          to="kubernetes.resourcePools.resourcePool"
-          params={{
-            id: namespace,
-          }}
-          title={namespace}
-          data-cy={`configmap-namespace-link-${namespace}`}
-        >
-          {namespace}
-        </Link>
-      );
-    },
-    meta: {
-      filter: filterHOC('Filter by namespace'),
-    },
-    enableColumnFilter: true,
-    filterFn: (
-      row: Row<ConfigMapRowData>,
-      _columnId: string,
-      filterValue: string[]
-    ) =>
-      filterValue.length === 0 ||
-      filterValue.includes(row.original.metadata?.namespace ?? ''),
-  }
-);
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: ({ getValue }) => {
+    const namespace = getValue();
+    return (
+      <Link
+        to="kubernetes.resourcePools.resourcePool"
+        params={{
+          id: namespace,
+        }}
+        title={namespace}
+        data-cy={`configmap-namespace-link-${namespace}`}
+      >
+        {namespace}
+      </Link>
+    );
+  },
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (
+    row: Row<ConfigMapRowData>,
+    _columnId: string,
+    filterValue: string[]
+  ) =>
+    filterValue.length === 0 ||
+    filterValue.includes(row.original.Namespace ?? ''),
+});

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/types.ts

@@ -1,6 +1,6 @@
-import { ConfigMap } from 'kubernetes-types/core/v1';
+import { Configuration } from '../../types';
 
-export interface ConfigMapRowData extends ConfigMap {
+export interface ConfigMapRowData extends Configuration {
   inUse: boolean;
   isSystem: boolean;
 }

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/utils.test.ts

@@ -1,14 +1,21 @@
-import { ConfigMap, Pod } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
+import { CronJob, Job, K8sPod } from '../../../applications/types';
+import { Configuration } from '../../types';
 
 import { getIsConfigMapInUse } from './utils';
 
 describe('getIsConfigMapInUse', () => {
   it('should return false when no resources reference the configMap', () => {
-    const configMap: ConfigMap = {
-      metadata: { name: 'my-configmap', namespace: 'default' },
+    const configMap: Configuration = {
+      Name: 'my-configmap',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [];
     const cronJobs: CronJob[] = [];
 
@@ -16,20 +23,26 @@ describe('getIsConfigMapInUse', () => {
   });
 
   it('should return true when a pod references the configMap', () => {
-    const configMap: ConfigMap = {
-      metadata: { name: 'my-configmap', namespace: 'default' },
+    const configMap: Configuration = {
+      Name: 'my-configmap',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [
+    const pods: K8sPod[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          containers: [
-            {
-              name: 'container1',
-              envFrom: [{ configMapRef: { name: 'my-configmap' } }],
-            },
-          ],
-        },
+        namespace: 'default',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ configMapRef: { name: 'my-configmap' } }],
+          },
+        ],
+        ownerReferences: [],
       },
     ];
     const jobs: Job[] = [];
@@ -39,25 +52,26 @@ describe('getIsConfigMapInUse', () => {
   });
 
   it('should return true when a job references the configMap', () => {
-    const configMap: ConfigMap = {
-      metadata: { name: 'my-configmap', namespace: 'default' },
+    const configMap: Configuration = {
+      Name: 'my-configmap',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          template: {
-            spec: {
-              containers: [
-                {
-                  name: 'container1',
-                  envFrom: [{ configMapRef: { name: 'my-configmap' } }],
-                },
-              ],
-            },
+        namespace: 'default',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ configMapRef: { name: 'my-configmap' } }],
           },
-        },
+        ],
       },
     ];
     const cronJobs: CronJob[] = [];
@@ -66,31 +80,28 @@ describe('getIsConfigMapInUse', () => {
   });
 
   it('should return true when a cronJob references the configMap', () => {
-    const configMap: ConfigMap = {
-      metadata: { name: 'my-configmap', namespace: 'default' },
+    const configMap: Configuration = {
+      Name: 'my-configmap',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [];
     const cronJobs: CronJob[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          schedule: '0 0 * * *',
-          jobTemplate: {
-            spec: {
-              template: {
-                spec: {
-                  containers: [
-                    {
-                      name: 'container1',
-                      envFrom: [{ configMapRef: { name: 'my-configmap' } }],
-                    },
-                  ],
-                },
-              },
-            },
+        namespace: 'default',
+        schedule: '0 0 * * *',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ configMapRef: { name: 'my-configmap' } }],
           },
-        },
+        ],
       },
     ];
 

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/utils.ts

@@ -1,27 +1,27 @@
-import { ConfigMap, Pod, PodSpec } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
+import { PodSpec } from 'kubernetes-types/core/v1';
+
+import { Configuration } from '../../types';
+import { Job, CronJob, K8sPod } from '../../../applications/types';
 
 /**
  * getIsConfigMapInUse returns true if the configmap is referenced by any pod, job, or cronjob in the same namespace
  */
 export function getIsConfigMapInUse(
-  configMap: ConfigMap,
-  pods: Pod[],
+  configMap: Configuration,
+  pods: K8sPod[],
   jobs: Job[],
   cronJobs: CronJob[]
 ) {
   // get all podspecs from pods, jobs and cronjobs that are in the same namespace
-  const podsInNamespace = pods
-    .filter((pod) => pod.metadata?.namespace === configMap.metadata?.namespace)
-    .map((pod) => pod.spec);
-  const jobsInNamespace = jobs
-    .filter((job) => job.metadata?.namespace === configMap.metadata?.namespace)
-    .map((job) => job.spec?.template.spec);
-  const cronJobsInNamespace = cronJobs
-    .filter(
-      (cronJob) => cronJob.metadata?.namespace === configMap.metadata?.namespace
-    )
-    .map((cronJob) => cronJob.spec?.jobTemplate.spec?.template.spec);
+  const podsInNamespace = pods.filter(
+    (pod) => pod.namespace === configMap.Namespace
+  );
+  const jobsInNamespace = jobs.filter(
+    (job) => job.namespace === configMap.Namespace
+  );
+  const cronJobsInNamespace = cronJobs.filter(
+    (cronJob) => cronJob.namespace === configMap.Namespace
+  );
   const allPodSpecs = [
     ...podsInNamespace,
     ...jobsInNamespace,
@@ -30,10 +30,10 @@ export function getIsConfigMapInUse(
 
   // check if the configmap is referenced by any pod, job or cronjob in the namespace
   const isReferenced = allPodSpecs.some((podSpec) => {
-    if (!podSpec || !configMap.metadata?.name) {
+    if (!podSpec || !configMap.Namespace) {
       return false;
     }
-    return doesPodSpecReferenceConfigMap(podSpec, configMap.metadata?.name);
+    return doesPodSpecReferenceConfigMap(podSpec, configMap.Name);
   });
 
   return isReferenced;

app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx

@@ -1,118 +1,81 @@
 import { useMemo } from 'react';
 import { Lock } from 'lucide-react';
-import { Pod, Secret } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
-import {
-  DefaultDatatableSettings,
-  TableSettings as KubeTableSettings,
-} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
-import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
 import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { useIsDeploymentOptionHidden } from '@/react/hooks/useIsDeploymentOptionHidden';
 import { pluralize } from '@/portainer/helpers/strings';
 import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
-import { Namespaces } from '@/react/kubernetes/namespaces/types';
+import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
 import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
-import { usePods } from '@/react/kubernetes/applications/usePods';
-import { useJobs } from '@/react/kubernetes/applications/useJobs';
-import { useCronJobs } from '@/react/kubernetes/applications/useCronJobs';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
 
 import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { AddButton } from '@@/buttons';
+import { useTableState } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
-import {
-  type FilteredColumnsTableSettings,
-  filteredColumnsSettings,
-} from '@@/datatables/types';
-import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
-import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
 
-import {
-  useSecretsForCluster,
-  useMutationDeleteSecrets,
-} from '../../secret.service';
-import { IndexOptional } from '../../types';
+import { useSecretsForCluster } from '../../queries/useSecretsForCluster';
+import { useDeleteSecrets } from '../../queries/useDeleteSecrets';
+import { IndexOptional, Configuration } from '../../types';
 
-import { getIsSecretInUse } from './utils';
 import { SecretRowData } from './types';
 import { columns } from './columns';
 
 const storageKey = 'k8sSecretsDatatable';
-
-interface TableSettings
-  extends KubeTableSettings,
-    FilteredColumnsTableSettings {}
+const settingsStore = createStore(storageKey);
 
 export function SecretsDatatable() {
-  const tableState = useKubeStore<TableSettings>(
-    storageKey,
-    undefined,
-    (set) => ({
-      ...filteredColumnsSettings(set),
-    })
-  );
-  const environmentId = useEnvironmentId();
+  const tableState = useTableState(settingsStore, storageKey);
   const { authorized: canWrite } = useAuthorizations(['K8sSecretsW']);
   const readOnly = !canWrite;
   const { authorized: canAccessSystemResources } = useAuthorizations(
     'K8sAccessSystemNamespaces'
   );
+  const isAddSecretHidden = useIsDeploymentOptionHidden('form');
 
-  const { data: namespaces, ...namespacesQuery } = useNamespacesQuery(
-    environmentId,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
-  const namespaceNames = Object.keys(namespaces || {});
-  const { data: secrets, ...secretsQuery } = useSecretsForCluster(
-    environmentId,
-    namespaceNames,
-    {
-      autoRefreshRate: tableState.autoRefreshRate * 1000,
-    }
-  );
-  const podsQuery = usePods(environmentId, namespaceNames);
-  const jobsQuery = useJobs(environmentId, namespaceNames);
-  const cronJobsQuery = useCronJobs(environmentId, namespaceNames);
-  const isInUseLoading =
-    podsQuery.isLoading || jobsQuery.isLoading || cronJobsQuery.isLoading;
-
-  const filteredSecrets = useMemo(
-    () =>
-      secrets?.filter(
+  const environmentId = useEnvironmentId();
+  const namespacesQuery = useNamespacesQuery(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+  });
+  const secretsQuery = useSecretsForCluster(environmentId, {
+    autoRefreshRate: tableState.autoRefreshRate * 1000,
+    select: (secrets) =>
+      secrets.filter(
         (secret) =>
           (canAccessSystemResources && tableState.showSystemResources) ||
-          !namespaces?.[secret.metadata?.namespace ?? '']?.IsSystem
-      ) || [],
-    [secrets, tableState, canAccessSystemResources, namespaces]
-  );
+          !isSystemNamespace(secret.Namespace, namespacesQuery.data)
+      ),
+    isUsed: true,
+  });
+
   const secretRowData = useSecretRowData(
-    filteredSecrets,
-    podsQuery.data ?? [],
-    jobsQuery.data ?? [],
-    cronJobsQuery.data ?? [],
-    isInUseLoading,
-    namespaces
+    secretsQuery.data ?? [],
+    namespacesQuery.data
   );
 
   return (
     <Datatable<IndexOptional<SecretRowData>>
-      dataset={secretRowData}
+      dataset={secretRowData || []}
       columns={columns}
       settingsManager={tableState}
       isLoading={secretsQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No secrets found"
       title="Secrets"
       titleIcon={Lock}
-      getRowId={(row) => row.metadata?.uid ?? ''}
-      isRowSelectable={(row) =>
-        !namespaces?.[row.original.metadata?.namespace ?? '']?.IsSystem
+      getRowId={(row) => row.UID ?? ''}
+      isRowSelectable={({ original: secret }) =>
+        !isSystemNamespace(secret.Namespace, namespacesQuery.data)
       }
       disableSelect={readOnly}
       renderTableActions={(selectedRows) => (
-        <TableActions selectedItems={selectedRows} />
+        <TableActions
+          selectedItems={selectedRows}
+          isAddSecretHidden={isAddSecretHidden}
+        />
       )}
       renderTableSettings={() => (
         <TableSettingsMenu>
@@ -125,9 +88,6 @@ export function SecretsDatatable() {
         />
       }
       data-cy="k8s-secrets-datatable"
-      extendTableOptions={mergeOptions(
-        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
-      )}
     />
   );
 }
@@ -135,36 +95,41 @@ export function SecretsDatatable() {
 // useSecretRowData appends the `inUse` property to the secret data (for the unused badge in the name column)
 // and wraps with useMemo to prevent unnecessary calculations
 function useSecretRowData(
-  secrets: Secret[],
-  pods: Pod[],
-  jobs: Job[],
-  cronJobs: CronJob[],
-  isInUseLoading: boolean,
-  namespaces?: Namespaces
+  secrets: Configuration[],
+  namespaces?: PortainerNamespace[]
 ): SecretRowData[] {
   return useMemo(
     () =>
-      secrets.map((secret) => ({
-        ...secret,
-        inUse:
-          // if the apps are loading, set inUse to true to hide the 'unused' badge
-          isInUseLoading || getIsSecretInUse(secret, pods, jobs, cronJobs),
-        isSystem: namespaces
-          ? namespaces?.[secret.metadata?.namespace ?? '']?.IsSystem
-          : false,
-      })),
-    [secrets, isInUseLoading, pods, jobs, cronJobs, namespaces]
+      secrets?.map(
+        (secret) =>
+          ({
+            ...secret,
+            inUse: secret.IsUsed,
+            isSystem: namespaces
+              ? namespaces.find(
+                  (namespace) => namespace.Name === secret.Namespace
+                )?.IsSystem ?? false
+              : false,
+          }) ?? []
+      ),
+    [secrets, namespaces]
   );
 }
 
-function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
+function TableActions({
+  selectedItems,
+  isAddSecretHidden,
+}: {
+  selectedItems: SecretRowData[];
+  isAddSecretHidden: boolean;
+}) {
   const environmentId = useEnvironmentId();
-  const deleteSecretMutation = useMutationDeleteSecrets(environmentId);
+  const deleteSecretMutation = useDeleteSecrets(environmentId);
 
   async function handleRemoveClick(secrets: SecretRowData[]) {
     const secretsToDelete = secrets.map((secret) => ({
-      namespace: secret.metadata?.namespace ?? '',
-      name: secret.metadata?.name ?? '',
+      namespace: secret.Namespace ?? '',
+      name: secret.Name ?? '',
     }));
 
     await deleteSecretMutation.mutateAsync(secretsToDelete);
@@ -181,13 +146,17 @@ function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
           'secret'
         )}?`}
       />
-      <AddButton
-        to="kubernetes.secrets.new"
-        data-cy="k8sSecret-addSecretWithFormButton"
-        color="secondary"
-      >
-        Add with form
-      </AddButton>
+
+      {!isAddSecretHidden && (
+        <AddButton
+          to="kubernetes.secrets.new"
+          data-cy="k8sSecret-addSecretWithFormButton"
+          color="secondary"
+        >
+          Add with form
+        </AddButton>
+      )}
+
       <CreateFromManifestButton
         params={{
           tab: 'secrets',

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/created.tsx

@@ -1,8 +1,6 @@
 import { formatDate } from '@/portainer/filters/filters';
-import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
 import { SecretRowData } from '../types';
-import { configurationOwnerUsernameLabel } from '../../../constants';
 
 import { columnHelper } from './helper';
 
@@ -13,9 +11,7 @@ export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
 });
 
 function getCreatedAtText(row: SecretRowData) {
-  const owner =
-    row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-    row.metadata?.labels?.[appOwnerLabel];
-  const date = formatDate(row.metadata?.creationTimestamp);
+  const owner = row.ConfigurationOwner || row.ConfigurationOwnerId;
+  const date = formatDate(row.CreationDate);
   return owner ? `${date} by ${owner}` : date;
 }

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx

@@ -1,7 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
-import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
 import { SystemBadge } from '@@/Badge/SystemBadge';
 import { ExternalBadge } from '@@/Badge/ExternalBadge';
@@ -9,26 +8,21 @@ import { UnusedBadge } from '@@/Badge/UnusedBadge';
 import { Link } from '@@/Link';
 
 import { SecretRowData } from '../types';
-import { configurationOwnerUsernameLabel } from '../../../constants';
 
 import { columnHelper } from './helper';
 
 export const name = columnHelper.accessor(
   (row) => {
-    const name = row.metadata?.name;
+    const name = row.Name;
+
     const isSystemToken = name?.includes('default-token-');
-
-    const isRegistrySecret =
-      row.metadata?.annotations?.['portainer.io/registry.id'];
-    const isSystemSecret = isSystemToken || row.isSystem || isRegistrySecret;
-
+    const isSystemConfigMap = isSystemToken || row.isSystem;
     const hasConfigurationOwner = !!(
-      row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-      row.metadata?.labels?.[appOwnerLabel]
+      row.ConfigurationOwner || row.ConfigurationOwnerId
     );
-    return `${name} ${isSystemSecret ? 'system' : ''} ${
+    return `${name} ${isSystemConfigMap ? 'system' : ''} ${
       !isSystemToken && !hasConfigurationOwner ? 'external' : ''
-    } ${!row.inUse && !isSystemSecret ? 'unused' : ''}`;
+    } ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
   },
   {
     header: 'Name',
@@ -38,23 +32,22 @@ export const name = columnHelper.accessor(
 );
 
 function Cell({ row }: CellContext<SecretRowData, string>) {
-  const name = row.original.metadata?.name;
+  const name = row.original.Name;
 
   const isSystemToken = name?.includes('default-token-');
   const isSystemSecret = isSystemToken || row.original.isSystem;
 
   const hasConfigurationOwner = !!(
-    row.original.metadata?.labels?.[configurationOwnerUsernameLabel] ||
-    row.original.metadata?.labels?.[appOwnerLabel]
+    row.original.ConfigurationOwner || row.original.ConfigurationOwnerId
   );
 
   return (
     <Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
-      <div className="flex w-fit">
+      <div className="flex w-fit gap-x-2">
         <Link
           to="kubernetes.secrets.secret"
           params={{
-            namespace: row.original.metadata?.namespace,
+            namespace: row.original.Namespace,
             name,
           }}
           title={name}
@@ -63,7 +56,6 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
         >
           {name}
         </Link>
-
         {isSystemSecret && <SystemBadge />}
         {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
         {!row.original.inUse && !isSystemSecret && <UnusedBadge />}

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx

@@ -8,37 +8,34 @@ import { SecretRowData } from '../types';
 
 import { columnHelper } from './helper';
 
-export const namespace = columnHelper.accessor(
-  (row) => row.metadata?.namespace,
-  {
-    header: 'Namespace',
-    id: 'namespace',
-    cell: ({ getValue }) => {
-      const namespace = getValue();
+export const namespace = columnHelper.accessor((row) => row.Namespace, {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: ({ getValue }) => {
+    const namespace = getValue();
 
-      return (
-        <Link
-          to="kubernetes.resourcePools.resourcePool"
-          params={{
-            id: namespace,
-          }}
-          title={namespace}
-          data-cy={`secret-namespace-link-${namespace}`}
-        >
-          {namespace}
-        </Link>
-      );
-    },
-    meta: {
-      filter: filterHOC('Filter by namespace'),
-    },
-    enableColumnFilter: true,
-    filterFn: (
-      row: Row<SecretRowData>,
-      _columnId: string,
-      filterValue: string[]
-    ) =>
-      filterValue.length === 0 ||
-      filterValue.includes(row.original.metadata?.namespace ?? ''),
-  }
-);
+    return (
+      <Link
+        to="kubernetes.resourcePools.resourcePool"
+        params={{
+          id: namespace,
+        }}
+        title={namespace}
+        data-cy={`secret-namespace-link-${namespace}`}
+      >
+        {namespace}
+      </Link>
+    );
+  },
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (
+    row: Row<SecretRowData>,
+    _columnId: string,
+    filterValue: string[]
+  ) =>
+    filterValue.length === 0 ||
+    filterValue.includes(row.original.Namespace ?? ''),
+});

app/react/kubernetes/configs/ListView/SecretsDatatable/types.ts

@@ -1,6 +1,6 @@
-import { Secret } from 'kubernetes-types/core/v1';
+import { Configuration } from '../../types';
 
-export interface SecretRowData extends Secret {
+export interface SecretRowData extends Configuration {
   inUse: boolean;
   isSystem: boolean;
 }

app/react/kubernetes/configs/ListView/SecretsDatatable/utils.test.ts

@@ -1,14 +1,21 @@
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
-import { Secret, Pod } from 'kubernetes-types/core/v1';
+import { CronJob, Job, K8sPod } from '../../../applications/types';
+import { Configuration } from '../../types';
 
 import { getIsSecretInUse } from './utils';
 
 describe('getIsSecretInUse', () => {
   it('should return false when no resources reference the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [];
     const cronJobs: CronJob[] = [];
 
@@ -16,20 +23,26 @@ describe('getIsSecretInUse', () => {
   });
 
   it('should return true when a pod references the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [
+    const pods: K8sPod[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          containers: [
-            {
-              name: 'container1',
-              envFrom: [{ secretRef: { name: 'my-secret' } }],
-            },
-          ],
-        },
+        namespace: 'default',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ secretRef: { name: 'my-secret' } }],
+          },
+        ],
+        ownerReferences: [],
       },
     ];
     const jobs: Job[] = [];
@@ -39,25 +52,26 @@ describe('getIsSecretInUse', () => {
   });
 
   it('should return true when a job references the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          template: {
-            spec: {
-              containers: [
-                {
-                  name: 'container1',
-                  envFrom: [{ secretRef: { name: 'my-secret' } }],
-                },
-              ],
-            },
+        namespace: 'default',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ secretRef: { name: 'my-secret' } }],
           },
-        },
+        ],
       },
     ];
     const cronJobs: CronJob[] = [];
@@ -66,31 +80,28 @@ describe('getIsSecretInUse', () => {
   });
 
   it('should return true when a cronJob references the secret', () => {
-    const secret: Secret = {
-      metadata: { name: 'my-secret', namespace: 'default' },
+    const secret: Configuration = {
+      Name: 'my-secret',
+      Namespace: 'default',
+      UID: '',
+      Type: 1,
+      ConfigurationOwner: '',
+      ConfigurationOwnerId: '',
+      IsUsed: false,
+      Yaml: '',
     };
-    const pods: Pod[] = [];
+    const pods: K8sPod[] = [];
     const jobs: Job[] = [];
     const cronJobs: CronJob[] = [
       {
-        metadata: { namespace: 'default' },
-        spec: {
-          schedule: '0 0 * * *',
-          jobTemplate: {
-            spec: {
-              template: {
-                spec: {
-                  containers: [
-                    {
-                      name: 'container1',
-                      envFrom: [{ secretRef: { name: 'my-secret' } }],
-                    },
-                  ],
-                },
-              },
-            },
+        namespace: 'default',
+        schedule: '0 0 * * *',
+        containers: [
+          {
+            name: 'container1',
+            envFrom: [{ secretRef: { name: 'my-secret' } }],
           },
-        },
+        ],
       },
     ];
 

app/react/kubernetes/configs/ListView/SecretsDatatable/utils.ts

@@ -1,27 +1,27 @@
-import { Secret, Pod, PodSpec } from 'kubernetes-types/core/v1';
-import { CronJob, Job } from 'kubernetes-types/batch/v1';
+import { PodSpec } from 'kubernetes-types/core/v1';
+
+import { Configuration } from '../../types';
+import { Job, CronJob, K8sPod } from '../../../applications/types';
 
 /**
  * getIsSecretInUse returns true if the secret is referenced by any pod, job, or cronjob in the same namespace
  */
 export function getIsSecretInUse(
-  secret: Secret,
-  pods: Pod[],
+  secret: Configuration,
+  pods: K8sPod[],
   jobs: Job[],
   cronJobs: CronJob[]
 ) {
   // get all podspecs from pods, jobs and cronjobs that are in the same namespace
-  const podsInNamespace = pods
-    .filter((pod) => pod.metadata?.namespace === secret.metadata?.namespace)
-    .map((pod) => pod.spec);
-  const jobsInNamespace = jobs
-    .filter((job) => job.metadata?.namespace === secret.metadata?.namespace)
-    .map((job) => job.spec?.template.spec);
-  const cronJobsInNamespace = cronJobs
-    .filter(
-      (cronJob) => cronJob.metadata?.namespace === secret.metadata?.namespace
-    )
-    .map((cronJob) => cronJob.spec?.jobTemplate.spec?.template.spec);
+  const podsInNamespace = pods.filter(
+    (pod) => pod.namespace === secret.Namespace
+  );
+  const jobsInNamespace = jobs.filter(
+    (job) => job.namespace === secret.Namespace
+  );
+  const cronJobsInNamespace = cronJobs.filter(
+    (cronJob) => cronJob.namespace === secret.Namespace
+  );
   const allPodSpecs = [
     ...podsInNamespace,
     ...jobsInNamespace,
@@ -30,10 +30,10 @@ export function getIsSecretInUse(
 
   // check if the secret is referenced by any pod, job or cronjob in the namespace
   const isReferenced = allPodSpecs.some((podSpec) => {
-    if (!podSpec || !secret.metadata?.name) {
+    if (!podSpec || !secret.Name) {
       return false;
     }
-    return doesPodSpecReferenceSecret(podSpec, secret.metadata?.name);
+    return doesPodSpecReferenceSecret(podSpec, secret.Name);
   });
 
   return isReferenced;

app/react/kubernetes/configs/queries/query-keys.ts

@@ -0,0 +1,52 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { ConfigMapQueryParams, SecretQueryParams } from './types';
+
+export const configMapQueryKeys = {
+  configMap: (
+    environmentId: EnvironmentId,
+    namespace: string,
+    configMap: string
+  ) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'configmaps',
+    'namespaces',
+    namespace,
+    configMap,
+  ],
+  configMaps: (environmentId: EnvironmentId, namespace?: string) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'configmaps',
+    'namespaces',
+    namespace,
+  ],
+  configMapsForCluster: (
+    environmentId: EnvironmentId,
+    params?: ConfigMapQueryParams
+  ) =>
+    params
+      ? ['environments', environmentId, 'kubernetes', 'configmaps', params]
+      : ['environments', environmentId, 'kubernetes', 'configmaps'],
+};
+
+export const secretQueryKeys = {
+  secrets: (environmentId: EnvironmentId, namespace?: string) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'secrets',
+    'namespaces',
+    namespace,
+  ],
+  secretsForCluster: (
+    environmentId: EnvironmentId,
+    params?: SecretQueryParams
+  ) =>
+    params
+      ? ['environments', environmentId, 'kubernetes', 'secrets', params]
+      : ['environments', environmentId, 'kubernetes', 'secrets'],
+};

app/react/kubernetes/configs/queries/types.ts

@@ -0,0 +1,2 @@
+export type ConfigMapQueryParams = { isUsed?: boolean };
+export type SecretQueryParams = { isUsed?: boolean };

app/react/kubernetes/configs/queries/useConfigMap.ts

@@ -0,0 +1,48 @@
+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 { Configuration } from '../types';
+
+import { configMapQueryKeys } from './query-keys';
+import { ConfigMapQueryParams } from './types';
+
+export function useConfigMap(
+  environmentId: EnvironmentId,
+  namespace: string,
+  configMap: string,
+  options?: { autoRefreshRate?: number } & ConfigMapQueryParams
+) {
+  return useQuery(
+    configMapQueryKeys.configMap(environmentId, namespace, configMap),
+    () => getConfigMap(environmentId, namespace, configMap, { withData: true }),
+    {
+      ...withGlobalError('Unable to retrieve ConfigMaps for cluster'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+// get a configmap
+async function getConfigMap(
+  environmentId: EnvironmentId,
+  namespace: string,
+  configMap: string,
+  params?: { withData?: boolean }
+) {
+  try {
+    const { data } = await axios.get<Configuration[]>(
+      `/kubernetes/${environmentId}/namespaces/${namespace}/configmaps/${configMap}`,
+      { params }
+    );
+    return data;
+  } catch (e) {
+    // use parseAxiosError instead of parseKubernetesAxiosError
+    // because this is an internal portainer api endpoint, not through the kube proxy
+    throw parseAxiosError(e, 'Unable to retrieve ConfigMaps');
+  }
+}

app/react/kubernetes/configs/queries/useConfigMaps.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+import { ConfigMap, ConfigMapList } from 'kubernetes-types/core/v1';
+
+import axios from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withGlobalError } from '@/react-tools/react-query';
+
+import { parseKubernetesAxiosError } from '../../axiosError';
+
+import { configMapQueryKeys } from './query-keys';
+
+// returns a usequery hook for the list of configmaps within a namespace from the kubernetes API
+export function useConfigMaps(environmentId: EnvironmentId, namespace: string) {
+  return useQuery(
+    configMapQueryKeys.configMaps(environmentId, namespace),
+    () => (namespace ? getConfigMaps(environmentId, namespace) : []),
+    {
+      ...withGlobalError(
+        `Unable to get ConfigMaps in namespace '${namespace}'`
+      ),
+      enabled: !!namespace,
+    }
+  );
+}
+
+// get all configmaps for a namespace
+async function getConfigMaps(environmentId: EnvironmentId, namespace?: string) {
+  try {
+    const { data } = await axios.get<ConfigMapList>(
+      `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps`
+    );
+    // when fetching a list, the kind isn't appended to the items, so we need to add it
+    const configmaps: ConfigMap[] = data.items.map((configmap) => ({
+      ...configmap,
+      kind: 'ConfigMap',
+    }));
+    return configmaps;
+  } catch (e) {
+    throw parseKubernetesAxiosError(e, 'Unable to retrieve ConfigMaps');
+  }
+}

app/react/kubernetes/configs/queries/useConfigmapsForCluster.ts

@@ -0,0 +1,53 @@
+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 { Configuration } from '../types';
+
+import { configMapQueryKeys } from './query-keys';
+import { ConfigMapQueryParams } from './types';
+
+export function useConfigMapsForCluster<TData = Configuration[]>(
+  environmentId: EnvironmentId,
+  options?: {
+    autoRefreshRate?: number;
+    select?: (data: Configuration[]) => TData;
+  } & ConfigMapQueryParams
+) {
+  const { autoRefreshRate, select, ...params } = options ?? {};
+  return useQuery(
+    configMapQueryKeys.configMapsForCluster(environmentId, params),
+    () =>
+      getConfigMapsForCluster(environmentId, {
+        ...params,
+        isUsed: params?.isUsed,
+      }),
+    {
+      ...withGlobalError('Unable to retrieve ConfigMaps for cluster'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+      select,
+    }
+  );
+}
+
+// get all configmaps for a cluster
+async function getConfigMapsForCluster(
+  environmentId: EnvironmentId,
+  params?: { withData?: boolean; isUsed?: boolean }
+) {
+  try {
+    const { data } = await axios.get<Configuration[]>(
+      `/kubernetes/${environmentId}/configmaps`,
+      { params }
+    );
+    return data;
+  } catch (e) {
+    // use parseAxiosError instead of parseKubernetesAxiosError
+    // because this is an internal portainer api endpoint, not through the kube proxy
+    throw parseAxiosError(e, 'Unable to retrieve ConfigMaps');
+  }
+}

app/react/kubernetes/configs/queries/useDeleteConfigMaps.ts

@@ -0,0 +1,77 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { queryClient, withGlobalError } from '@/react-tools/react-query';
+import axios from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import {
+  error as notifyError,
+  notifySuccess,
+} from '@/portainer/services/notifications';
+import { isFulfilled, isRejected } from '@/portainer/helpers/promise-utils';
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { parseKubernetesAxiosError } from '../../axiosError';
+
+import { configMapQueryKeys } from './query-keys';
+
+export function useDeleteConfigMaps(environmentId: EnvironmentId) {
+  return useMutation(
+    async (configMaps: { namespace: string; name: string }[]) => {
+      const promises = await Promise.allSettled(
+        configMaps.map(({ namespace, name }) =>
+          deleteConfigMap(environmentId, namespace, name)
+        )
+      );
+      const successfulConfigMaps = promises
+        .filter(isFulfilled)
+        .map((_, index) => configMaps[index].name);
+      const failedConfigMaps = promises
+        .filter(isRejected)
+        .map(({ reason }, index) => ({
+          name: configMaps[index].name,
+          reason,
+        }));
+      return { failedConfigMaps, successfulConfigMaps };
+    },
+    {
+      ...withGlobalError('Unable to remove ConfigMaps'),
+      onSuccess: ({ failedConfigMaps, successfulConfigMaps }) => {
+        // Promise.allSettled can also resolve with errors, so check for errors here
+        // show an error message for each configmap that failed to delete
+        failedConfigMaps.forEach(({ name, reason }) => {
+          notifyError(
+            `Failed to remove ConfigMap '${name}'`,
+            new Error(reason.message) as Error
+          );
+        });
+        // show one summary message for all successful deletes
+        if (successfulConfigMaps.length) {
+          notifySuccess(
+            `${pluralize(
+              successfulConfigMaps.length,
+              'ConfigMap'
+            )} successfully removed`,
+            successfulConfigMaps.join(', ')
+          );
+        }
+        queryClient.invalidateQueries({
+          queryKey: configMapQueryKeys.configMapsForCluster(environmentId),
+        });
+      },
+    }
+  );
+}
+
+async function deleteConfigMap(
+  environmentId: EnvironmentId,
+  namespace: string,
+  name: string
+) {
+  try {
+    await axios.delete(
+      `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps/${name}`
+    );
+  } catch (e) {
+    throw parseKubernetesAxiosError(e, 'Unable to remove ConfigMap');
+  }
+}

app/react/kubernetes/configs/queries/useDeleteSecrets.ts

@@ -0,0 +1,76 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { queryClient, withGlobalError } from '@/react-tools/react-query';
+import axios from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import {
+  error as notifyError,
+  notifySuccess,
+} from '@/portainer/services/notifications';
+import { isFulfilled, isRejected } from '@/portainer/helpers/promise-utils';
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { parseKubernetesAxiosError } from '../../axiosError';
+
+import { secretQueryKeys } from './query-keys';
+
+export function useDeleteSecrets(environmentId: EnvironmentId) {
+  return useMutation(
+    async (secrets: { namespace: string; name: string }[]) => {
+      const promises = await Promise.allSettled(
+        secrets.map(({ namespace, name }) =>
+          deleteSecret(environmentId, namespace, name)
+        )
+      );
+      const successfulSecrets = promises
+        .filter(isFulfilled)
+        .map((_, index) => secrets[index].name);
+      const failedSecrets = promises
+        .filter(isRejected)
+        .map(({ reason }, index) => ({
+          name: secrets[index].name,
+          reason,
+        }));
+      return { failedSecrets, successfulSecrets };
+    },
+    {
+      ...withGlobalError('Unable to remove secrets'),
+      onSuccess: ({ failedSecrets, successfulSecrets }) => {
+        // show an error message for each secret that failed to delete
+        failedSecrets.forEach(({ name, reason }) => {
+          notifyError(
+            `Failed to remove secret '${name}'`,
+            new Error(reason.message) as Error
+          );
+        });
+        // show one summary message for all successful deletes
+        if (successfulSecrets.length) {
+          notifySuccess(
+            `${pluralize(
+              successfulSecrets.length,
+              'Secret'
+            )} successfully removed`,
+            successfulSecrets.join(', ')
+          );
+        }
+        queryClient.invalidateQueries({
+          queryKey: secretQueryKeys.secretsForCluster(environmentId),
+        });
+      },
+    }
+  );
+}
+
+async function deleteSecret(
+  environmentId: EnvironmentId,
+  namespace: string,
+  name: string
+) {
+  try {
+    await axios.delete(
+      `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets/${name}`
+    );
+  } catch (e) {
+    throw parseKubernetesAxiosError(e, 'Unable to remove secret');
+  }
+}

app/react/kubernetes/configs/queries/useSecrets.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { Secret, SecretList } from 'kubernetes-types/core/v1';
+
+import { withGlobalError } from '@/react-tools/react-query';
+import axios from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { parseKubernetesAxiosError } from '../../axiosError';
+
+import { secretQueryKeys } from './query-keys';
+
+// returns a usequery hook for the list of secrets from the kubernetes API
+export function useSecrets(environmentId: EnvironmentId, namespace?: string) {
+  return useQuery(
+    secretQueryKeys.secrets(environmentId, namespace),
+    () => (namespace ? getSecrets(environmentId, namespace) : []),
+    {
+      ...withGlobalError(`Unable to get secrets in namespace '${namespace}'`),
+      enabled: !!namespace,
+    }
+  );
+}
+
+// get all secrets for a namespace
+async function getSecrets(environmentId: EnvironmentId, namespace: string) {
+  try {
+    const { data } = await axios.get<SecretList>(
+      `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets`
+    );
+    // when fetching a list, the kind isn't appended to the items, so we need to add it
+    const secrets: Secret[] = data.items.map((secret) => ({
+      ...secret,
+      kind: 'Secret',
+    }));
+    return secrets;
+  } catch (e) {
+    throw parseKubernetesAxiosError(e, 'Unable to retrieve secrets');
+  }
+}

app/react/kubernetes/configs/queries/useSecretsForCluster.ts

@@ -0,0 +1,59 @@
+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 { Configuration } from '../types';
+
+import { SecretQueryParams } from './types';
+import { secretQueryKeys } from './query-keys';
+
+export function useSecretsForCluster<TData = Configuration[]>(
+  environmentId: EnvironmentId,
+  options?: {
+    autoRefreshRate?: number;
+    select?: (data: Configuration[]) => TData;
+  } & SecretQueryParams
+) {
+  const { autoRefreshRate, select, ...params } = options ?? {};
+  return useQuery(
+    secretQueryKeys.secretsForCluster(environmentId, params),
+    () =>
+      getSecretsForCluster(environmentId, {
+        ...params,
+        isUsed: params?.isUsed,
+      }),
+    {
+      ...withGlobalError('Unable to retrieve secrets for cluster'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+      select,
+    }
+  );
+}
+
+async function getSecretsForCluster(
+  environmentId: EnvironmentId,
+  params?: { withData?: boolean; isUsed?: boolean }
+) {
+  const secrets = await getSecrets(environmentId, params);
+  return secrets;
+}
+
+// get all secrets for a cluster
+async function getSecrets(
+  environmentId: EnvironmentId,
+  params?: { withData?: boolean; isUsed?: boolean } | undefined
+) {
+  try {
+    const { data } = await axios.get<Configuration[]>(
+      `/kubernetes/${environmentId}/secrets`,
+      { params }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to retrieve secrets');
+  }
+}

app/react/kubernetes/configs/service.ts

@@ -1,36 +0,0 @@
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-import { EnvironmentId } from '@/react/portainer/environments/types';
-
-import { Configuration } from './types';
-
-// returns the formatted list of configmaps and secrets
-export async function getConfigurations(
-  environmentId: EnvironmentId,
-  namespace: string
-) {
-  try {
-    const { data: configmaps } = await axios.get<Configuration[]>(
-      `kubernetes/${environmentId}/namespaces/${namespace}/configuration`
-    );
-    return configmaps;
-  } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to retrieve configmaps');
-  }
-}
-
-export async function getConfigMapsForCluster(
-  environmentId: EnvironmentId,
-  namespaces: string[]
-) {
-  try {
-    const configmaps = await Promise.all(
-      namespaces.map((namespace) => getConfigurations(environmentId, namespace))
-    );
-    return configmaps.flat();
-  } catch (e) {
-    throw parseAxiosError(
-      e as Error,
-      'Unable to retrieve ConfigMaps for cluster'
-    );
-  }
-}

app/react/kubernetes/configs/types.ts

@@ -1,18 +1,20 @@
 export interface Configuration {
-  Id: string;
+  UID: string;
   Name: string;
   Type: number;
   Namespace: string;
-  CreationDate: Date;
+  CreationDate?: string;
 
-  ConfigurationOwner: string;
+  ConfigurationOwner: string; // username
+  ConfigurationOwnerId: string; // user id
 
-  Used: boolean;
-  Data: Document;
+  IsUsed: boolean;
+  Data?: Record<string, string>;
   Yaml: string;
 
   SecretType?: string;
   IsRegistrySecret?: boolean;
+  IsSecret?: boolean;
 }
 
 // Workaround for the TS error `Type 'ConfigMap' does not satisfy the constraint 'Record<string, unknown>'` for the datatable