feat(config): separate configmaps and secrets [EE-5078] (#9029)

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

@@ -0,0 +1,196 @@
+import { useMemo } from 'react';
+import { FileCode, Plus, Trash2 } from 'lucide-react';
+import { ConfigMap } from 'kubernetes-types/core/v1';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import {
+  Authorized,
+  useAuthorizations,
+  useCurrentUser,
+} from '@/react/hooks/useUser';
+import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { useApplicationsForCluster } from '@/react/kubernetes/applications/application.queries';
+import { Application } from '@/react/kubernetes/applications/types';
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { confirmDelete } from '@@/modals/confirm';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { useTableState } from '@@/datatables/useTableState';
+
+import {
+  useConfigMapsForCluster,
+  useMutationDeleteConfigMaps,
+} from '../../configmap.service';
+import { IndexOptional } from '../../types';
+
+import { getIsConfigMapInUse } from './utils';
+import { ConfigMapRowData } from './types';
+import { columns } from './columns';
+
+const storageKey = 'k8sConfigMapsDatatable';
+const settingsStore = createStore(storageKey);
+
+export function ConfigMapsDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
+  const readOnly = !useAuthorizations(['K8sConfigMapsW']);
+  const { isAdmin } = useCurrentUser();
+
+  const environmentId = useEnvironmentId();
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(
+    environmentId,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const namespaceNames = Object.keys(namespaces || {});
+  const { data: configMaps, ...configMapsQuery } = useConfigMapsForCluster(
+    environmentId,
+    namespaceNames,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const { data: applications, ...applicationsQuery } =
+    useApplicationsForCluster(environmentId, namespaceNames);
+
+  const filteredConfigMaps = useMemo(
+    () =>
+      configMaps?.filter(
+        (configMap) =>
+          (isAdmin && tableState.showSystemResources) ||
+          !isSystemNamespace(configMap.metadata?.namespace ?? '')
+      ) || [],
+    [configMaps, tableState, isAdmin]
+  );
+  const configMapRowData = useConfigMapRowData(
+    filteredConfigMaps,
+    applications ?? [],
+    applicationsQuery.isLoading
+  );
+
+  return (
+    <Datatable<IndexOptional<ConfigMapRowData>>
+      dataset={configMapRowData}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={configMapsQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No ConfigMaps found"
+      title="ConfigMaps"
+      titleIcon={FileCode}
+      getRowId={(row) => row.metadata?.uid ?? ''}
+      isRowSelectable={(row) =>
+        !isSystemNamespace(row.original.metadata?.namespace ?? '')
+      }
+      disableSelect={readOnly}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings
+            settings={tableState}
+            hideShowSystemResources={!isAdmin}
+          />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources || !isAdmin}
+        />
+      }
+    />
+  );
+}
+
+// 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[],
+  applications: Application[],
+  applicationsLoading: boolean
+): ConfigMapRowData[] {
+  return useMemo(
+    () =>
+      configMaps.map((configMap) => ({
+        ...configMap,
+        inUse:
+          // if the apps are loading, set inUse to true to hide the 'unused' badge
+          applicationsLoading || getIsConfigMapInUse(configMap, applications),
+      })),
+    [configMaps, applicationsLoading, applications]
+  );
+}
+
+function TableActions({
+  selectedItems,
+}: {
+  selectedItems: ConfigMapRowData[];
+}) {
+  const environmentId = useEnvironmentId();
+  const deleteConfigMapMutation = useMutationDeleteConfigMaps(environmentId);
+
+  async function handleRemoveClick(configMaps: ConfigMap[]) {
+    const confirmed = await confirmDelete(
+      `Are you sure you want to remove the selected ${pluralize(
+        configMaps.length,
+        'ConfigMap'
+      )}?`
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    const configMapsToDelete = configMaps.map((configMap) => ({
+      namespace: configMap.metadata?.namespace ?? '',
+      name: configMap.metadata?.name ?? '',
+    }));
+
+    await deleteConfigMapMutation.mutateAsync(configMapsToDelete);
+  }
+
+  return (
+    <Authorized authorizations="K8sConfigMapsW">
+      <Button
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={async () => {
+          handleRemoveClick(selectedItems);
+        }}
+        icon={Trash2}
+        data-cy="k8sConfig-removeConfigButton"
+      >
+        Remove
+      </Button>
+      <Link to="kubernetes.configmaps.new" className="ml-1">
+        <Button
+          className="btn-wrapper"
+          color="secondary"
+          icon={Plus}
+          data-cy="k8sConfig-addConfigWithFormButton"
+        >
+          Add with form
+        </Button>
+      </Link>
+      <Link
+        to="kubernetes.deploy"
+        params={{
+          referrer: 'kubernetes.configurations',
+          tab: 'configmaps',
+        }}
+        className="ml-1"
+        data-cy="k8sConfig-deployFromManifestButton"
+      >
+        <Button className="btn-wrapper" color="primary" icon={Plus}>
+          Create from manifest
+        </Button>
+      </Link>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { ConfigMapRowData } from '../types';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
+  header: 'Created',
+  id: 'created',
+  cell: ({ row }) => getCreatedAtText(row.original),
+});
+
+function getCreatedAtText(row: ConfigMapRowData) {
+  const owner =
+    row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+  const date = formatDate(row.metadata?.creationTimestamp);
+  return owner ? `${date} by ${owner}` : date;
+}

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/helper.ts

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

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/index.ts

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

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

@@ -0,0 +1,80 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { Authorized } from '@/react/hooks/useUser';
+
+import { Link } from '@@/Link';
+import { Badge } from '@@/Badge';
+
+import { ConfigMapRowData } from '../types';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    const name = row.metadata?.name;
+    const namespace = row.metadata?.namespace;
+
+    const isSystemToken = name?.includes('default-token-');
+    const isInSystemNamespace = namespace
+      ? isSystemNamespace(namespace)
+      : false;
+    const isSystemConfigMap = isSystemToken || isInSystemNamespace;
+
+    const hasConfigurationOwner =
+      !!row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+    return `${name} ${isSystemConfigMap ? 'system' : ''} ${
+      !isSystemToken && !hasConfigurationOwner ? 'external' : ''
+    } ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
+  },
+  {
+    header: 'Name',
+    cell: Cell,
+    id: 'name',
+  }
+);
+
+function Cell({ row }: CellContext<ConfigMapRowData, string>) {
+  const name = row.original.metadata?.name;
+  const namespace = row.original.metadata?.namespace;
+
+  const isSystemToken = name?.includes('default-token-');
+  const isInSystemNamespace = namespace ? isSystemNamespace(namespace) : false;
+  const isSystemConfigMap = isSystemToken || isInSystemNamespace;
+
+  const hasConfigurationOwner =
+    !!row.original.metadata?.labels?.[
+      'io.portainer.kubernetes.configuration.owner'
+    ];
+
+  return (
+    <Authorized authorizations="K8sConfigMapsR" childrenUnauthorized={name}>
+      <div className="flex">
+        <Link
+          to="kubernetes.configmaps.configmap"
+          params={{
+            namespace: row.original.metadata?.namespace,
+            name,
+          }}
+          title={name}
+          className="w-fit max-w-xs truncate xl:max-w-sm 2xl:max-w-md"
+        >
+          {name}
+        </Link>
+        {isSystemConfigMap && (
+          <Badge type="success" className="ml-2">
+            system
+          </Badge>
+        )}
+        {!isSystemToken && !hasConfigurationOwner && (
+          <Badge className="ml-2">external</Badge>
+        )}
+        {!row.original.inUse && !isSystemConfigMap && (
+          <Badge type="warn" className="ml-2">
+            unused
+          </Badge>
+        )}
+      </div>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@/react/components/datatables/Filter';
+
+import { Link } from '@@/Link';
+
+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}
+        >
+          {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 ?? ''),
+  }
+);

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

@@ -0,0 +1 @@
+export { ConfigMapsDatatable } from './ConfigMapsDatatable';

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

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

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

@@ -0,0 +1,29 @@
+import { ConfigMap, Pod } from 'kubernetes-types/core/v1';
+
+import { Application } from '@/react/kubernetes/applications/types';
+import { applicationIsKind } from '@/react/kubernetes/applications/utils';
+
+// getIsConfigMapInUse returns true if the configmap is referenced by any
+// application in the cluster
+export function getIsConfigMapInUse(
+  configMap: ConfigMap,
+  applications: Application[]
+) {
+  return applications.some((app) => {
+    const appSpec = applicationIsKind<Pod>('Pod', app)
+      ? app?.spec
+      : app?.spec?.template?.spec;
+
+    const hasEnvVarReference = appSpec?.containers.some((container) =>
+      container.env?.some(
+        (envVar) =>
+          envVar.valueFrom?.configMapKeyRef?.name === configMap.metadata?.name
+      )
+    );
+    const hasVolumeReference = appSpec?.volumes?.some(
+      (volume) => volume.configMap?.name === configMap.metadata?.name
+    );
+
+    return hasEnvVarReference || hasVolumeReference;
+  });
+}

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

@@ -0,0 +1,43 @@
+import { FileCode, Lock } from 'lucide-react';
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { PageHeader } from '@@/PageHeader';
+import { Tab, WidgetTabs, findSelectedTabIndex } from '@@/Widget/WidgetTabs';
+
+import { ConfigMapsDatatable } from './ConfigMapsDatatable';
+import { SecretsDatatable } from './SecretsDatatable';
+
+const tabs: Tab[] = [
+  {
+    name: 'ConfigMaps',
+    icon: FileCode,
+    widget: <ConfigMapsDatatable />,
+    selectedTabParam: 'configmaps',
+  },
+  {
+    name: 'Secrets',
+    icon: Lock,
+    widget: <SecretsDatatable />,
+    selectedTabParam: 'secrets',
+  },
+];
+
+export function ConfigmapsAndSecretsView() {
+  const currentTabIndex = findSelectedTabIndex(
+    useCurrentStateAndParams(),
+    tabs
+  );
+  return (
+    <>
+      <PageHeader
+        title="ConfigMap & Secret lists"
+        breadcrumbs="ConfigMaps & Secrets"
+        reload
+      />
+      <>
+        <WidgetTabs tabs={tabs} currentTabIndex={currentTabIndex} />
+        <div className="content">{tabs[currentTabIndex].widget}</div>
+      </>
+    </>
+  );
+}

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

@@ -0,0 +1,192 @@
+import { useMemo } from 'react';
+import { Lock, Plus, Trash2 } from 'lucide-react';
+import { Secret } from 'kubernetes-types/core/v1';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import {
+  Authorized,
+  useAuthorizations,
+  useCurrentUser,
+} from '@/react/hooks/useUser';
+import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import { useApplicationsForCluster } from '@/react/kubernetes/applications/application.queries';
+import { Application } from '@/react/kubernetes/applications/types';
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { confirmDelete } from '@@/modals/confirm';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { useTableState } from '@@/datatables/useTableState';
+
+import {
+  useSecretsForCluster,
+  useMutationDeleteSecrets,
+} from '../../secret.service';
+import { IndexOptional } from '../../types';
+
+import { getIsSecretInUse } from './utils';
+import { SecretRowData } from './types';
+import { columns } from './columns';
+
+const storageKey = 'k8sSecretsDatatable';
+const settingsStore = createStore(storageKey);
+
+export function SecretsDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
+  const readOnly = !useAuthorizations(['K8sSecretsW']);
+  const { isAdmin } = useCurrentUser();
+
+  const environmentId = useEnvironmentId();
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(
+    environmentId,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const namespaceNames = Object.keys(namespaces || {});
+  const { data: secrets, ...secretsQuery } = useSecretsForCluster(
+    environmentId,
+    namespaceNames,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+  const { data: applications, ...applicationsQuery } =
+    useApplicationsForCluster(environmentId, namespaceNames);
+
+  const filteredSecrets = useMemo(
+    () =>
+      secrets?.filter(
+        (secret) =>
+          (isAdmin && tableState.showSystemResources) ||
+          !isSystemNamespace(secret.metadata?.namespace ?? '')
+      ) || [],
+    [secrets, tableState, isAdmin]
+  );
+  const secretRowData = useSecretRowData(
+    filteredSecrets,
+    applications ?? [],
+    applicationsQuery.isLoading
+  );
+
+  return (
+    <Datatable<IndexOptional<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) =>
+        !isSystemNamespace(row.original.metadata?.namespace ?? '')
+      }
+      disableSelect={readOnly}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings
+            settings={tableState}
+            hideShowSystemResources={!isAdmin}
+          />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources || !isAdmin}
+        />
+      }
+    />
+  );
+}
+
+// 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[],
+  applications: Application[],
+  applicationsLoading: boolean
+): SecretRowData[] {
+  return useMemo(
+    () =>
+      secrets.map((secret) => ({
+        ...secret,
+        inUse:
+          // if the apps are loading, set inUse to true to hide the 'unused' badge
+          applicationsLoading || getIsSecretInUse(secret, applications),
+      })),
+    [secrets, applicationsLoading, applications]
+  );
+}
+
+function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
+  const environmentId = useEnvironmentId();
+  const deleteSecretMutation = useMutationDeleteSecrets(environmentId);
+
+  async function handleRemoveClick(secrets: SecretRowData[]) {
+    const confirmed = await confirmDelete(
+      `Are you sure you want to remove the selected ${pluralize(
+        secrets.length,
+        'secret'
+      )}?`
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    const secretsToDelete = secrets.map((secret) => ({
+      namespace: secret.metadata?.namespace ?? '',
+      name: secret.metadata?.name ?? '',
+    }));
+
+    await deleteSecretMutation.mutateAsync(secretsToDelete);
+  }
+
+  return (
+    <Authorized authorizations="K8sSecretsW">
+      <Button
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={async () => {
+          handleRemoveClick(selectedItems);
+        }}
+        icon={Trash2}
+        data-cy="k8sSecret-removeSecretButton"
+      >
+        Remove
+      </Button>
+      <Link to="kubernetes.secrets.new" className="ml-1">
+        <Button
+          className="btn-wrapper"
+          color="secondary"
+          icon={Plus}
+          data-cy="k8sSecret-addSecretWithFormButton"
+        >
+          Add with form
+        </Button>
+      </Link>
+      <Link
+        to="kubernetes.deploy"
+        params={{
+          referrer: 'kubernetes.configurations',
+          tab: 'secrets',
+        }}
+        className="ml-1"
+        data-cy="k8sSecret-deployFromManifestButton"
+      >
+        <Button className="btn-wrapper" color="primary" icon={Plus}>
+          Create from manifest
+        </Button>
+      </Link>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { SecretRowData } from '../types';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
+  header: 'Created',
+  id: 'created',
+  cell: ({ row }) => getCreatedAtText(row.original),
+});
+
+function getCreatedAtText(row: SecretRowData) {
+  const owner =
+    row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+  const date = formatDate(row.metadata?.creationTimestamp);
+  return owner ? `${date} by ${owner}` : date;
+}

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/helper.ts

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

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/index.ts

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

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

@@ -0,0 +1,83 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { Authorized } from '@/react/hooks/useUser';
+
+import { Link } from '@@/Link';
+import { Badge } from '@@/Badge';
+
+import { SecretRowData } from '../types';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    const name = row.metadata?.name;
+    const namespace = row.metadata?.namespace;
+
+    const isSystemToken = name?.includes('default-token-');
+    const isInSystemNamespace = namespace
+      ? isSystemNamespace(namespace)
+      : false;
+    const isRegistrySecret =
+      row.metadata?.annotations?.['portainer.io/registry.id'];
+    const isSystemSecret =
+      isSystemToken || isInSystemNamespace || isRegistrySecret;
+
+    const hasConfigurationOwner =
+      !!row.metadata?.labels?.['io.portainer.kubernetes.configuration.owner'];
+    return `${name} ${isSystemSecret ? 'system' : ''} ${
+      !isSystemToken && !hasConfigurationOwner ? 'external' : ''
+    } ${!row.inUse && !isSystemSecret ? 'unused' : ''}`;
+  },
+  {
+    header: 'Name',
+    cell: Cell,
+    id: 'name',
+  }
+);
+
+function Cell({ row }: CellContext<SecretRowData, string>) {
+  const name = row.original.metadata?.name;
+  const namespace = row.original.metadata?.namespace;
+
+  const isSystemToken = name?.includes('default-token-');
+  const isInSystemNamespace = namespace ? isSystemNamespace(namespace) : false;
+  const isSystemSecret = isSystemToken || isInSystemNamespace;
+
+  const hasConfigurationOwner =
+    !!row.original.metadata?.labels?.[
+      'io.portainer.kubernetes.configuration.owner'
+    ];
+
+  return (
+    <Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
+      <div className="flex w-fit">
+        <Link
+          to="kubernetes.secrets.secret"
+          params={{
+            namespace: row.original.metadata?.namespace,
+            name,
+          }}
+          title={name}
+          className="w-fit max-w-xs truncate xl:max-w-sm 2xl:max-w-md"
+        >
+          {name}
+        </Link>
+        {isSystemSecret && (
+          <Badge type="success" className="ml-2">
+            system
+          </Badge>
+        )}
+        {!isSystemToken && !hasConfigurationOwner && (
+          <Badge className="ml-2">external</Badge>
+        )}
+        {!row.original.inUse && !isSystemSecret && (
+          <Badge type="warn" className="ml-2">
+            unused
+          </Badge>
+        )}
+      </div>
+    </Authorized>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@/react/components/datatables/Filter';
+
+import { Link } from '@@/Link';
+
+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();
+
+      return (
+        <Link
+          to="kubernetes.resourcePools.resourcePool"
+          params={{
+            id: namespace,
+          }}
+          title={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 ?? ''),
+  }
+);

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

@@ -0,0 +1 @@
+export { SecretsDatatable } from './SecretsDatatable';

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

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

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

@@ -0,0 +1,26 @@
+import { Secret, Pod } from 'kubernetes-types/core/v1';
+
+import { Application } from '@/react/kubernetes/applications/types';
+import { applicationIsKind } from '@/react/kubernetes/applications/utils';
+
+// getIsSecretInUse returns true if the secret is referenced by any
+// application in the cluster
+export function getIsSecretInUse(secret: Secret, applications: Application[]) {
+  return applications.some((app) => {
+    const appSpec = applicationIsKind<Pod>('Pod', app)
+      ? app?.spec
+      : app?.spec?.template?.spec;
+
+    const hasEnvVarReference = appSpec?.containers.some((container) =>
+      container.env?.some(
+        (envVar) =>
+          envVar.valueFrom?.secretKeyRef?.name === secret.metadata?.name
+      )
+    );
+    const hasVolumeReference = appSpec?.volumes?.some(
+      (volume) => volume.secret?.secretName === secret.metadata?.name
+    );
+
+    return hasEnvVarReference || hasVolumeReference;
+  });
+}

app/react/kubernetes/configs/ListView/index.ts

@@ -0,0 +1 @@
+export { ConfigmapsAndSecretsView } from './ConfigmapsAndSecretsView';

app/react/kubernetes/configs/configmap.service.ts

@@ -0,0 +1,163 @@
+import { ConfigMapList } from 'kubernetes-types/core/v1';
+import { useMutation, useQuery } from 'react-query';
+
+import { queryClient, withError } 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 { parseKubernetesAxiosError } from '../axiosError';
+
+export const configMapQueryKeys = {
+  configMaps: (environmentId: EnvironmentId, namespace?: string) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'configmaps',
+    'namespaces',
+    namespace,
+  ],
+  configMapsForCluster: (environmentId: EnvironmentId) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'configmaps',
+  ],
+};
+
+// returns a usequery hook for the list of configmaps from the kubernetes API
+export function useConfigMaps(
+  environmentId: EnvironmentId,
+  namespace?: string
+) {
+  return useQuery(
+    configMapQueryKeys.configMaps(environmentId, namespace),
+    () => (namespace ? getConfigMaps(environmentId, namespace) : []),
+    {
+      onError: (err) => {
+        notifyError(
+          'Failure',
+          err as Error,
+          `Unable to get ConfigMaps in namespace '${namespace}'`
+        );
+      },
+      enabled: !!namespace,
+    }
+  );
+}
+
+export function useConfigMapsForCluster(
+  environmentId: EnvironmentId,
+  namespaces?: string[],
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    configMapQueryKeys.configMapsForCluster(environmentId),
+    () => namespaces && getConfigMapsForCluster(environmentId, namespaces),
+    {
+      ...withError('Unable to retrieve ConfigMaps for cluster'),
+      enabled: !!namespaces?.length,
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+export function useMutationDeleteConfigMaps(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 };
+    },
+    {
+      ...withError('Unable to remove ConfigMaps'),
+      onSuccess: ({ failedConfigMaps, successfulConfigMaps }) => {
+        // Promise.allSettled can also resolve with errors, so check for errors here
+        queryClient.invalidateQueries(
+          configMapQueryKeys.configMapsForCluster(environmentId)
+        );
+        // 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(
+            'ConfigMaps successfully removed',
+            successfulConfigMaps.join(', ')
+          );
+        }
+      },
+    }
+  );
+}
+
+async function getConfigMapsForCluster(
+  environmentId: EnvironmentId,
+  namespaces: string[]
+) {
+  try {
+    const configMaps = await Promise.all(
+      namespaces.map((namespace) => getConfigMaps(environmentId, namespace))
+    );
+    return configMaps.flat();
+  } catch (e) {
+    throw parseKubernetesAxiosError(
+      e as Error,
+      'Unable to retrieve ConfigMaps for cluster'
+    );
+  }
+}
+
+// get all configmaps for a namespace
+async function getConfigMaps(environmentId: EnvironmentId, namespace: string) {
+  try {
+    const { data } = await axios.get<ConfigMapList>(
+      buildUrl(environmentId, namespace)
+    );
+    return data.items;
+  } catch (e) {
+    throw parseKubernetesAxiosError(
+      e as Error,
+      'Unable to retrieve ConfigMaps'
+    );
+  }
+}
+
+async function deleteConfigMap(
+  environmentId: EnvironmentId,
+  namespace: string,
+  name: string
+) {
+  try {
+    await axios.delete(buildUrl(environmentId, namespace, name));
+  } catch (e) {
+    throw parseKubernetesAxiosError(e as Error, 'Unable to remove ConfigMap');
+  }
+}
+
+function buildUrl(environmentId: number, namespace: string, name?: string) {
+  const url = `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps`;
+  return name ? `${url}/${name}` : url;
+}

app/react/kubernetes/configs/queries.ts

@@ -23,7 +23,11 @@ export function useConfigurations(
     () => (namespace ? getConfigurations(environmentId, namespace) : []),
     {
       onError: (err) => {
-        notifyError('Failure', err as Error, 'Unable to get configurations');
+        notifyError(
+          'Failure',
+          err as Error,
+          `Unable to get configurations for namespace ${namespace}`
+        );
       },
       enabled: !!namespace,
     }
@@ -35,10 +39,10 @@ export function useConfigurationsForCluster(
   namespaces?: string[]
 ) {
   return useQuery(
-    ['environments', environemtId, 'kubernetes', 'configmaps'],
+    ['environments', environemtId, 'kubernetes', 'configurations'],
     () => namespaces && getConfigMapsForCluster(environemtId, namespaces),
     {
-      ...withError('Unable to retrieve applications'),
+      ...withError('Unable to retrieve configurations for cluster'),
       enabled: !!namespaces,
     }
   );

app/react/kubernetes/configs/secret.service.ts

@@ -0,0 +1,156 @@
+import { SecretList } from 'kubernetes-types/core/v1';
+import { useMutation, useQuery } from 'react-query';
+
+import { queryClient, withError } 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 { parseKubernetesAxiosError } from '../axiosError';
+
+export const secretQueryKeys = {
+  secrets: (environmentId: EnvironmentId, namespace?: string) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'secrets',
+    'namespaces',
+    namespace,
+  ],
+  secretsForCluster: (environmentId: EnvironmentId) => [
+    'environments',
+    environmentId,
+    'kubernetes',
+    'secrets',
+  ],
+};
+
+// 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) : []),
+    {
+      onError: (err) => {
+        notifyError(
+          'Failure',
+          err as Error,
+          `Unable to get secrets in namespace '${namespace}'`
+        );
+      },
+      enabled: !!namespace,
+    }
+  );
+}
+
+export function useSecretsForCluster(
+  environmentId: EnvironmentId,
+  namespaces?: string[],
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    secretQueryKeys.secretsForCluster(environmentId),
+    () => namespaces && getSecretsForCluster(environmentId, namespaces),
+    {
+      ...withError('Unable to retrieve secrets for cluster'),
+      enabled: !!namespaces?.length,
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+export function useMutationDeleteSecrets(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 };
+    },
+    {
+      ...withError('Unable to remove secrets'),
+      onSuccess: ({ failedSecrets, successfulSecrets }) => {
+        queryClient.invalidateQueries(
+          secretQueryKeys.secretsForCluster(environmentId)
+        );
+        // 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(
+            'Secrets successfully removed',
+            successfulSecrets.join(', ')
+          );
+        }
+      },
+    }
+  );
+}
+
+async function getSecretsForCluster(
+  environmentId: EnvironmentId,
+  namespaces: string[]
+) {
+  try {
+    const secrets = await Promise.all(
+      namespaces.map((namespace) => getSecrets(environmentId, namespace))
+    );
+    return secrets.flat();
+  } catch (e) {
+    throw parseKubernetesAxiosError(
+      e as Error,
+      'Unable to retrieve secrets for cluster'
+    );
+  }
+}
+
+// get all secrets for a namespace
+async function getSecrets(environmentId: EnvironmentId, namespace: string) {
+  try {
+    const { data } = await axios.get<SecretList>(
+      buildUrl(environmentId, namespace)
+    );
+    return data.items;
+  } catch (e) {
+    throw parseKubernetesAxiosError(e as Error, 'Unable to retrieve secrets');
+  }
+}
+
+async function deleteSecret(
+  environmentId: EnvironmentId,
+  namespace: string,
+  name: string
+) {
+  try {
+    await axios.delete(buildUrl(environmentId, namespace, name));
+  } catch (e) {
+    throw parseKubernetesAxiosError(e as Error, 'Unable to remove secret');
+  }
+}
+
+function buildUrl(environmentId: number, namespace: string, name?: string) {
+  const url = `/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets`;
+  return name ? `${url}/${name}` : url;
+}

app/react/kubernetes/configs/types.ts

@@ -8,10 +8,13 @@ export interface Configuration {
   ConfigurationOwner: string;
 
   Used: boolean;
-  // Applications: any[];
   Data: Document;
   Yaml: string;
 
   SecretType?: string;
   IsRegistrySecret?: boolean;
 }
+
+// Workaround for the TS error `Type 'ConfigMap' does not satisfy the constraint 'Record<string, unknown>'` for the datatable
+// https://github.com/microsoft/TypeScript/issues/15300#issuecomment-1320480061
+export type IndexOptional<T> = Pick<T, keyof T>;