refactor: moving files from libraries to authz module and minor improvements on the header

Author: jacobo-dominguez-wgu

src/authz-module/components/AuthZLayout.tsx

@@ -14,9 +14,10 @@ interface AuthZLayoutProps extends AuthZTitleProps {
 const AuthZLayout = ({ children, context, ...props }: AuthZLayoutProps) => (
   <>
     <StudioHeader
-      number={context.id}
-      org={context.org}
-      title={context.title}
+      number={context?.id || null}
+      org={context?.org || null}
+      title={context?.title || null}
+      isHiddenMainMenu
     />
     <AuthZTitle {...props} />
     {children}

src/authz-module/components/AuthZTitle.tsx

@@ -50,11 +50,11 @@ const AuthZTitle = ({
       />
       <Row className="mt-4">
         <Col xs={12} md={7} className="mb-4">
-          <div className="d-flex align-items-center">
+          <div className="d-flex align-items-center flex-column-sm">
             <h2 className="text-primary mb-0">{pageTitle}</h2>
             {typeof pageSubtitle === 'string'
-              ? <><hr className="mx-lg-3" /><h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
-              : <><hr className="mx-lg-3" /> <div className="mb-0">{pageSubtitle}</div></>}
+              ? <> { pageSubtitle !== '' && <hr className="mx-lg-3" /> }<h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
+              : <>{ pageSubtitle !== '' && <hr className="mx-lg-3" /> } <div className="mb-0">{pageSubtitle}</div></>}
 
           </div>
         </Col>

src/authz-module/constants.ts

@@ -1,6 +1,113 @@
+import { PermissionMetadata, ResourceMetadata, RoleMetadata } from 'types';
+
+export const CONTENT_LIBRARY_PERMISSIONS = {
+  DELETE_LIBRARY: 'content_libraries.delete_library',
+  MANAGE_LIBRARY_TAGS: 'content_libraries.manage_library_tags',
+  VIEW_LIBRARY: 'content_libraries.view_library',
+
+  EDIT_LIBRARY_CONTENT: 'content_libraries.edit_library_content',
+  PUBLISH_LIBRARY_CONTENT: 'content_libraries.publish_library_content',
+  REUSE_LIBRARY_CONTENT: 'content_libraries.reuse_library_content',
+
+  CREATE_LIBRARY_COLLECTION: 'content_libraries.create_library_collection',
+  EDIT_LIBRARY_COLLECTION: 'content_libraries.edit_library_collection',
+  DELETE_LIBRARY_COLLECTION: 'content_libraries.delete_library_collection',
+
+  MANAGE_LIBRARY_TEAM: 'content_libraries.manage_library_team',
+  VIEW_LIBRARY_TEAM: 'content_libraries.view_library_team',
+};
+
+export const CONTENT_COURSE_PERMISSIONS = {
+  VIEW_COURSE: 'courses.view_course',
+  CREATE_COURSE: 'courses.create_course',
+  EDIT_COURSE_CONTENT: 'courses.edit_course_content',
+  PUBLISH_COURSE_CONTENT: 'courses.publish_course_content',
+
+  REVIEW_COURSE_LIBRARY_UPDATES: 'courses.manage_library_updates',
+
+  VIEW_COURSE_UPDATES: 'courses.view_course_updates',
+  MANAGE_COURSE_UPDATES: 'courses.manage_course_updates',
+
+  VIEW_COURSE_PAGES_RESOURCES: 'courses.view_pages_and_resources',
+  MANAGE_COURSE_PAGES_RESOURCES: 'courses.manage_pages_and_resources',
+
+  VIEW_COURSE_FILES: 'courses.view_files',
+  CREATE_COURSE_FILES: 'courses.create_files',
+  EDIT_COURSE_FILES: 'courses.edit_files',
+  DELETE_COURSE_FILES: 'courses.delete_files',
+
+  VIEW_COURSE_SCHEDULE: 'courses.view_schedule',
+  EDIT_COURSE_SCHEDULE: 'courses.edit_schedule',
+  VIEW_COURSE_DETAILS: 'courses.view_details',
+  EDIT_COURSE_DETAILS: 'courses.edit_details',
+
+  VIEW_COURSE_GRADING_SETTINGS: 'courses.view_grading_settings',
+  EDIT_COURSE_GRADING_SETTINGS: 'courses.edit_grading_settings',
+
+  VIEW_COURSE_TEAM: 'courses.view_course_team',
+  MANAGE_COURSE_TEAM: 'courses.manage_course_team',
+  MANAGE_COURSE_GROUP_CONFIGURATION: 'courses.manage_group_configurations',
+
+  MANAGE_COURSE_TAGS: 'courses.manage_tags',
+  MANAGE_COURSE_TAXONOMIES: 'courses.manage_taxonomies',
+
+  MANAGE_COURSE_ADVANCED_SETTINGS: 'courses.manage_advanced_settings',
+  MANAGE_COURSE_CERTIFICATES: 'courses.manage_certificates',
+
+  IMPORT_COURSE: 'courses.import_course',
+  EXPORT_COURSE: 'courses.export_course',
+  EXPORT_COURSE_TAGS: 'courses.export_tags',
+
+  VIEW_COURSE_CHECKLISTS: 'courses.view_checklists',
+  VIEW_COURSE_GLOBAL_STAFF_SUPER_ADMINS: 'courses.view_global_staff_and_superadmins',
+};
+
+// Note: this information will eventually come from the backend API
+// but for the MVP we decided to manage it in the frontend
+export const libraryRolesMetadata: RoleMetadata[] = [
+  { role: 'library_admin', name: 'Library Admin', description: 'The Library Admin has full control over the library, including managing users, modifying content, and handling publishing workflows. They ensure content is properly maintained and accessible as needed.' },
+  { role: 'library_author', name: 'Library Author', description: 'The Library Author is responsible for creating, editing, and publishing content within a library. They can manage tags and collections but cannot delete libraries or manage users.' },
+  { role: 'library_contributor', name: 'Library Contributor', description: 'The Library Contributor can create and edit content within a library but cannot publish it. They support the authoring process while leaving final publishing to Authors or Admins.' },
+  { role: 'library_user', name: 'Library User', description: 'The Library User can view and reuse content but cannot edit or delete any resource.' },
+];
+
+export const libraryResourceTypes: ResourceMetadata[] = [
+  { key: 'library', label: 'Library', description: 'Permissions related to the library as a whole.' },
+  { key: 'library_content', label: 'Content', description: 'Permissions to create, edit, delete, and publish individual content items within the library.' },
+  { key: 'library_collection', label: 'Collection', description: 'Permissions to create, edit, and delete content collections within the library.' },
+  { key: 'library_team', label: 'Team', description: 'Permissions to manage user access and roles within the library.' },
+];
+
+export const libraryPermissions: PermissionMetadata[] = [
+  { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY, resource: 'library', description: 'Allows the user to delete the library and all its contents.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TAGS, resource: 'library', description: 'Add or remove tags from content.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY, resource: 'library', description: 'View content, search, filter, and sort within the library.' },
+
+  { key: CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_CONTENT, resource: 'library_content', description: 'Edit content in draft mode' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.PUBLISH_LIBRARY_CONTENT, resource: 'library_content', description: 'Publish content, making it available for reuse' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.REUSE_LIBRARY_CONTENT, resource: 'library_content', description: 'Reuse published content within a course.' },
+
+  { key: CONTENT_LIBRARY_PERMISSIONS.CREATE_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Create new collections within a library.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Add or remove content from existing collections.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Delete entire collections from the library.' },
+
+  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, resource: 'library_team', description: 'View the list of users who have access to the library.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, resource: 'library_team', description: 'Add, remove, and assign roles to users within the library.' },
+];
+
+export const DEFAULT_TOAST_DELAY = 5000;
+export const RETRY_TOAST_DELAY = 120_000; // 2 minutes
+export const SKELETON_ROWS = Array.from({ length: 10 }).map(() => ({
+  username: 'skeleton',
+  name: '',
+  email: '',
+  roles: [],
+}));
+
 export const ROUTES = {
   LIBRARIES_TEAM_PATH: '/libraries/:libraryId',
   LIBRARIES_USER_PATH: '/libraries/:libraryId/:username',
+  AUDIT_USER_PATH: '/user/:username',
 };
 
 export enum RoleOperationErrorStatus {
@@ -10,3 +117,5 @@ export enum RoleOperationErrorStatus {
   ROLE_ASSIGNMENT_ERROR = 'role_assignment_error',
   ROLE_REMOVAL_ERROR = 'role_removal_error',
 }
+
+export const TABLE_DEFAULT_PAGE_SIZE = 10;

…TeamTable/hooks/useQuerySettings.test.ts …hz-module/hooks/useQuerySettings.test.tssrc/authz-module/libraries-manager/components/TeamTable/hooks/useQuerySettings.test.ts renamed to src/authz-module/hooks/useQuerySettings.test.ts src/authz-module/libraries-manager/components/TeamTable/hooks/useQuerySettings.test.ts renamed to src/authz-module/hooks/useQuerySettings.test.ts

@@ -41,18 +41,18 @@ export const useQuerySettings = (
   const handleTableFetch = useCallback((tableFilters: DataTableFilters) => {
     setQuerySettings((prevSettings) => {
       // Extract filters
-      const rolesFilter = tableFilters.filters.find((filter) => filter.id === 'roles')?.value?.join(',') ?? '';
-      const searchFilter = tableFilters.filters.find((filter) => filter.id === 'username')?.value ?? '';
+      const rolesFilter = tableFilters.filters?.find((filter) => filter.id === 'roles')?.value?.join(',') ?? '';
+      const searchFilter = tableFilters.filters?.find((filter) => filter.id === 'username')?.value ?? '';
 
       // Extract pagination
       const { pageSize = 10, pageIndex = 0 } = tableFilters;
 
       // Extract and convert sorting
       let sortByOption = '';
       let sortByOrder = '';
-      if (tableFilters.sortBy.length) {
-        sortByOption = tableFilters.sortBy[0].id.replace(/([A-Z])/g, '_$1').toLowerCase();
-        sortByOrder = tableFilters.sortBy[0].desc ? SortOrderKeys.DESC : SortOrderKeys.ASC;
+      if (tableFilters.sortBy?.length) {
+        sortByOption = tableFilters.sortBy[0]?.id.replace(/([A-Z])/g, '_$1').toLowerCase();
+        sortByOrder = tableFilters.sortBy[0]?.desc ? SortOrderKeys.DESC : SortOrderKeys.ASC;
       }
 
       const newQuerySettings: QuerySettings = {

…ents/TeamTable/hooks/useQuerySettings.ts …c/authz-module/hooks/useQuerySettings.tssrc/authz-module/libraries-manager/components/TeamTable/hooks/useQuerySettings.ts renamed to src/authz-module/hooks/useQuerySettings.ts src/authz-module/libraries-manager/components/TeamTable/hooks/useQuerySettings.ts renamed to src/authz-module/hooks/useQuerySettings.ts

@@ -1,19 +1,12 @@
 @use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
-.authz-libraries {
+.authz-module {
   --height-action-divider: 30px;
 
   hr {
-    border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
-    width: 100%;
-  }
-
-  @media (--pgn-size-breakpoint-min-width-lg) {
-    hr {
-      border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
-      height: var(--height-action-divider);
-      width: 0;
-    }
+    border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
+    height: var(--height-action-divider);
+    width: 0;
   }
 
   .tab-content {
@@ -52,6 +45,17 @@
       line-height: 24px;
     }
   }
+  
+  @media(--pgn-size-breakpoint-max-width-sm){
+    .flex-column-sm {
+      flex-direction: column;
+    }
+    hr {
+      border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
+      border-right: none;
+      width: 100%;
+    }
+  }
 }
 
 .toast-container {

src/authz-module/index.scss

@@ -2,11 +2,11 @@ import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
-import { useLibrary, useUpdateLibrary } from '@src/authz-module/data/hooks';
+import { useLibrary } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from './context';
 import LibrariesTeamManager from './LibrariesTeamManager';
 import { ToastManagerProvider } from './ToastManagerContext';
-import { CONTENT_LIBRARY_PERMISSIONS } from './constants';
+import { CONTENT_LIBRARY_PERMISSIONS } from '../constants';
 
 jest.mock('./context', () => {
   const actual = jest.requireActual('./context');
@@ -21,7 +21,6 @@ const mockedUseLibraryAuthZ = useLibraryAuthZ as jest.Mock;
 
 jest.mock('@src/authz-module/data/hooks', () => ({
   useLibrary: jest.fn(),
-  useUpdateLibrary: jest.fn(),
 }));
 
 jest.mock('./components/TeamTable', () => ({
@@ -91,10 +90,6 @@ describe('LibrariesTeamManager', () => {
     (useLibrary as jest.Mock).mockReturnValue({
       data: libraryData,
     });
-    (useUpdateLibrary as jest.Mock).mockReturnValue({
-      mutate,
-      isPending: false,
-    });
   });
 
   it('renders tabs and layout content correctly', () => {

src/authz-module/libraries-manager/LibrariesTeamManager.test.tsx

@@ -40,7 +40,7 @@ const LibrariesTeamManager = () => {
   }, [roles, permissions, resources, intl]);
 
   return (
-    <div className="authz-libraries">
+    <div className="authz-module">
       <AuthZLayout
         context={{ id: libraryId, title: library.title, org: library.org }}
         // Temporarily setting '/authz/libraries/:libraryId' as the URL for Manage Access breadcrumb for now as

src/authz-module/libraries-manager/LibrariesTeamManager.tsx

@@ -131,7 +131,7 @@ const LibrariesUserManager = () => {
   };
 
   return (
-    <div className="authz-libraries">
+    <div className="authz-module">
       <ConfirmDeletionModal
         isOpen={showConfirmDeletionModal}
         close={handleCloseConfirmDeletionModal}

src/authz-module/libraries-manager/LibrariesUserManager.tsx

@@ -5,7 +5,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Toast } from '@openedx/paragon';
 import messages from './messages';
-import { DEFAULT_TOAST_DELAY, RETRY_TOAST_DELAY } from './constants';
+import { DEFAULT_TOAST_DELAY, RETRY_TOAST_DELAY } from '../constants';
 
 type ToastType = 'success' | 'error' | 'error-retry';