fix: show unit published name in sidebar on content picker (#2100)

Fix the bug for show unit published name in sidebar on content picker.

src/library-authoring/__mocks__/library-search.json

@@ -494,7 +494,7 @@
           ],
           "created": 1742221203.895054,
           "modified": 1742221203.895054,
-          "usage_key": "lct:Axim:TEST:unit:test-unit-9284e2",
+          "usage_key": "lct:org:lib:unit:test-unit-9a207",
           "block_type": "unit",
           "context_key": "lib:Axim:TEST",
           "org": "Axim",
@@ -512,18 +512,18 @@
             ],
             "created": "1742221203.895054",
             "modified": "1742221203.895054",
-            "usage_key": "lct:Axim:TEST:unit:test-unit-9284e2",
+            "usage_key": "lct:org:lib:unit:test-unit-9a207",
             "block_type": "unit",
             "context_key": "lib:Axim:TEST",
             "org": "Axim",
             "access_id": "15",
             "num_children": "0",
             "published": {
-              "display_name": "Test Unit"
+              "display_name": "Published Test Unit"
             }
           },
           "published": {
-            "display_name": "Test Unit"
+            "display_name": "Published Test Unit"
           }
         }
       ],

src/library-authoring/component-picker/ComponentPicker.test.tsx

@@ -15,6 +15,7 @@ import {
   mockGetCollectionMetadata,
   mockGetContentLibraryV2List,
   mockLibraryBlockMetadata,
+  mockGetContainerMetadata,
 } from '../data/api.mocks';
 
 import { ComponentPicker } from './ComponentPicker';
@@ -41,6 +42,7 @@ mockContentSearchConfig.applyMock();
 mockGetCollectionMetadata.applyMock();
 mockGetContentLibraryV2List.applyMock();
 mockLibraryBlockMetadata.applyMock();
+mockGetContainerMetadata.applyMock();
 
 let postMessageSpy: jest.SpyInstance;
 
@@ -66,7 +68,6 @@ describe('<ComponentPicker />', () => {
     });
 
     // Navigate to the components tab
-    screen.logTestingPlaygroundURL();
     const componentsTab = screen.getByRole('tab', { name: 'Components' });
     fireEvent.click(componentsTab);
     expect(componentsTab).toHaveAttribute('aria-selected', 'true');
@@ -156,10 +157,11 @@ describe('<ComponentPicker />', () => {
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
 
     // Click on the unit card to open the sidebar
-    fireEvent.click((await screen.findByText('Test Unit')));
+    fireEvent.click((await screen.findByText('Published Test Unit')));
 
     const sidebar = await screen.findByTestId('library-sidebar');
     expect(sidebar).toBeInTheDocument();
+    await waitFor(() => expect(within(sidebar).getByText('Published Test Unit')).toBeInTheDocument());
   });
 
   it('double clicking a collection should open it', async () => {

src/library-authoring/containers/ContainerEditableTitle.tsx

@@ -8,12 +8,13 @@ import messages from './messages';
 
 interface EditableTitleProps {
   containerId: string;
+  textClassName?: string;
 }
 
-export const ContainerEditableTitle = ({ containerId }: EditableTitleProps) => {
+export const ContainerEditableTitle = ({ containerId, textClassName }: EditableTitleProps) => {
   const intl = useIntl();
 
-  const { readOnly } = useLibraryContext();
+  const { readOnly, showOnlyPublished } = useLibraryContext();
 
   const { data: container } = useContainer(containerId);
 
@@ -39,8 +40,9 @@ export const ContainerEditableTitle = ({ containerId }: EditableTitleProps) => {
   return (
     <InplaceTextEditor
       onSave={handleSaveDisplayName}
-      text={container.displayName}
+      text={showOnlyPublished ? (container.publishedDisplayName ?? container.displayName) : container.displayName}
       readOnly={readOnly}
+      textClassName={textClassName}
     />
   );
 };

src/library-authoring/containers/ContainerInfoHeader.tsx

@@ -1,17 +1,7 @@
-import { useContext } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import { InplaceTextEditor } from '../../generic/inplace-text-editor';
-import { ToastContext } from '../../generic/toast-context';
-import { useLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
-import { useContainer, useUpdateContainer } from '../data/apiHooks';
-import messages from './messages';
+import { ContainerEditableTitle } from './ContainerEditableTitle';
 
 const ContainerInfoHeader = () => {
-  const intl = useIntl();
-
-  const { readOnly } = useLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const containerId = sidebarItemInfo?.id;
@@ -20,31 +10,9 @@ const ContainerInfoHeader = () => {
     throw new Error('containerId is required');
   }
 
-  const { data: container } = useContainer(containerId);
-
-  const updateMutation = useUpdateContainer(containerId);
-  const { showToast } = useContext(ToastContext);
-
-  const handleSaveDisplayName = async (newDisplayName: string) => {
-    try {
-      await updateMutation.mutateAsync({
-        displayName: newDisplayName,
-      });
-      showToast(intl.formatMessage(messages.updateContainerSuccessMsg));
-    } catch (err) {
-      showToast(intl.formatMessage(messages.updateContainerErrorMsg));
-    }
-  };
-
-  if (!container) {
-    return null;
-  }
-
   return (
-    <InplaceTextEditor
-      onSave={handleSaveDisplayName}
-      text={container.displayName}
-      readOnly={readOnly}
+    <ContainerEditableTitle
+      containerId={containerId}
       textClassName="font-weight-bold m-1.5"
     />
   );

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

@@ -513,7 +513,7 @@ mockGetContainerMetadata.containerData = {
   id: 'lct:org:lib:unit:test-unit-9a2072',
   containerType: ContainerType.Unit,
   displayName: 'Test Unit',
-  publishedDisplayName: 'Test Unit',
+  publishedDisplayName: 'Published Test Unit',
   created: '2024-09-19T10:00:00Z',
   createdBy: 'test_author',
   lastPublished: '2024-09-20T10:00:00Z',