feat: library settings menu

Author: navinkarkera

src/header/Header.tsx

@@ -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';
 
@@ -43,6 +43,7 @@ const Header = ({
   const settingMenuItems = useSettingMenuItems(contextId);
   const toolsMenuItems = useToolsMenuItems(contextId);
   const libraryToolsMenuItems = useLibraryToolsMenuItems(contextId);
+  const libraryToolsSettingsItems = useLibrarySettingsMenuItems();
   const mainMenuDropdowns = !isLibrary ? [
     {
       id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,
@@ -59,11 +60,18 @@ const Header = ({
       buttonTitle: intl.formatMessage(messages['header.links.tools']),
       items: toolsMenuItems,
     },
-  ] : [{
-    id: `${intl.formatMessage(messages['header.links.tools'])}-dropdown-menu`,
-    buttonTitle: intl.formatMessage(messages['header.links.tools']),
-    items: libraryToolsMenuItems,
-  }];
+  ] : [
+    {
+      id: `${intl.formatMessage(messages['header.links.settings'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.settings']),
+      items: libraryToolsSettingsItems,
+    },
+    {
+      id: `${intl.formatMessage(messages['header.links.tools'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.tools']),
+      items: libraryToolsMenuItems,
+    },
+  ];
 
   const getOutlineLink = () => {
     if (isLibrary) {

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

@@ -3,13 +3,14 @@ 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 messages from './messages';
-import courseOptimizerMessages from '../optimizer-page/messages';
+import courseOptimizerMessages from '@src/optimizer-page/messages';
+import { LibQueryParamKeys, SidebarActions } from '@src/library-authoring/common/context/SidebarContext';
 
-export const useContentMenuItems = courseId => {
+export const useContentMenuItems = (courseId: string) => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const waffleFlags = useWaffleFlags();
@@ -50,7 +51,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 +90,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,7 +128,7 @@ export const useToolsMenuItems = (courseId) => {
   return items;
 };
 
-export const useLibraryToolsMenuItems = itemId => {
+export const useLibraryToolsMenuItems = (itemId: string) => {
   const intl = useIntl();
 
   const items = [
@@ -139,3 +140,23 @@ export const useLibraryToolsMenuItems = itemId => {
 
   return items;
 };
+
+export const useLibrarySettingsMenuItems = () => {
+  const intl = useIntl();
+
+  const openTeamAccessModalUrl = () => {
+    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();
+  }
+
+  const items = [
+    {
+      title: intl.formatMessage(messages['header.menu.teamAccess']),
+      href: openTeamAccessModalUrl(),
+    },
+  ];
+
+  return items;
+};

src/header/messages.js

@@ -106,6 +106,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/library-authoring/LibraryLayout.tsx

@@ -18,6 +18,7 @@ import { CreateContainerModal } from './create-container';
 import { ROUTES } from './routes';
 import { LibrarySectionPage, LibrarySubsectionPage } from './section-subsections';
 import { LibraryUnitPage } from './units';
+import { LibraryTeamModal } from './library-team';
 
 const LibraryLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   const {
@@ -48,6 +49,7 @@ const LibraryLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) =
         <CreateCollectionModal />
         <CreateContainerModal />
         <ComponentEditorModal />
+        <LibraryTeamModal />
       </SidebarProvider>
     </LibraryProvider>
   );

src/library-authoring/common/context/SidebarContext.tsx

@@ -81,6 +81,11 @@ export enum SidebarActions {
   None = '',
 }
 
+export enum LibQueryParamKeys {
+  SidebarActions = 'sa',
+  SidebarTab = 'st',
+}
+
 export type SidebarContextData = {
   closeLibrarySidebar: () => void;
   openAddContentSidebar: () => void;
@@ -129,14 +134,14 @@ export const SidebarProvider = ({
 
   const [sidebarTab, setSidebarTab] = useStateWithUrlSearchParam<SidebarInfoTab>(
     defaultTab.component,
-    'st',
+    LibQueryParamKeys.SidebarTab,
     (value: string) => toSidebarInfoTab(value),
     (value: SidebarInfoTab) => value.toString(),
   );
 
   const [sidebarAction, setSidebarAction] = useStateWithUrlSearchParam<SidebarActions>(
     SidebarActions.None,
-    'sa',
+    LibQueryParamKeys.SidebarActions,
     (value: string) => Object.values(SidebarActions).find((enumValue) => value === enumValue),
     (value: SidebarActions) => value.toString(),
   );

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

@@ -4,21 +4,16 @@ import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import LibraryPublishStatus from './LibraryPublishStatus';
-import { LibraryTeamModal } from '../library-team';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
 
 const LibraryInfo = () => {
   const intl = useIntl();
   const { libraryData, readOnly } = useLibraryContext();
-  const { sidebarAction, setSidebarAction, resetSidebarAction } = useSidebarContext();
-  const isLibraryTeamModalOpen = (sidebarAction === SidebarActions.ManageTeam);
+  const { setSidebarAction } = useSidebarContext();
   const openLibraryTeamModal = useCallback(() => {
     setSidebarAction(SidebarActions.ManageTeam);
   }, [setSidebarAction]);
-  const closeLibraryTeamModal = useCallback(() => {
-    resetSidebarAction();
-  }, [resetSidebarAction]);
 
   return (
     <Stack direction="vertical" gap={2.5}>
@@ -67,7 +62,6 @@ const LibraryInfo = () => {
           </span>
         </Stack>
       </Stack>
-      {isLibraryTeamModalOpen && <LibraryTeamModal onClose={closeLibraryTeamModal} />}
     </Stack>
   );
 };

src/library-authoring/library-team/LibraryTeamModal.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-
 import { StandardModal } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import LibraryTeam from './LibraryTeam';
 import messages from './messages';
+import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
+import { useCallback } from 'react';
 
-interface LibraryTeamModalProps {
-  onClose: () => void;
-}
-
-export const LibraryTeamModal: React.FC<LibraryTeamModalProps> = ({
-  onClose,
-}) => {
+export const LibraryTeamModal = () => {
   const intl = useIntl();
+  const { sidebarAction, resetSidebarAction } = useSidebarContext();
+  // Open the library team modal only when Manage Team sidebar action is set
+  const isOpen = (sidebarAction === SidebarActions.ManageTeam);
+  const onClose = useCallback(() => {
+    resetSidebarAction();
+  }, [resetSidebarAction]);
 
   // Show Library Team modal in full screen
   return (
     <StandardModal
-      isOpen
+      isOpen={isOpen}
       title={intl.formatMessage(messages.modalTitle)}
       onClose={onClose}
       size="lg"

src/library-authoring/routes.ts

@@ -11,6 +11,7 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import { ContainerType, getBlockType } from '../generic/key-utils';
+import { LibQueryParamKeys } from './common/context/SidebarContext';
 
 export const BASE_ROUTE = '/library/:libraryId';
 
@@ -231,7 +232,7 @@ export const useLibraryRoutes = (): LibraryRoutesData => {
     }
 
     // Also remove the `sa` (sidebar action) search param if it exists.
-    searchParams.delete('sa');
+    searchParams.delete(LibQueryParamKeys.SidebarActions);
 
     const newPath = generatePath(BASE_ROUTE + route, routeParams);
     // Prevent unnecessary navigation if the path is the same.

src/studio-home/data/slice.ts

@@ -63,6 +63,7 @@ const slice = createSlice({
       studioShortName?: string;
       techSupportEmail?: string;
       userIsActive?: boolean;
+      canAccessAdvancedSettings?: boolean;
     },
     studioHomeCoursesRequestParams: studioHomeCoursesRequestParamsDefault,
   },