refactor(docker/networks): migrate macvlan nodes selector to react [EE-4669] (#10183)

app/react/docker/networks/CreateView/MacvlanNodesSelector/MacvlanNodesSelector.tsx

@@ -0,0 +1,55 @@
+import { HardDrive } from 'lucide-react';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { withControlledSelected } from '@@/datatables/extend-options/withControlledSelected';
+
+import { useColumns } from './columns';
+
+const tableKey = 'macvlan-nodes-selector';
+const store = createPersistedStore(tableKey);
+
+export function MacvlanNodesSelector({
+  dataset,
+  isIpColumnVisible,
+  haveAccessToNode,
+  value,
+  onChange,
+}: {
+  dataset?: Array<NodeViewModel>;
+  isIpColumnVisible: boolean;
+  haveAccessToNode: boolean;
+  value: Array<NodeViewModel>;
+  onChange(value: Array<NodeViewModel>): void;
+}) {
+  const columns = useColumns(isIpColumnVisible);
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable<NodeViewModel>
+      title="Select the nodes where you want to deploy the local configuration"
+      titleIcon={HardDrive}
+      columns={columns}
+      dataset={dataset || []}
+      isLoading={!dataset}
+      emptyContentLabel="No node available"
+      settingsManager={tableState}
+      extendTableOptions={mergeOptions(
+        withMeta({
+          table: 'macvlan-nodes',
+          haveAccessToNode,
+        }),
+        withControlledSelected(
+          (ids) =>
+            onChange(dataset?.filter((n) => n.Id && ids.includes(n.Id)) || []),
+          value.map((n) => n.Id || '')
+        )
+      )}
+    />
+  );
+}

app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/column-helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+export const columnHelper = createColumnHelper<NodeViewModel>();

app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/index.ts

@@ -0,0 +1,20 @@
+import _ from 'lodash';
+
+import { columnHelper } from './column-helper';
+import { name } from './name';
+import { status } from './status';
+
+export function useColumns(isIpColumnVisible: boolean) {
+  return _.compact([
+    name,
+    columnHelper.accessor('Role', {}),
+    columnHelper.accessor('EngineVersion', {
+      header: 'Engine',
+    }),
+    isIpColumnVisible &&
+      columnHelper.accessor('Addr', {
+        header: 'IP Address',
+      }),
+    status,
+  ]);
+}

app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/name.tsx

@@ -0,0 +1,38 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+import { Link } from '@@/Link';
+
+import { isTableMeta } from '../types';
+
+import { columnHelper } from './column-helper';
+
+export const name = columnHelper.accessor('Hostname', {
+  header: 'Name',
+  cell: Cell,
+});
+
+function Cell({
+  getValue,
+  row: { original: item },
+  table: {
+    options: { meta },
+  },
+}: CellContext<NodeViewModel, NodeViewModel['Hostname']>) {
+  if (!isTableMeta(meta)) {
+    throw new Error('Invalid table meta');
+  }
+
+  const value = getValue();
+
+  if (!meta.haveAccessToNode) {
+    return <>{value}</>;
+  }
+
+  return (
+    <Link to="docker.nodes.node" params={{ id: item.Id }}>
+      {value}
+    </Link>
+  );
+}

app/react/docker/networks/CreateView/MacvlanNodesSelector/columns/status.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+
+import { nodeStatusBadge } from '@/docker/filters/utils';
+
+import { columnHelper } from './column-helper';
+
+export const status = columnHelper.accessor('Status', {
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return (
+      <span className={clsx('label', `label-${nodeStatusBadge(value)}`)}>
+        {value}
+      </span>
+    );
+  },
+});

app/react/docker/networks/CreateView/MacvlanNodesSelector/types.ts

@@ -0,0 +1,14 @@
+import { TableMeta as BaseTableMeta } from '@tanstack/react-table';
+
+import { NodeViewModel } from '@/docker/models/node';
+
+export type TableMeta = BaseTableMeta<NodeViewModel> & {
+  table: 'macvlan-nodes';
+  haveAccessToNode: boolean;
+};
+
+export function isTableMeta(
+  meta?: BaseTableMeta<NodeViewModel>
+): meta is TableMeta {
+  return !!meta && meta.table === 'macvlan-nodes';
+}