feat: moving allow public read switch from admin console (#2942)

Author: jacobo-dominguez-wgu

src/library-authoring/components/PublicReadToggle.test.tsx

@@ -0,0 +1,117 @@
+import userEvent from '@testing-library/user-event';
+import { initializeMocks, render, screen } from '@src/testUtils';
+import PublicReadToggle from './PublicReadToggle';
+import messages from './messages';
+
+jest.mock('../data/apiHooks', () => ({
+  useContentLibrary: jest.fn(),
+  useUpdateLibraryMetadata: jest.fn(),
+}));
+
+const mockUseContentLibrary = require('../data/apiHooks').useContentLibrary;
+const mockUseUpdateLibraryMetadata = require('../data/apiHooks').useUpdateLibraryMetadata;
+
+let mockShowToast;
+
+describe('PublicReadToggle', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  it('renders toggle when allowPublicRead is true and canEditToggle is true', () => {
+    mockUseContentLibrary.mockReturnValue({ data: { allowPublicRead: true } });
+    mockUseUpdateLibraryMetadata.mockReturnValue({ mutateAsync: jest.fn(), isPending: false });
+
+    render(
+      <PublicReadToggle libraryId="lib1" canEditToggle />,
+    );
+    expect(screen.getByText(messages.publicReadToggleLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.publicReadToggleSubtext.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('toggle is disabled when canEditToggle is false', () => {
+    mockUseContentLibrary.mockReturnValue({ data: { allowPublicRead: true } });
+    mockUseUpdateLibraryMetadata.mockReturnValue({ mutateAsync: jest.fn(), isPending: false });
+
+    render(
+      <PublicReadToggle libraryId="lib1" canEditToggle={false} />,
+    );
+    expect(screen.getByRole('switch')).toBeDisabled();
+  });
+
+  it('calls updateLibrary when toggle is changed', async () => {
+    const user = userEvent.setup();
+    const mockMutateAsync = jest.fn().mockImplementation(() => Promise.resolve());
+    mockUseContentLibrary.mockReturnValue({ data: { allowPublicRead: false } });
+    mockUseUpdateLibraryMetadata.mockReturnValue({ mutateAsync: mockMutateAsync, isPending: false });
+
+    render(
+      <PublicReadToggle libraryId="lib1" canEditToggle />,
+    );
+    await user.click(screen.getByRole('switch'));
+    expect(mockMutateAsync).toHaveBeenCalledWith(
+      {
+        id: 'lib1',
+        allow_public_read: true,
+      },
+    );
+  });
+
+  it('shows error toast when updateLibrary fails', async () => {
+    const user = userEvent.setup();
+    const mockMutateAsync = jest.fn();
+
+    const error = {
+      customAttributes: {
+        httpErrorStatus: 500,
+      },
+    };
+
+    mockMutateAsync.mockImplementation((_, options) => {
+      if (options?.onError) {
+        options.onError(error);
+      }
+      return Promise.reject(error);
+    });
+
+    mockUseContentLibrary.mockReturnValue({ data: { allowPublicRead: false } });
+    mockUseUpdateLibraryMetadata.mockReturnValue({ mutateAsync: mockMutateAsync, isPending: false });
+
+    render(
+      <PublicReadToggle libraryId="lib1" canEditToggle />,
+    );
+
+    await user.click(screen.getByRole('switch'));
+
+    expect(mockMutateAsync).toHaveBeenCalledWith(
+      {
+        id: 'lib1',
+        allow_public_read: true,
+      },
+    );
+
+    expect(mockShowToast).toHaveBeenCalledWith(messages.publicReadToggleDefaultError.defaultMessage);
+  });
+
+  it('shows error toast when updateLibrary promise is rejected', async () => {
+    const user = userEvent.setup();
+    const mockMutateAsync = jest.fn().mockRejectedValue(new Error('Network error'));
+
+    mockUseContentLibrary.mockReturnValue({ data: { allowPublicRead: false } });
+    mockUseUpdateLibraryMetadata.mockReturnValue({ mutateAsync: mockMutateAsync, isPending: false });
+
+    render(
+      <PublicReadToggle libraryId="lib1" canEditToggle />,
+    );
+
+    await user.click(screen.getByRole('switch'));
+    expect(mockMutateAsync).toHaveBeenCalledWith(
+      {
+        id: 'lib1',
+        allow_public_read: true,
+      },
+    );
+    expect(mockShowToast).toHaveBeenCalledWith(messages.publicReadToggleDefaultError.defaultMessage);
+  });
+});

src/library-authoring/components/PublicReadToggle.tsx

@@ -0,0 +1,42 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+import { ToastContext } from '@src/generic/toast-context';
+import { useContext } from 'react';
+import messages from './messages';
+import { useContentLibrary, useUpdateLibraryMetadata } from '../data/apiHooks';
+
+type PublicReadToggleProps = {
+  libraryId: string;
+  canEditToggle: boolean;
+};
+
+const PublicReadToggle = ({ libraryId, canEditToggle }: PublicReadToggleProps) => {
+  const { formatMessage } = useIntl();
+  const { data: library } = useContentLibrary(libraryId);
+  const { mutateAsync: updateLibrary, isPending } = useUpdateLibraryMetadata();
+  const { showToast } = useContext(ToastContext);
+
+  const onChangeToggle = async () => {
+    await updateLibrary({
+      id: libraryId,
+      allow_public_read: !library?.allowPublicRead,
+    }).catch(() => {
+      showToast(formatMessage(messages.publicReadToggleDefaultError));
+    });
+  };
+
+  return (
+    <Form.Switch
+      checked={library?.allowPublicRead}
+      disabled={!canEditToggle || isPending}
+      onChange={onChangeToggle}
+      helperText={
+        <span>{formatMessage(messages.publicReadToggleSubtext)}</span>
+      }
+    >
+      {formatMessage(messages.publicReadToggleLabel)}
+    </Form.Switch>
+  );
+};
+
+export default PublicReadToggle;

src/library-authoring/components/messages.ts

@@ -246,5 +246,20 @@ const messages = defineMessages({
     defaultMessage: 'Remove',
     description: 'Button to confirm removal of a container from its parent',
   },
+  publicReadToggleLabel: {
+    id: 'course-authoring.library-authoring.public.read.toggle.label',
+    defaultMessage: 'Allow public read',
+    description: 'Library label toggle to allow public read',
+  },
+  publicReadToggleSubtext: {
+    id: 'course-authoring.library-authoring.public.read.toggle.subtext',
+    defaultMessage: 'Allows reuse of library content in courses.',
+    description: 'Library description toggle to allow public read',
+  },
+  publicReadToggleDefaultError: {
+    id: 'course-authoring.library-authoring.public.read.toggle.default.error.message',
+    defaultMessage: 'Something went wrong on our end. Please try again later.',
+    description: 'Public read toggle default error message',
+  },
 });
 export default messages;

src/library-authoring/library-info/LibraryInfo.test.tsx

@@ -45,7 +45,7 @@ describe('<LibraryInfo />', () => {
     mockShowToast = mocks.mockShowToast;
     validateUserPermissionsMock = mocks.validateUserPermissionsMock;
 
-    validateUserPermissionsMock.mockResolvedValue({ canPublish: true });
+    validateUserPermissionsMock.mockResolvedValue({ canPublish: true, canManageTeam: true });
   });
 
   afterEach(() => {
@@ -285,4 +285,29 @@ describe('<LibraryInfo />', () => {
     expect(manageTeam).toBeInTheDocument();
     expect(manageTeam).toHaveAttribute('href', `${ADMIN_CONSOLE_URL}/authz/libraries/${libraryData.id}`);
   });
+
+  it('renders settings section title', () => {
+    render();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('renders PublicReadToggle when user can manage team', async () => { 
+    render();
+    const allowSwitch = await screen.findByRole('switch', { name: /allow public read/i });
+    expect(allowSwitch).toBeInTheDocument();
+    await waitFor(() => {
+      expect(allowSwitch).toBeEnabled();
+    });
+  });
+
+  it('renders PublicReadToggle in disabled mode when user can not manage team', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canPublish: true, canManageTeam: false });
+
+    render();
+    const allowSwitch = await screen.findByRole('switch', { name: /allow public read/i });
+    expect(allowSwitch).toBeInTheDocument();
+    await waitFor(() => {
+      expect(allowSwitch).toBeDisabled();
+    });
+  });
 });

src/library-authoring/library-info/LibraryInfo.tsx

@@ -3,15 +3,24 @@ import { Button, Hyperlink, Stack } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 
+import { CONTENT_LIBRARY_PERMISSIONS } from '@src/authz/constants';
+import { useUserPermissions } from '@src/authz/data/apiHooks';
 import messages from './messages';
 import LibraryPublishStatus from './LibraryPublishStatus';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
+import PublicReadToggle from '../components/PublicReadToggle';
 
 const LibraryInfo = () => {
   const intl = useIntl();
   const { libraryId, libraryData, readOnly } = useLibraryContext();
   const { setSidebarAction } = useSidebarContext();
+  const { isLoading: isLoadingUserPermissions, data: userPermissions } = useUserPermissions({
+    canManageTeam: {
+      action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM,
+      scope: libraryId,
+    },
+  }, typeof libraryId !== 'undefined');
   const adminConsoleUrl = getConfig().ADMIN_CONSOLE_URL;
 
   // always show link to admin console MFE if it is being used
@@ -28,6 +37,13 @@ const LibraryInfo = () => {
     <Stack direction="vertical" gap={2.5}>
       <LibraryPublishStatus />
       <Stack gap={3} direction="vertical">
+        <span className="font-weight-bold">
+          {intl.formatMessage(messages.settingsSectionTitle)}
+        </span>
+        <PublicReadToggle
+          libraryId={libraryId}
+          canEditToggle={(!isLoadingUserPermissions && userPermissions?.canManageTeam) || false}
+        />
         <span className="font-weight-bold">
           {intl.formatMessage(messages.organizationSectionTitle)}
         </span>

src/library-authoring/library-info/messages.ts

@@ -11,6 +11,11 @@ const messages = defineMessages({
     defaultMessage: 'Organization',
     description: 'Title for Organization section in Library info sidebar.',
   },
+  settingsSectionTitle: {
+    id: 'course-authoring.library-authoring.sidebar.info.settings.title',
+    defaultMessage: 'Settings',
+    description: 'Title for Settings section in Library info sidebar.',
+  },
   libraryTeamButtonTitle: {
     id: 'course-authoring.library-authoring.sidebar.info.library-team.button.title',
     defaultMessage: 'Library Team',