feat: add library component picker

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -44,7 +44,7 @@ jest.mock('react-router-dom', () => ({
 const renderDrawer = (contentId, drawerParams = {}) => (
   render(
     <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
-      <ContentTagsDrawer canTagObject {...drawerParams} />
+      <ContentTagsDrawer {...drawerParams} />
     </ContentTagsDrawerSheetContext.Provider>,
     { path, params: { contentId } },
   )
@@ -256,7 +256,7 @@ describe('<ContentTagsDrawer />', () => {
   ])(
     'should hide "$editButton" button on $variant variant if not allowed to tag object',
     async ({ variant, editButton }) => {
-      renderDrawer(stagedTagsId, { variant, canTagObject: false });
+      renderDrawer(stagedTagsId, { variant, readOnly: true });
       expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
       expect(screen.queryByRole('button', { name: editButton })).not.toBeInTheDocument();

src/content-tags-drawer/ContentTagsDrawer.tsx

@@ -100,10 +100,10 @@ const ContentTagsDrawerTitle = () => {
 
 interface ContentTagsDrawerVariantFooterProps {
   onClose: () => void,
-  canTagObject: boolean,
+  readOnly: boolean,
 }
 
-const ContentTagsDrawerVariantFooter = ({ onClose, canTagObject }: ContentTagsDrawerVariantFooterProps) => {
+const ContentTagsDrawerVariantFooter = ({ onClose, readOnly }: ContentTagsDrawerVariantFooterProps) => {
   const intl = useIntl();
   const {
     commitGlobalStagedTagsStatus,
@@ -131,7 +131,7 @@ const ContentTagsDrawerVariantFooter = ({ onClose, canTagObject }: ContentTagsDr
                 ? messages.tagsDrawerCancelButtonText
                 : messages.tagsDrawerCloseButtonText)}
             </Button>
-            {canTagObject && (
+            {!readOnly && (
               <Button
                 className="rounded-0"
                 onClick={isEditMode
@@ -157,7 +157,11 @@ const ContentTagsDrawerVariantFooter = ({ onClose, canTagObject }: ContentTagsDr
   );
 };
 
-const ContentTagsComponentVariantFooter = ({ canTagObject }: { canTagObject: boolean }) => {
+interface ContentTagsComponentVariantFooterProps {
+  readOnly?: boolean;
+}
+
+const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComponentVariantFooterProps) => {
   const intl = useIntl();
   const {
     commitGlobalStagedTagsStatus,
@@ -198,16 +202,14 @@ const ContentTagsComponentVariantFooter = ({ canTagObject }: { canTagObject: boo
             </div>
           )}
         </div>
-      ) : (
-        canTagObject && (
-          <Button
-            variant="outline-primary"
-            onClick={toEditMode}
-            block
-          >
-            {intl.formatMessage(messages.manageTagsButton)}
-          </Button>
-        )
+      ) : !readOnly && (
+        <Button
+          variant="outline-primary"
+          onClick={toEditMode}
+          block
+        >
+          {intl.formatMessage(messages.manageTagsButton)}
+        </Button>
       )}
     </div>
   );
@@ -216,8 +218,8 @@ const ContentTagsComponentVariantFooter = ({ canTagObject }: { canTagObject: boo
 interface ContentTagsDrawerProps {
   id?: string;
   onClose?: () => void;
-  canTagObject?: boolean;
   variant?: 'drawer' | 'component';
+  readOnly?: boolean;
 }
 
 /**
@@ -232,8 +234,8 @@ interface ContentTagsDrawerProps {
 const ContentTagsDrawer = ({
   id,
   onClose,
-  canTagObject = false,
   variant = 'drawer',
+  readOnly = false,
 }: ContentTagsDrawerProps) => {
   const intl = useIntl();
   // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
@@ -244,7 +246,7 @@ const ContentTagsDrawer = ({
     throw new Error('Error: contentId cannot be null.');
   }
 
-  const context = useContentTagsDrawerContext(contentId, canTagObject);
+  const context = useContentTagsDrawerContext(contentId, !readOnly);
   const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
 
   const {
@@ -308,9 +310,9 @@ const ContentTagsDrawer = ({
     if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {
       switch (variant) {
         case 'drawer':
-          return <ContentTagsDrawerVariantFooter onClose={onCloseDrawer} canTagObject={canTagObject} />;
+          return <ContentTagsDrawerVariantFooter onClose={onCloseDrawer} readOnly={readOnly} />;
         case 'component':
-          return <ContentTagsComponentVariantFooter canTagObject={canTagObject} />;
+          return <ContentTagsComponentVariantFooter readOnly={readOnly} />;
         default:
           return null;
       }

src/content-tags-drawer/ContentTagsDrawerSheet.jsx

@@ -14,7 +14,7 @@ const ContentTagsDrawerSheet = ({ id, onClose, showSheet }) => {
 
   // ContentTagsDrawerSheet is only used when editing Courses/Course Units,
   // so we assume it's ok to edit the object tags too.
-  const canTagObject = true;
+  const readOnly = false;
 
   return (
     <ContentTagsDrawerSheetContext.Provider value={context}>
@@ -27,7 +27,7 @@ const ContentTagsDrawerSheet = ({ id, onClose, showSheet }) => {
         <ContentTagsDrawer
           id={id}
           onClose={onClose}
-          canTagObject={canTagObject}
+          readOnly={readOnly}
         />
       </Sheet>
     </ContentTagsDrawerSheetContext.Provider>

src/course-outline/page-alerts/PageAlerts.test.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { act, render, fireEvent } from '@testing-library/react';
+import {
+  act,
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp, getConfig } from '@edx/frontend-platform';
@@ -84,7 +90,7 @@ describe('<PageAlerts />', () => {
   });
 
   it('renders discussion alerts', async () => {
-    const { queryByText } = renderComponent({
+    renderComponent({
       ...pageAlertsData,
       discussionsSettings: {
         providerType: 'openedx',
@@ -93,19 +99,21 @@ describe('<PageAlerts />', () => {
       discussionsIncontextLearnmoreUrl: 'some-learn-more-url',
     });
 
-    expect(queryByText(messages.discussionNotificationText.defaultMessage)).toBeInTheDocument();
-    const learnMoreBtn = queryByText(messages.discussionNotificationLearnMore.defaultMessage);
+    expect(screen.queryByText(messages.discussionNotificationText.defaultMessage)).toBeInTheDocument();
+    const learnMoreBtn = screen.queryByText(messages.discussionNotificationLearnMore.defaultMessage);
     expect(learnMoreBtn).toBeInTheDocument();
     expect(learnMoreBtn).toHaveAttribute('href', 'some-learn-more-url');
 
-    const dismissBtn = queryByText('Dismiss');
-    await act(async () => fireEvent.click(dismissBtn));
+    const dismissBtn = screen.queryByText('Dismiss');
+    fireEvent.click(dismissBtn);
     const discussionAlertDismissKey = `discussionAlertDismissed-${pageAlertsData.courseId}`;
     expect(localStorage.getItem(discussionAlertDismissKey)).toBe('true');
 
-    const feedbackLink = queryByText(messages.discussionNotificationFeedback.defaultMessage);
-    expect(feedbackLink).toBeInTheDocument();
-    expect(feedbackLink).toHaveAttribute('href', 'some-feedback-url');
+    await waitFor(() => {
+      const feedbackLink = screen.queryByText(messages.discussionNotificationFeedback.defaultMessage);
+      expect(feedbackLink).toBeInTheDocument();
+      expect(feedbackLink).toHaveAttribute('href', 'some-feedback-url');
+    });
   });
 
   it('renders deprecation warning alerts', async () => {

src/generic/block-type-utils/index.scss

@@ -1,7 +1,7 @@
 .component-style-default {
   background-color: #005C9E;
 
-  .pgn__icon {
+  .pgn__icon:not(.btn-icon-before) {
     color: white;
   }
 
@@ -10,12 +10,23 @@
       background-color: darken(#005C9E, 15%);
     }
   }
+
+  .btn {
+    background-color: lighten(#005C9E, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#005C9E, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
 }
 
 .component-style-html {
   background-color: #9747FF;
 
-  .pgn__icon {
+  .pgn__icon:not(.btn-icon-before) {
     color: white;
   }
 
@@ -24,12 +35,23 @@
       background-color: darken(#9747FF, 15%);
     }
   }
+
+  .btn {
+    background-color: lighten(#9747FF, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#9747FF, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
 }
 
 .component-style-collection {
   background-color: #FFCD29;
 
-  .pgn__icon {
+  .pgn__icon:not(.btn-icon-before) {
     color: black;
   }
 
@@ -38,12 +60,23 @@
       background-color: darken(#FFCD29, 15%);
     }
   }
+
+  .btn {
+    background-color: lighten(#FFCD29, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#FFCD29, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
 }
 
 .component-style-video {
   background-color: #358F0A;
 
-  .pgn__icon {
+  .pgn__icon:not(.btn-icon-before) {
     color: white;
   }
 
@@ -52,12 +85,23 @@
       background-color: darken(#358F0A, 15%);
     }
   }
+
+  .btn {
+    background-color: lighten(#358F0A, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#358F0A, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
 }
 
 .component-style-vertical {
   background-color: #0B8E77;
 
-  .pgn__icon {
+  .pgn__icon:not(.btn-icon-before) {
     color: white;
   }
 
@@ -66,12 +110,23 @@
       background-color: darken(#0B8E77, 15%);
     }
   }
+
+  .btn {
+    background-color: lighten(#0B8E77, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#0B8E77, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
 }
 
 .component-style-other {
   background-color: #646464;
 
-  .pgn__icon {
+  .pgn__icon:not(.btn-icon-before) {
     color: white;
   }
 
@@ -80,4 +135,15 @@
       background-color: darken(#646464, 15%);
     }
   }
+
+  .btn {
+    background-color: lighten(#646464, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#646464, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
 }

src/index.jsx

@@ -16,7 +16,7 @@ import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import { logError } from '@edx/frontend-platform/logging';
 import messages from './i18n';
 
-import { CreateLibrary, LibraryLayout } from './library-authoring';
+import { ComponentPicker, CreateLibrary, LibraryLayout } from './library-authoring';
 import initializeStore from './store';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
@@ -55,6 +55,7 @@ const App = () => {
         <Route path="/libraries-v1" element={<StudioHome />} />
         <Route path="/library/create" element={<CreateLibrary />} />
         <Route path="/library/:libraryId/*" element={<LibraryLayout />} />
+        <Route path="/component-picker" element={<ComponentPicker />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (

src/library-authoring/EmptyStates.tsx

@@ -6,7 +6,6 @@ import {
 import { Add } from '@openedx/paragon/icons';
 import { ClearFiltersButton } from '../search-manager';
 import messages from './messages';
-import { useContentLibrary } from './data/apiHooks';
 import { useLibraryContext } from './common/context';
 
 export const NoComponents = ({
@@ -18,14 +17,12 @@ export const NoComponents = ({
   addBtnText?: MessageDescriptor;
   handleBtnClick: () => void;
 }) => {
-  const { libraryId } = useLibraryContext();
-  const { data: libraryData } = useContentLibrary(libraryId);
-  const canEditLibrary = libraryData?.canEditLibrary ?? false;
+  const { readOnly } = useLibraryContext();
 
   return (
     <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
       <FormattedMessage {...infoText} />
-      {canEditLibrary && (
+      {!readOnly && (
         <Button iconBefore={Add} onClick={handleBtnClick}>
           <FormattedMessage {...addBtnText} />
         </Button>

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -519,7 +519,7 @@ describe('<LibraryAuthoringPage />', () => {
     expect(showProbTypesSubmenuBtn).not.toBeNull();
     fireEvent.click(showProbTypesSubmenuBtn!);
 
-    const validateSubmenu = async (submenuText : string) => {
+    const validateSubmenu = async (submenuText: string) => {
       const submenu = screen.getByText(submenuText);
       expect(submenu).toBeInTheDocument();
       fireEvent.click(submenu);