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

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>
+      )}
+    </>
+  );
+}