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

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;
+}