Fix: Nits on the new sidebars [FC-0123] (#2985)

Fixes these issues:

- #2638 (comment)
- #2634 (comment)
- #2868 (comment)

Author: ChrisChV

src/course-outline/OutlineAddChildButtons.test.tsx

@@ -38,12 +38,14 @@ jest.mock('@src/course-outline/CourseOutlineContext', () => ({
 }));
 
 const startCurrentFlow = jest.fn();
+const openContainerInfoSidebar = jest.fn();
 let currentFlow: OutlineFlow | null = null;
 jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
   ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext'),
   useOutlineSidebarContext: () => ({
     ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     startCurrentFlow,
+    openContainerInfoSidebar,
     currentFlow,
     isCurrentFlowOn: !!currentFlow,
   }),
@@ -104,21 +106,35 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
       switch (containerType) {
         case ContainerType.Section:
           await waitFor(() =>
-            expect(handleAddBlock.mutateAsync).toHaveBeenCalledWith({
-              type: ContainerType.Chapter,
-              parentLocator: courseUsageKey,
-              displayName: 'Section',
-            })
+            expect(handleAddBlock.mutateAsync).toHaveBeenCalledWith(
+              {
+                type: ContainerType.Chapter,
+                parentLocator: courseUsageKey,
+                displayName: 'Section',
+              },
+              expect.objectContaining({ onSuccess: expect.any(Function) }),
+            )
           );
+          handleAddBlock.mutateAsync.mock.calls[0][1].onSuccess({ locator: 'new-section-id' });
+          expect(openContainerInfoSidebar).toHaveBeenCalledWith('new-section-id', undefined, 'new-section-id');
           break;
         case ContainerType.Subsection:
           await waitFor(() =>
-            expect(handleAddBlock.mutateAsync).toHaveBeenCalledWith({
-              type: ContainerType.Sequential,
-              parentLocator,
-              displayName: 'Subsection',
-              sectionId: parentLocator,
-            })
+            expect(handleAddBlock.mutateAsync).toHaveBeenCalledWith(
+              {
+                type: ContainerType.Sequential,
+                parentLocator,
+                displayName: 'Subsection',
+                sectionId: parentLocator,
+              },
+              expect.objectContaining({ onSuccess: expect.any(Function) }),
+            )
+          );
+          handleAddBlock.mutateAsync.mock.calls[0][1].onSuccess({ locator: 'new-subsection-id' });
+          expect(openContainerInfoSidebar).toHaveBeenCalledWith(
+            'new-subsection-id',
+            'new-subsection-id',
+            parentLocator,
           );
           break;
         case ContainerType.Unit:

src/course-outline/OutlineAddChildButtons.tsx

@@ -114,7 +114,7 @@ const NewOutlineAddChildButtons = ({
     handleAddBlock,
     handleAddAndOpenUnit,
   } = useCourseOutlineContext();
-  const { startCurrentFlow } = useOutlineSidebarContext();
+  const { startCurrentFlow, openContainerInfoSidebar } = useOutlineSidebarContext();
   let messageMap = {
     newButton: messages.newUnitButton,
     importButton: messages.useUnitFromLibraryButton,
@@ -134,6 +134,10 @@ const NewOutlineAddChildButtons = ({
           type: ContainerType.Chapter,
           parentLocator: courseUsageKey,
           displayName: COURSE_BLOCK_NAMES.chapter.name,
+        }, {
+          onSuccess: (data: { locator: string; }) => {
+            openContainerInfoSidebar(data.locator, undefined, data.locator);
+          },
         });
       flowType = ContainerType.Section;
       break;
@@ -148,6 +152,10 @@ const NewOutlineAddChildButtons = ({
           parentLocator,
           displayName: COURSE_BLOCK_NAMES.sequential.name,
           sectionId: parentLocator,
+        }, {
+          onSuccess: (data: { locator: string; }) => {
+            openContainerInfoSidebar(data.locator, data.locator, parentLocator);
+          },
         });
       flowType = ContainerType.Subsection;
       break;

src/course-outline/card-header/CardHeader.scss

@@ -6,7 +6,7 @@
     justify-content: flex-start;
     padding: 0;
     flex: 1 1 0;
-    height: 1.5rem;
+    height: 1.75rem;
     margin-right: .25rem;
     background: transparent;
     color: var(--pgn-color-black);

src/course-outline/outline-sidebar/AddSidebar.tsx

@@ -224,6 +224,7 @@ const ShowLibraryContent = () => {
     lastEditableSubsection,
     selectedContainerState,
     currentItemData,
+    openContainerInfoSidebar,
   } = useOutlineSidebarContext();
 
   let sectionParentId = lastEditableSection?.id;
@@ -237,6 +238,11 @@ const ShowLibraryContent = () => {
           category: ContainerType.Chapter,
           parentLocator: courseUsageKey,
           libraryContentKey: usageKey,
+        }, {
+          onSuccess: (data: { locator: string; }) => {
+            // istanbul ignore next
+            openContainerInfoSidebar(data.locator, undefined, data.locator);
+          },
         });
         break;
       case 'subsection':
@@ -248,6 +254,11 @@ const ShowLibraryContent = () => {
             parentLocator: sectionParentId,
             libraryContentKey: usageKey,
             sectionId: sectionParentId,
+          }, {
+            onSuccess: (data: { locator: string; }) => {
+              // istanbul ignore next
+              openContainerInfoSidebar(data.locator, data.locator, sectionParentId);
+            },
           });
         }
         break;
@@ -261,6 +272,11 @@ const ShowLibraryContent = () => {
             parentLocator: subsectionParentId,
             libraryContentKey: usageKey,
             sectionId: sectionParentId,
+          }, {
+            onSuccess: (data: { locator: string; }) => {
+              // istanbul ignore next
+              openContainerInfoSidebar(data.locator, subsectionParentId, sectionParentId);
+            },
           });
         }
         break;

src/course-unit/CourseUnit.tsx

@@ -310,6 +310,7 @@ const CourseUnit = () => {
                   headerNavigationsActions={headerNavigationsActions}
                   unitTitle={unitTitle}
                   verticalBlocks={courseVerticalChildren.children}
+                  isPublished={courseUnit.published}
                 />
               }
             />

src/course-unit/header-navigations/HeaderNavigations.test.tsx

@@ -79,6 +79,18 @@ describe('<HeaderNavigations />', () => {
     });
   });
 
+  it('should enable the "View Live" button when isPublished is true', () => {
+    renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id, isPublished: true });
+
+    expect(screen.getByRole('button', { name: messages.viewLiveButton.defaultMessage })).not.toBeDisabled();
+  });
+
+  it('should disable the "View Live" button when isPublished is false', () => {
+    renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id, isPublished: false });
+
+    expect(screen.getByRole('button', { name: messages.viewLiveButton.defaultMessage })).toBeDisabled();
+  });
+
   it('click Info button should open info sidebar', async () => {
     setConfig({
       ...getConfig(),

src/course-unit/header-navigations/HeaderNavigations.tsx

@@ -16,7 +16,7 @@ import messages from './messages';
 import { isUnitPageNewDesignEnabled } from '../utils';
 import { useUnitSidebarContext } from '../unit-sidebar/UnitSidebarContext';
 
-type HeaderNavigationActions = {
+export type HeaderNavigationActions = {
   handleViewLive: () => void;
   handlePreview: () => void;
   handleEdit: () => void;
@@ -25,6 +25,7 @@ type HeaderNavigationActions = {
 type HeaderNavigationsProps = {
   headerNavigationsActions: HeaderNavigationActions;
   category: string;
+  isPublished?: boolean;
 };
 
 /**
@@ -33,7 +34,11 @@ type HeaderNavigationsProps = {
  * - Legacy library content page
  * - Split test page
  */
-const HeaderNavigations = ({ headerNavigationsActions, category }: HeaderNavigationsProps) => {
+const HeaderNavigations = ({
+  headerNavigationsActions,
+  category,
+  isPublished = true,
+}: HeaderNavigationsProps) => {
   const intl = useIntl();
   const {
     handleViewLive,
@@ -82,9 +87,11 @@ const HeaderNavigations = ({ headerNavigationsActions, category }: HeaderNavigat
             >
               {intl.formatMessage(messages.previewButton)}
             </Button>
+            {/* TODO: convert to <Button as="a" href="..."> since it navigates to a URL */}
             <Button
               variant="outline-primary"
               onClick={handleViewLive}
+              disabled={!isPublished}
             >
               {intl.formatMessage(messages.viewLiveButton)}
             </Button>

src/generic/sidebar/BlockCardButton.tsx

@@ -51,7 +51,7 @@ export const BlockCardButton = ({
       <div data-testid={`${blockType}-collapsible`}>
         <Collapsible
           styling="card-lg"
-          className="mx-2 font-weight-bold shadow pl-1 rounded"
+          className="mx-n2 font-weight-bold shadow-sm pl-1 rounded"
           title={titleComponent}
         >
           <Stack direction="horizontal" className="d-flex flex-wrap" gap={2}>
@@ -69,7 +69,7 @@ export const BlockCardButton = ({
   return (
     <Button
       variant="tertiary"
-      className="mx-2 shadow border justify-content-between pl-4 font-weight-bold"
+      className="mx-n2 shadow-sm border justify-content-between pl-4 font-weight-bold"
       onClick={onClick}
       disabled={disabled}
     >

src/generic/sidebar/Sidebar.tsx

@@ -137,6 +137,7 @@ export function Sidebar<T extends SidebarPages>({
           alt={intl.formatMessage(messages.toggle)}
           onClick={toggle}
           variant="primary"
+          className="mb-2"
         />
         <IconButtonToggle
           activeValue={activeKey}