refactor(env/groups): migrate list view to react [EE-4703] (#10671)

app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/EnvironmentGroupsDatatable.tsx

@@ -0,0 +1,32 @@
+import { Dice4 } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { useEnvironmentGroups } from '../../queries/useEnvironmentGroups';
+
+import { columns } from './columns';
+import { TableActions } from './TableActions';
+
+const tableKey = 'environment-groups';
+const store = createPersistedStore(tableKey);
+
+export function EnvironmentGroupsDatatable() {
+  const query = useEnvironmentGroups();
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable
+      columns={columns}
+      isLoading={query.isLoading}
+      dataset={query.data || []}
+      settingsManager={tableState}
+      title="Environment Groups"
+      titleIcon={Dice4}
+      renderTableActions={(selectedItems) => (
+        <TableActions selectedItems={selectedItems} />
+      )}
+    />
+  );
+}

app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/TableActions.tsx

@@ -0,0 +1,37 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { DeleteButton } from '@@/buttons/DeleteButton';
+import { AddButton } from '@@/buttons';
+
+import { EnvironmentGroup } from '../../types';
+
+import { useDeleteEnvironmentGroupsMutation } from './useDeleteEnvironmentGroupsMutation';
+
+export function TableActions({
+  selectedItems,
+}: {
+  selectedItems: EnvironmentGroup[];
+}) {
+  const deleteMutation = useDeleteEnvironmentGroupsMutation();
+
+  return (
+    <>
+      <DeleteButton
+        disabled={selectedItems.length === 0}
+        confirmMessage="Are you sure you want to remove the selected environment group(s)?"
+        onConfirmed={handleRemove}
+      />
+
+      <AddButton>Add group</AddButton>
+    </>
+  );
+
+  function handleRemove() {
+    const ids = selectedItems.map((item) => item.Id);
+    deleteMutation.mutate(ids, {
+      onSuccess() {
+        notifySuccess('Success', 'Environment Group(s) removed');
+      },
+    });
+  }
+}

app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/columns.tsx

@@ -0,0 +1,36 @@
+import { CellContext, createColumnHelper } from '@tanstack/react-table';
+import { Users } from 'lucide-react';
+
+import { buildNameColumn } from '@@/datatables/buildNameColumn';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+
+import { EnvironmentGroup } from '../../types';
+
+const columnHelper = createColumnHelper<EnvironmentGroup>();
+
+export const columns = [
+  buildNameColumn<EnvironmentGroup>('Name', '.group'),
+  columnHelper.display({
+    header: 'Actions',
+    cell: ActionsCell,
+  }),
+];
+
+function ActionsCell({
+  row: { original: item },
+}: CellContext<EnvironmentGroup, unknown>) {
+  return (
+    <Button
+      as={Link}
+      props={{
+        to: '.group.access',
+        params: { id: item.Id },
+      }}
+      color="link"
+      icon={Users}
+    >
+      Manage access
+    </Button>
+  );
+}

app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/index.ts

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

app/react/portainer/environments/environment-groups/ListView/EnvironmentGroupsDatatable/useDeleteEnvironmentGroupsMutation.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { withError, withInvalidate } from '@/react-tools/react-query';
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { EnvironmentGroup } from '../../types';
+import { buildUrl } from '../../queries/build-url';
+import { queryKeys } from '../../queries/query-keys';
+
+export function useDeleteEnvironmentGroupsMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteEnvironmentGroups,
+    ...withError('Failed to delete environment groups'),
+    ...withInvalidate(queryClient, [queryKeys.base()]),
+  });
+}
+
+async function deleteEnvironmentGroups(
+  environmentGroupIds: Array<EnvironmentGroup['Id']>
+) {
+  return promiseSequence(
+    environmentGroupIds.map(
+      (environmentGroupId) => () => deleteEnvironmentGroup(environmentGroupId)
+    )
+  );
+}
+
+async function deleteEnvironmentGroup(id: EnvironmentGroup['Id']) {
+  try {
+    await axios.delete(buildUrl(id));
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to delete environment group');
+  }
+}

app/react/portainer/environments/environment-groups/ListView/ListView.tsx

@@ -0,0 +1,17 @@
+import { PageHeader } from '@@/PageHeader';
+
+import { EnvironmentGroupsDatatable } from './EnvironmentGroupsDatatable';
+
+export function ListView() {
+  return (
+    <>
+      <PageHeader
+        title="Environment Groups"
+        breadcrumbs="Environment group management"
+        reload
+      />
+
+      <EnvironmentGroupsDatatable />
+    </>
+  );
+}

app/react/portainer/environments/environment-groups/ListView/index.ts

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

app/react/portainer/environments/environment-groups/queries/useEnvironmentGroups.ts

@@ -0,0 +1,24 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { EnvironmentGroup } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export function useEnvironmentGroups() {
+  return useQuery({
+    queryKey: queryKeys.base(),
+    queryFn: () => getEnvironmentGroups(),
+  });
+}
+
+async function getEnvironmentGroups() {
+  try {
+    const { data } = await axios.get<Array<EnvironmentGroup>>(buildUrl());
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get access tokens');
+  }
+}