feat: roles and permissions tab added (#107)

Implements the Roles and Permissions tab, as defined in #80.

Author: jesusbalderramawgu

src/authz-module/authz-home/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderWrapper } from '@src/setupTest';
+import AuthzHome from './index';
+
+jest.mock('../components/AuthZLayout', () => function MockAuthZLayout({ children }: { children: React.ReactNode }) {
+  return <div data-testid="authz-layout">{children}</div>;
+});
+
+jest.mock('../roles-permissions/RolesPermissions', () => function MockRolesPermissions() {
+  return <div data-testid="roles-permissions">Roles & Permissions Content</div>;
+});
+
+jest.mock('@openedx/paragon', () => ({
+  Tab: ({ children, title } : { children: React.ReactNode, title: string }) => <div data-testid="tab" role="tabpanel">{title}: {children}</div>,
+  Tabs: ({ children }: { children: React.ReactNode }) => <div data-testid="tabs">{children}</div>,
+}));
+
+describe('AuthzHome', () => {
+  it('renders without crashing', () => {
+    renderWrapper(<AuthzHome />);
+  });
+
+  it('renders the main layout and tabs', () => {
+    renderWrapper(<AuthzHome />);
+    expect(screen.getByTestId('authz-layout')).toBeInTheDocument();
+    expect(screen.getByTestId('tabs')).toBeInTheDocument();
+  });
+
+  it('renders both tab panels', () => {
+    renderWrapper(<AuthzHome />);
+    const tabs = screen.getAllByTestId('tab');
+    expect(tabs).toHaveLength(2);
+  });
+
+  it('renders the RolesPermissions component in the permissions tab', () => {
+    renderWrapper(<AuthzHome />);
+    expect(screen.getByTestId('roles-permissions')).toBeInTheDocument();
+  });
+});

src/authz-module/authz-home/index.tsx

@@ -0,0 +1,50 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Tab, Tabs } from '@openedx/paragon';
+import { useLocation } from 'react-router-dom';
+import RolesPermissions from '../roles-permissions/RolesPermissions';
+import AuthZLayout from '../components/AuthZLayout';
+
+import messages from './messages';
+
+const AuthzHome = () => {
+  const { hash } = useLocation();
+  const intl = useIntl();
+
+  const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']) || '';
+  const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
+
+  return (
+    <div className="authz-libraries">
+      <AuthZLayout
+        context={{ id: '', title: '', org: '' }}
+        navLinks={[{ label: rootBreadcrumb }]}
+        activeLabel={pageTitle}
+        pageTitle={pageTitle}
+        pageSubtitle=""
+        actions={
+          []
+          // this needs to be enable again once is refactored to be used outside of library context
+          // [
+          //   <AddNewTeamMemberTrigger libraryId="" key="add-new-member" />,
+          // ]
+        }
+      >
+        <Tabs
+          variant="tabs"
+          defaultActiveKey={hash ? 'permissionsRoles' : 'team'}
+          className="bg-light-100 px-5"
+        >
+          <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5">
+            {/* TODO: once TeamTable is refactored we can call it here. For now, this tab will be empty. */}
+            {/* <TeamTable /> */}
+          </Tab>
+          <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])}>
+            <RolesPermissions />
+          </Tab>
+        </Tabs>
+      </AuthZLayout>
+    </div>
+  );
+};
+
+export default AuthzHome;

src/authz-module/authz-home/messages.ts

@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'authz.manage.page.title': {
+    id: 'authz.manage.page.title',
+    defaultMessage: 'Library Team Management',
+    description: 'Libraries AuthZ page title',
+  },
+  'authz.breadcrumb.root': {
+    id: 'authz.breadcrumb.root',
+    defaultMessage: 'Manage Access',
+    description: 'Libraries AuthZ root breadcrumb',
+  },
+  'authz.tabs.team': {
+    id: 'authz.tabs.team',
+    defaultMessage: 'Team Members',
+    description: 'Libraries AuthZ title for the team management tab',
+  },
+  'authz.tabs.permissionsRoles': {
+    id: 'authz.tabs.permissionsRoles',
+    defaultMessage: 'Roles and Permissions',
+    description: 'Libraries AuthZ title for the roles tab',
+  },
+});
+
+export default messages;

src/authz-module/components/AnchorButton.test.tsx

@@ -0,0 +1,63 @@
+import { renderWrapper } from '@src/setupTest';
+import { waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AnchorButton from './AnchorButton';
+
+const mockScrollTo = jest.fn();
+Object.defineProperty(window, 'scrollTo', {
+  value: mockScrollTo,
+  writable: true,
+});
+
+describe('AnchorButton', () => {
+  beforeEach(() => {
+    mockScrollTo.mockClear();
+    // Reset window.scrollY
+    Object.defineProperty(window, 'scrollY', {
+      value: 0,
+      writable: true,
+    });
+  });
+
+  it('renders without crashing', () => {
+    renderWrapper(<AnchorButton />);
+  });
+
+  it('does not display button initially', () => {
+    const { container } = renderWrapper(<AnchorButton />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('calls window.scrollTo with correct parameters when button is clicked', async () => {
+    const user = userEvent.setup();
+    // Make button visible first
+    Object.defineProperty(window, 'scrollY', {
+      value: 400,
+      writable: true,
+    });
+
+    const { getByRole, rerender } = renderWrapper(<AnchorButton />);
+    // Simulate scroll event by dispatching a scroll event
+    const scrollEvent = new Event('scroll');
+    window.dispatchEvent(scrollEvent);
+    rerender(<AnchorButton />);
+
+    await waitFor(async () => {
+      const button = getByRole('button');
+      expect(button).toBeInTheDocument();
+      await user.click(button);
+      expect(mockScrollTo).toHaveBeenCalledWith({
+        top: 0,
+        behavior: 'smooth',
+      });
+    });
+  });
+
+  it('removes event listener on unmount', () => {
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+    const { unmount } = renderWrapper(<AnchorButton />);
+    unmount();
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    removeEventListenerSpy.mockRestore();
+  });
+});

src/authz-module/components/AnchorButton.tsx

@@ -0,0 +1,49 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ArrowUpward } from '@openedx/paragon/icons';
+import { IconButton } from '@openedx/paragon';
+import { useState, useEffect } from 'react';
+import messages from './messages';
+
+const AnchorButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const intl = useIntl();
+  const scrollToTopButton = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      setIsVisible(scrollTop > 300);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      isActive
+      src={ArrowUpward}
+      alt={intl.formatMessage(messages['authz.anchor.button.alt'])}
+      onClick={scrollToTopButton}
+      variant="primary"
+      className="mr-2 mb-2 fixed-bottom float-right"
+      style={{
+        bottom: '20px',
+        left: 'calc(100% - 70px)',
+      }}
+    />
+  );
+};
+
+export default AnchorButton;

src/authz-module/components/PermissionTable.test.tsx

@@ -165,14 +165,14 @@ describe('PermissionTable', () => {
   it('renders Close icons for denied permissions', () => {
     renderWrapper(<PermissionTable roles={mockRoles} permissionsTable={mockPermissionsTable} />);
 
-    const deniedIcons = screen.getAllByLabelText(/Permission denied in/);
+    const deniedIcons = screen.getAllByLabelText(/Permission not granted in/);
     expect(deniedIcons.length).toBeGreaterThan(0);
   });
 
   it('applies text-danger class to denied permission icons', () => {
     renderWrapper(<PermissionTable roles={mockRoles} permissionsTable={mockPermissionsTable} />);
 
-    const deniedIcons = screen.getAllByLabelText(/Permission denied in/);
+    const deniedIcons = screen.getAllByLabelText(/Permission not granted in/);
     deniedIcons.forEach(icon => {
       expect(icon).toHaveClass('text-danger');
     });
@@ -208,7 +208,7 @@ describe('PermissionTable', () => {
   it('renders correct aria-labels for denied permissions', () => {
     renderWrapper(<PermissionTable roles={mockRoles} permissionsTable={mockPermissionsTable} />);
 
-    const deniedLabel = 'Permission denied in Viewer role';
+    const deniedLabel = 'Permission not granted in Viewer role';
     expect(screen.getAllByLabelText(deniedLabel)).toHaveLength(2);
   });
 

src/authz-module/components/PermissionTable.tsx

@@ -1,6 +1,9 @@
+import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Check, Close } from '@openedx/paragon/icons';
-import { Card, Icon } from '@openedx/paragon';
+import {
+  Card, Icon, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
 import { PermissionsResourceGrouped, Role } from '@src/types';
 import { actionsDictionary } from './RoleCard/constants';
 import ResourceTooltip from './ResourceTooltip';
@@ -9,28 +12,55 @@ import messages from './messages';
 type PermissionTableProps = {
   roles: Role[];
   permissionsTable: PermissionsResourceGrouped[];
+  title?: string;
 };
 
-const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => {
+const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProps) => {
   const { formatMessage } = useIntl();
   return (
     <Card>
       <table className="permission-table w-100">
         <thead>
           <tr>
-            <th className="" aria-hidden="true" />
+            <th className="sticky-top bg-white px-4 py-3">
+              {title}
+            </th>
             {roles.map(role => (
-              <th key={role.name} className="text-center py-3">{role.name}</th>
+              <th
+                key={role.name}
+                className={`text-center py-3 sticky-top bg-white ${role.disabled ? 'text-gray-200' : ''}`}
+              >
+                {role.disabled ? (
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={(
+                      <Tooltip
+                        id={`tooltip-${role.name}`}
+                        variant="light"
+                      >
+                        {formatMessage(messages['authz.role.card.permission.for.role.status.disabled'])}
+                      </Tooltip>
+                    )}
+                  >
+                    <span style={{ cursor: 'help' }}>{role.name}</span>
+                  </OverlayTrigger>
+                ) : (
+                  role.name
+                )}
+              </th>
             ))}
           </tr>
         </thead>
         <tbody>
           {permissionsTable.map(resourceGroup => (
-            <>
+            <React.Fragment key={resourceGroup.key}>
               <tr className="bg-info-100 text-primary">
                 <td colSpan={roles.length + 1} className="text-start py-3 px-4">
-                  <strong>{resourceGroup.label}</strong>
-                  <ResourceTooltip resourceGroup={resourceGroup} />
+                  <div className="d-flex align-items-center">
+                    {resourceGroup.icon && <Icon className="d-inline-block mr-2" size="xs" src={resourceGroup.icon} />}
+                    <strong>{resourceGroup.label}</strong>
+                    <ResourceTooltip resourceGroup={resourceGroup} />
+                  </div>
                 </td>
               </tr>
               {resourceGroup.permissions.map(permission => (
@@ -40,12 +70,12 @@ const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => {
                     {permission.label}
                   </td>
                   {roles.map(role => (
-                    <td key={role.name} className="text-center">
+                    <td key={role.name} className={`text-center ${role.disabled ? 'text-gray-200' : ''}`}>
                       {
                       permission.roles[role.name]
                         ? (
                           <Icon
-                            className="d-inline-block"
+                            className={`d-inline-block ${role.disabled ? 'text-gray-200' : 'text-success'}`}
                             src={Check}
                             aria-label={formatMessage(messages['authz.role.card.permission.for.role.status.granted'], {
                               roleName: role.name,
@@ -57,12 +87,12 @@ const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => {
                         )
                         : (
                           <Icon
-                            className="text-danger d-inline-block"
+                            className={`d-inline-block ${role.disabled ? 'text-gray-200' : 'text-danger'}`}
                             src={Close}
-                            aria-label={formatMessage(messages['authz.role.card.permission.for.role.status.denied'], {
+                            aria-label={formatMessage(messages['authz.role.card.permission.for.role.status.not.granted'], {
                               roleName: role.name,
                             })}
-                            screenReaderText={formatMessage(messages['authz.role.card.permission.for.role.status.denied'], {
+                            screenReaderText={formatMessage(messages['authz.role.card.permission.for.role.status.not.granted'], {
                               roleName: role.name,
                             })}
                           />
@@ -72,7 +102,7 @@ const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => {
                   ))}
                 </tr>
               ))}
-            </>
+            </React.Fragment>
           ))}
         </tbody>
       </table>

src/authz-module/components/RoleCard/constants.ts

@@ -1,17 +1,18 @@
 import {
-  Add, Delete, DownloadDone, Edit, ManageAccounts, Sync, Tag, Visibility,
+  Add, Delete, DownloadDone, Edit, ManageAccounts, Sync, FileUpload, Visibility, FileDownload, Settings,
 } from '@openedx/paragon/icons';
 
 export const actionsDictionary = {
   create: Add,
   edit: Edit,
   delete: Delete,
-  import: Sync,
+  import: FileDownload,
   publish: DownloadDone,
   view: Visibility,
   reuse: Sync,
-  tag: Tag,
   team: ManageAccounts,
+  export: FileUpload,
+  manage: Settings,
 };
 
 export type ActionKey = keyof typeof actionsDictionary;