refactor: point to admin console if url set

Author: navinkarkera

src/header/Header.tsx

@@ -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,8 +45,8 @@ const Header = ({
   const settingMenuItems = useSettingMenuItems(contextId);
   const toolsMenuItems = useToolsMenuItems(contextId);
   const libraryToolsMenuItems = useLibraryToolsMenuItems(contextId);
-  const libraryToolsSettingsItems = useLibrarySettingsMenuItems();
-  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']),
@@ -61,18 +63,25 @@ const Header = ({
       items: toolsMenuItems,
     },
   ] : [
-    {
-      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,
     },
   ];
 
+  // 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/hooks.test.ts

@@ -142,7 +142,7 @@ describe('header utils', () => {
 
   describe('useLibrarySettingsMenuItems', () => {
     it('should contain team access url', () => {
-      const items = renderHook(() => useLibrarySettingsMenuItems()).result.current;
+      const items = renderHook(() => useLibrarySettingsMenuItems('library-123', false)).result.current;
       expect(items).toContainEqual({ title: 'Team Access', href: 'http://localhost/?sa=manage-team' });
     });
   });

src/header/hooks.tsx

@@ -146,25 +146,40 @@ export const useLibraryToolsMenuItems = (itemId: string) => {
   return items;
 };
 
-export const useLibrarySettingsMenuItems = () => {
+export const useLibrarySettingsMenuItems = (itemId: string, readOnly: boolean) => {
   const intl = useIntl();
 
   const openTeamAccessModalUrl = () => {
-    if (!window.location.href) {
-      return null;
+    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();
     }
-    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 = [
-    {
+  const items: { title: string; href: string }[] = [];
+
+  const teamAccessUrl = openTeamAccessModalUrl();
+  if (teamAccessUrl) {
+    items.push({
       title: intl.formatMessage(messages['header.menu.teamAccess']),
-      href: openTeamAccessModalUrl(),
-    },
-  ];
+      href: teamAccessUrl,
+    });
+  }
 
   return items;
 };

src/library-authoring/backup-restore/LibraryBackupPage.tsx

@@ -24,7 +24,7 @@ import { useContentLibrary } from '@src/library-authoring/data/apiHooks';
 
 export const LibraryBackupPage = () => {
   const intl = useIntl();
-  const { libraryId } = useLibraryContext();
+  const { libraryId, readOnly } = useLibraryContext();
   const [taskId, setTaskId] = useState<string>('');
   const [isMutationInProgress, setIsMutationInProgress] = useState<boolean>(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -144,6 +144,7 @@ export const LibraryBackupPage = () => {
           title={libraryData.title}
           org={libraryData.org}
           contextId={libraryId}
+          readOnly={readOnly}
           isLibrary
           containerProps={{
             size: undefined,

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -107,6 +107,7 @@ const LibraryCollectionPage = () => {
     showOnlyPublished,
     extraFilter: contextExtraFilter,
     setCollectionId,
+    readOnly,
   } = useLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
@@ -194,6 +195,7 @@ const LibraryCollectionPage = () => {
             title={libraryData.title}
             org={libraryData.org}
             contextId={libraryId}
+            readOnly={readOnly}
             isLibrary
             containerProps={{
               size: undefined,

src/library-authoring/section-subsections/LibrarySectionPage.tsx

@@ -20,7 +20,7 @@ import { ContainerEditableTitle, FooterActions, HeaderActions } from '../contain
 /** Full library section page */
 export const LibrarySectionPage = () => {
   const intl = useIntl();
-  const { libraryId, containerId } = useLibraryContext();
+  const { libraryId, containerId, readOnly } = useLibraryContext();
   const {
     sidebarItemInfo,
   } = useSidebarContext();
@@ -84,6 +84,7 @@ export const LibrarySectionPage = () => {
           org={libraryData.org}
           contextId={libraryData.id}
           isLibrary
+          readOnly={readOnly}
           containerProps={{
             size: undefined,
           }}

src/library-authoring/section-subsections/LibrarySubsectionPage.tsx

@@ -22,7 +22,7 @@ import { ContainerEditableTitle, FooterActions, HeaderActions } from '../contain
 /** Full library subsection page */
 export const LibrarySubsectionPage = () => {
   const intl = useIntl();
-  const { libraryId, containerId } = useLibraryContext();
+  const { libraryId, containerId, readOnly } = useLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const { data: libraryData, isPending: isLibPending } = useContentLibrary(libraryId);
@@ -64,6 +64,7 @@ export const LibrarySubsectionPage = () => {
           title={libraryData.title}
           org={libraryData.org}
           contextId={libraryData.id}
+          readOnly={readOnly}
           isLibrary
           containerProps={{
             size: undefined,

src/library-authoring/units/LibraryUnitPage.tsx

@@ -23,10 +23,7 @@ import { ContainerEditableTitle, FooterActions, HeaderActions } from '../contain
 export const LibraryUnitPage = () => {
   const intl = useIntl();
 
-  const {
-    libraryId,
-    containerId,
-  } = useLibraryContext();
+  const { libraryId, containerId, readOnly } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
   if (!containerId) {
@@ -71,6 +68,7 @@ export const LibraryUnitPage = () => {
           org={libraryData.org}
           contextId={libraryId}
           isLibrary
+          readOnly={readOnly}
           containerProps={{
             size: undefined,
           }}