refactor(rbac): migrate access viewer table to react [EE-6447] (#11498)

app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.css

@@ -1,15 +0,0 @@
-.datatable.access-viewer-datatable .toolBar {
-  font-size: inherit;
-}
-
-.datatable.access-viewer-datatable .toolBar .small {
-  font-weight: normal;
-}
-
-.datatable.access-viewer-datatable .toolBar.pl-0 {
-  padding-left: 0;
-}
-
-.datatable.access-viewer-datatable .toolBar.pr-0 {
-  padding-right: 0;
-}

app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html

@@ -1,89 +0,0 @@
-<div class="datatable access-viewer-datatable">
-  <div class="toolBar vertical-center pl-0 pr-0">
-    <div class="toolBarTitle vertical-center">
-      <div>
-        <div class="form-section-title mb-1">Access</div>
-        <div class="vertical-center">
-          <pr-icon icon="'info'" mode="'primary'" size="'sm'" class="vertical-center"></pr-icon>
-          <span class="small text-muted"> Effective role for each environment will be displayed for the selected user </span>
-        </div>
-      </div>
-    </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..."
-        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="'Environment'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'EndpointName'"
-              is-sorted-desc="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('EndpointName')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Role'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'RoleName'"
-              is-sorted-desc="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('RoleName')"
-            ></table-column-header>
-          </th>
-          <th>Access origin</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"
-        >
-          <td>{{ item.EndpointName }}</td>
-          <td>{{ item.RoleName }}</td>
-          <td
-            >{{ item.TeamName ? 'Team' : 'User' }} <code ng-if="item.TeamName">{{ item.TeamName }}</code> access defined on {{ item.AccessLocation }}
-            <code ng-if="item.GroupName">{{ item.GroupName }}</code>
-            <a ng-if="!item.GroupName && $ctrl.isAdmin" ui-sref="portainer.endpoints.endpoint.access({id: item.EndpointId})"><pr-icon icon="'users'"></pr-icon> Manage access </a>
-            <a ng-if="item.GroupName && $ctrl.isAdmin" ui-sref="portainer.groups.group.access({id: item.GroupId})"><pr-icon icon="'users'"></pr-icon> Manage access </a>
-          </td>
-        </tr>
-        <tr ng-if="!$ctrl.dataset">
-          <td colspan="3" class="text-muted text-center">Select a user to show associated access and role</td>
-        </tr>
-        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-          <td colspan="3" class="text-muted text-center">The selected user does not have access to any environment(s)</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>
-</div>

app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js

@@ -1,14 +0,0 @@
-import './access-viewer-datatable.css';
-
-export const accessViewerDatatable = {
-  templateUrl: './access-viewer-datatable.html',
-  controller: 'GenericDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    tableKey: '@',
-    orderBy: '@',
-    dataset: '<',
-    isAdmin: '<',
-  },
-};

app/portainer/rbac/components/access-viewer/access-viewer.controller.js

@@ -2,7 +2,7 @@ import _ from 'lodash-es';
 import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
-import AccessViewerPolicyModel from '../../models/access';
+import { AccessViewerPolicyModel } from '@/react/portainer/users/RolesView/AccessViewer/model';
 
 export default class AccessViewerController {
   /* @ngInject */

app/portainer/rbac/components/access-viewer/access-viewer.html

@@ -17,7 +17,8 @@
                 </por-select>
               </div>
             </div>
-            <access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName" is-admin="$ctrl.isAdmin"> </access-viewer-datatable>
+
+            <effective-access-viewer-datatable dataset="$ctrl.userRoles"> </effective-access-viewer-datatable>
           </form>
         </rd-widget-body>
       </rd-widget>

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 { accessViewerDatatable } from './components/access-viewer/access-viewer-datatable';
 import { rolesDatatable } from './components/roles-datatable';
 
 import { RoleService } from './services/role.service';
@@ -11,7 +10,6 @@ angular
   .module('portainer.rbac', ['ngResource'])
   .constant('API_ENDPOINT_ROLES', 'api/roles')
   .component('accessViewer', accessViewer)
-  .component('accessViewerDatatable', accessViewerDatatable)
   .component('rolesDatatable', rolesDatatable)
   .component('rolesView', rolesView)
   .factory('RoleService', RoleService)

app/portainer/rbac/models/access.js

@@ -1,16 +0,0 @@
-export default function AccessViewerPolicyModel(policy, endpoint, roles, group, team) {
-  this.EndpointId = endpoint.Id;
-  this.EndpointName = endpoint.Name;
-  this.RoleId = policy.RoleId;
-  this.RoleName = roles[policy.RoleId].Name;
-  this.RolePriority = roles[policy.RoleId].Priority;
-  if (group) {
-    this.GroupId = group.Id;
-    this.GroupName = group.Name;
-  }
-  if (team) {
-    this.TeamId = team.Id;
-    this.TeamName = team.Name;
-  }
-  this.AccessLocation = group ? 'environment group' : 'environment';
-}

app/portainer/react/components/users.ts

@@ -4,10 +4,17 @@ import { r2a } from '@/react-tools/react2angular';
 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';
 
 export const usersModule = angular
   .module('portainer.app.react.components.users', [])
   .component(
     'usersDatatable',
     r2a(withUIRouter(withCurrentUser(UsersDatatable)), ['dataset', 'onRemove'])
+  )
+  .component(
+    'effectiveAccessViewerDatatable',
+    r2a(withUIRouter(withCurrentUser(EffectiveAccessViewerDatatable)), [
+      'dataset',
+    ])
   ).name;

app/portainer/users/types.ts

@@ -1,4 +1,5 @@
 import { EnvironmentId } from '@/react/portainer/environments/types';
+import { AuthorizationMap } from '@/react/portainer/users/RolesView/types';
 
 import { type UserId } from './types/user-id';
 
@@ -16,10 +17,6 @@ export const RoleNames: { [key in Role]: string } = {
   [Role.EdgeAdmin]: 'edge administrator',
 };
 
-interface AuthorizationMap {
-  [authorization: string]: boolean;
-}
-
 export type User = {
   Id: UserId;
   Username: string;

app/react/portainer/users/RolesView/AccessViewer/EffectiveAccessViewerDatatable.tsx

@@ -0,0 +1,36 @@
+import { TextTip } from '@@/Tip/TextTip';
+import { Datatable } from '@@/datatables';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
+
+import { AccessViewerPolicyModel } from './model';
+import { columns } from './columns';
+
+export function EffectiveAccessViewerDatatable({
+  dataset,
+}: {
+  dataset?: Array<AccessViewerPolicyModel>;
+}) {
+  const tableState = useTableStateWithStorage('access-viewer', 'Environment');
+
+  return (
+    <Datatable
+      dataset={dataset || []}
+      columns={columns}
+      settingsManager={tableState}
+      noWidget
+      title="Access"
+      description={
+        <TextTip color="blue">
+          Effective role for each environment will be displayed for the selected
+          user
+        </TextTip>
+      }
+      emptyContentLabel={
+        dataset
+          ? 'The selected user does not have access to any environment(s)'
+          : 'Select a user to show associated access and role'
+      }
+      disableSelect
+    />
+  );
+}

app/react/portainer/users/RolesView/AccessViewer/columns.tsx

@@ -0,0 +1,81 @@
+import { createColumnHelper, CellContext } from '@tanstack/react-table';
+import { Users } from 'lucide-react';
+
+import { useCurrentUser } from '@/react/hooks/useUser';
+
+import { Icon } from '@@/Icon';
+import { Link } from '@@/Link';
+
+import { AccessViewerPolicyModel } from './model';
+
+const helper = createColumnHelper<AccessViewerPolicyModel>();
+
+export const columns = [
+  helper.accessor('EndpointName', {
+    header: 'Environment',
+    id: 'Environment',
+  }),
+  helper.accessor('RoleName', {
+    header: 'Role',
+    id: 'Role',
+  }),
+  helper.display({
+    header: 'Access Origin',
+    cell: AccessCell,
+  }),
+];
+
+function AccessCell({
+  row: { original: item },
+}: CellContext<AccessViewerPolicyModel, unknown>) {
+  const { isPureAdmin } = useCurrentUser();
+
+  if (item.RoleId === 0) {
+    return (
+      <>
+        User access all environments
+        <Link to="portainer.settings.edgeCompute">
+          <Icon icon={Users} /> Manage access
+        </Link>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {prefix(item.TeamName)} access defined on {item.AccessLocation}{' '}
+      {!!item.GroupName && <code>{item.GroupName}</code>}{' '}
+      {manageAccess(item, isPureAdmin)}
+    </>
+  );
+}
+
+function prefix(teamName: string | undefined) {
+  if (!teamName) {
+    return 'User';
+  }
+  return (
+    <>
+      Team <code>{teamName}</code>
+    </>
+  );
+}
+
+function manageAccess(item: AccessViewerPolicyModel, isPureAdmin: boolean) {
+  if (!isPureAdmin) {
+    return null;
+  }
+
+  return item.GroupName ? (
+    <Link to="portainer.groups.group.access" params={{ id: item.GroupId }}>
+      <Icon icon={Users} /> Manage access
+    </Link>
+  ) : (
+    <Link
+      to="portainer.endpoints.endpoint.access"
+      params={{ id: item.EndpointId }}
+    >
+      <Icon icon={Users} /> Manage access
+    </Link>
+  );
+}

app/react/portainer/users/RolesView/AccessViewer/model.ts

@@ -0,0 +1,53 @@
+import {
+  Environment,
+  EnvironmentId,
+} from '@/react/portainer/environments/types';
+import { EnvironmentGroup } from '@/react/portainer/environments/environment-groups/types';
+
+import { RbacRole } from '../types';
+import { Team, TeamId } from '../../teams/types';
+
+export class AccessViewerPolicyModel {
+  EndpointId: EnvironmentId;
+
+  EndpointName: string;
+
+  RoleId: RbacRole['Id'];
+
+  RoleName: RbacRole['Name'];
+
+  RolePriority: RbacRole['Priority'];
+
+  GroupId?: EnvironmentGroup['Id'];
+
+  GroupName?: EnvironmentGroup['Name'];
+
+  TeamId?: TeamId;
+
+  TeamName?: Team['Name'];
+
+  AccessLocation: string;
+
+  constructor(
+    policy: { RoleId: RbacRole['Id'] },
+    endpoint: Environment,
+    roles: Record<RbacRole['Id'], RbacRole>,
+    group?: EnvironmentGroup,
+    team?: Team
+  ) {
+    this.EndpointId = endpoint.Id;
+    this.EndpointName = endpoint.Name;
+    this.RoleId = policy.RoleId;
+    this.RoleName = roles[policy.RoleId].Name;
+    this.RolePriority = roles[policy.RoleId].Priority;
+    if (group) {
+      this.GroupId = group.Id;
+      this.GroupName = group.Name;
+    }
+    if (team) {
+      this.TeamId = team.Id;
+      this.TeamName = team.Name;
+    }
+    this.AccessLocation = group ? 'environment group' : 'environment';
+  }
+}

app/react/portainer/users/RolesView/types.ts

@@ -0,0 +1,11 @@
+export interface AuthorizationMap {
+  [authorization: string]: boolean;
+}
+
+export interface RbacRole {
+  Id: number;
+  Name: string;
+  Description: string;
+  Authorizations: AuthorizationMap;
+  Priority: number;
+}