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,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

@@ -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);