Merge branch 'master' into chris/FAL-4266-import-from-course-stepper

Author: ChrisChV

package-lock.json

@@ -64,7 +64,7 @@
     "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
-    "@tanstack/react-query": "5.90.5",
+    "@tanstack/react-query": "5.90.6",
     "@tinymce/tinymce-react": "^6.0.0",
     "classnames": "2.5.1",
     "codemirror": "^6.0.0",

package.json

@@ -457,6 +457,9 @@ export const editorConfig = ({
       valid_elements: '*[*]',
       // FIXME: this is passing 'utf-8', which is not a valid entity_encoding value. It should be 'named' etc.
       entity_encoding: 'utf-8' as any,
+      // Protect self-closing <script /> tags from being mangled,
+      // to preserve backwards compatibility with content that relied on this behavior
+      protect: [/<script[^>]*\/>/g],
     },
   };
 };

src/editors/sharedComponents/TinyMceWidget/hooks.ts

@@ -6,7 +6,7 @@ import { type Container, useToggle } from '@openedx/paragon';
 import { useWaffleFlags } from '../data/apiHooks';
 import { SearchModal } from '../search-modal';
 import {
-  useContentMenuItems, useLibraryToolsMenuItems, useSettingMenuItems, useToolsMenuItems,
+  useContentMenuItems, useLibrarySettingsMenuItems, useLibraryToolsMenuItems, useSettingMenuItems, useToolsMenuItems,
 } from './hooks';
 import messages from './messages';
 
@@ -20,6 +20,7 @@ interface HeaderProps {
   isHiddenMainMenu?: boolean,
   isLibrary?: boolean,
   containerProps?: ContainerPropsType,
+  readOnly?: boolean,
 }
 
 const Header = ({
@@ -30,6 +31,7 @@ const Header = ({
   isHiddenMainMenu = false,
   isLibrary = false,
   containerProps = {},
+  readOnly = false,
 }: HeaderProps) => {
   const intl = useIntl();
   const waffleFlags = useWaffleFlags();
@@ -43,7 +45,8 @@ const Header = ({
   const settingMenuItems = useSettingMenuItems(contextId);
   const toolsMenuItems = useToolsMenuItems(contextId);
   const libraryToolsMenuItems = useLibraryToolsMenuItems(contextId);
-  const mainMenuDropdowns = !isLibrary ? [
+  const libraryToolsSettingsItems = useLibrarySettingsMenuItems(contextId, readOnly);
+  let mainMenuDropdowns = !isLibrary ? [
     {
       id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,
       buttonTitle: intl.formatMessage(messages['header.links.content']),
@@ -65,6 +68,18 @@ const Header = ({
     items: libraryToolsMenuItems,
   }];
 
+  // Include settings menu only if user is allowed to see them.
+  if (isLibrary && libraryToolsSettingsItems.length > 0) {
+    mainMenuDropdowns = [
+      {
+        id: `${intl.formatMessage(messages['header.links.settings'])}-dropdown-menu`,
+        buttonTitle: intl.formatMessage(messages['header.links.settings']),
+        items: libraryToolsSettingsItems,
+      },
+      ...mainMenuDropdowns,
+    ];
+  }
+
   const getOutlineLink = () => {
     if (isLibrary) {
       return `/library/${contextId}`;

src/header/Header.tsx

@@ -2,7 +2,9 @@ import { useSelector } from 'react-redux';
 import { getConfig, setConfig } from '@edx/frontend-platform';
 import { renderHook } from '@testing-library/react';
 import messages from './messages';
-import { useContentMenuItems, useToolsMenuItems, useSettingMenuItems } from './hooks';
+import {
+  useContentMenuItems, useToolsMenuItems, useSettingMenuItems, useLibrarySettingsMenuItems, useLibraryToolsMenuItems,
+} from './hooks';
 import { mockWaffleFlags } from '../data/apiHooks.mock';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
@@ -28,7 +30,7 @@ jest.mock('react-redux', () => ({
 describe('header utils', () => {
   describe('getContentMenuItems', () => {
     it('when video upload page enabled should include Video Uploads option', () => {
-      useSelector.mockReturnValue({
+      jest.mocked(useSelector).mockReturnValue({
         librariesV2Enabled: false,
       });
       setConfig({
@@ -39,7 +41,7 @@ describe('header utils', () => {
       expect(actualItems).toHaveLength(5);
     });
     it('when video upload page disabled should not include Video Uploads option', () => {
-      useSelector.mockReturnValue({
+      jest.mocked(useSelector).mockReturnValue({
         librariesV2Enabled: false,
       });
       setConfig({
@@ -50,7 +52,7 @@ describe('header utils', () => {
       expect(actualItems).toHaveLength(4);
     });
     it('adds course libraries link to content menu when libraries v2 is enabled', () => {
-      useSelector.mockReturnValue({
+      jest.mocked(useSelector).mockReturnValue({
         librariesV2Enabled: true,
       });
       const actualItems = renderHook(() => useContentMenuItems('course-123')).result.current;
@@ -60,7 +62,7 @@ describe('header utils', () => {
 
   describe('getSettingsMenuitems', () => {
     beforeEach(() => {
-      useSelector.mockReturnValue({
+      jest.mocked(useSelector).mockReturnValue({
         canAccessAdvancedSettings: true,
       });
     });
@@ -86,7 +88,7 @@ describe('header utils', () => {
       expect(actualItemsTitle).toContain('Advanced Settings');
     });
     it('when user has no access to advanced settings should not include advanced settings option', () => {
-      useSelector.mockReturnValue({ canAccessAdvancedSettings: false });
+      jest.mocked(useSelector).mockReturnValue({ canAccessAdvancedSettings: false });
       const actualItemsTitle = renderHook(() => useSettingMenuItems('course-123')).result.current.map((item) => item.title);
       expect(actualItemsTitle).not.toContain('Advanced Settings');
     });
@@ -137,4 +139,44 @@ describe('header utils', () => {
       expect(actualItemsTitle).not.toContain(messages['header.links.optimizer'].defaultMessage);
     });
   });
+
+  describe('useLibrarySettingsMenuItems', () => {
+    it('should contain team access url', () => {
+      const items = renderHook(() => useLibrarySettingsMenuItems('library-123', false)).result.current;
+      expect(items).toContainEqual({ title: 'Team Access', href: 'http://localhost/?sa=manage-team' });
+    });
+    it('should contain admin console url if set', () => {
+      setConfig({
+        ...getConfig(),
+        ADMIN_CONSOLE_URL: 'http://admin-console.com',
+      });
+      const items = renderHook(() => useLibrarySettingsMenuItems('library-123', false)).result.current;
+      expect(items).toContainEqual({
+        title: 'Team Access',
+        href: 'http://admin-console.com/authz/libraries/library-123',
+      });
+    });
+    it('should contain admin console url if set and readOnly is true', () => {
+      setConfig({
+        ...getConfig(),
+        ADMIN_CONSOLE_URL: 'http://admin-console.com',
+      });
+      const items = renderHook(() => useLibrarySettingsMenuItems('library-123', true)).result.current;
+      expect(items).toContainEqual({
+        title: 'Team Access',
+        href: 'http://admin-console.com/authz/libraries/library-123',
+      });
+    });
+  });
+
+  describe('useLibraryToolsMenuItems', () => {
+    it('should contain backup and import url', () => {
+      const items = renderHook(() => useLibraryToolsMenuItems('course-123')).result.current;
+      expect(items).toContainEqual({
+        href: '/library/course-123/backup',
+        title: 'Backup to local archive',
+      });
+      expect(items).toContainEqual({ href: '/library/course-123/import', title: 'Import' });
+    });
+  });
 });

src/header/hooks.test.js src/header/hooks.test.tssrc/header/hooks.test.js renamed to src/header/hooks.test.ts

@@ -3,13 +3,15 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import { Badge } from '@openedx/paragon';
 
-import { getPagePath } from '../utils';
-import { useWaffleFlags } from '../data/apiHooks';
-import { getStudioHomeData } from '../studio-home/data/selectors';
+import { getPagePath } from '@src/utils';
+import { useWaffleFlags } from '@src/data/apiHooks';
+import { getStudioHomeData } from '@src/studio-home/data/selectors';
+import courseOptimizerMessages from '@src/optimizer-page/messages';
+import { SidebarActions } from '@src/library-authoring/common/context/SidebarContext';
+import { LibQueryParamKeys } from '@src/library-authoring/routes';
 import messages from './messages';
-import courseOptimizerMessages from '../optimizer-page/messages';
 
-export const useContentMenuItems = courseId => {
+export const useContentMenuItems = (courseId: string) => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const waffleFlags = useWaffleFlags();
@@ -50,7 +52,7 @@ export const useContentMenuItems = courseId => {
   return items;
 };
 
-export const useSettingMenuItems = courseId => {
+export const useSettingMenuItems = (courseId: string) => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const { canAccessAdvancedSettings } = useSelector(getStudioHomeData);
@@ -89,7 +91,7 @@ export const useSettingMenuItems = courseId => {
   return items;
 };
 
-export const useToolsMenuItems = (courseId) => {
+export const useToolsMenuItems = (courseId: string) => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const waffleFlags = useWaffleFlags();
@@ -127,15 +129,57 @@ export const useToolsMenuItems = (courseId) => {
   return items;
 };
 
-export const useLibraryToolsMenuItems = itemId => {
+export const useLibraryToolsMenuItems = (itemId: string) => {
   const intl = useIntl();
 
   const items = [
     {
       href: `/library/${itemId}/backup`,
       title: intl.formatMessage(messages['header.links.exportLibrary']),
     },
+    {
+      href: `/library/${itemId}/import`,
+      title: intl.formatMessage(messages['header.links.lib.import']),
+    },
   ];
 
   return items;
 };
+
+export const useLibrarySettingsMenuItems = (itemId: string, readOnly: boolean) => {
+  const intl = useIntl();
+
+  const openTeamAccessModalUrl = () => {
+    const adminConsoleUrl = getConfig().ADMIN_CONSOLE_URL;
+    // always show link to admin console MFE if it is being used
+    const shouldShowAdminConsoleLink = !!adminConsoleUrl;
+
+    // if the admin console MFE isn't being used, show team modal button for non–read-only users
+    const shouldShowTeamModalButton = !adminConsoleUrl && !readOnly;
+    if (shouldShowTeamModalButton) {
+      if (!window.location.href) {
+        return null;
+      }
+      const url = new URL(window.location.href);
+      // Set ?sa=manage-team in url which in turn opens team access modal
+      url.searchParams.set(LibQueryParamKeys.SidebarActions, SidebarActions.ManageTeam);
+      return url.toString();
+    }
+    if (shouldShowAdminConsoleLink) {
+      return `${adminConsoleUrl}/authz/libraries/${itemId}`;
+    }
+    return null;
+  };
+
+  const items: { title: string; href: string }[] = [];
+
+  const teamAccessUrl = openTeamAccessModalUrl();
+  if (teamAccessUrl) {
+    items.push({
+      title: intl.formatMessage(messages['header.menu.teamAccess']),
+      href: teamAccessUrl,
+    });
+  }
+
+  return items;
+};

src/header/hooks.jsx src/header/hooks.tsxsrc/header/hooks.jsx renamed to src/header/hooks.tsx

@@ -96,6 +96,11 @@ const messages = defineMessages({
     defaultMessage: 'Import',
     description: 'Link to Studio Import page',
   },
+  'header.links.lib.import': {
+    id: 'header.links.lib.import',
+    defaultMessage: 'Import',
+    description: 'Link to Course Import page in library',
+  },
   'header.links.exportCourse': {
     id: 'header.links.exportCourse',
     defaultMessage: 'Export Course',
@@ -106,6 +111,11 @@ const messages = defineMessages({
     defaultMessage: 'Backup to local archive',
     description: 'Link to Studio Backup Library page',
   },
+  'header.menu.teamAccess': {
+    id: 'header.links.teamAccess',
+    defaultMessage: 'Team Access',
+    description: 'Menu item to open team access popup',
+  },
   'header.links.optimizer': {
     id: 'header.links.optimizer',
     defaultMessage: 'Course Optimizer',

src/header/index.js src/header/index.tssrc/header/index.js renamed to src/header/index.ts

@@ -74,7 +74,6 @@ export const ConfirmationView = ({
         {...messages.confirmationViewAlert}
         values={{
           count: legacyLibraries.length,
-          libraryName: destination.title,
           b: BoldText,
         }}
       />

src/header/messages.js src/header/messages.tssrc/header/messages.js renamed to src/header/messages.ts

@@ -245,14 +245,11 @@ describe('<LegacyLibMigrationPage />', () => {
     await user.click(nextButton);
     const alert = await screen.findByRole('alert');
     expect(await within(alert).findByText(
-      /All content from the 1 legacy library you selected will be migrated to/i,
-    )).toBeInTheDocument();
-    expect(await within(alert).findByText(
-      /test library 1/i,
+      /All content from the legacy library you selected will be migrated to the Content Library you select/i,
     )).toBeInTheDocument();
 
     const backButton = screen.getByRole('button', { name: /back/i });
-    backButton.click();
+    await user.click(backButton);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     // The selected v2 library remains checked
@@ -357,10 +354,7 @@ describe('<LegacyLibMigrationPage />', () => {
     // Should show alert of ConfirmationView
     const alert = await screen.findByRole('alert');
     expect(await within(alert).findByText(
-      /All content from the 3 legacy libraries you selected will be migrated to/i,
-    )).toBeInTheDocument();
-    expect(await within(alert).findByText(
-      /test library 1/i,
+      /All content from the 3 legacy libraries you selected will be migrated to the Content Library you select/i,
     )).toBeInTheDocument();
     expect(screen.getByText('MBA')).toBeInTheDocument();
     expect(screen.getByText('Legacy library 1')).toBeInTheDocument();
@@ -417,11 +411,7 @@ describe('<LegacyLibMigrationPage />', () => {
     // Should show alert of ConfirmationView
     const alert = await screen.findByRole('alert');
     expect(await within(alert).findByText(
-      /All content from the 3 legacy libraries you selected will be migrated to /i,
-      { exact: false },
-    )).toBeInTheDocument();
-    expect(await within(alert).findByText(
-      /test library 1/i,
+      /All content from the 3 legacy libraries you selected will be migrated to the Content Library you select/i,
       { exact: false },
     )).toBeInTheDocument();
     expect(screen.getByText('MBA')).toBeInTheDocument();