feat: add the libraries authz management view

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

@@ -0,0 +1,55 @@
+import { screen } from '@testing-library/react';
+import LibrariesAuthZManager from './LibrariesAuthZManager';
+import { useLibraryAuthZ } from './context';
+import { renderWrapper } from '@src/setupTest';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+jest.mock('./context', () => {
+  const actual = jest.requireActual('./context');
+  return {
+    ...actual,
+    useLibraryAuthZ: jest.fn(),
+    LibraryAuthZProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  };
+});
+const mockedUseLibraryAuthZ = useLibraryAuthZ as jest.Mock;
+
+jest.mock('./components/TeamTable', () => ({
+  __esModule: true,
+  default: () => <div data-testid="team-table">MockTeamTable</div>,
+}));
+
+describe('LibrariesAuthZManager', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        username: 'admin'
+      }
+    })
+    mockedUseLibraryAuthZ.mockReturnValue({
+      libraryId: 'lib-001',
+      libraryName: 'Mock Library',
+      libraryOrg: 'MockOrg',
+      username: 'mockuser',
+      roles: ['admin'],
+      permissions: [],
+      canManageTeam: true,
+    });
+  });
+
+  it('renders tabs and layout content correctly', () => {
+    renderWrapper(<div>hola<LibrariesAuthZManager /></div>);
+
+    // Tabs
+    expect(screen.getByRole('tab', { name: /Team Members/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Roles/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Permissions/i })).toBeInTheDocument();
+
+    // Breadcrumb/page title
+    expect(screen.getByText('Manage Access')).toBeInTheDocument(); // from intl.formatMessage
+    expect(screen.getByText('lib-001')).toBeInTheDocument(); // subtitle
+
+    // TeamTable is rendered
+    expect(screen.getByTestId('team-table')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Tab, Tabs } from '@openedx/paragon';
+import TeamTable from './components/TeamTable';
+import AuthZLayout from '../components/AuthZLayout';
+import { LibraryAuthZProvider, useLibraryAuthZ } from './context';
+
+import messages from './messages';
+
+const LibrariesAuthZView = () => {
+  const intl = useIntl();
+  const { libraryId, libraryName, libraryOrg } = useLibraryAuthZ();
+  const rootBradecrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
+  const pageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
+  return (
+    <div className="authz-libraries">
+      <AuthZLayout
+        context={{ id: libraryId, title: libraryName, org: libraryOrg }}
+        navLinks={[{ label: rootBradecrumb }]}
+        activeLabel={pageTitle}
+        pageTitle={pageTitle}
+        pageSubtitle={libraryId}
+        actions={[]}
+      >
+        <Tabs
+          variant="tabs"
+          defaultActiveKey="team"
+          className="bg-light-100 px-5"
+        >
+          <Tab eventKey="team" title={intl.formatMessage(messages['library.authz.tabs.team'])} className="p-5">
+            <TeamTable />
+          </Tab>
+          <Tab eventKey="roles" title={intl.formatMessage(messages['library.authz.tabs.roles'])}>
+            Role tab.
+          </Tab>
+          <Tab eventKey="permissions" title={intl.formatMessage(messages['library.authz.tabs.permissions'])}>
+            Permissions tab.
+          </Tab>
+        </Tabs>
+      </AuthZLayout>
+    </div>
+  );
+};
+const LibrariesAuthZManager = () => (
+  <LibraryAuthZProvider>
+    <LibrariesAuthZView />
+  </LibraryAuthZProvider>
+);
+
+export default LibrariesAuthZManager;

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

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