feat: add library component picker

openedx · Oct 10, 2024 · cdfe3d6 · cdfe3d6
1 parent 66b14a5
commit cdfe3d6
Show file tree

Hide file tree

Showing 48 changed files with 1,276 additions and 758 deletions.
diff --git a/src/content-tags-drawer/ContentTagsDrawer.tsx b/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;
       }

diff --git a/src/generic/block-type-utils/index.scss b/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;
+    }
+  }
 }
diff --git a/src/index.jsx b/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' && (

diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/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);