From a00cb951bce0e3ef51dc8167dd5ee5cd628578f5 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Mon, 8 Apr 2024 17:23:12 +0300
Subject: [PATCH] refactor(kube/registries): migrate access table to react
 [EE-4706] (#10688)

---
 app/kubernetes/react/components/index.ts      |  2 +
 .../react/components/registries.tsx           | 11 +++
 .../kube-registry-access-view.controller.js   |  7 +-
 .../kube-registry-access-view.html            | 16 +---
 .../datatables/strings-datatable/index.js     | 20 -----
 .../strings-datatable/strings-datatable.html  | 83 -------------------
 .../RegistryAccessView/AccessTable.tsx        | 58 +++++++++++++
 .../ConfirmDeleteAccess.tsx                   | 19 -----
 8 files changed, 74 insertions(+), 142 deletions(-)
 create mode 100644 app/kubernetes/react/components/registries.tsx
 delete mode 100644 app/portainer/components/datatables/strings-datatable/index.js
 delete mode 100644 app/portainer/components/datatables/strings-datatable/strings-datatable.html
 create mode 100644 app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
 delete mode 100644 app/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess.tsx

diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts
index 0ced94eda..ef5b20eab 100644
--- a/app/kubernetes/react/components/index.ts
+++ b/app/kubernetes/react/components/index.ts
@@ -66,6 +66,7 @@ import { applicationsModule } from './applications';
 import { volumesModule } from './volumes';
 import { namespacesModule } from './namespaces';
 import { clusterManagementModule } from './clusterManagement';
+import { registriesModule } from './registries';
 
 export const ngModule = angular
   .module('portainer.kubernetes.react.components', [
@@ -73,6 +74,7 @@ export const ngModule = angular
     volumesModule,
     namespacesModule,
     clusterManagementModule,
+    registriesModule,
   ])
   .component(
     'ingressClassDatatable',
diff --git a/app/kubernetes/react/components/registries.tsx b/app/kubernetes/react/components/registries.tsx
new file mode 100644
index 000000000..4b28686ca
--- /dev/null
+++ b/app/kubernetes/react/components/registries.tsx
@@ -0,0 +1,11 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { AccessTable } from '@/react/kubernetes/cluster/RegistryAccessView/AccessTable';
+
+export const registriesModule = angular
+  .module('portainer.kubernetes.react.components.registries', [])
+  .component(
+    'kubeRegistryAccessTable',
+    r2a(AccessTable, ['dataset', 'onRemove'])
+  ).name;
diff --git a/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.controller.js b/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.controller.js
index facae44f0..6a80fa5c8 100644
--- a/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.controller.js
+++ b/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.controller.js
@@ -1,5 +1,4 @@
 import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
-import { confirmDeleteAccess } from '@/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess';
 
 export default class KubernetesRegistryAccessController {
   /* @ngInject */
@@ -32,11 +31,7 @@ export default class KubernetesRegistryAccessController {
     const removeNamespaces = namespaces.map(({ value }) => value);
     const nsToUpdate = this.savedResourcePools.map(({ value }) => value).filter((value) => !removeNamespaces.includes(value));
 
-    confirmDeleteAccess().then((confirmed) => {
-      if (confirmed) {
-        return this.updateNamespaces(nsToUpdate);
-      }
-    });
+    return this.updateNamespaces(nsToUpdate);
   }
 
   updateNamespaces(namespaces) {
diff --git a/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.html b/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.html
index df999b9db..11184ae0f 100644
--- a/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.html
+++ b/app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.html
@@ -48,17 +48,5 @@
     </rd-widget>
   </div>
 </div>
-<div class="row">
-  <div class="col-sm-12">
-    <strings-datatable
-      title-text="Access"
-      title-icon="user-x"
-      table-key="access_registry_resourcepools"
-      dataset="$ctrl.savedResourcePools"
-      empty-dataset-message="No namespace has been authorized yet."
-      on-remove="($ctrl.handleRemove)"
-      column-header="Namespace"
-    >
-    </strings-datatable>
-  </div>
-</div>
+
+<kube-registry-access-table dataset="$ctrl.savedResourcePools" on-remove="($ctrl.handleRemove)"></kube-registry-access-table>
diff --git a/app/portainer/components/datatables/strings-datatable/index.js b/app/portainer/components/datatables/strings-datatable/index.js
deleted file mode 100644
index dda9fa5fd..000000000
--- a/app/portainer/components/datatables/strings-datatable/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import angular from 'angular';
-// import controller from './strings-datatable.controller.js';
-
-export const stringsDatatable = {
-  templateUrl: './strings-datatable.html',
-  controller: 'GenericDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    emptyDatasetMessage: '@',
-
-    columnHeader: '@',
-    tableKey: '@',
-
-    onRemove: '<',
-  },
-};
-
-angular.module('portainer.app').component('stringsDatatable', stringsDatatable);
diff --git a/app/portainer/components/datatables/strings-datatable/strings-datatable.html b/app/portainer/components/datatables/strings-datatable/strings-datatable.html
deleted file mode 100644
index ca723b4e4..000000000
--- a/app/portainer/components/datatables/strings-datatable/strings-datatable.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <div class="toolBar vertical-center relative w-full flex-wrap !gap-x-5 !gap-y-1">
-      <div class="toolBarTitle vertical-center">
-        <div class="widget-icon space-right">
-          <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-        </div>
-
-        {{ $ctrl.titleText }}
-      </div>
-      <div class="searchBar vertical-center">
-        <pr-icon icon="'search'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="actionBar">
-        <button
-          type="button"
-          class="btn btn-sm btn-dangerlight vertical-center"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.onRemove($ctrl.state.selectedItems)"
-        >
-          <pr-icon icon="'trash-2'"></pr-icon>Remove
-        </button>
-      </div>
-    </div>
-    <rd-widget-body classes="no-padding">
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <div class="vertical-center">
-                  <span class="md-checkbox">
-                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                    <label for="select_all"></label>
-                  </span>
-                  <table-column-header
-                    col-title="$ctrl.columnHeader"
-                    can-sort="true"
-                    is-sorted="$ctrl.state.orderBy === 'Name'"
-                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                    ng-click="$ctrl.changeOrderBy('Name')"
-                    style="display: inline-block"
-                  ></table-column-header>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit)) track by $index"
-              ng-class="{ active: $ctrl.state.selectedItems.includes(item) }"
-            >
-              <td>
-                <span class="md-checkbox">
-                  <input
-                    id="select_{{ $index }}"
-                    type="checkbox"
-                    ng-checked="$ctrl.state.selectedItems.includes(item)"
-                    ng-disabled="$ctrl.disableRemove(item)"
-                    ng-click="$ctrl.selectItem(item, $event)"
-                  />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                {{ item.value }}
-              </td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td class="text-muted text-center">{{ $ctrl.emptyDatasetMessage }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>
diff --git a/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx b/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
new file mode 100644
index 000000000..714c02042
--- /dev/null
+++ b/app/react/kubernetes/cluster/RegistryAccessView/AccessTable.tsx
@@ -0,0 +1,58 @@
+import { UserX } from 'lucide-react';
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { DeleteButton } from '@@/buttons/DeleteButton';
+
+type Item = { value: string };
+
+const columnHelper = createColumnHelper<Item>();
+
+const columns = [
+  columnHelper.accessor('value', {
+    header: 'Namespace',
+  }),
+];
+
+const tableKey = 'kube-access-table';
+
+const store = createPersistedStore(tableKey);
+
+export function AccessTable({
+  dataset,
+  onRemove,
+}: {
+  dataset: Array<Item>;
+  onRemove: (selectedItems: Array<Item>) => void;
+}) {
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable
+      title="Access"
+      titleIcon={UserX}
+      dataset={dataset}
+      columns={columns}
+      emptyContentLabel="No namespace has been authorized yet."
+      settingsManager={tableState}
+      renderTableActions={(selectedItems) => (
+        <DeleteButton
+          disabled={selectedItems.length === 0}
+          confirmMessage={
+            <>
+              <p>
+                This registry might be used by one or more applications inside
+                this environment. Removing the registry access could lead to a
+                service interruption for these applications.
+              </p>
+              <p>Are you sure you wish to continue?</p>
+            </>
+          }
+          onConfirmed={() => onRemove(selectedItems)}
+        />
+      )}
+    />
+  );
+}
diff --git a/app/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess.tsx b/app/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess.tsx
deleted file mode 100644
index 96e1e03e1..000000000
--- a/app/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { confirmDestructive } from '@@/modals/confirm';
-import { buildConfirmButton } from '@@/modals/utils';
-
-export function confirmDeleteAccess() {
-  return confirmDestructive({
-    title: 'Are you sure?',
-    message: (
-      <>
-        <p>
-          This registry might be used by one or more applications inside this
-          environment. Removing the registry access could lead to a service
-          interruption for these applications.
-        </p>
-        <p>Are you sure you wish to continue?</p>
-      </>
-    ),
-    confirmButton: buildConfirmButton('Remove', 'danger'),
-  });
-}