feat: add library component picker

src/content-tags-drawer/ContentTagsDrawer.tsx

@@ -154,7 +154,11 @@ const ContentTagsDrawerVariantFooter = ({ onClose }: ContentTagsDrawerVariantFoo
   );
 };
 
-const ContentTagsComponentVariantFooter = () => {
+interface ContentTagsComponentVariantFooterProps {
+  readOnly?: boolean;
+}
+
+const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComponentVariantFooterProps) => {
   const intl = useIntl();
   const {
     commitGlobalStagedTagsStatus,
@@ -195,7 +199,7 @@ const ContentTagsComponentVariantFooter = () => {
             </div>
           )}
         </div>
-      ) : (
+      ) : !readOnly && (
         <Button
           variant="outline-primary"
           onClick={toEditMode}
@@ -212,6 +216,7 @@ interface ContentTagsDrawerProps {
   id?: string;
   onClose?: () => void;
   variant?: 'drawer' | 'component';
+  readOnly?: boolean;
 }
 
 /**
@@ -227,6 +232,7 @@ const ContentTagsDrawer = ({
   id,
   onClose,
   variant = 'drawer',
+  readOnly = false,
 }: ContentTagsDrawerProps) => {
   const intl = useIntl();
   // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
@@ -303,7 +309,7 @@ const ContentTagsDrawer = ({
         case 'drawer':
           return <ContentTagsDrawerVariantFooter onClose={onCloseDrawer} />;
         case 'component':
-          return <ContentTagsComponentVariantFooter />;
+          return <ContentTagsComponentVariantFooter readOnly={readOnly} />;
         default:
           return null;
       }

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { act, render, fireEvent } from '@testing-library/react';
+import {
+  act,
+  render,
+  fireEvent,
+  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 +89,7 @@ describe('<PageAlerts />', () => {
   });
 
   it('renders discussion alerts', async () => {
-    const { queryByText } = renderComponent({
+    const { getByText, queryByText } = renderComponent({
       ...pageAlertsData,
       discussionsSettings: {
         providerType: 'openedx',
@@ -103,9 +108,11 @@ describe('<PageAlerts />', () => {
     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 = getByText(messages.discussionNotificationFeedback.defaultMessage);
+      expect(feedbackLink);
+      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/LibraryAuthoringPage.test.tsx

@@ -499,7 +499,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);