feat: [FC-0099] redirect to admin console MFE (#2570)

* feat: redirect to admin console MFE

This PR redirects to admin console MFE if the URL is configured, to leverage the new experience of team management this is part of the AuthZ project https://github.com/openedx/openedx-authz/tree/main/docs/decisions

* refactor: split the logic into 2 variables for readability

.env

@@ -48,3 +48,4 @@ LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''
+ADMIN_CONSOLE_URL='http://localhost:2025/admin-console'

.env.development

@@ -51,3 +51,4 @@ LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''
+ADMIN_CONSOLE_URL='http://localhost:2025/admin-console'

src/index.jsx

@@ -178,6 +178,7 @@ initialize({
         ENABLE_GRADING_METHOD_IN_PROBLEMS: process.env.ENABLE_GRADING_METHOD_IN_PROBLEMS === 'true',
         LIBRARY_UNSUPPORTED_BLOCKS: (process.env.LIBRARY_UNSUPPORTED_BLOCKS || 'conditional,step-builder,problem-builder').split(','),
         COURSE_TEAM_SUPPORT_EMAIL: process.env.COURSE_TEAM_SUPPORT_EMAIL || null,
+        ADMIN_CONSOLE_URL: process.env.ADMIN_CONSOLE_URL || null,
       }, 'CourseAuthoringConfig');
     },
   },

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

@@ -1,4 +1,5 @@
 import type MockAdapter from 'axios-mock-adapter';
+import { mergeConfig } from '@edx/frontend-platform';
 
 import {
   fireEvent,
@@ -27,7 +28,7 @@ const {
 } = mockContentLibrary;
 
 const render = (libraryId: string = mockLibraryId) => baseRender(<LibraryInfo />, {
-  extraWrapper: ({ children }) => <LibraryProvider libraryId={libraryId}>{ children }</LibraryProvider>,
+  extraWrapper: ({ children }) => <LibraryProvider libraryId={libraryId}>{children}</LibraryProvider>,
 });
 
 let axiosMock: MockAdapter;
@@ -270,4 +271,13 @@ describe('<LibraryInfo />', () => {
     expect(publishButton).not.toBeInTheDocument();
     expect(discardButton).not.toBeInTheDocument();
   });
+
+  it('display a redirection button when ADMIN_CONSOLE_URL is setted', async () => {
+    const ADMIN_CONSOLE_URL = 'http://localhost:2025/admin-console';
+    mergeConfig({ ADMIN_CONSOLE_URL });
+    render();
+    const manageTeam = await screen.getByText('Manage Access');
+    expect(manageTeam).toBeInTheDocument();
+    expect(manageTeam).toHaveAttribute('href', `${ADMIN_CONSOLE_URL}/authz/libraries/${libraryData.id}`);
+  });
 });

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

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { Button, Stack } from '@openedx/paragon';
+import { Button, Hyperlink, Stack } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
@@ -10,9 +11,17 @@ import { SidebarActions, useSidebarContext } from '../common/context/SidebarCont
 
 const LibraryInfo = () => {
   const intl = useIntl();
-  const { libraryData, readOnly } = useLibraryContext();
+  const { libraryId, libraryData, readOnly } = useLibraryContext();
   const { sidebarAction, setSidebarAction, resetSidebarAction } = useSidebarContext();
   const isLibraryTeamModalOpen = (sidebarAction === SidebarActions.ManageTeam);
+  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;
+
   const openLibraryTeamModal = useCallback(() => {
     setSidebarAction(SidebarActions.ManageTeam);
   }, [setSidebarAction]);
@@ -30,11 +39,16 @@ const LibraryInfo = () => {
         <span>
           {libraryData?.org}
         </span>
-        {!readOnly && (
+        {shouldShowTeamModalButton && (
           <Button variant="outline-primary" onClick={openLibraryTeamModal}>
             {intl.formatMessage(messages.libraryTeamButtonTitle)}
           </Button>
         )}
+        {shouldShowAdminConsoleLink && (
+          <Button as={Hyperlink} variant="outline-primary" destination={`${adminConsoleUrl}/authz/libraries/${libraryId}`} target="_blank">
+            {intl.formatMessage(messages.libraryTeamButtonTitle)}
+          </Button>
+        )}
       </Stack>
       <Stack gap={3}>
         <span className="font-weight-bold">