refactor(rbac): migrate access table to react [EE-4710] (#10823)

app/portainer/components/access-datatable/accessDatatable.html

@@ -1,125 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <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'" class-name="'searchIcon'"></pr-icon>
-          <input
-            type="text"
-            data-cy="accessDatatable-searchInput"
-            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.removeAction($ctrl.state.selectedItems)"
-          >
-            <pr-icon icon="'trash-2'"></pr-icon>
-            Remove
-          </button>
-        </div>
-      </div>
-
-      <div class="small text-muted mx-4 mb-4">
-        <div class="" ng-if="$ctrl.inheritFrom">
-          Access tagged as <code>inherited</code> are inherited from the group access. They cannot be removed or modified at the environment level but they can be overridden.
-        </div>
-        <div class="" ng-if="$ctrl.inheritFrom"> Access tagged as <code>override</code> are overriding the group access for the related users/teams. </div>
-      </div>
-
-      <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()" data-cy="select-all-checkbox" />
-                    <label for="select_all"></label>
-                  </span>
-                  <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>
-                </div>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Type'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Type'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Type')"
-                ></table-column-header>
-              </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: item.Checked }"
-            >
-              <td>
-                <span class="md-checkbox">
-                  <input
-                    id="select_{{ $index }}"
-                    type="checkbox"
-                    ng-model="item.Checked"
-                    ng-disabled="$ctrl.disableRemove(item)"
-                    ng-click="$ctrl.selectItem(item, $event)"
-                    data-cy="select-checkbox"
-                  />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                {{ item.Name }}
-                <span ng-if="$ctrl.inheritFrom && item.Inherited" class="text-muted small" style="margin-left: 2px"><code style="font-size: 85% !important">inherited</code></span>
-                <span ng-if="$ctrl.inheritFrom && item.Override" class="text-muted small" style="margin-left: 2px"><code style="font-size: 85% !important">override</code></span>
-              </td>
-              <td>{{ item.Type }}</td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="4" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="4" class="text-muted text-center">No authorized users or teams.</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()" data-cy="component-paginationSelect">
-                <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/components/access-datatable/accessDatatable.js

@@ -1,16 +0,0 @@
-angular.module('portainer.app').component('accessDatatable', {
-  templateUrl: './accessDatatable.html',
-  controller: 'AccessDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    roles: '<',
-    tableKey: '@',
-    orderBy: '@',
-    removeAction: '<',
-    updateAction: '<',
-    reverseOrder: '<',
-    inheritFrom: '<',
-  },
-});

app/portainer/components/access-datatable/accessDatatableController.js

@@ -1,49 +0,0 @@
-angular.module('portainer.app').controller('AccessDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    this.disableRemove = function (item) {
-      return item.Inherited && this.inheritFrom;
-    };
-
-    this.allowSelection = function (item) {
-      return !this.disableRemove(item);
-    };
-
-    this.$onInit = function () {
-      this.setDefaults();
-      this.prepareTableFromDataset();
-
-      this.state.orderBy = this.orderBy;
-      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-      if (storedOrder !== null) {
-        this.state.reverseOrder = storedOrder.reverse;
-        this.state.orderBy = storedOrder.orderBy;
-      }
-
-      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      if (textFilter !== null) {
-        this.state.textFilter = textFilter;
-        this.onTextFilterChange();
-      }
-
-      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-      if (storedFilters !== null) {
-        this.filters = storedFilters;
-      }
-      if (this.filters && this.filters.state) {
-        this.filters.state.open = false;
-      }
-
-      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-      if (storedSettings !== null) {
-        this.settings = storedSettings;
-        this.settings.open = false;
-      }
-      this.onSettingsRepeaterChange();
-    };
-  },
-]);

app/portainer/components/accessManagement/porAccessManagement.html

@@ -62,23 +62,17 @@
     </rd-widget>
   </div>
 </div>
-<div class="row">
-  <div class="col-sm-12">
-    <access-datatable
-      ng-if="ctrl.authorizedUsersAndTeams"
-      title-text="Access"
-      title-icon="user-x"
-      table-key="{{ 'access_' + ctrl.entityType }}"
-      order-by="Name"
-      show-warning="ctrl.entityType !== 'registry'"
-      is-update-enabled="ctrl.entityType !== 'registry'"
-      show-roles="ctrl.entityType !== 'registry'"
-      roles="ctrl.roles"
-      inherit-from="ctrl.inheritFrom"
-      dataset="ctrl.authorizedUsersAndTeams"
-      update-action="ctrl.updateAction"
-      remove-action="ctrl.unauthorizeAccess"
-    >
-    </access-datatable>
-  </div>
-</div>
+
+<access-datatable
+  ng-if="ctrl.authorizedUsersAndTeams"
+  table-key="'access_' + ctrl.entityType"
+  show-warning="ctrl.entityType !== 'registry'"
+  is-update-enabled="ctrl.entityType !== 'registry'"
+  show-roles="ctrl.entityType !== 'registry'"
+  roles="ctrl.roles"
+  inherit-from="ctrl.inheritFrom"
+  dataset="ctrl.authorizedUsersAndTeams"
+  on-update="(ctrl.updateAction)"
+  on-remove="(ctrl.unauthorizeAccess)"
+>
+</access-datatable>

app/portainer/components/accessManagement/porAccessManagementController.js

@@ -23,12 +23,10 @@ class PorAccessManagementController {
     });
   }
 
-  updateAction() {
+  updateAction(updatedUserAccesses, updatedTeamAccesses) {
     const entity = this.accessControlledEntity;
     const oldUserAccessPolicies = entity.UserAccessPolicies;
     const oldTeamAccessPolicies = entity.TeamAccessPolicies;
-    const updatedUserAccesses = _.filter(this.authorizedUsersAndTeams, { Updated: true, Type: 'user', Inherited: false });
-    const updatedTeamAccesses = _.filter(this.authorizedUsersAndTeams, { Updated: true, Type: 'team', Inherited: false });
 
     const accessPolicies = this.AccessService.generateAccessPolicies(oldUserAccessPolicies, oldTeamAccessPolicies, updatedUserAccesses, updatedTeamAccesses);
     this.accessControlledEntity.UserAccessPolicies = accessPolicies.userAccessPolicies;

app/portainer/react/components/index.ts

@@ -48,6 +48,7 @@ import { registriesModule } from './registries';
 import { accountModule } from './account';
 import { usersModule } from './users';
 import { activityLogsModule } from './activity-logs';
+import { rbacModule } from './rbac';
 
 export const ngModule = angular
   .module('portainer.app.react.components', [
@@ -60,6 +61,7 @@ export const ngModule = angular
     accountModule,
     usersModule,
     activityLogsModule,
+    rbacModule,
   ])
   .component(
     'tagSelector',

app/portainer/react/components/rbac.ts

@@ -0,0 +1,22 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { AccessDatatable } from '@/react/portainer/access-control/AccessManagement/AccessDatatable/AccessDatatable';
+
+export const rbacModule = angular
+  .module('portainer.app.react.components.rbac', [])
+  .component(
+    'accessDatatable',
+    r2a(withUIRouter(withReactQuery(AccessDatatable)), [
+      'dataset',
+      'inheritFrom',
+      'isUpdateEnabled',
+      'onRemove',
+      'onUpdate',
+      'showRoles',
+      'showWarning',
+      'tableKey',
+    ])
+  ).name;