fix: show "This <containerType> is empty" [FC-0090]

src/library-authoring/data/api.mocks.ts

@@ -497,6 +497,7 @@ export async function mockGetContainerMetadata(containerId: string): Promise<api
   }
 }
 mockGetContainerMetadata.unitId = 'lct:org:lib:unit:test-unit-9a207';
+mockGetContainerMetadata.unitIdEmpty = 'lct:org:lib:unit:test-unit-empty';
 mockGetContainerMetadata.sectionId = 'lct:org:lib:section:test-section-1';
 mockGetContainerMetadata.subsectionId = 'lb:org1:Demo_course:subsection:subsection-0';
 mockGetContainerMetadata.sectionIdEmpty = 'lct:org:lib:section:test-section-empty';

src/library-authoring/section-subsections/LibraryContainerChildren.tsx

@@ -9,6 +9,7 @@ import { Description } from '@openedx/paragon/icons';
 import DraggableList, { SortableItem } from '../../generic/DraggableList';
 import Loading from '../../generic/Loading';
 import ErrorAlert from '../../generic/alert-error';
+import { ContainerType, getBlockType } from '../../generic/key-utils';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import {
   useContainerChildren,
@@ -100,11 +101,12 @@ export const LibraryContainerChildren = ({ containerKey, readOnly }: LibraryCont
   const intl = useIntl();
   const [orderedChildren, setOrderedChildren] = useState<LibraryContainerMetadataWithUniqueId[]>([]);
   const { showOnlyPublished, readOnly: libReadOnly } = useLibraryContext();
-  const { navigateTo, insideSection } = useLibraryRoutes();
+  const { navigateTo } = useLibraryRoutes();
   const { sidebarItemInfo } = useSidebarContext();
   const [activeDraggingId, setActiveDraggingId] = useState<string | null>(null);
   const orderMutator = useUpdateContainerChildren(containerKey);
   const { showToast } = useContext(ToastContext);
+  const containerType = getBlockType(containerKey);
   const handleReorder = useCallback(() => async (newOrder?: LibraryContainerMetadataWithUniqueId[]) => {
     if (!newOrder) {
       return;
@@ -172,7 +174,7 @@ export const LibraryContainerChildren = ({ containerKey, readOnly }: LibraryCont
     <div className="ml-2 library-container-children">
       {children?.length === 0 && (
         <h4 className="ml-2">
-          {insideSection ? (
+          {containerType === ContainerType.Section ? (
             <FormattedMessage {...sectionMessages.noChildrenText} />
           ) : (
             <FormattedMessage {...subsectionMessages.noChildrenText} />

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -273,6 +273,11 @@ export const LibraryUnitBlocks = ({ unitId, readOnly: componentReadOnly }: Libra
 
   return (
     <div className="library-unit-page">
+      {orderedBlocks?.length === 0 && (
+        <h4 className="ml-2">
+          <FormattedMessage {...messages.noChildrenText} />
+        </h4>
+      )}
       <DraggableList
         itemList={orderedBlocks}
         setState={setOrderedBlocks}

src/library-authoring/units/LibraryUnitPage.test.tsx

@@ -105,6 +105,12 @@ describe('<LibraryUnitPage />', () => {
     expect(screen.queryByText('Preview')).not.toBeInTheDocument();
   });
 
+  it('shows empty unit', async () => {
+    renderLibraryUnitPage(mockGetContainerMetadata.unitIdEmpty);
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect(await screen.findByText('This unit is empty')).toBeInTheDocument();
+  });
+
   it('can rename unit', async () => {
     renderLibraryUnitPage();
     expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();

src/library-authoring/units/messages.ts

@@ -51,6 +51,11 @@ const messages = defineMessages({
     defaultMessage: 'Failed to update components order',
     description: 'Toast message displayed when components are successfully reordered in a unit',
   },
+  noChildrenText: {
+    id: 'course-authoring.library-authoring.unit.no-children.text',
+    defaultMessage: 'This unit is empty',
+    description: 'Message to display when unit has not children',
+  },
 });
 
 export default messages;