Fix: Nits on the new sidebars [FC-0123]

src/course-outline/OutlineAddChildButtons.test.tsx

@@ -104,21 +104,27 @@ 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) }),
+            )
           );
           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) }),
+            )
           );
           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,11 @@ const NewOutlineAddChildButtons = ({
           type: ContainerType.Chapter,
           parentLocator: courseUsageKey,
           displayName: COURSE_BLOCK_NAMES.chapter.name,
+        }, {
+          onSuccess: (data: { locator: string; }) => {
+            // istanbul ignore next
+            openContainerInfoSidebar(data.locator, undefined, data.locator);
+          },
         });
       flowType = ContainerType.Section;
       break;
@@ -148,6 +153,11 @@ const NewOutlineAddChildButtons = ({
           parentLocator,
           displayName: COURSE_BLOCK_NAMES.sequential.name,
           sectionId: parentLocator,
+        }, {
+          onSuccess: (data: { locator: string; }) => {
+            // istanbul ignore next
+            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,
@@ -85,6 +90,7 @@ const HeaderNavigations = ({ headerNavigationsActions, category }: HeaderNavigat
             <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}

src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.tsx

@@ -21,6 +21,7 @@ const headerNavProps = {
   unitTitle: 'Mock Unit',
   isUnitVerticalType: false,
   verticalBlocks: [],
+  isPublished: true,
 };
 
 describe('CourseUnitHeaderActionsSlot', () => {
@@ -40,6 +41,7 @@ describe('CourseUnitHeaderActionsSlot', () => {
         verticalBlocks={[]}
         category="library"
         headerNavigationsActions={headerNavProps.headerNavigationsActions}
+        isPublished
       />,
     );
     expect(component.toJSON().props.pluginProps.isUnitVerticalType).toEqual(false);
@@ -50,6 +52,7 @@ describe('CourseUnitHeaderActionsSlot', () => {
         verticalBlocks={[]}
         category={COURSE_BLOCK_NAMES.vertical.id}
         headerNavigationsActions={headerNavProps.headerNavigationsActions}
+        isPublished
       />,
     );
     expect(component.toJSON().props.pluginProps.isUnitVerticalType).toEqual(true);

src/plugin-slots/CourseUnitHeaderActionsSlot/index.tsx

@@ -0,0 +1,51 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import HeaderNavigations, {
+  HeaderNavigationActions,
+} from 'CourseAuthoring/course-unit/header-navigations/HeaderNavigations';
+import { COURSE_BLOCK_NAMES } from 'CourseAuthoring/constants';
+
+export interface CourseUnitHeaderActionsSlotProps {
+  headerNavigationsActions: HeaderNavigationActions;
+  category: string;
+  unitTitle: string;
+  verticalBlocks: {
+    id: string;
+    blockId: string;
+    name: string;
+    blockType: string;
+  }[];
+  isPublished: boolean;
+}
+
+const CourseUnitHeaderActionsSlot = ({
+  headerNavigationsActions,
+  category,
+  unitTitle,
+  verticalBlocks,
+  isPublished,
+}: CourseUnitHeaderActionsSlotProps) => {
+  const isUnitVerticalType = category === COURSE_BLOCK_NAMES.vertical.id;
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.authoring.course_unit_header_actions.v1"
+      idAliases={['course_unit_header_actions_slot']}
+      pluginProps={{
+        headerNavigationsActions,
+        category,
+        unitTitle,
+        isUnitVerticalType,
+        verticalBlocks,
+        isPublished,
+      }}
+    >
+      <HeaderNavigations
+        headerNavigationsActions={headerNavigationsActions}
+        category={category}
+        isPublished={isPublished}
+      />
+    </PluginSlot>
+  );
+};
+
+export default CourseUnitHeaderActionsSlot;