feat: create a toggle component to make the library public read

Author: dcoa

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

@@ -2,7 +2,7 @@ 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 } from '@src/authz-module/data/hooks';
+import { useLibrary, useUpdateLibrary } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from './context';
 import LibrariesTeamManager from './LibrariesTeamManager';
 
@@ -18,6 +18,7 @@ const mockedUseLibraryAuthZ = useLibraryAuthZ as jest.Mock;
 
 jest.mock('@src/authz-module/data/hooks', () => ({
   useLibrary: jest.fn(),
+  useUpdateLibrary: jest.fn(),
 }));
 
 jest.mock('./components/TeamTable', () => ({
@@ -46,16 +47,24 @@ jest.mock('../components/RoleCard', () => ({
 }));
 
 describe('LibrariesTeamManager', () => {
+  const libraryData = {
+    id: 'lib-001',
+    title: 'Test Library',
+    org: 'Test Org',
+    allowPublicRead: false,
+  };
+  const mutate = jest.fn();
+
   beforeEach(() => {
     initializeMockApp({
       authenticatedUser: {
         username: 'admin',
       },
     });
     mockedUseLibraryAuthZ.mockReturnValue({
-      libraryId: 'lib-001',
-      libraryName: 'Mock Library',
-      libraryOrg: 'MockOrg',
+      libraryId: libraryData.id,
+      libraryName: libraryData.title,
+      libraryOrg: libraryData.org,
       username: 'mockuser',
       roles: [
         {
@@ -74,10 +83,10 @@ describe('LibrariesTeamManager', () => {
     });
 
     (useLibrary as jest.Mock).mockReturnValue({
-      data: {
-        title: 'Test Library',
-        org: 'Test Org',
-      },
+      data: libraryData,
+    });
+    (useUpdateLibrary as jest.Mock).mockReturnValue({
+      mutate,
     });
   });
 
@@ -134,4 +143,18 @@ describe('LibrariesTeamManager', () => {
     expect(matrixScope.getByText('edit')).toBeInTheDocument();
     expect(matrixScope.getByText('view')).toBeInTheDocument();
   });
+
+  it('renders allow public library read toggle and change the value by user interaction', async () => {
+    const user = userEvent.setup();
+
+    renderWrapper(<LibrariesTeamManager />);
+
+    const readPublicToggle = await screen.findByRole('switch', { name: /Allow public read/i });
+
+    await user.click(readPublicToggle);
+    expect(mutate).toHaveBeenCalledWith({
+      libraryId: 'lib-001',
+      updatedData: { allowPublicRead: !libraryData.allowPublicRead },
+    });
+  });
 });

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

@@ -14,6 +14,7 @@ import { AddNewTeamMemberTrigger } from './components/AddNewTeamMemberModal';
 import { buildPermissionMatrixByResource, buildPermissionMatrixByRole } from './utils';
 
 import messages from './messages';
+import PublicReadToggle from './components/PublicReadToggle';
 
 const LibrariesTeamManager = () => {
   const intl = useIntl();
@@ -47,7 +48,8 @@ const LibrariesTeamManager = () => {
         pageSubtitle={libraryId}
         actions={
           canManageTeam
-            ? [<AddNewTeamMemberTrigger libraryId={libraryId} />]
+            ? [<PublicReadToggle libraryId={libraryId} key="allow-public-read" />,
+              <AddNewTeamMemberTrigger libraryId={libraryId} key="add-new-member" />]
             : []
         }
       >

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

@@ -0,0 +1,34 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+import { useLibrary, useUpdateLibrary } from '@src/authz-module/data/hooks';
+
+import messages from './messages';
+
+type PublicReadToggleProps = {
+  libraryId: string;
+};
+
+const PublicReadToggle = ({ libraryId }:PublicReadToggleProps) => {
+  const intl = useIntl();
+  const { data: library } = useLibrary(libraryId);
+  const { mutate: updateLibrary } = useUpdateLibrary();
+
+  const onChangeToggle = () => updateLibrary({
+    libraryId,
+    updatedData: { allowPublicRead: !library.allowPublicRead },
+  });
+
+  return (
+    <Form.Switch
+      checked={library.allowPublicRead}
+      onChange={onChangeToggle}
+      helperText={
+        <span>{intl.formatMessage(messages['libraries.authz.public.read.toggle.subtext'])}</span>
+      }
+    >
+      {intl.formatMessage(messages['libraries.authz.public.read.toggle.label'])}
+    </Form.Switch>
+  );
+};
+
+export default PublicReadToggle;

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

@@ -61,6 +61,16 @@ const messages = defineMessages({
     defaultMessage: 'Remove',
     description: 'Libraries AuthZ remove button title',
   },
+  'libraries.authz.public.read.toggle.label': {
+    id: 'libraries.authz.public.read.toggle.label',
+    defaultMessage: 'Allow public read',
+    description: 'Library label toggle to allow public read',
+  },
+  'libraries.authz.public.read.toggle.subtext': {
+    id: 'libraries.authz.public.read.toggle.subtext',
+    defaultMessage: 'Allows reuse of library content in courses.',
+    description: 'Library description toggle to allow public read',
+  },
 });
 
 export default messages;