feat: integrate tjhe LibrariesUserManagement view in the application

Author: dcoa

src/authz-module/constants.ts

@@ -1,4 +1,4 @@
 export const ROUTES = {
   LIBRARIES_TEAM_PATH: '/libraries/:libraryId',
-  LIBRARIES_USER_PATH: '/libraries/user/:username',
+  LIBRARIES_USER_PATH: '/libraries/:libraryId/:username',
 };

src/authz-module/index.test.tsx

@@ -1,11 +1,16 @@
 import { ComponentType, lazy } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Outlet } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
 import AuthZModule from './index';
 
-// eslint-disable-next-line no-promise-executor-return
-jest.mock('./libraries-manager/LibrariesTeamManager', () => lazy(() => new Promise<{ default: ComponentType<any> }>(resolve => setTimeout(() => resolve({ default: () => <div data-testid="libraries-manager">Loaded</div> }), 100))));
+jest.mock('./libraries-manager', () => ({
+  // eslint-disable-next-line no-promise-executor-return
+  LibrariesLayout: lazy(() => new Promise<{ default: ComponentType<any> }>(resolve => setTimeout(() => resolve({ default: () => <div data-testid="layout"><Outlet /></div> }), 100))),
+  LibrariesTeamManager: () => <div data-testid="libraries-manager">Libraries Team Page</div>,
+  LibrariesUserManager: () => <div data-testid="libraries-user-manager">Libraries User Page</div>,
+}));
 
 const createTestQueryClient = () => new QueryClient({
   defaultOptions: {
@@ -16,6 +21,12 @@ const createTestQueryClient = () => new QueryClient({
 });
 
 describe('AuthZModule', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    initializeMockApp({
+      authenticatedUser: { username: 'testuser' },
+    });
+  });
   it('renders LoadingPage then LibrariesTeamManager when route matches', async () => {
     const queryClient = createTestQueryClient();
     const path = '/libraries/lib:123';
@@ -34,4 +45,20 @@ describe('AuthZModule', () => {
       expect(screen.getByTestId('libraries-manager')).toBeInTheDocument();
     });
   });
+
+  it('renders LoadingPage then LibrariesUserManager when user route matches', async () => {
+    const queryClient = createTestQueryClient();
+    const path = '/libraries/lib:123/testuser';
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[path]}>
+          <AuthZModule />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('libraries-user-manager')).toBeInTheDocument();
+    });
+  });
 });

src/authz-module/index.tsx

@@ -2,7 +2,7 @@ import { Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { ErrorBoundary } from '@edx/frontend-platform/react';
 import LoadingPage from '@src/components/LoadingPage';
-import { LibrariesTeamManager } from './libraries-manager';
+import { LibrariesTeamManager, LibrariesUserManager, LibrariesLayout } from './libraries-manager';
 import { ROUTES } from './constants';
 
 import './index.scss';
@@ -11,7 +11,10 @@ const AuthZModule = () => (
   <ErrorBoundary>
     <Suspense fallback={<LoadingPage />}>
       <Routes>
-        <Route path={ROUTES.LIBRARIES_TEAM_PATH} element={<LibrariesTeamManager />} />
+        <Route element={<LibrariesLayout />}>
+          <Route path={ROUTES.LIBRARIES_TEAM_PATH} element={<LibrariesTeamManager />} />
+          <Route path={ROUTES.LIBRARIES_USER_PATH} element={<LibrariesUserManager />} />
+        </Route>
       </Routes>
     </Suspense>
   </ErrorBoundary>

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

@@ -3,11 +3,11 @@ import { Tab, Tabs } from '@openedx/paragon';
 import { useLibrary } from '@src/authz-module/data/hooks';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
-import { LibraryAuthZProvider, useLibraryAuthZ } from './context';
+import { useLibraryAuthZ } from './context';
 
 import messages from './messages';
 
-const LibrariesAuthZTeamView = () => {
+const LibrariesTeamManager = () => {
   const intl = useIntl();
   const { libraryId } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
@@ -42,10 +42,5 @@ const LibrariesAuthZTeamView = () => {
     </div>
   );
 };
-const LibrariesTeamManager = () => (
-  <LibraryAuthZProvider>
-    <LibrariesAuthZTeamView />
-  </LibraryAuthZProvider>
-);
 
 export default LibrariesTeamManager;

src/authz-module/libraries-manager/components/TeamTable.test.tsx

@@ -1,6 +1,5 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ROUTES } from '@src/authz-module/constants';
 import { renderWrapper } from '@src/setupTest';
 import { useTeamMembers } from '@src/authz-module/data/hooks';
 import TeamTable from './TeamTable';
@@ -91,7 +90,7 @@ describe('TeamTable', () => {
 
     await userEvent.click(editButtons[0]);
     expect(mockNavigate).toHaveBeenCalledWith(
-      `/authz/${ROUTES.LIBRARIES_USER_PATH.replace(':username', 'bob')}`,
+      `/authz/libraries/${mockAuthZ.libraryId}/bob`,
     );
   });
 

src/authz-module/libraries-manager/components/TeamTable.tsx

@@ -5,7 +5,6 @@ import {
 } from '@openedx/paragon';
 import { Edit } from '@openedx/paragon/icons';
 import { TableCellValue, TeamMember } from '@src/types';
-import { ROUTES } from '@src/authz-module/constants';
 import { useTeamMembers } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from '../context';
 import messages from './messages';
@@ -82,7 +81,7 @@ const TeamTable = () => {
                 variant="link"
                 size="sm"
                 // TODO: update the view with the team member view
-                onClick={() => navigate(`/authz/${ROUTES.LIBRARIES_USER_PATH.replace(':username', row.original.username)}`)}
+                onClick={() => navigate(`/authz/libraries/${libraryId}/${row.original.username}`)}
               >
                 {intl.formatMessage(messages['authz.libraries.team.table.edit.action'])}
               </Button>

src/authz-module/libraries-manager/index.ts

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom';
+import LibrariesTeamManager from './LibrariesTeamManager';
+import LibrariesUserManager from './LibrariesUserManager';
+import { LibraryAuthZProvider } from './context';
+
+const LibrariesLayout = () => (<LibraryAuthZProvider><Outlet /></LibraryAuthZProvider>);
+
+export {
+  LibrariesLayout,
+  LibrariesTeamManager,
+  LibrariesUserManager,
+};