feat: library section and subsection page

src/generic/DraggableList/SortableItem.jsx → src/generic/DraggableList/SortableItem.tsx

@@ -1,14 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { intlShape, injectIntl } from '@edx/frontend-platform/i18n';
+import React, { MouseEventHandler } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import {
   ActionRow, Card, Icon, IconButtonWithTooltip,
 } from '@openedx/paragon';
 import { DragIndicator } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
+interface SortableItemProps {
+  id: string,
+  children?: React.ReactNode,
+  actions: React.ReactNode,
+  actionStyle?: {},
+  componentStyle?: {},
+  isClickable?: boolean,
+  onClick?: MouseEventHandler,
+  disabled?: boolean,
+  cardClassName?: string,
+}
+
 const SortableItem = ({
   id,
   componentStyle,
@@ -19,9 +30,8 @@ const SortableItem = ({
   onClick,
   disabled,
   cardClassName = '',
-  // injected
-  intl,
-}) => {
+}: SortableItemProps) => {
+  const intl = useIntl();
   const {
     attributes,
     listeners,
@@ -78,26 +88,5 @@ const SortableItem = ({
     </div>
   );
 };
-SortableItem.defaultProps = {
-  componentStyle: null,
-  actions: null,
-  actionStyle: null,
-  isClickable: false,
-  onClick: null,
-  disabled: false,
-};
-SortableItem.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  actions: PropTypes.node,
-  actionStyle: PropTypes.shape({}),
-  componentStyle: PropTypes.shape({}),
-  isClickable: PropTypes.bool,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  cardClassName: PropTypes.string,
-  // injected
-  intl: intlShape.isRequired,
-};
 
-export default injectIntl(SortableItem);
+export default SortableItem;

src/generic/key-utils.test.ts

@@ -4,8 +4,6 @@ import {
   getLibraryId,
   isLibraryKey,
   isLibraryV1Key,
-  getContainerTypeFromId,
-  ContainerType,
 } from './key-utils';
 
 describe('component utils', () => {
@@ -14,6 +12,9 @@ describe('component utils', () => {
       ['lb:org:lib:html:id', 'html'],
       ['lb:OpenCraftX:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'html'],
       ['lb:Axim:beta:problem:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'problem'],
+      ['lct:org:lib:unit:my-unit-9284e2', 'unit'],
+      ['lct:org:lib:section:my-section-9284e2', 'section'],
+      ['lct:org:lib:subsection:my-section-9284e2', 'subsection'],
     ]) {
       it(`returns '${expected}' for usage key '${input}'`, () => {
         expect(getBlockType(input)).toStrictEqual(expected);
@@ -99,16 +100,4 @@ describe('component utils', () => {
       });
     }
   });
-
-  describe('getContainerTypeFromId', () => {
-    for (const [input, expected] of [
-      ['lct:org:lib:unit:my-unit-9284e2', ContainerType.Unit],
-      ['lct:OpenCraftX:ALPHA:my-unit-a3223f', undefined],
-      ['', undefined],
-    ]) {
-      it(`returns '${expected}' for container key '${input}'`, () => {
-        expect(getContainerTypeFromId(input!)).toStrictEqual(expected);
-      });
-    }
-  });
 });

src/generic/key-utils.ts

@@ -4,7 +4,7 @@
  * @returns The block type as a string
  */
 export function getBlockType(usageKey: string): string {
-  if (usageKey && usageKey.startsWith('lb:')) {
+  if (usageKey && (usageKey.startsWith('lb:') || usageKey.startsWith('lct:'))) {
     const blockType = usageKey.split(':')[3];
     if (blockType) {
       return blockType;
@@ -66,22 +66,3 @@ export enum ContainerType {
   Sequential = 'sequential',
   Vertical = 'vertical',
 }
-
-/**
- * Given a container key like `ltc:org:lib:unit:id`
- * get the container type
- */
-export function getContainerTypeFromId(containerId: string): ContainerType | undefined {
-  const parts = containerId.split(':');
-  if (parts.length < 2) {
-    return undefined;
-  }
-
-  const maybeType = parts[parts.length - 2];
-
-  if (Object.values(ContainerType).includes(maybeType as ContainerType)) {
-    return maybeType as ContainerType;
-  }
-
-  return undefined;
-}

src/library-authoring/LibraryLayout.tsx

@@ -16,9 +16,12 @@ import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { ComponentPicker } from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 import { LibraryUnitPage } from './units';
+import { LibrarySectionPage, LibrarySubsectionPage } from './section-subsections';
 
 const LibraryLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { libraryId, collectionId, unitId } = useParams();
+  const {
+    libraryId, collectionId, unitId, sectionId, subsectionId,
+  } = useParams();
 
   if (libraryId === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
@@ -31,7 +34,7 @@ const LibraryLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) =
         * when we navigate to a collection or unit page. This is necessary to make the back/forward navigation
         * work correctly, as the LibraryProvider needs to rebuild the state from the URL.
         * */
-      key={collectionId || unitId}
+      key={collectionId || sectionId || subsectionId || unitId}
       libraryId={libraryId}
       /** NOTE: The component picker modal to use. We need to pass it as a reference instead of
        * directly importing it to avoid the import cycle:
@@ -70,6 +73,14 @@ const LibraryLayout = () => (
         path={ROUTES.COLLECTION}
         Component={LibraryCollectionPage}
       />
+      <Route
+        path={ROUTES.SECTION}
+        Component={LibrarySectionPage}
+      />
+      <Route
+        path={ROUTES.SUBSECTION}
+        Component={LibrarySubsectionPage}
+      />
       <Route
         path={ROUTES.UNIT}
         Component={LibraryUnitPage}

src/library-authoring/__mocks__/subsection-single.json

@@ -0,0 +1,148 @@
+{
+  "comment": "This mock is captured from a real search result and roughly edited to match the mocks in src/library-authoring/data/api.mocks.ts",
+  "note": "The _formatted fields have been removed from this result and should be re-added programatically when mocking.",
+  "results": [
+    {
+      "indexUid": "studio_content",
+      "hits": [
+        {
+          "display_name": "Test Subsection",
+          "block_id": "subsection-1",
+          "content": {
+            "child_usage_keys": [
+              "lb:org1:Demo_course:unit:unit-0",
+              "lb:org1:Demo_course:unit:unit-1",
+              "lb:org1:Demo_course:unit:unit-2"
+            ],
+            "child_display_names": [
+              "unit block 0",
+              "unit block 1",
+              "unit block 2"
+            ]
+          },
+          "tags": {},
+          "collections": {
+            "display_name": [
+              "Collection 1"
+            ],
+            "key": [
+              "collection-1"
+            ]
+          },
+          "id": "lctunixcs1subsectiontest-subsection-4-861b09-bc0507a2",
+          "type": "library_container",
+          "breadcrumbs": [
+            {
+              "display_name": "CS 1"
+            }
+          ],
+          "created": 1748341802.87277,
+          "modified": 1748790449.393821,
+          "last_published": 1748536425.317183,
+          "publish_status": "modified",
+          "usage_key": "lct:UNIX:CS1:subsection:test-subsection-4-861b09",
+          "block_type": "subsection",
+          "context_key": "lib:UNIX:CS1",
+          "org": "UNIX",
+          "access_id": 1,
+          "published": {
+            "display_name": "Test subsection 42",
+            "num_children": 2,
+            "content": {
+              "child_usage_keys": [
+                "lb:org1:Demo_course:unit:unit-0",
+                "lb:org1:Demo_course:unit:unit-1"
+              ],
+              "child_display_names": [
+                "unit block 0",
+                "unit block 1"
+              ]
+            }
+          },
+          "num_children": 4,
+          "sections": {
+            "display_name": [
+              "Test section",
+              "Test section 51"
+            ],
+            "key": [
+              "lct:org:lib:section:test-section-1",
+              "lct:org:lib:section:test-section-2"
+            ]
+          },
+          "_formatted": {
+            "display_name": "Test Subsection",
+            "block_id": "subsection-1",
+            "content": {
+              "child_usage_keys": [
+                "lb:org1:Demo_course:unit:unit-0",
+                "lb:org1:Demo_course:unit:unit-1",
+                "lb:org1:Demo_course:unit:unit-2"
+              ],
+              "child_display_names": [
+                "unit block 0",
+                "unit block 1",
+                "unit block 2"
+              ]
+            },
+            "tags": {},
+            "collections": {
+              "display_name": [
+                "Collection 1"
+              ],
+              "key": [
+                "collection-1"
+              ]
+            },
+            "id": "lctunixcs1subsectiontest-subsection-4-861b09-bc0507a2",
+            "type": "library_container",
+            "breadcrumbs": [
+              {
+                "display_name": "CS 1"
+              }
+            ],
+            "created": "1748341802.87277",
+            "modified": "1748790449.393821",
+            "last_published": "1748536425.317183",
+            "publish_status": "modified",
+            "usage_key": "lct:UNIX:CS1:subsection:test-subsection-4-861b09",
+            "block_type": "subsection",
+            "context_key": "lib:UNIX:CS1",
+            "org": "UNIX",
+            "access_id": "1",
+            "published": {
+              "display_name": "Test subsection 42",
+              "num_children": "2",
+              "content": {
+                "child_usage_keys": [
+                  "lb:org1:Demo_course:unit:unit-0",
+                  "lb:org1:Demo_course:unit:unit-1"
+                ],
+                "child_display_names": [
+                  "unit block 0",
+                  "unit block 1"
+                ]
+              }
+            },
+            "num_children": "4",
+            "sections": {
+              "display_name": [
+                "Test section 11",
+                "Test section 51"
+              ],
+              "key": [
+                "lct:UNIX:CS1:section:test-section-1-415565",
+                "lct:UNIX:CS1:section:test-section-5-0c65f3"
+              ]
+            }
+          }
+        }
+      ],
+      "query": "",
+      "processingTimeMs": 1,
+      "limit": 20,
+      "offset": 0,
+      "estimatedTotalHits": 10
+    }
+  ]
+}

src/library-authoring/add-content/AddContent.tsx

@@ -23,13 +23,13 @@ import {
   useLibraryPasteClipboard,
   useBlockTypesMetadata,
   useAddItemsToCollection,
-  useAddComponentsToContainer,
+  useAddItemsToContainer,
 } from '../data/apiHooks';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { PickLibraryContentModal } from './PickLibraryContentModal';
 import { blockTypes } from '../../editors/data/constants/app';
 
-import { ContentType as LibraryContentTypes, useLibraryRoutes } from '../routes';
+import { useLibraryRoutes } from '../routes';
 import genericMessages from '../generic/messages';
 import messages from './messages';
 import type { BlockTypeMetadata } from '../data/api';
@@ -88,10 +88,7 @@ const AddContentView = ({
   closeAddLibraryContentModal,
 }: AddContentViewProps) => {
   const intl = useIntl();
-  const {
-    componentPicker,
-    unitId,
-  } = useLibraryContext();
+  const { componentPicker } = useLibraryContext();
   const {
     insideCollection,
     insideUnit,
@@ -129,9 +126,6 @@ const AddContentView = ({
     blockType: 'libraryContent',
   };
 
-  const extraFilter = unitId ? ['NOT block_type = "unit"', 'NOT type = "collections"'] : undefined;
-  const visibleTabs = unitId ? [LibraryContentTypes.components] : undefined;
-
   /** List container content types that should be displayed based on current path */
   const visibleContentTypes = useMemo(() => {
     if (insideCollection) {
@@ -182,8 +176,6 @@ const AddContentView = ({
         <PickLibraryContentModal
           isOpen={isAddLibraryContentModalOpen}
           onClose={closeAddLibraryContentModal}
-          extraFilter={extraFilter}
-          visibleTabs={visibleTabs}
         />
       )}
       <hr className="w-100 bg-gray-500" />
@@ -276,7 +268,7 @@ const AddContent = () => {
     insideUnit,
   } = useLibraryRoutes();
   const addComponentsToCollectionMutation = useAddItemsToCollection(libraryId, collectionId);
-  const addComponentsToContainerMutation = useAddComponentsToContainer(unitId);
+  const addComponentsToContainerMutation = useAddItemsToContainer(unitId);
   const createBlockMutation = useCreateLibraryBlock();
   const pasteClipboardMutation = useLibraryPasteClipboard();
   const { showToast } = useContext(ToastContext);