feat: add library v2 alert (#2413)

Adds an Alert to the Legacy Library Page to notify the user of the process of deprecating Legacy Libraries and a Button to open the Migrate Library interface.

Author: rpenido

src/generic/alert-error/AlertError.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import AlertError from '.';
@@ -33,7 +33,6 @@ describe('<AlertMessage />', () => {
       },
     };
     const { getByText } = render(<RootWrapper error={error} />);
-    screen.logTestingPlaygroundURL();
     expect(getByText(/this is an error message/i)).toBeInTheDocument();
     expect(getByText(/\{ "message": "this is a response body" \}/i)).toBeInTheDocument();
   });

src/library-authoring/generic/manage-collections/ManageCollections.test.tsx

@@ -121,7 +121,6 @@ describe('<ManageCollections />', () => {
       collections={[]}
       useUpdateCollectionsHook={useUpdateComponentCollections}
     />);
-    screen.logTestingPlaygroundURL();
     const manageBtn = await screen.findByRole('button', { name: 'Add to Collection' });
     await user.click(manageBtn);
     await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });

src/library-authoring/units/LibraryUnitPage.test.tsx

@@ -177,7 +177,6 @@ describe('<LibraryUnitPage />', () => {
     const textBox = screen.getByRole('textbox', { name: /text input/i });
     expect(textBox).toBeInTheDocument();
     expect(textBox).toHaveValue('Test Unit');
-    screen.logTestingPlaygroundURL();
     fireEvent.change(textBox, { target: { value: 'New Unit Title' } });
     fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
 

src/studio-home/data/apiHooks.ts

@@ -12,7 +12,7 @@ export const studioHomeQueryKeys = {
 export const useLibrariesV1Data = (enabled: boolean = true) => (
   useQuery({
     queryKey: studioHomeQueryKeys.librariesV1(),
-    queryFn: () => getStudioHomeLibraries(),
+    queryFn: getStudioHomeLibraries,
     enabled,
   })
 );

src/studio-home/tabs-section/TabsSection.test.tsx

@@ -478,5 +478,42 @@ describe('<TabsSection />', () => {
         tabMessages.librariesTabErrorMessage.defaultMessage,
       )).toBeVisible();
     });
+
+    [true, false].forEach((isMigrated) => {
+      it(`should render v2 libraries migration alert when the libraries have isMigrated=${isMigrated}`, async () => {
+        setConfig({
+          ...getConfig(),
+          ENABLE_LEGACY_LIBRARY_MIGRATOR: 'true',
+        });
+        const libraries = generateGetStudioHomeLibrariesApiResponse().libraries.map(
+          library => ({
+            ...library,
+            isMigrated,
+          }),
+        );
+        const user = userEvent.setup();
+        await axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeLibrariesApiResponse());
+        await axiosMock.onGet(libraryApiLink).reply(200, { libraries });
+        render();
+        await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+        const librariesTab = await screen.findByRole('tab', { name: librariesBetaTabTitle });
+        await user.click(librariesTab);
+
+        expect(librariesTab).toHaveClass('active');
+
+        expect(await screen.findByText(/welcome to the new content libraries/i)).toBeVisible();
+
+        const migrationPendingText = /legacy libraries can be migrated using the migration tool/i;
+
+        if (isMigrated) {
+          expect(screen.queryByText(migrationPendingText)).not.toBeInTheDocument();
+          expect(screen.queryByRole('button', { name: 'Review Legacy Libraries' })).not.toBeInTheDocument();
+        } else {
+          expect(screen.getByText(migrationPendingText)).toBeVisible();
+          expect(screen.getByRole('button', { name: 'Review Legacy Libraries' })).toBeVisible();
+        }
+      });
+    });
   });
 });

src/studio-home/tabs-section/libraries-tab/MigrateLegacyLibrariesAlert.tsx

@@ -11,7 +11,7 @@ export const MigrateLegacyLibrariesAlert = () => (
     </Alert.Heading>
     <div className="row">
       <div className="col-8">
-        <FormattedMessage {...messages.alertDescription} />
+        <FormattedMessage {...messages.alertDescriptionV1} />
       </div>
       <div className="col-4 d-flex justify-content-center align-items-start">
         <Button>

src/studio-home/tabs-section/libraries-v2-tab/WelcomeLibrariesV2Alert.tsx

@@ -0,0 +1,51 @@
+import { Alert, Button, Hyperlink } from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { useLibrariesV1Data } from '@src/studio-home/data/apiHooks';
+
+import messages from '../messages';
+
+const libraryDocsLink = (
+  <Hyperlink
+    target="_blank"
+    showLaunchIcon={false}
+    destination="https://docs.openedx.org/en/latest/educators/how-tos/course_development/create_new_library.html"
+  >
+    <FormattedMessage {...messages.alertLibrariesDocLinkText} />
+  </Hyperlink>
+);
+
+export const WelcomeLibrariesV2Alert = () => {
+  const { data, isPending, isError } = useLibrariesV1Data();
+
+  // Does not show the alert if we are still loading or if there was an error fetching libraries
+  if (isPending || isError) {
+    return null;
+  }
+
+  const hasPendingV1Migrations = data.libraries.some(library => !library.isMigrated);
+  return (
+    <Alert variant="info">
+      {hasPendingV1Migrations ? (
+        <>
+          <Alert.Heading>
+            <FormattedMessage {...messages.alertTitle} />
+          </Alert.Heading>
+          <div className="row">
+            <div className="col-8">
+              <FormattedMessage {...messages.alertDescriptionV2} values={{ link: libraryDocsLink }} />
+              <FormattedMessage {...messages.alertDescriptionV2MigrationPending} />
+            </div>
+            <div className="col-4 d-flex justify-content-center align-items-start">
+              <Button>
+                <FormattedMessage {...messages.alertReviewButton} />
+              </Button>
+            </div>
+          </div>
+        </>
+      ) : (
+        <FormattedMessage {...messages.alertDescriptionV2} values={{ link: libraryDocsLink }} />
+      )}
+    </Alert>
+  );
+};

src/studio-home/tabs-section/libraries-v2-tab/index.tsx

@@ -6,15 +6,17 @@ import {
   Alert,
   Button,
 } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Error } from '@openedx/paragon/icons';
 
-import { useContentLibraryV2List } from '../../../library-authoring';
-import { LoadingSpinner } from '../../../generic/Loading';
-import AlertMessage from '../../../generic/alert-message';
+import { useContentLibraryV2List } from '@src/library-authoring';
+import { LoadingSpinner } from '@src/generic/Loading';
+import AlertMessage from '@src/generic/alert-message';
 import CardItem from '../../card-item';
 import messages from '../messages';
 import LibrariesV2Filters from './libraries-v2-filters';
+import { WelcomeLibrariesV2Alert } from './WelcomeLibrariesV2Alert';
 
 type Props = Record<never, never>;
 
@@ -37,35 +39,23 @@ const LibrariesV2Tab: React.FC<Props> = () => {
 
   const {
     data,
-    isLoading,
+    isPending,
     isError,
   } = useContentLibraryV2List({ page: currentPage, ...filterParams });
 
-  if (isLoading && !isFiltered) {
+  if (isPending && !isFiltered) {
     return (
       <Row className="m-0 mt-4 justify-content-center">
         <LoadingSpinner />
       </Row>
     );
   }
 
-  const hasV2Libraries = !isLoading && !isError && ((data!.results.length || 0) > 0);
-
-  // TODO: update this link when tutorial is ready.
-  const librariesTutorialLink = (
-    <Alert.Link href="https://docs.openedx.org">
-      {intl.formatMessage(messages.librariesV2TabBetaTutorialLinkText)}
-    </Alert.Link>
-  );
+  const hasV2Libraries = !isPending && !isError && ((data!.results.length || 0) > 0);
 
   return (
     <>
-      <Alert variant="info">
-        {intl.formatMessage(
-          messages.librariesV2TabBetaText,
-          { link: librariesTutorialLink },
-        )}
-      </Alert>
+      {getConfig().ENABLE_LEGACY_LIBRARY_MIGRATOR === 'true' && (<WelcomeLibrariesV2Alert />)}
 
       {isError ? (
         <AlertMessage
@@ -81,24 +71,24 @@ const LibrariesV2Tab: React.FC<Props> = () => {
         <div className="courses-tab-container">
           <div className="d-flex flex-row justify-content-between my-4">
             <LibrariesV2Filters
-              isLoading={isLoading}
+              isPending={isPending}
               isFiltered={isFiltered}
               filterParams={filterParams}
               setFilterParams={setFilterParams}
               setCurrentPage={setCurrentPage}
             />
-            {!isLoading && !isError
-            && (
-              <p>
-                {intl.formatMessage(messages.coursesPaginationInfo, {
-                  length: data!.results.length,
-                  total: data!.count,
-                })}
-              </p>
-            )}
+            {!isPending && !isError
+              && (
+                <p>
+                  {intl.formatMessage(messages.coursesPaginationInfo, {
+                    length: data.results.length,
+                    total: data.count,
+                  })}
+                </p>
+              )}
           </div>
 
-          { hasV2Libraries
+          {hasV2Libraries
             ? data!.results.map(({
               id, org, slug, title,
             }) => (
@@ -110,7 +100,7 @@ const LibrariesV2Tab: React.FC<Props> = () => {
                 number={slug}
                 path={`/library/${id}`}
               />
-            )) : isFiltered && !isLoading && (
+            )) : isFiltered && !isPending && (
               <Alert className="mt-4">
                 <Alert.Heading>
                   {intl.formatMessage(messages.librariesV2TabLibraryNotFoundAlertTitle)}

src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.test.tsx

@@ -115,13 +115,13 @@ describe('LibrariesV2Filters', () => {
   });
 
   it('should display the loading spinner when isLoading is true', () => {
-    renderComponent({ isLoading: true });
+    renderComponent({ isPending: true });
     const spinner = screen.getByText('Loading...');
     expect(spinner).toBeInTheDocument();
   });
 
   it('should not display the loading spinner when isLoading is false', () => {
-    renderComponent({ isLoading: false });
+    renderComponent({ isPending: false });
     const spinner = screen.queryByText('Loading...');
     expect(spinner).not.toBeInTheDocument();
   });

src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.tsx

@@ -7,15 +7,15 @@ import LibrariesV2OrderFilterMenu from './libraries-v2-order-filter-menu';
 import messages from '../../messages';
 
 export interface LibrariesV2FiltersProps {
-  isLoading?: boolean;
+  isPending?: boolean;
   isFiltered?: boolean;
   filterParams: { search?: string | undefined, order?: string };
   setFilterParams: React.Dispatch<React.SetStateAction<{ search: string | undefined, order: string }>>;
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const LibrariesV2Filters: React.FC<LibrariesV2FiltersProps> = ({
-  isLoading = false,
+  isPending = false,
   isFiltered = false,
   filterParams,
   setFilterParams,
@@ -93,7 +93,7 @@ const LibrariesV2Filters: React.FC<LibrariesV2FiltersProps> = ({
           className="mr-4"
           placeholder={intl.formatMessage(messages.librariesV2TabLibrarySearchPlaceholder)}
         />
-        {isLoading && (
+        {isPending && (
           <span className="search-field-loading">
             <LoadingSpinner size="sm" />
           </span>