refactor(docker/volumes): migrate table to react [EE-4677] (#10312)

app/react/azure/container-instances/ListView/columns/ownership.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { CellContext } from '@tanstack/react-table';
 
-import { ownershipIcon } from '@/portainer/filters/filters';
 import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
 import { ContainerGroup } from '@/react/azure/types';
 import { determineOwnership } from '@/react/portainer/access-control/models/ResourceControlViewModel';
+import { ownershipIcon } from '@/react/docker/components/datatable/createOwnershipColumn';
 
 import { columnHelper } from './helper';
 

app/react/docker/components/datatable/createOwnershipColumn.tsx

@@ -1,6 +1,6 @@
 import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { Eye, EyeOff, Users } from 'lucide-react';
 
-import { ownershipIcon } from '@/portainer/filters/filters';
 import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
 
 import { Icon } from '@@/Icon';
@@ -36,3 +36,16 @@ export function createOwnershipColumn<D extends IResource>(
     );
   }
 }
+
+export function ownershipIcon(ownership: ResourceControlOwnership) {
+  switch (ownership) {
+    case ResourceControlOwnership.PRIVATE:
+      return EyeOff;
+    case ResourceControlOwnership.ADMINISTRATORS:
+      return EyeOff;
+    case ResourceControlOwnership.RESTRICTED:
+      return Users;
+    default:
+      return Eye;
+  }
+}

app/react/docker/volumes/ListView/VolumesDatatable/TableActions.tsx

@@ -0,0 +1,44 @@
+import { Plus, Trash2 } from 'lucide-react';
+
+import { Authorized } from '@/react/hooks/useUser';
+
+import { Link } from '@@/Link';
+import { Button } from '@@/buttons';
+
+import { DecoratedVolume } from '../types';
+
+export function TableActions({
+  selectedItems,
+  onRemove,
+}: {
+  selectedItems: Array<DecoratedVolume>;
+  onRemove(items: Array<DecoratedVolume>): void;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <Authorized authorizations="DockerVolumeDelete">
+        <Button
+          color="dangerlight"
+          disabled={selectedItems.length === 0}
+          onClick={() => onRemove(selectedItems)}
+          icon={Trash2}
+          className="!m-0"
+          data-cy="volume-removeVolumeButton"
+        >
+          Remove
+        </Button>
+      </Authorized>
+      <Authorized authorizations="DockerVolumeCreate">
+        <Button
+          as={Link}
+          props={{ to: '.new' }}
+          icon={Plus}
+          className="!m-0"
+          data-cy="volume-addVolumeButton"
+        >
+          Add secret
+        </Button>
+      </Authorized>
+    </div>
+  );
+}

app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx

@@ -0,0 +1,72 @@
+import { Database } from 'lucide-react';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import {
+  BasicTableSettings,
+  RefreshableTableSettings,
+  createPersistedStore,
+  refreshableSettings,
+} from '@@/datatables/types';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { useTableState } from '@@/datatables/useTableState';
+import { withMeta } from '@@/datatables/extend-options/withMeta';
+
+import { DecoratedVolume } from '../types';
+
+import { TableActions } from './TableActions';
+import { useColumns } from './columns';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+const storageKey = 'docker-volumes';
+const store = createPersistedStore<TableSettings>(
+  storageKey,
+  undefined,
+  (set) => ({
+    ...refreshableSettings(set),
+  })
+);
+
+export function VolumesDatatable({
+  dataset,
+  onRemove,
+  onRefresh,
+  isBrowseVisible,
+}: {
+  dataset?: Array<DecoratedVolume>;
+  onRemove(items: Array<DecoratedVolume>): void;
+  onRefresh(): Promise<void>;
+  isBrowseVisible: boolean;
+}) {
+  const tableState = useTableState(store, storageKey);
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+  const columns = useColumns();
+
+  return (
+    <Datatable
+      title="Volumes"
+      titleIcon={Database}
+      columns={columns}
+      dataset={dataset || []}
+      isLoading={!dataset}
+      settingsManager={tableState}
+      emptyContentLabel="No volume available."
+      renderTableActions={(selectedItems) => (
+        <TableActions selectedItems={selectedItems} onRemove={onRemove} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={(value) => tableState.setAutoRefreshRate(value)}
+          />
+        </TableSettingsMenu>
+      )}
+      extendTableOptions={withMeta({
+        table: 'volumes',
+        isBrowseVisible,
+      })}
+    />
+  );
+}

app/react/docker/volumes/ListView/VolumesDatatable/columns/helper.ts

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

app/react/docker/volumes/ListView/VolumesDatatable/columns/index.ts

@@ -0,0 +1,48 @@
+import _ from 'lodash';
+import { useMemo } from 'react';
+
+import { useIsSwarm } from '@/react/docker/proxy/queries/useInfo';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { createOwnershipColumn } from '@/react/docker/components/datatable/createOwnershipColumn';
+import { isoDate, truncateLeftRight } from '@/portainer/filters/filters';
+
+import { DecoratedVolume } from '../../types';
+
+import { columnHelper } from './helper';
+import { name } from './name';
+
+export function useColumns() {
+  const environmentId = useEnvironmentId();
+  const isSwarm = useIsSwarm(environmentId);
+
+  return useMemo(
+    () =>
+      _.compact([
+        name,
+        columnHelper.accessor((item) => item.StackName || '-', {
+          header: 'Stack',
+        }),
+        columnHelper.accessor((item) => item.Driver, {
+          header: 'Driver',
+        }),
+        columnHelper.accessor((item) => item.Mountpoint, {
+          header: 'Mount point',
+          cell({ getValue }) {
+            return truncateLeftRight(getValue());
+          },
+        }),
+        columnHelper.accessor((item) => item.CreatedAt, {
+          header: 'Created',
+          cell({ getValue }) {
+            return isoDate(getValue());
+          },
+        }),
+        isSwarm &&
+          columnHelper.accessor((item) => item.NodeName || '-', {
+            header: 'Host',
+          }),
+        createOwnershipColumn<DecoratedVolume>(),
+      ]),
+    [isSwarm]
+  );
+}

app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx

@@ -0,0 +1,102 @@
+import { CellContext, Column } from '@tanstack/react-table';
+import { Search } from 'lucide-react';
+
+import { truncate } from '@/portainer/filters/filters';
+import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
+import { Authorized } from '@/react/hooks/useUser';
+
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { MultipleSelectionFilter } from '@@/datatables/Filter';
+
+import { DecoratedVolume } from '../../types';
+import { getTableMeta } from '../tableMeta';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Id', {
+  id: 'name',
+  header: 'Name',
+  cell: Cell,
+  enableColumnFilter: true,
+  filterFn: (
+    { original: { dangling } },
+    columnId,
+    filterValue: Array<'Used' | 'Unused'>
+  ) => {
+    if (filterValue.length === 0) {
+      return true;
+    }
+
+    if (filterValue.includes('Used') && !dangling) {
+      return true;
+    }
+
+    if (filterValue.includes('Unused') && dangling) {
+      return true;
+    }
+
+    return false;
+  },
+  meta: {
+    filter: FilterByUsage,
+  },
+});
+
+function FilterByUsage<TData extends { Used: boolean }>({
+  column: { getFilterValue, setFilterValue, id },
+}: {
+  column: Column<TData>;
+}) {
+  const options = ['Used', 'Unused'];
+
+  const value = getFilterValue();
+
+  const valueAsArray = getValueAsArrayOfStrings(value);
+
+  return (
+    <MultipleSelectionFilter
+      options={options}
+      filterKey={id}
+      value={valueAsArray}
+      onChange={setFilterValue}
+      menuTitle="Filter by usage"
+    />
+  );
+}
+
+function Cell({
+  getValue,
+  row: { original: item },
+  table: {
+    options: { meta },
+  },
+}: CellContext<DecoratedVolume, string>) {
+  const { isBrowseVisible } = getTableMeta(meta);
+  const name = getValue();
+
+  return (
+    <>
+      <Link
+        to=".volume"
+        params={{
+          id: item.Id,
+          nodeName: item.NodeName,
+        }}
+        className="monospaced"
+      >
+        {truncate(name, 40)}
+      </Link>
+      {isBrowseVisible && (
+        <Authorized authorizations="DockerAgentBrowseList">
+          <Button icon={Search} color="primary" size="xsmall" as={Link}>
+            browse
+          </Button>
+        </Authorized>
+      )}
+      {item.dangling && (
+        <span className="label label-warning image-tag ml-2">Unused</span>
+      )}
+    </>
+  );
+}

app/react/docker/volumes/ListView/VolumesDatatable/index.ts

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

app/react/docker/volumes/ListView/VolumesDatatable/tableMeta.ts

@@ -0,0 +1,23 @@
+import { TableMeta as BaseTableMeta } from '@tanstack/react-table';
+
+import { VolumeViewModel } from '@/docker/models/volume';
+
+interface TableMeta {
+  isBrowseVisible: boolean;
+  table: 'volumes';
+}
+
+function isTableMeta(meta: BaseTableMeta<VolumeViewModel>): meta is TableMeta {
+  return meta.table === 'volumes';
+}
+
+export function getTableMeta(meta?: BaseTableMeta<VolumeViewModel>): TableMeta {
+  if (!meta || !isTableMeta(meta)) {
+    return {
+      isBrowseVisible: false,
+      table: 'volumes',
+    };
+  }
+
+  return meta;
+}

app/react/docker/volumes/ListView/types.ts

@@ -0,0 +1,3 @@
+import { VolumeViewModel } from '@/docker/models/volume';
+
+export type DecoratedVolume = VolumeViewModel & { dangling: boolean };

app/react/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx

@@ -3,12 +3,13 @@ import { PropsWithChildren } from 'react';
 import _ from 'lodash';
 import { Info } from 'lucide-react';
 
-import { ownershipIcon, truncate } from '@/portainer/filters/filters';
+import { truncate } from '@/portainer/filters/filters';
 import { UserId } from '@/portainer/users/types';
 import { TeamId } from '@/react/portainer/users/teams/types';
 import { useTeams } from '@/react/portainer/users/teams/queries';
 import { useUsers } from '@/portainer/users/queries';
 import { pluralize } from '@/portainer/helpers/strings';
+import { ownershipIcon } from '@/react/docker/components/datatable/createOwnershipColumn';
 
 import { Link } from '@@/Link';
 import { Tooltip } from '@@/Tip/Tooltip';

app/react/portainer/access-control/EditDetails/useOptions.tsx

@@ -2,8 +2,8 @@ import _ from 'lodash';
 import { useEffect, useState } from 'react';
 
 import { buildOption } from '@/portainer/components/BoxSelector';
-import { ownershipIcon } from '@/portainer/filters/filters';
 import { Team } from '@/react/portainer/users/teams/types';
+import { ownershipIcon } from '@/react/docker/components/datatable/createOwnershipColumn';
 
 import { BoxSelectorOption } from '@@/BoxSelector/types';
 import { BadgeIcon } from '@@/BadgeIcon';
@@ -16,7 +16,7 @@ const publicOption: BoxSelectorOption<ResourceControlOwnership> = {
   id: 'access_public',
   description:
     'I want any user with access to this environment to be able to manage this resource',
-  icon: <BadgeIcon icon={ownershipIcon('public')} />,
+  icon: <BadgeIcon icon={ownershipIcon(ResourceControlOwnership.PUBLIC)} />,
 };
 
 export function useOptions(
@@ -41,14 +41,16 @@ function adminOptions() {
   return [
     buildOption(
       'access_administrators',
-      <BadgeIcon icon={ownershipIcon('administrators')} />,
+      <BadgeIcon
+        icon={ownershipIcon(ResourceControlOwnership.ADMINISTRATORS)}
+      />,
       'Administrators',
       'I want to restrict the management of this resource to administrators only',
       ResourceControlOwnership.ADMINISTRATORS
     ),
     buildOption(
       'access_restricted',
-      <BadgeIcon icon={ownershipIcon('restricted')} />,
+      <BadgeIcon icon={ownershipIcon(ResourceControlOwnership.RESTRICTED)} />,
       'Restricted',
       'I want to restrict the management of this resource to a set of users and/or teams',
       ResourceControlOwnership.RESTRICTED
@@ -59,7 +61,7 @@ function nonAdminOptions(teams?: Team[]) {
   return _.compact([
     buildOption(
       'access_private',
-      <BadgeIcon icon={ownershipIcon('private')} />,
+      <BadgeIcon icon={ownershipIcon(ResourceControlOwnership.PRIVATE)} />,
       'Private',
       'I want to restrict this resource to be manageable by myself only',
       ResourceControlOwnership.PRIVATE
@@ -68,7 +70,7 @@ function nonAdminOptions(teams?: Team[]) {
       teams.length > 0 &&
       buildOption(
         'access_restricted',
-        <BadgeIcon icon={ownershipIcon('restricted')} />,
+        <BadgeIcon icon={ownershipIcon(ResourceControlOwnership.RESTRICTED)} />,
         'Restricted',
         teams.length === 1 ? (
           <>