refactor(rbac): migrate roles table to react [EE-4711] (#10772)

app/portainer/rbac/components/roles-datatable/index.js

@@ -1,14 +0,0 @@
-import controller from './roles-datatable.controller';
-import './roles-datatable.css';
-
-export const rolesDatatable = {
-  templateUrl: './roles-datatable.html',
-  controller,
-  bindings: {
-    titleText: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-  },
-};

app/portainer/rbac/components/roles-datatable/roles-datatable.controller.js

@@ -1,15 +0,0 @@
-import angular from 'angular';
-import { RoleTypes } from '../../models/role';
-
-export default class RolesDatatableController {
-  /* @ngInject */
-  constructor($controller, $scope) {
-    this.limitedFeature = 'rbac-roles';
-
-    angular.extend(this, $controller('GenericDatatableController', { $scope }));
-  }
-
-  isDefaultItem(item) {
-    return item.ID === RoleTypes.STANDARD;
-  }
-}

app/portainer/rbac/components/roles-datatable/roles-datatable.css

@@ -1,7 +0,0 @@
-th.be-visual-indicator-col {
-  width: 300px;
-}
-
-td.be-visual-indicator-col {
-  text-align: center;
-}

app/portainer/rbac/components/roles-datatable/roles-datatable.html

@@ -1,92 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="'file-code'"></pr-icon>
-          </div>
-          {{ $ctrl.titleText }}
-        </div>
-        <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" class="vertical-center"></pr-icon>
-          <input
-            type="text"
-            class="searchInput ml-1"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search..."
-            auto-focus
-            ng-model-options="{ debounce: 300 }"
-          />
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Description'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Description'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Description' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Description')"
-                ></table-column-header>
-              </th>
-              <th class="be-visual-indicator-col"></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))"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>{{ item.Name }}</td>
-              <td>{{ item.Description }}</td>
-              <td class="be-visual-indicator-col" ng-switch on="$ctrl.isDefaultItem(item)">
-                <span ng-switch-when="false">
-                  <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
-                </span>
-                <b ng-switch-when="true">Default</b>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-muted text-center">No role available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>

app/portainer/rbac/index.js

@@ -1,7 +1,6 @@
 import { AccessHeaders } from '../authorization-guard';
 import { rolesView } from './views/roles';
 import { accessViewer } from './components/access-viewer';
-import { rolesDatatable } from './components/roles-datatable';
 
 import { RoleService } from './services/role.service';
 import { RolesFactory } from './services/role.rest';
@@ -10,7 +9,6 @@ angular
   .module('portainer.rbac', ['ngResource'])
   .constant('API_ENDPOINT_ROLES', 'api/roles')
   .component('accessViewer', accessViewer)
-  .component('rolesDatatable', rolesDatatable)
   .component('rolesView', rolesView)
   .factory('RoleService', RoleService)
   .factory('Roles', RolesFactory)

app/portainer/rbac/views/roles/roles.html

@@ -1,10 +1,6 @@
 <page-header title="'Roles'" breadcrumbs="['Role management']" reload="true"> </page-header>
 
-<div class="row">
+<rbac-roles-datatable dataset="$ctrl.roles"></rbac-roles-datatable>
-  <div class="col-sm-12">
-    <roles-datatable title-text="Roles" dataset="$ctrl.roles" table-key="roles"></roles-datatable>
-  </div>
-</div>
 
 <div class="row">
   <access-viewer> </access-viewer>

app/portainer/react/components/users.ts

@@ -5,6 +5,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
 import { UsersDatatable } from '@/react/portainer/users/ListView/UsersDatatable/UsersDatatable';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { EffectiveAccessViewerDatatable } from '@/react/portainer/users/RolesView/AccessViewer/EffectiveAccessViewerDatatable';
+import { RbacRolesDatatable } from '@/react/portainer/users/RolesView/RbacRolesDatatable';
 
 export const usersModule = angular
   .module('portainer.app.react.components.users', [])
@@ -17,4 +18,5 @@ export const usersModule = angular
     r2a(withUIRouter(withCurrentUser(EffectiveAccessViewerDatatable)), [
       'dataset',
     ])
-  ).name;
+  )
+  .component('rbacRolesDatatable', r2a(RbacRolesDatatable, ['dataset'])).name;

app/react/portainer/users/RolesView/RbacRolesDatatable.tsx

@@ -0,0 +1,68 @@
+import { FileCode } from 'lucide-react';
+import { createColumnHelper } from '@tanstack/react-table';
+import _ from 'lodash';
+
+import { RoleTypes } from '@/portainer/rbac/models/role';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
+
+import { isBE } from '../../feature-flags/feature-flags.service';
+import { FeatureId } from '../../feature-flags/enums';
+
+import { RbacRole } from './types';
+
+const tableKey = 'rbac-roles-table';
+
+const store = createPersistedStore(tableKey);
+
+const columns = getColumns();
+
+export function RbacRolesDatatable({
+  dataset,
+}: {
+  dataset: Array<RbacRole> | undefined;
+}) {
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable
+      title="Roles"
+      titleIcon={FileCode}
+      dataset={dataset || []}
+      columns={columns}
+      isLoading={!dataset}
+      emptyContentLabel="No role available."
+      settingsManager={tableState}
+      disableSelect
+    />
+  );
+}
+
+function getColumns() {
+  const columnHelper = createColumnHelper<RbacRole>();
+
+  return _.compact([
+    columnHelper.accessor('Name', {
+      header: 'Name',
+    }),
+    columnHelper.accessor('Description', {
+      header: 'Description',
+    }),
+    !isBE &&
+      columnHelper.display({
+        id: 'be-indicator',
+        cell: ({ row: { original: item } }) =>
+          item.Id === RoleTypes.STANDARD ? (
+            <b>Default</b>
+          ) : (
+            <BEFeatureIndicator featureId={FeatureId.RBAC_ROLES} />
+          ),
+        meta: {
+          className: 'text-center',
+        },
+      }),
+  ]);
+}