feat: roles table for audit user page

Author: jacobo-dominguez-wgu

src/authz-module/audit-user/CustomCells.tsx

@@ -0,0 +1,44 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import ViewMoreLink from '@src/authz-module/components/ViewMoreLink';
+import { Delete, ExpandMore } from '@openedx/paragon/icons';
+import { IconButton } from '@openedx/paragon';
+import { TableCellValue, UserRole } from 'types';
+import messages from './messages';
+import { getPermissionsCountByRole } from './utils';
+
+type CellProps = TableCellValue<UserRole>;
+
+export const ViewAllPermissionsCell = ({ row }: CellProps) => {
+  const { formatMessage } = useIntl();
+  return (
+    <ViewMoreLink
+      label={formatMessage(messages['authz.user.table.view_all_permissions.link.text'])}
+      // TODO: Implement view more functionality
+      onClick={() => console.log('View more clicked for row:', row)}
+      iconSrc={ExpandMore}
+    />
+  );
+};
+
+export const ActionsCell = ({ row }: CellProps) => {
+  const { formatMessage } = useIntl();
+  const handleDelete = () => {
+    // TODO: Implement delete functionality
+    console.log('Delete clicked for row:', row);
+  };
+
+  return (
+    <IconButton variant="danger" onClick={handleDelete} alt={formatMessage(messages['authz.user.table.delete.action.alt'])} src={Delete} />
+  );
+};
+
+export const PermissionsCell = ({ row }: CellProps) => {
+  const { formatMessage } = useIntl();
+  // TODO handle permissions length per role
+  const count = getPermissionsCountByRole(row.original.role);
+  return (
+    <span>
+      {formatMessage(messages['authz.user.table.permissions.available.count'], { count })}
+    </span>
+  );
+};

src/authz-module/audit-user/messages.ts

@@ -27,6 +27,21 @@ const messages = defineMessages(
       defaultMessage: 'Actions',
       description: 'Header for the actions column in the user table',
     },
+    'authz.user.table.view_all_permissions.link.text': {
+      id: 'authz.user.table.view_all_permissions.link.text',
+      defaultMessage: 'View all permissions',
+      description: 'Text for the link to view all permissions in the user table',
+    },
+    'authz.user.table.delete.action.alt': {
+      id: 'authz.user.table.delete.action.alt',
+      defaultMessage: 'Delete role action',
+      description: 'Alt description for delete button',
+    },
+    'authz.user.table.permissions.available.count': {
+      id: 'authz.user.table.permissions.available.count',
+      defaultMessage: '{count, plural, one {# permission available} other {# permissions available}}',
+      description: 'Text showing the number of permissions available, with proper pluralization',
+    },
   },
 );
 

src/authz-module/audit-user/utils.ts

@@ -0,0 +1,7 @@
+export const getPermissionsCountByRole = (role: string) => {
+/*
+    const roleData = permissionsList.find(item => item.role === role);
+    return roleData ? roleData.permissions.length : 0;
+  */
+  return Math.floor(Math.random() * 50);
+};

src/authz-module/components/messages.ts

@@ -56,6 +56,11 @@ const messages = defineMessages({
     defaultMessage: 'View all permissions',
     description: 'Text for the link to view all permissions in the user table',
   },
+  'authz.table.footer.items.showing.text': {
+    id: 'authz.table.footer.items.showing.text',
+    defaultMessage: 'Showing {pageSize} of {itemCount} users.',
+    description: 'Message displayed when the user reaches the applied filters limit',
+  },
 });
 
 export default messages;