refactor(registries): migrate gitlab projects table to react [EE-4709] (#10792)

app/react/portainer/registries/CreateView/GitlabProjectsTable/GitlabProjectsTable.tsx

@@ -0,0 +1,51 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { ListIcon } from 'lucide-react';
+
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { Datatable } from '@@/datatables';
+import { withControlledSelected } from '@@/datatables/extend-options/withControlledSelected';
+
+import { RegistryGitlabProject } from '../../types/gitlabProject';
+
+const helper = createColumnHelper<RegistryGitlabProject>();
+
+const columns = [
+  helper.accessor('Namespace', {}),
+  helper.accessor('Name', {}),
+  helper.accessor('PathWithNamespace', {
+    header: 'Path with namespace',
+  }),
+  helper.accessor('Description', {}),
+];
+
+const tableKey = 'gitlab-projects';
+const store = createPersistedStore(tableKey, 'Name');
+
+export function GitlabProjectTable({
+  dataset,
+  value,
+  onChange,
+}: {
+  dataset: RegistryGitlabProject[];
+  value: RegistryGitlabProject[];
+  onChange: (value: RegistryGitlabProject[]) => void;
+}) {
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable
+      columns={columns}
+      dataset={dataset}
+      settingsManager={tableState}
+      emptyContentLabel="No projects available."
+      title="Gitlab projects"
+      titleIcon={ListIcon}
+      extendTableOptions={withControlledSelected(
+        (ids) => onChange(dataset.filter(({ Id }) => ids.includes(`${Id}`))),
+        value.map(({ Id }) => `${Id}`)
+      )}
+      isRowSelectable={({ original: item }) => item.RegistryEnabled}
+    />
+  );
+}

app/react/portainer/registries/types/gitlabProject.ts

@@ -0,0 +1,33 @@
+interface GitlabProjectResponse {
+  id: number;
+  name: string;
+  description: string;
+  namespace?: {
+    name: string;
+  };
+  path_with_namespace: string;
+  container_registry_enabled: boolean;
+}
+
+export class RegistryGitlabProject {
+  Id: number;
+
+  Description: string;
+
+  Name: string;
+
+  Namespace: string;
+
+  PathWithNamespace: string;
+
+  RegistryEnabled: boolean;
+
+  constructor(project: GitlabProjectResponse) {
+    this.Id = project.id;
+    this.Description = project.description;
+    this.Name = project.name;
+    this.Namespace = project.namespace ? project.namespace.name : '';
+    this.PathWithNamespace = project.path_with_namespace;
+    this.RegistryEnabled = project.container_registry_enabled;
+  }
+}