From fa9d66c5e55b166a924922857484589ff80a5987 Mon Sep 17 00:00:00 2001
From: Jillian <jill@opencraft.com>
Date: Mon, 16 Jun 2025 18:09:55 -0400
Subject: [PATCH] fix: show "This <containerType> is empty" (#2157)

Shows "This is empty" text when container child list is empty for units, subsections, and sections.
---
 src/library-authoring/data/api.mocks.ts                     | 1 +
 .../section-subsections/LibraryContainerChildren.tsx        | 6 ++++--
 src/library-authoring/units/LibraryUnitBlocks.tsx           | 5 +++++
 src/library-authoring/units/LibraryUnitPage.test.tsx        | 6 ++++++
 src/library-authoring/units/messages.ts                     | 5 +++++
 5 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index d4f678d79..fa56547d1 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/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';
diff --git a/src/library-authoring/section-subsections/LibraryContainerChildren.tsx b/src/library-authoring/section-subsections/LibraryContainerChildren.tsx
index 70913afd6..cd29078c1 100644
--- a/src/library-authoring/section-subsections/LibraryContainerChildren.tsx
+++ b/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} />
diff --git a/src/library-authoring/units/LibraryUnitBlocks.tsx b/src/library-authoring/units/LibraryUnitBlocks.tsx
index 248b9c056..0dd1072b7 100644
--- a/src/library-authoring/units/LibraryUnitBlocks.tsx
+++ b/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}
diff --git a/src/library-authoring/units/LibraryUnitPage.test.tsx b/src/library-authoring/units/LibraryUnitPage.test.tsx
index e9584a849..01f186e42 100644
--- a/src/library-authoring/units/LibraryUnitPage.test.tsx
+++ b/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();
diff --git a/src/library-authoring/units/messages.ts b/src/library-authoring/units/messages.ts
index 5bee62440..eec668c5f 100644
--- a/src/library-authoring/units/messages.ts
+++ b/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;