refactor(edge/groups): migrate view to react [EE-4683] (#10592)

app/react/edge/edge-groups/ListView/EdgeGroupsDatatable.tsx

@@ -0,0 +1,37 @@
+import { LayoutGrid } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { useTableState } from '@@/datatables/useTableState';
+import { createPersistedStore } from '@@/datatables/types';
+
+import { useEdgeGroups } from '../queries/useEdgeGroups';
+
+import { columns } from './columns';
+import { TableActions } from './TableActions';
+
+const tableKey = 'edge-groups';
+
+const settingsStore = createPersistedStore(tableKey);
+
+export function EdgeGroupsDatatable() {
+  const tableState = useTableState(settingsStore, tableKey);
+  const edgeGroupsQuery = useEdgeGroups();
+
+  return (
+    <Datatable
+      title="Edge Groups"
+      titleIcon={LayoutGrid}
+      columns={columns}
+      dataset={edgeGroupsQuery.data || []}
+      settingsManager={tableState}
+      emptyContentLabel="No Edge group available."
+      isLoading={edgeGroupsQuery.isLoading}
+      renderTableActions={(selectedItems) => (
+        <TableActions selectedItems={selectedItems} />
+      )}
+      isRowSelectable={({ original: item }) =>
+        !(item.HasEdgeStack || item.HasEdgeJob || item.HasEdgeConfig)
+      }
+    />
+  );
+}

app/react/edge/edge-groups/ListView/ListView.tsx

@@ -0,0 +1,12 @@
+import { PageHeader } from '@@/PageHeader';
+
+import { EdgeGroupsDatatable } from './EdgeGroupsDatatable';
+
+export function ListView() {
+  return (
+    <>
+      <PageHeader title="Edge Groups" breadcrumbs="Edge Groups" reload />
+      <EdgeGroupsDatatable />
+    </>
+  );
+}

app/react/edge/edge-groups/ListView/TableActions.tsx

@@ -0,0 +1,37 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { AddButton } from '@@/buttons';
+import { DeleteButton } from '@@/buttons/DeleteButton';
+
+import { EdgeGroup } from '../types';
+
+import { useDeleteEdgeGroupsMutation } from './useDeleteEdgeGroupMutation';
+
+export function TableActions({
+  selectedItems,
+}: {
+  selectedItems: Array<EdgeGroup>;
+}) {
+  const removeMutation = useDeleteEdgeGroupsMutation();
+
+  return (
+    <div className="flex items-center gap-2">
+      <DeleteButton
+        confirmMessage="Do you want to remove the selected Edge Group(s)?"
+        disabled={selectedItems.length === 0}
+        onConfirmed={() => handleRemove(selectedItems)}
+      />
+
+      <AddButton>Add Edge group</AddButton>
+    </div>
+  );
+
+  async function handleRemove(selectedItems: Array<EdgeGroup>) {
+    const ids = selectedItems.map((item) => item.Id);
+    removeMutation.mutate(ids, {
+      onSuccess: () => {
+        notifySuccess('Success', 'Edge Group(s) removed');
+      },
+    });
+  }
+}

app/react/edge/edge-groups/ListView/columns/helper.ts

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

app/react/edge/edge-groups/ListView/columns/index.ts

@@ -0,0 +1,13 @@
+import { columnHelper } from './helper';
+import { name } from './name';
+
+export const columns = [
+  name,
+  columnHelper.accessor((group) => group.TrustedEndpoints.length, {
+    header: 'Environments Count',
+  }),
+  columnHelper.accessor('Dynamic', {
+    header: 'Group Type',
+    cell: ({ getValue }) => (getValue() ? 'Dynamic' : 'Static'),
+  }),
+];

app/react/edge/edge-groups/ListView/columns/name.tsx

@@ -0,0 +1,34 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { Link } from '@@/Link';
+
+import { EdgeGroupListItemResponse } from '../../queries/useEdgeGroups';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Name', {
+  header: 'Name',
+  cell: NameCell,
+});
+
+function NameCell({
+  renderValue,
+  row: { original: item },
+}: CellContext<EdgeGroupListItemResponse, unknown>) {
+  const name = renderValue() || '';
+
+  if (typeof name !== 'string') {
+    return null;
+  }
+
+  return (
+    <>
+      <Link to=".edit" params={{ groupId: item.Id }} title={name}>
+        {name}
+      </Link>
+      {(item.HasEdgeJob || item.HasEdgeStack) && (
+        <span className="label label-info image-tag space-left">in use</span>
+      )}
+    </>
+  );
+}

app/react/edge/edge-groups/ListView/index.ts

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

app/react/edge/edge-groups/ListView/useDeleteEdgeGroupMutation.ts

@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import {
+  mutationOptions,
+  withError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+
+import { EdgeGroup } from '../types';
+import { buildUrl } from '../queries/build-url';
+import { queryKeys } from '../queries/query-keys';
+
+export function useDeleteEdgeGroupsMutation() {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (edgeGroupIds: Array<EdgeGroup['Id']>) =>
+      promiseSequence(
+        edgeGroupIds.map((edgeGroupId) => () => deleteEdgeGroup(edgeGroupId))
+      ),
+    mutationOptions(
+      withError('Unable to delete Edge Group(s)'),
+      withInvalidate(queryClient, [queryKeys.base()])
+    )
+  );
+}
+
+async function deleteEdgeGroup(id: EdgeGroup['Id']) {
+  try {
+    await axios.delete(buildUrl({ id }));
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to delete edge Group');
+  }
+}