From 3dae0048d5c94d13692eea8bf94e7c7e7b4868cb Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 15 Jan 2026 11:49:03 +0530
Subject: [PATCH 01/60] feat: container sidebar in outline

---
 ...eInfoSidebar.tsx => CourseInfoSidebar.tsx} |  2 +-
 .../outline-sidebar/InfoSidebar.tsx           | 29 +++++++
 .../outline-sidebar/LibraryReferenceCard.tsx  |  6 ++
 .../outline-sidebar/OutlineSidebarContext.tsx | 14 ++--
 .../outline-sidebar/PublishButon.tsx          | 25 ++++++
 .../outline-sidebar/SectionnfoSidebar.tsx     | 78 +++++++++++++++++++
 .../outline-sidebar/constants.ts              | 28 +++++++
 .../outline-sidebar/messages.ts               | 15 ++++
 .../generic/publish-status-buttons/index.scss |  2 +-
 .../generic/status-widget/StatusWidget.scss   |  2 +-
 10 files changed, 192 insertions(+), 9 deletions(-)
 rename src/course-outline/outline-sidebar/{OutlineInfoSidebar.tsx => CourseInfoSidebar.tsx} (97%)
 create mode 100644 src/course-outline/outline-sidebar/InfoSidebar.tsx
 create mode 100644 src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
 create mode 100644 src/course-outline/outline-sidebar/PublishButon.tsx
 create mode 100644 src/course-outline/outline-sidebar/SectionnfoSidebar.tsx
 create mode 100644 src/course-outline/outline-sidebar/constants.ts

diff --git a/src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx b/src/course-outline/outline-sidebar/CourseInfoSidebar.tsx
similarity index 97%
rename from src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx
rename to src/course-outline/outline-sidebar/CourseInfoSidebar.tsx
index b75dad5a89..ee42c29a9b 100644
--- a/src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/CourseInfoSidebar.tsx
@@ -12,7 +12,7 @@ import { useCourseDetails } from '../data/apiHooks';
 
 import messages from './messages';
 
-export const OutlineInfoSidebar = () => {
+export const CourseInfoSidebar = () => {
   const intl = useIntl();
   const { courseId } = useCourseAuthoringContext();
   const { data: courseDetails } = useCourseDetails(courseId);
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/InfoSidebar.tsx
new file mode 100644
index 0000000000..65c82b0191
--- /dev/null
+++ b/src/course-outline/outline-sidebar/InfoSidebar.tsx
@@ -0,0 +1,29 @@
+import { useOutlineSidebarContext } from "./OutlineSidebarContext";
+import { CourseInfoSidebar } from "./CourseInfoSidebar"
+import { ContainerType, getBlockType } from "@src/generic/key-utils";
+import { SectionSidebar } from "./SectionnfoSidebar";
+
+export const InfoSidebar = () => {
+  const { selectedContainerId } = useOutlineSidebarContext();
+  if (!selectedContainerId) {
+    return (
+      <CourseInfoSidebar />
+    )
+  }
+  const itemType = getBlockType(selectedContainerId);
+
+  switch (itemType) {
+    case ContainerType.Chapter:
+    case ContainerType.Section:
+      return <SectionSidebar sectionId={selectedContainerId} />
+    case ContainerType.Sequential:
+    case ContainerType.Subsection:
+      return <div>Subsection sidebar</div>;
+    case ContainerType.Vertical:
+    case ContainerType.Unit:
+      return <div>Unit sidebar</div>;
+    default:
+      return <CourseInfoSidebar />;
+  }
+}
+
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
new file mode 100644
index 0000000000..22578cd6b2
--- /dev/null
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -0,0 +1,6 @@
+export const LibraryReferenceCard = () => {
+  return (
+    <div>LibraryReferenceCard</div>
+  )
+};
+
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 2151bc41df..171321520e 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -55,12 +55,6 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
 
   const [selectedContainerId, setSelectedContainerId] = useState<string | undefined>();
 
-  const openContainerInfoSidebar = useCallback((containerId: string) => {
-    if (isOutlineNewDesignEnabled()) {
-      setSelectedContainerId(containerId);
-    }
-  }, [setSelectedContainerId]);
-
   /**
   * Stops current add content flow.
   * This will cause the sidebar to switch back to its normal state and clear out any placeholder containers.
@@ -76,6 +70,13 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     open();
   }, [open, setCurrentFlow]);
 
+  const openContainerInfoSidebar = useCallback((containerId: string) => {
+    if (isOutlineNewDesignEnabled()) {
+      setSelectedContainerId(containerId);
+      setCurrentPageKey('info');
+    }
+  }, [setSelectedContainerId]);
+
   /**
   * Starts add content flow.
   * The sidebar enters an add content flow which allows user to add content in a specific container.
@@ -90,6 +91,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     const handleEsc = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         stopCurrentFlow();
+        setSelectedContainerId(undefined);
       }
     };
     window.addEventListener('keydown', handleEsc);
diff --git a/src/course-outline/outline-sidebar/PublishButon.tsx b/src/course-outline/outline-sidebar/PublishButon.tsx
new file mode 100644
index 0000000000..5e4aaf612a
--- /dev/null
+++ b/src/course-outline/outline-sidebar/PublishButon.tsx
@@ -0,0 +1,25 @@
+import { FormattedMessage } from "@edx/frontend-platform/i18n"
+import { Button } from "@openedx/paragon"
+import messages from './messages';
+
+interface Props {
+  onClick: () => void;
+}
+
+export const PublishButon = ({ onClick }: Props) => {
+  return (
+    <Button
+      variant="outline-primary w-100 rounded status-button draft-status"
+      className="m-1"
+      onClick={onClick}
+    >
+      <strong className="mr-1">
+        <FormattedMessage
+          {...messages.publishContainerButton}
+        />
+      </strong>
+      <FormattedMessage {...messages.draftText} />
+    </Button>
+  )
+}
+
diff --git a/src/course-outline/outline-sidebar/SectionnfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionnfoSidebar.tsx
new file mode 100644
index 0000000000..de081db89f
--- /dev/null
+++ b/src/course-outline/outline-sidebar/SectionnfoSidebar.tsx
@@ -0,0 +1,78 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useToggle } from '@openedx/paragon';
+import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+
+import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
+import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { useGetBlockTypes } from '@src/search-manager';
+
+import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+
+import messages from './messages';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import Loading from '@src/generic/Loading';
+import { LibraryReferenceCard } from './LibraryReferenceCard';
+import { PublishButon } from './PublishButon';
+
+interface Props {
+  sectionId: string;
+}
+
+export const SectionInfoSidebar = ({ sectionId }: Props) => {
+  const intl = useIntl();
+  const { data: componentData } = useGetBlockTypes(
+    [`breadcrumbs.usage_key = "${sectionId}"`],
+  );
+
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
+  return (
+    <>
+      <SidebarContent>
+        <LibraryReferenceCard />
+        <SidebarSection
+          title={intl.formatMessage(messages.sectionContentSummaryText)}
+          icon={SchoolOutline}
+        >
+          {componentData && <ComponentCountSnippet componentData={componentData} />}
+        </SidebarSection>
+        <SidebarSection
+          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
+          icon={Tag}
+          actions={[
+            {
+              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+              onClick: openManageTagsDrawer,
+            },
+          ]}
+        >
+          <ContentTagsSnippet contentId={sectionId} />
+        </SidebarSection>
+      </SidebarContent>
+      <ContentTagsDrawerSheet
+        id={sectionId}
+        onClose={closeManageTagsDrawer}
+        showSheet={isManageTagsDrawerOpen}
+      />
+    </>
+  );
+};
+
+export const SectionSidebar = ({ sectionId }: Props) => {
+  const { data: sectionData, isLoading } = useCourseItemData(sectionId);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <SidebarTitle
+        title={sectionData?.displayName || ''}
+        icon={SchoolOutline}
+      />
+      <PublishButon onClick={() => {}} />
+    <SectionInfoSidebar sectionId={sectionId} />
+    </>
+  );
+}
diff --git a/src/course-outline/outline-sidebar/constants.ts b/src/course-outline/outline-sidebar/constants.ts
new file mode 100644
index 0000000000..39c084b777
--- /dev/null
+++ b/src/course-outline/outline-sidebar/constants.ts
@@ -0,0 +1,28 @@
+import { HelpOutline, Info, Plus } from '@openedx/paragon/icons';
+import type { SidebarPage } from '@src/generic/sidebar';
+import OutlineHelpSidebar from './OutlineHelpSidebar';
+import { InfoSidebar } from './InfoSidebar';
+import messages from './messages';
+import { AddSidebar } from './AddSidebar';
+import type { OutlineSidebarPageKeys } from './OutlineSidebarContext';
+
+export type OutlineSidebarPages = Record<OutlineSidebarPageKeys, SidebarPage>;
+
+export const OUTLINE_SIDEBAR_PAGES: OutlineSidebarPages = {
+  info: {
+    component: InfoSidebar,
+    icon: Info,
+    title: messages.sidebarButtonInfo,
+  },
+  help: {
+    component: OutlineHelpSidebar,
+    icon: HelpOutline,
+    title: messages.sidebarButtonHelp,
+  },
+  add: {
+    component: AddSidebar,
+    icon: Plus,
+    title: messages.sidebarButtonAdd,
+    hideFromActionMenu: true,
+  },
+};
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index dd98edbe9e..549d592402 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -125,6 +125,21 @@ const messages = defineMessages({
     defaultMessage: 'Adding unit to {name}',
     description: 'Tab title for adding existing library unit to a specific parent in outline using sidebar',
   },
+  sectionContentSummaryText: {
+    id: 'course-authoring.course-outline.sidebar.section.content-summary-text',
+    defaultMessage: 'Section Content Summary',
+    description: 'Title of the summary section in the section info sidebar',
+  },
+  publishContainerButton: {
+    id: 'course-authoring.course-outline.sidebar.generic.publish.button',
+    defaultMessage: 'Publish Changes',
+    description: 'Publish button text',
+  },
+  draftText: {
+    id: 'course-authoring.course-outline.sidebar.generic.draft.button',
+    defaultMessage: '(Draft)',
+    description: 'Draft text in publish button',
+  }
 });
 
 export default messages;
diff --git a/src/library-authoring/generic/publish-status-buttons/index.scss b/src/library-authoring/generic/publish-status-buttons/index.scss
index ddeddbe72a..0cd5463541 100644
--- a/src/library-authoring/generic/publish-status-buttons/index.scss
+++ b/src/library-authoring/generic/publish-status-buttons/index.scss
@@ -1,6 +1,6 @@
 .status-button {
   border: 1px solid;
-  border-left: 4px solid;
+  border-left: 6px solid;
   text-align: center;
   white-space: pre-wrap;
 
diff --git a/src/library-authoring/generic/status-widget/StatusWidget.scss b/src/library-authoring/generic/status-widget/StatusWidget.scss
index fcbe24c527..0095326c14 100644
--- a/src/library-authoring/generic/status-widget/StatusWidget.scss
+++ b/src/library-authoring/generic/status-widget/StatusWidget.scss
@@ -1,6 +1,6 @@
 %draft-status {
   background-color: #FDF3E9;
-  border-color: #F4B57B !important;
+  border-color: #B4610E !important;
   color: #00262B;
 }
 

From c37f86f0b80e15f6ba34ae4e53a2a50d75e87d07 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 16 Jan 2026 15:21:44 +0530
Subject: [PATCH 02/60] feat: library reference card

---
 .../outline-sidebar/InfoSidebar.tsx           |   5 +-
 .../outline-sidebar/LibraryReferenceCard.tsx  | 120 +++++++++++++++++-
 ...nnfoSidebar.tsx => SectionInfoSidebar.tsx} |  25 +++-
 .../outline-sidebar/SubsectionInfoSidebar.tsx |  95 ++++++++++++++
 .../outline-sidebar/messages.ts               |  72 ++++++++++-
 src/data/types.ts                             |   2 +-
 6 files changed, 309 insertions(+), 10 deletions(-)
 rename src/course-outline/outline-sidebar/{SectionnfoSidebar.tsx => SectionInfoSidebar.tsx} (73%)
 create mode 100644 src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx

diff --git a/src/course-outline/outline-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/InfoSidebar.tsx
index 65c82b0191..bf24b7e093 100644
--- a/src/course-outline/outline-sidebar/InfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/InfoSidebar.tsx
@@ -1,7 +1,8 @@
 import { useOutlineSidebarContext } from "./OutlineSidebarContext";
 import { CourseInfoSidebar } from "./CourseInfoSidebar"
 import { ContainerType, getBlockType } from "@src/generic/key-utils";
-import { SectionSidebar } from "./SectionnfoSidebar";
+import { SectionSidebar } from "./SectionInfoSidebar";
+import { SubsectionSidebar } from "@src/course-outline/outline-sidebar/SubsectionInfoSidebar";
 
 export const InfoSidebar = () => {
   const { selectedContainerId } = useOutlineSidebarContext();
@@ -18,7 +19,7 @@ export const InfoSidebar = () => {
       return <SectionSidebar sectionId={selectedContainerId} />
     case ContainerType.Sequential:
     case ContainerType.Subsection:
-      return <div>Subsection sidebar</div>;
+      return <SubsectionSidebar subsectionId={selectedContainerId} />
     case ContainerType.Vertical:
     case ContainerType.Unit:
       return <div>Unit sidebar</div>;
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 22578cd6b2..48acff0a7c 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -1,6 +1,122 @@
-export const LibraryReferenceCard = () => {
+import { FormattedMessage } from "@edx/frontend-platform/i18n";
+import { Button, Card, Icon, Stack } from "@openedx/paragon";
+import { Cached, LinkOff, Newsstand } from "@openedx/paragon/icons";
+import { useCourseItemData } from "@src/course-outline/data/apiHooks";
+import { useOutlineSidebarContext } from "@src/course-outline/outline-sidebar/OutlineSidebarContext";
+import { UpstreamInfo } from "@src/data/types";
+import { getBlockType, normalizeContainerType } from "@src/generic/key-utils";
+import messages from './messages';
+
+interface SubProps {
+  upstreamInfo: UpstreamInfo;
+  displayName: string;
+}
+
+const HasTopParentTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
+  const { openContainerInfoSidebar } = useOutlineSidebarContext();
+  if (!upstreamInfo.topLevelParentKey) {
+    return null;
+  }
+
+  const messageValues = {
+    parentType: normalizeContainerType(getBlockType(upstreamInfo.topLevelParentKey)),
+    name: displayName,
+  }
+
+  if (upstreamInfo.errorMessage) {
+    return (
+      <Stack direction="vertical" gap={2}>
+        <FormattedMessage {...messages.hasTopParentBrokenLinkText} values={messageValues} />
+        <Button variant='outline-primary' iconBefore={LinkOff}>
+          <FormattedMessage {...messages.hasTopParentBrokenLinkBtn} values={messageValues} />
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (upstreamInfo.readyToSync) {
+    return (
+      <Stack direction="vertical" gap={2}>
+        <FormattedMessage {...messages.hasTopParentReadyToSyncText} values={messageValues} />
+        <Button variant='outline-primary' iconBefore={Cached}>
+          <FormattedMessage {...messages.hasTopParentReadyToSyncBtn} values={messageValues} />
+        </Button>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack direction="vertical" gap={2}>
+      <FormattedMessage {...messages.hasTopParentText} values={messageValues} />
+      <Button
+        variant='outline-primary'
+        onClick={() => openContainerInfoSidebar(upstreamInfo.topLevelParentKey!)}
+      >
+        <FormattedMessage {...messages.hasTopParentBtn} values={messageValues} />
+      </Button>
+    </Stack>
+  );
+}
+
+const TopLevelTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
+  const messageValues = {
+    name: displayName,
+  }
+
+  if (upstreamInfo.errorMessage) {
+    return (
+      <Stack direction="vertical" gap={2}>
+        <FormattedMessage {...messages.topParentBrokenLinkText} values={messageValues} />
+        <Button variant='outline-primary' iconBefore={LinkOff}>
+          <FormattedMessage {...messages.topParentBrokenLinkBtn} />
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (upstreamInfo.readyToSync) {
+    return (
+      <Stack direction="vertical" gap={2}>
+        <FormattedMessage {...messages.topParentReaadyToSyncText} values={messageValues} />
+        <Button variant='outline-primary' iconBefore={Cached}>
+          <FormattedMessage {...messages.topParentReaadyToSyncBtn} values={messageValues} />
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (upstreamInfo.downstreamCustomized.length > 0) {
+    return (
+      <FormattedMessage {...messages.topParentModifiedText} values={messageValues} />
+    );
+  }
+
+  return null;
+}
+
+interface Props {
+  sectionId?: string;
+}
+
+export const LibraryReferenceCard = ({ sectionId }: Props) => {
+  const { data: sectionData, isLoading } = useCourseItemData(sectionId);
+  if (!sectionData?.upstreamInfo?.upstreamRef) {
+    return null;
+  }
+
   return (
-    <div>LibraryReferenceCard</div>
+    <Card isLoading={isLoading} className="mr-2">
+      <Card.Section>
+        <Stack gap={3}>
+          <Stack direction="horizontal" gap={2}>
+            <Icon src={Newsstand} />
+            <h4 className="mb-0"><FormattedMessage {...messages.libraryReferenceCardText} /></h4>
+          </Stack>
+          <HasTopParentTextAndButton upstreamInfo={sectionData.upstreamInfo} displayName={sectionData.displayName} />
+          <TopLevelTextAndButton upstreamInfo={sectionData.upstreamInfo} displayName={sectionData.displayName} />
+        </Stack>
+      </Card.Section>
+    </Card>
   )
 };
 
diff --git a/src/course-outline/outline-sidebar/SectionnfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
similarity index 73%
rename from src/course-outline/outline-sidebar/SectionnfoSidebar.tsx
rename to src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index de081db89f..f42376c315 100644
--- a/src/course-outline/outline-sidebar/SectionnfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { useToggle } from '@openedx/paragon';
+import { Tab, Tabs, useToggle } from '@openedx/paragon';
 import { SchoolOutline, Tag } from '@openedx/paragon/icons';
 
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
@@ -18,7 +19,7 @@ interface Props {
   sectionId: string;
 }
 
-export const SectionInfoSidebar = ({ sectionId }: Props) => {
+const SectionInfoSidebar = ({ sectionId }: Props) => {
   const intl = useIntl();
   const { data: componentData } = useGetBlockTypes(
     [`breadcrumbs.usage_key = "${sectionId}"`],
@@ -29,7 +30,7 @@ export const SectionInfoSidebar = ({ sectionId }: Props) => {
   return (
     <>
       <SidebarContent>
-        <LibraryReferenceCard />
+        <LibraryReferenceCard sectionId={sectionId} />
         <SidebarSection
           title={intl.formatMessage(messages.sectionContentSummaryText)}
           icon={SchoolOutline}
@@ -59,6 +60,8 @@ export const SectionInfoSidebar = ({ sectionId }: Props) => {
 };
 
 export const SectionSidebar = ({ sectionId }: Props) => {
+  const intl = useIntl();
+  const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { data: sectionData, isLoading } = useCourseItemData(sectionId);
 
   if (isLoading) {
@@ -72,7 +75,21 @@ export const SectionSidebar = ({ sectionId }: Props) => {
         icon={SchoolOutline}
       />
       <PublishButon onClick={() => {}} />
-    <SectionInfoSidebar sectionId={sectionId} />
+      <Tabs
+        variant="tabs"
+        className="my-2 d-flex justify-content-around"
+        id="add-content-tabs"
+        activeKey={tab}
+        onSelect={setTab}
+        mountOnEnter
+      >
+        <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
+          <SectionInfoSidebar sectionId={sectionId} />
+        </Tab>
+        <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
+          <div>Settings</div>
+        </Tab>
+      </Tabs>
     </>
   );
 }
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
new file mode 100644
index 0000000000..bb11e01317
--- /dev/null
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Tab, Tabs, useToggle } from '@openedx/paragon';
+import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+
+import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
+import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { useGetBlockTypes } from '@src/search-manager';
+
+import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+
+import messages from './messages';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import Loading from '@src/generic/Loading';
+import { LibraryReferenceCard } from './LibraryReferenceCard';
+import { PublishButon } from './PublishButon';
+
+interface Props {
+  subsectionId: string;
+}
+
+const SubsectionInfoSidebar = ({ subsectionId }: Props) => {
+  const intl = useIntl();
+  const { data: componentData } = useGetBlockTypes(
+    [`breadcrumbs.usage_key = "${subsectionId}"`],
+  );
+
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
+  return (
+    <>
+      <SidebarContent>
+        <LibraryReferenceCard sectionId={subsectionId} />
+        <SidebarSection
+          title={intl.formatMessage(messages.sectionContentSummaryText)}
+          icon={SchoolOutline}
+        >
+          {componentData && <ComponentCountSnippet componentData={componentData} />}
+        </SidebarSection>
+        <SidebarSection
+          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
+          icon={Tag}
+          actions={[
+            {
+              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+              onClick: openManageTagsDrawer,
+            },
+          ]}
+        >
+          <ContentTagsSnippet contentId={subsectionId} />
+        </SidebarSection>
+      </SidebarContent>
+      <ContentTagsDrawerSheet
+        id={subsectionId}
+        onClose={closeManageTagsDrawer}
+        showSheet={isManageTagsDrawerOpen}
+      />
+    </>
+  );
+};
+
+export const SubsectionSidebar = ({ subsectionId }: Props) => {
+  const intl = useIntl();
+  const [tab, setTab] = useState<'info' | 'settings'>('info');
+  const { data: sectionData, isLoading } = useCourseItemData(subsectionId);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <SidebarTitle
+        title={sectionData?.displayName || ''}
+        icon={SchoolOutline}
+      />
+      <PublishButon onClick={() => {}} />
+      <Tabs
+        variant="tabs"
+        className="my-2 d-flex justify-content-around"
+        id="add-content-tabs"
+        activeKey={tab}
+        onSelect={setTab}
+        mountOnEnter
+      >
+        <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
+          <SubsectionInfoSidebar subsectionId={subsectionId} />
+        </Tab>
+        <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
+          <div>Settings</div>
+        </Tab>
+      </Tabs>
+    </>
+  );
+}
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index 549d592402..09d3cacfab 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -139,7 +139,77 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.sidebar.generic.draft.button',
     defaultMessage: '(Draft)',
     description: 'Draft text in publish button',
-  }
+  },
+  infoTabText: {
+    id: 'course-authoring.course-outline.sidebar.generic.info.tab.text',
+    defaultMessage: 'Details',
+    description: 'Information tab title in section sidebar',
+  },
+  settingsTabText: {
+    id: 'course-authoring.course-outline.sidebar.generic.info.settings.text',
+    defaultMessage: 'Settings',
+    description: 'Settings tab title in section sidebar',
+  },
+  libraryReferenceCardText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.text',
+    defaultMessage: 'Library Reference',
+    description: 'Library reference card text in sidebar',
+  },
+  hasTopParentText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.has-top-parent-text',
+    defaultMessage: '{name} was reused as part of a {parentType}.',
+    description: 'Text displayed in sidebar library reference card when a block was reused as part of a parent block',
+  },
+  hasTopParentBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.has-top-parent-btn',
+    defaultMessage: 'View {parentType}',
+    description: 'Text displayed in sidebar library reference card button when a block was reused as part of a parent block',
+  },
+  hasTopParentReadyToSyncText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.has-top-parent-sync-text',
+    defaultMessage: '{name} was reused as part of a {parentType} which has updates available.',
+    description: 'Text displayed in sidebar library reference card when a block has updates available as it was reused as part of a parent block',
+  },
+  hasTopParentReadyToSyncBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.has-top-parent-sync-btn',
+    defaultMessage: 'Review Updates',
+    description: 'Text displayed in sidebar library reference card button when a block has updates available as it was reused as part of a parent block',
+  },
+  hasTopParentBrokenLinkText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.has-top-parent-broken-link-text',
+    defaultMessage: '{name} was reused as part of a {parentType} which has a broken link. To recieve library updates to this component, unlink the broken link.',
+    description: 'Text displayed in sidebar library reference card when a block was reused as part of a parent block which has a broken link.',
+  },
+  hasTopParentBrokenLinkBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.has-top-parent-broken-link-btn',
+    defaultMessage: 'Unlink {parentType}',
+    description: 'Text displayed in sidebar library reference card button when a block was reused as part of a parent block which has a broken link.',
+  },
+  topParentBrokenLinkText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.top-parent-broken-link-text',
+    defaultMessage: 'The link between {name} and the library version has been broken. To edit or make changes, unlink component.',
+    description: 'Text displayed in sidebar library reference card when a block has a broken link.',
+  },
+  topParentBrokenLinkBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.top-parent-broken-link-btn',
+    defaultMessage: 'Unlink from library',
+    description: 'Text displayed in sidebar library reference card button when a block has a broken link.',
+  },
+  topParentModifiedText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.top-parent-modified-text',
+    defaultMessage: '{name} has been modified in this course.',
+    description: 'Text displayed in sidebar library reference card when it is modified in course.',
+  },
+  topParentReaadyToSyncText: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.top-parent-ready-to-sync-text',
+    defaultMessage: '{name} has available updates',
+    description: 'Text displayed in sidebar library reference card when it is has updates available.',
+  },
+  topParentReaadyToSyncBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.card.top-parent-ready-to-sync-btn',
+    defaultMessage: 'Review Updates',
+    description: 'Text displayed in sidebar library reference card button when it is has updates available.',
+  },
 });
 
 export default messages;
diff --git a/src/data/types.ts b/src/data/types.ts
index 246f8c8c9e..b08656dd25 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -65,7 +65,7 @@ export interface UpstreamInfo {
   versionDeclined: number | null,
   errorMessage: string | null,
   downstreamCustomized: string[],
-  hasTopLevelParent?: boolean,
+  topLevelParentKey?: string,
   readyToSyncChildren?: UpstreamChildrenInfo[],
   isReadyToSyncIndividually?: boolean,
 }

From 1740fce0adc8d0d651c49fa96daaff33fc2a4b62 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 16 Jan 2026 19:47:41 +0530
Subject: [PATCH 03/60] refactor: unlink modal state and handlers

---
 src/CourseAuthoringContext.tsx                | 44 ++++++++++++++++++-
 src/course-outline/CourseOutline.tsx          | 10 ++---
 src/course-outline/hooks.jsx                  | 19 --------
 .../outline-sidebar/LibraryReferenceCard.tsx  | 12 ++---
 .../outline-sidebar/OutlineSidebarContext.tsx | 10 ++++-
 .../section-card/SectionCard.tsx              |  6 +--
 .../subsection-card/SubsectionCard.tsx        |  6 +--
 src/course-outline/unit-card/UnitCard.tsx     |  6 +--
 src/hooks.ts                                  | 16 +++++++
 9 files changed, 83 insertions(+), 46 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index e51484da37..05ce784ff6 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -1,5 +1,5 @@
 import { getConfig } from '@edx/frontend-platform';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
@@ -10,6 +10,15 @@ import { getOutlineIndexData } from '@src/course-outline/data/selectors';
 import { RequestStatus, RequestStatusType } from './data/constants';
 import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { CourseDetailsData } from './data/api';
+import { useToggleWithValue } from '@src/hooks';
+import { XBlock } from '@src/data/types';
+import { useUnlinkDownstream } from '@src/generic/unlink-modal';
+import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
+
+type UnlinkModalState = {
+  value: XBlock;
+  sectionId: string;
+}
 
 export type CourseAuthoringContextData = {
   /** The ID of the current course */
@@ -23,6 +32,11 @@ export type CourseAuthoringContextData = {
   handleAddUnit: ReturnType<typeof useCreateCourseBlock>;
   openUnitPage: (locator: string) => void;
   getUnitUrl: (locator: string) => string;
+  isUnlinkModalOpen: boolean;
+  currentUnlinkModalData?: UnlinkModalState;
+  openUnlinkModal: (value: UnlinkModalState) => void;
+  closeUnlinkModal: () => void;
+  handleUnlinkItemSubmit: () => Promise<void>;
 };
 
 /**
@@ -50,6 +64,7 @@ export const CourseAuthoringProvider = ({
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
   const { courseStructure } = useSelector(getOutlineIndexData);
   const { id: courseUsageKey } = courseStructure || {};
+  const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<UnlinkModalState>();
 
   const getUnitUrl = (locator: string) => {
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
@@ -59,6 +74,23 @@ export const CourseAuthoringProvider = ({
     return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
   };
 
+  const { mutateAsync: unlinkDownstream } = useUnlinkDownstream();
+
+  /** Handle the submit of the item unlinking XBlock from library counterpart. */
+  const handleUnlinkItemSubmit = useCallback(async () => {
+    // istanbul ignore if: this should never happen
+    if (!currentUnlinkModalData) {
+      return;
+    }
+
+    await unlinkDownstream(currentUnlinkModalData.value.id, {
+      onSuccess: () => {
+        dispatch(fetchCourseSectionQuery([currentUnlinkModalData.sectionId]))
+        closeUnlinkModal();
+      },
+    });
+  }, [currentUnlinkModalData, unlinkDownstream, closeUnlinkModal, fetchCourseSectionQuery]);
+
   /**
    * Open the unit page for a given locator.
    */
@@ -113,6 +145,11 @@ export const CourseAuthoringProvider = ({
     handleAddUnit,
     getUnitUrl,
     openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    handleUnlinkItemSubmit,
   }), [
     courseId,
     courseUsageKey,
@@ -124,6 +161,11 @@ export const CourseAuthoringProvider = ({
     handleAddUnit,
     getUnitUrl,
     openUnitPage,
+    isUnlinkModalOpen,
+    openUnlinkModal,
+    closeUnlinkModal,
+    currentUnlinkModalData,
+    handleUnlinkItemSubmit,
   ]);
 
   return (
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 68f4406378..8af2d7ff49 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -75,6 +75,9 @@ const CourseOutline = () => {
     handleAddSubsection,
     handleAddUnit,
     handleAddSection,
+    isUnlinkModalOpen,
+    closeUnlinkModal,
+    handleUnlinkItemSubmit,
   } = useCourseAuthoringContext();
 
   const {
@@ -96,16 +99,13 @@ const CourseOutline = () => {
     isPublishModalOpen,
     isConfigureModalOpen,
     isDeleteModalOpen,
-    isUnlinkModalOpen,
     closeHighlightsModal,
     closePublishModal,
     handleConfigureModalClose,
     closeDeleteModal,
-    closeUnlinkModal,
     openPublishModal,
     openConfigureModal,
     openDeleteModal,
-    openUnlinkModal,
     headerNavigationsActions,
     openEnableHighlightsModal,
     closeEnableHighlightsModal,
@@ -117,7 +117,6 @@ const CourseOutline = () => {
     handlePublishItemSubmit,
     handleEditSubmit,
     handleDeleteItemSubmit,
-    handleUnlinkItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
@@ -390,7 +389,6 @@ const CourseOutline = () => {
                                     onOpenPublishModal={openPublishModal}
                                     onOpenConfigureModal={openConfigureModal}
                                     onOpenDeleteModal={openDeleteModal}
-                                    onOpenUnlinkModal={openUnlinkModal}
                                     onEditSectionSubmit={handleEditSubmit}
                                     onDuplicateSubmit={handleDuplicateSectionSubmit}
                                     isSectionsExpanded={isSectionsExpanded}
@@ -420,7 +418,6 @@ const CourseOutline = () => {
                                           savingStatus={savingStatus}
                                           onOpenPublishModal={openPublishModal}
                                           onOpenDeleteModal={openDeleteModal}
-                                          onOpenUnlinkModal={openUnlinkModal}
                                           onEditSubmit={handleEditSubmit}
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
@@ -454,7 +451,6 @@ const CourseOutline = () => {
                                                 onOpenPublishModal={openPublishModal}
                                                 onOpenConfigureModal={openConfigureModal}
                                                 onOpenDeleteModal={openDeleteModal}
-                                                onOpenUnlinkModal={openUnlinkModal}
                                                 onEditSubmit={handleEditSubmit}
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
                                                 onOrderChange={updateUnitOrderByIndex}
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 43ce130d58..fb2507208e 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -7,7 +7,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import moment from 'moment';
 import { getSavingStatus as getGenericSavingStatus } from '@src/generic/data/selectors';
 import { RequestStatus } from '@src/data/constants';
-import { useUnlinkDownstream } from '@src/generic/unlink-modal';
 
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { ContainerType } from '@src/generic/key-utils';
@@ -99,7 +98,6 @@ const useCourseOutline = ({ courseId }) => {
   const [isPublishModalOpen, openPublishModal, closePublishModal] = useToggle(false);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
-  const [isUnlinkModalOpen, openUnlinkModal, closeUnlinkModal] = useToggle(false);
 
   const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
 
@@ -212,19 +210,6 @@ const useCourseOutline = ({ courseId }) => {
     closeDeleteModal();
   };
 
-  const { mutateAsync: unlinkDownstream } = useUnlinkDownstream();
-
-  const handleUnlinkItemSubmit = async () => {
-    // istanbul ignore if: this should never happen
-    if (!currentItem.id) {
-      return;
-    }
-
-    await unlinkDownstream(currentItem.id);
-    dispatch(fetchCourseOutlineIndexQuery(courseId));
-    closeUnlinkModal();
-  };
-
   const handleDuplicateSectionSubmit = () => {
     dispatch(duplicateSectionQuery(currentSection.id, courseStructure.id));
   };
@@ -339,11 +324,7 @@ const useCourseOutline = ({ courseId }) => {
     isDeleteModalOpen,
     closeDeleteModal,
     openDeleteModal,
-    isUnlinkModalOpen,
-    closeUnlinkModal,
-    openUnlinkModal,
     handleDeleteItemSubmit,
-    handleUnlinkItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 48acff0a7c..3b688299e5 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -95,12 +95,12 @@ const TopLevelTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
 }
 
 interface Props {
-  sectionId?: string;
+  itemId?: string;
 }
 
-export const LibraryReferenceCard = ({ sectionId }: Props) => {
-  const { data: sectionData, isLoading } = useCourseItemData(sectionId);
-  if (!sectionData?.upstreamInfo?.upstreamRef) {
+export const LibraryReferenceCard = ({ itemId }: Props) => {
+  const { data: itemData, isLoading } = useCourseItemData(itemId);
+  if (!itemData?.upstreamInfo?.upstreamRef) {
     return null;
   }
 
@@ -112,8 +112,8 @@ export const LibraryReferenceCard = ({ sectionId }: Props) => {
             <Icon src={Newsstand} />
             <h4 className="mb-0"><FormattedMessage {...messages.libraryReferenceCardText} /></h4>
           </Stack>
-          <HasTopParentTextAndButton upstreamInfo={sectionData.upstreamInfo} displayName={sectionData.displayName} />
-          <TopLevelTextAndButton upstreamInfo={sectionData.upstreamInfo} displayName={sectionData.displayName} />
+          <HasTopParentTextAndButton upstreamInfo={itemData.upstreamInfo} displayName={itemData.displayName} />
+          <TopLevelTextAndButton upstreamInfo={itemData.upstreamInfo} displayName={itemData.displayName} />
         </Stack>
       </Card.Section>
     </Card>
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 171321520e..bd007c5e7c 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { useToggle } from '@openedx/paragon';
 
-import { useStateWithUrlSearchParam } from '@src/hooks';
+import { useEscapeClick, useStateWithUrlSearchParam } from '@src/hooks';
 import { isOutlineNewDesignEnabled } from '../utils';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
@@ -87,6 +87,14 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     setCurrentFlow(flow);
   }, [setCurrentFlow, setCurrentPageKey]);
 
+  useEscapeClick({
+    onEscape: () => {
+      stopCurrentFlow();
+      setSelectedContainerId(undefined);
+    },
+    dependency: [stopCurrentFlow, selectedContainerId],
+  });
+
   useEffect(() => {
     const handleEsc = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 70261be217..84372568de 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -39,7 +39,6 @@ interface SectionCardProps {
   onEditSectionSubmit: (itemId: string, sectionId: string, displayName: string) => void,
   savingStatus?: RequestStatusType,
   onOpenDeleteModal: () => void,
-  onOpenUnlinkModal: () => void,
   onDuplicateSubmit: () => void,
   isSectionsExpanded: boolean,
   index: number,
@@ -61,7 +60,6 @@ const SectionCard = ({
   onEditSectionSubmit,
   savingStatus,
   onOpenDeleteModal,
-  onOpenUnlinkModal,
   onDuplicateSubmit,
   isSectionsExpanded,
   onOrderChange,
@@ -74,7 +72,7 @@ const SectionCard = ({
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === section.id;
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
 
   // Expand the section if a search result should be shown/scrolled to
@@ -286,7 +284,7 @@ const SectionCard = ({
                 onClickConfigure={onOpenConfigureModal}
                 onClickEdit={openForm}
                 onClickDelete={onOpenDeleteModal}
-                onClickUnlink={onOpenUnlinkModal}
+                onClickUnlink={() => openUnlinkModal({ value: section, sectionId: section.id })}
                 onClickMoveUp={handleSectionMoveUp}
                 onClickMoveDown={handleSectionMoveDown}
                 onClickSync={openSyncModal}
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 4031b198c6..6a8da4b8a2 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -41,7 +41,6 @@ interface SubsectionCardProps {
   onEditSubmit: (itemId: string, sectionId: string, displayName: string) => void,
   savingStatus?: RequestStatusType,
   onOpenDeleteModal: () => void,
-  onOpenUnlinkModal: () => void,
   onDuplicateSubmit: () => void,
   index: number,
   getPossibleMoves: (index: number, step: number) => void,
@@ -64,7 +63,6 @@ const SubsectionCard = ({
   onEditSubmit,
   savingStatus,
   onOpenDeleteModal,
-  onOpenUnlinkModal,
   onDuplicateSubmit,
   onOrderChange,
   onOpenConfigureModal,
@@ -83,7 +81,7 @@ const SubsectionCard = ({
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'subsection';
   const { sharedClipboardData, showPasteUnit } = useClipboard();
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
 
   const {
@@ -289,7 +287,7 @@ const SubsectionCard = ({
                 onClickPublish={onOpenPublishModal}
                 onClickEdit={openForm}
                 onClickDelete={onOpenDeleteModal}
-                onClickUnlink={onOpenUnlinkModal}
+                onClickUnlink={() => openUnlinkModal({ value: subsection, sectionId: section.id })}
                 onClickMoveUp={handleSubsectionMoveUp}
                 onClickMoveDown={handleSubsectionMoveDown}
                 onClickConfigure={onOpenConfigureModal}
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 922a6ab38d..80d6ba8a29 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -37,7 +37,6 @@ interface UnitCardProps {
   onEditSubmit: (itemId: string, sectionId: string, displayName: string) => void,
   savingStatus?: RequestStatusType;
   onOpenDeleteModal: () => void;
-  onOpenUnlinkModal: () => void;
   onDuplicateSubmit: () => void;
   index: number;
   getPossibleMoves: (index: number, step: number) => void,
@@ -63,7 +62,6 @@ const UnitCard = ({
   onEditSubmit,
   savingStatus,
   onOpenDeleteModal,
-  onOpenUnlinkModal,
   onDuplicateSubmit,
   onOrderChange,
   discussionsSettings,
@@ -79,7 +77,7 @@ const UnitCard = ({
   const namePrefix = 'unit';
 
   const { copyToClipboard } = useClipboard();
-  const { courseId, getUnitUrl } = useCourseAuthoringContext();
+  const { courseId, getUnitUrl, openUnlinkModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
 
   const {
@@ -261,7 +259,7 @@ const UnitCard = ({
             onClickConfigure={onOpenConfigureModal}
             onClickEdit={openForm}
             onClickDelete={onOpenDeleteModal}
-            onClickUnlink={onOpenUnlinkModal}
+            onClickUnlink={() => openUnlinkModal({ value: unit, sectionId: section.id })}
             onClickMoveUp={handleUnitMoveUp}
             onClickMoveDown={handleUnitMoveDown}
             onClickSync={openSyncModal}
diff --git a/src/hooks.ts b/src/hooks.ts
index b1dacca6ed..1ee155ec81 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -5,6 +5,7 @@ import {
   useEffect,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 import { history } from '@edx/frontend-platform';
 import { useLocation, useSearchParams } from 'react-router-dom';
@@ -213,3 +214,18 @@ export function useStickyState<T>(
 
   return [value, setValue];
 }
+
+
+export function useToggleWithValue<T>(defaultValue?: T): [
+  isDefined: boolean, value: T | undefined, define: ((val: T) => void), undefine: () => void,
+] {
+  const [value, setValue] = useState<T | undefined>(defaultValue);
+  const define = useCallback((val: T) => {
+    setValue(val);
+  }, []);
+  const undefine = useCallback(() => {
+    setValue(undefined);
+  }, []);
+  const isDefined = useMemo(() => value !== undefined, [value]);
+  return [isDefined, value, define, undefine];
+}

From 18a45ab299f70530ac93fadb6a5be4918ca57ac5 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 19 Jan 2026 11:17:32 +0530
Subject: [PATCH 04/60] refactor: unlink action

---
 src/course-outline/data/apiHooks.ts           | 18 ++++-
 src/course-outline/hooks.jsx                  |  5 ++
 .../outline-sidebar/LibraryReferenceCard.tsx  | 80 ++++++++++++++-----
 .../outline-sidebar/OutlineSidebarContext.tsx | 33 ++++----
 .../outline-sidebar/SectionInfoSidebar.tsx    |  2 +-
 .../outline-sidebar/SubsectionInfoSidebar.tsx |  4 +-
 .../outline-sidebar/messages.ts               |  5 ++
 .../section-card/SectionCard.tsx              |  2 +-
 .../subsection-card/SubsectionCard.tsx        |  2 +-
 src/course-outline/unit-card/UnitCard.tsx     |  2 +-
 src/generic/sidebar/SidebarContent.tsx        |  2 +-
 src/generic/unlink-modal/data/apiHooks.ts     |  4 +
 12 files changed, 110 insertions(+), 49 deletions(-)

diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index 9a67ecf32f..a739310437 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -1,3 +1,4 @@
+import { getCourseKey } from '@src/generic/key-utils';
 import { skipToken, useMutation, useQuery } from '@tanstack/react-query';
 import { createCourseXblock, getCourseDetails, getCourseItem } from './api';
 
@@ -6,10 +7,19 @@ export const courseOutlineQueryKeys = {
   /**
    * Base key for data specific to a course in outline
    */
-  contentLibrary: (courseId?: string) => [...courseOutlineQueryKeys.all, courseId],
-  courseItemId: (itemId?: string) => [...courseOutlineQueryKeys.all, itemId],
-  courseDetails: (courseId?: string) => [...courseOutlineQueryKeys.all, courseId, 'details'],
-  legacyLibReadyToMigrateBlocks: (courseId: string) => [...courseOutlineQueryKeys.all, courseId, 'legacyLibReadyToMigrateBlocks'],
+  course: (courseId?: string) => [...courseOutlineQueryKeys.all, courseId],
+  courseItemId: (itemId?: string) => [
+    ...courseOutlineQueryKeys.course(itemId ? getCourseKey(itemId): undefined),
+    itemId,
+  ],
+  courseDetails: (courseId?: string) => [
+    ...courseOutlineQueryKeys.course(courseId),
+    'details',
+  ],
+  legacyLibReadyToMigrateBlocks: (courseId: string) => [
+    ...courseOutlineQueryKeys.course(courseId),
+    'legacyLibReadyToMigrateBlocks',
+  ],
   legacyLibReadyToMigrateBlocksStatus: (courseId: string, taskId?: string) => [
     ...courseOutlineQueryKeys.legacyLibReadyToMigrateBlocks(courseId),
     'status',
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index fb2507208e..b82e68cb49 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -58,11 +58,13 @@ import {
   syncDiscussionsTopics,
 } from './data/thunk';
 import { containerComparisonQueryKeys } from '../container-comparison/data/apiHooks';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
   const { handleAddSection } = useCourseAuthoringContext();
+  const { selectedContainerId, clearSelection } = useOutlineSidebarContext();
 
   const {
     reindexLink,
@@ -207,6 +209,9 @@ const useCourseOutline = ({ courseId }) => {
       default:
         return;
     }
+    if (selectedContainerId === currentItem.id) {
+      clearSelection();
+    }
     closeDeleteModal();
   };
 
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 3b688299e5..5fe2a0b28e 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -3,18 +3,31 @@ import { Button, Card, Icon, Stack } from "@openedx/paragon";
 import { Cached, LinkOff, Newsstand } from "@openedx/paragon/icons";
 import { useCourseItemData } from "@src/course-outline/data/apiHooks";
 import { useOutlineSidebarContext } from "@src/course-outline/outline-sidebar/OutlineSidebarContext";
-import { UpstreamInfo } from "@src/data/types";
+import { useCourseAuthoringContext } from "@src/CourseAuthoringContext";
+import { XBlock } from "@src/data/types";
 import { getBlockType, normalizeContainerType } from "@src/generic/key-utils";
 import messages from './messages';
 
 interface SubProps {
-  upstreamInfo: UpstreamInfo;
+  blockData: XBlock;
   displayName: string;
 }
 
-const HasTopParentTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
+const HasTopParentTextAndButton = ({ blockData, displayName }: SubProps) => {
+  const { upstreamInfo } = blockData;
+  const { selectedSectionId } = useOutlineSidebarContext();
   const { openContainerInfoSidebar } = useOutlineSidebarContext();
-  if (!upstreamInfo.topLevelParentKey) {
+  const { openUnlinkModal } = useCourseAuthoringContext();
+  const { data: parentData, isPending } = useCourseItemData(upstreamInfo?.topLevelParentKey);
+
+  const handleUnlinkClick = () => {
+    if (!selectedSectionId || !parentData) {
+      return;
+    }
+    openUnlinkModal({ value: parentData, sectionId: selectedSectionId });
+  };
+
+  if (!upstreamInfo?.topLevelParentKey) {
     return null;
   }
 
@@ -27,7 +40,12 @@ const HasTopParentTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.hasTopParentBrokenLinkText} values={messageValues} />
-        <Button variant='outline-primary' iconBefore={LinkOff}>
+        <Button
+          variant='outline-primary'
+          iconBefore={LinkOff}
+          disabled={isPending}
+          onClick={handleUnlinkClick}
+        >
           <FormattedMessage {...messages.hasTopParentBrokenLinkBtn} values={messageValues} />
         </Button>
       </Stack>
@@ -58,23 +76,33 @@ const HasTopParentTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
   );
 }
 
-const TopLevelTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
+const TopLevelTextAndButton = ({ blockData, displayName }: SubProps) => {
+  const { upstreamInfo } = blockData;
+  const { selectedSectionId } = useOutlineSidebarContext();
+  const { openUnlinkModal } = useCourseAuthoringContext();
   const messageValues = {
     name: displayName,
   }
 
-  if (upstreamInfo.errorMessage) {
+  const handleUnlinkClick = () => {
+    if (!selectedSectionId) {
+      return;
+    }
+    openUnlinkModal({ value: blockData, sectionId: selectedSectionId });
+  };
+
+  if (upstreamInfo?.errorMessage) {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.topParentBrokenLinkText} values={messageValues} />
-        <Button variant='outline-primary' iconBefore={LinkOff}>
+        <Button variant='outline-primary' iconBefore={LinkOff} onClick={handleUnlinkClick}>
           <FormattedMessage {...messages.topParentBrokenLinkBtn} />
         </Button>
       </Stack>
     );
   }
 
-  if (upstreamInfo.readyToSync) {
+  if (upstreamInfo?.readyToSync) {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.topParentReaadyToSyncText} values={messageValues} />
@@ -85,7 +113,7 @@ const TopLevelTextAndButton = ({ upstreamInfo, displayName }: SubProps) => {
     );
   }
 
-  if (upstreamInfo.downstreamCustomized.length > 0) {
+  if ((upstreamInfo?.downstreamCustomized.length || 0) > 0) {
     return (
       <FormattedMessage {...messages.topParentModifiedText} values={messageValues} />
     );
@@ -99,24 +127,32 @@ interface Props {
 }
 
 export const LibraryReferenceCard = ({ itemId }: Props) => {
-  const { data: itemData, isLoading } = useCourseItemData(itemId);
+  const { data: itemData, isPending } = useCourseItemData(itemId);
   if (!itemData?.upstreamInfo?.upstreamRef) {
     return null;
   }
 
   return (
-    <Card isLoading={isLoading} className="mr-2">
-      <Card.Section>
-        <Stack gap={3}>
-          <Stack direction="horizontal" gap={2}>
-            <Icon src={Newsstand} />
-            <h4 className="mb-0"><FormattedMessage {...messages.libraryReferenceCardText} /></h4>
+    <div className="px-3">
+      <Card isLoading={isPending} className="my-3">
+        <Card.Section>
+          <Stack gap={3}>
+            <Stack direction="horizontal" gap={2}>
+              <Icon src={Newsstand} />
+              <h4 className="mb-0"><FormattedMessage {...messages.libraryReferenceCardText} /></h4>
+            </Stack>
+            <HasTopParentTextAndButton
+              blockData={itemData}
+              displayName={itemData.displayName}
+            />
+            <TopLevelTextAndButton
+              blockData={itemData}
+              displayName={itemData.displayName}
+            />
           </Stack>
-          <HasTopParentTextAndButton upstreamInfo={itemData.upstreamInfo} displayName={itemData.displayName} />
-          <TopLevelTextAndButton upstreamInfo={itemData.upstreamInfo} displayName={itemData.displayName} />
-        </Stack>
-      </Card.Section>
-    </Card>
+        </Card.Section>
+      </Card>
+    </div>
   )
 };
 
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index bd007c5e7c..db020c7c28 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -33,6 +33,7 @@ interface OutlineSidebarContextData {
   open: () => void;
   toggle: () => void;
   selectedContainerId?: string;
+  selectedSectionId?: string;
   // The Id of the container used in the current sidebar page
   // The container is not necessarily selected to open a selected sidebar.
   // Example: Align sidebar
@@ -53,6 +54,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   const [currentFlow, setCurrentFlow] = useState<OutlineFlow | null>(null);
   const [isOpen, open, , toggle] = useToggle(true);
 
+  const [selectedSectionId, setSelectedSectionId] = useState<string | undefined>();
   const [selectedContainerId, setSelectedContainerId] = useState<string | undefined>();
 
   /**
@@ -70,12 +72,20 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     open();
   }, [open, setCurrentFlow]);
 
-  const openContainerInfoSidebar = useCallback((containerId: string) => {
+  const openContainerInfoSidebar = useCallback((containerId: string, sectionId?: string) => {
     if (isOutlineNewDesignEnabled()) {
       setSelectedContainerId(containerId);
+      if (sectionId) {
+        setSelectedSectionId(sectionId);
+      }
       setCurrentPageKey('info');
     }
-  }, [setSelectedContainerId]);
+  }, [setSelectedContainerId, setSelectedSectionId]);
+
+  const clearSelection = useCallback(() => {
+    setSelectedSectionId(undefined);
+    setSelectedContainerId(undefined);
+  }, [setSelectedSectionId, selectedContainerId]);
 
   /**
   * Starts add content flow.
@@ -91,24 +101,11 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     onEscape: () => {
       stopCurrentFlow();
       setSelectedContainerId(undefined);
+      setSelectedSectionId(undefined);
     },
     dependency: [stopCurrentFlow, selectedContainerId],
   });
 
-  useEffect(() => {
-    const handleEsc = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        stopCurrentFlow();
-        setSelectedContainerId(undefined);
-      }
-    };
-    window.addEventListener('keydown', handleEsc);
-
-    return () => {
-      window.removeEventListener('keydown', handleEsc);
-    };
-  }, []);
-
   const context = useMemo<OutlineSidebarContextData>(
     () => ({
       currentPageKey,
@@ -121,7 +118,9 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       toggle,
       selectedContainerId,
       currentContainerId,
+      selectedSectionId,
       openContainerInfoSidebar,
+      clearSelection,
     }),
     [
       currentPageKey,
@@ -134,7 +133,9 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       toggle,
       selectedContainerId,
       currentContainerId,
+      selectedSectionId,
       openContainerInfoSidebar,
+      clearSelection,
     ],
   );
 
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index f42376c315..a3f8dffac3 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -29,8 +29,8 @@ const SectionInfoSidebar = ({ sectionId }: Props) => {
 
   return (
     <>
+      <LibraryReferenceCard itemId={sectionId} />
       <SidebarContent>
-        <LibraryReferenceCard sectionId={sectionId} />
         <SidebarSection
           title={intl.formatMessage(messages.sectionContentSummaryText)}
           icon={SchoolOutline}
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index bb11e01317..75d5c0b971 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -29,10 +29,10 @@ const SubsectionInfoSidebar = ({ subsectionId }: Props) => {
 
   return (
     <>
+      <LibraryReferenceCard itemId={subsectionId} />
       <SidebarContent>
-        <LibraryReferenceCard sectionId={subsectionId} />
         <SidebarSection
-          title={intl.formatMessage(messages.sectionContentSummaryText)}
+          title={intl.formatMessage(messages.subsectionContentSummaryText)}
           icon={SchoolOutline}
         >
           {componentData && <ComponentCountSnippet componentData={componentData} />}
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index 09d3cacfab..dd8039c7c2 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -130,6 +130,11 @@ const messages = defineMessages({
     defaultMessage: 'Section Content Summary',
     description: 'Title of the summary section in the section info sidebar',
   },
+  subsectionContentSummaryText: {
+    id: 'course-authoring.course-outline.sidebar.subsection.content-summary-text',
+    defaultMessage: 'Subsection Content Summary',
+    description: 'Title of the summary section in the subsection info sidebar',
+  },
   publishContainerButton: {
     id: 'course-authoring.course-outline.sidebar.generic.publish.button',
     defaultMessage: 'Publish Changes',
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 84372568de..96cad7237a 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -239,7 +239,7 @@ const SectionCard = ({
 
   const onClickCard = useCallback((e: React.MouseEvent, preventNodeEvents: boolean) => {
     if (!preventNodeEvents || e.target === e.currentTarget) {
-      openContainerInfoSidebar(section.id);
+      openContainerInfoSidebar(section.id, section.id);
       setIsExpanded(true);
     }
   }, [openContainerInfoSidebar]);
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 6a8da4b8a2..caec75a869 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -241,7 +241,7 @@ const SubsectionCard = ({
 
   const onClickCard = useCallback((e: React.MouseEvent, preventNodeEvents: boolean) => {
     if (!preventNodeEvents || e.target === e.currentTarget) {
-      openContainerInfoSidebar(subsection.id);
+      openContainerInfoSidebar(subsection.id, section.id);
       setIsExpanded(true);
     }
   }, [openContainerInfoSidebar]);
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 80d6ba8a29..eca75ed522 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -168,7 +168,7 @@ const UnitCard = ({
 
   const onClickCard = useCallback((e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      openContainerInfoSidebar(unit.id);
+      openContainerInfoSidebar(unit.id, section.id);
     }
   }, [openContainerInfoSidebar]);
 
diff --git a/src/generic/sidebar/SidebarContent.tsx b/src/generic/sidebar/SidebarContent.tsx
index fcd28a5523..155c43e0c8 100644
--- a/src/generic/sidebar/SidebarContent.tsx
+++ b/src/generic/sidebar/SidebarContent.tsx
@@ -28,7 +28,7 @@ interface SidebarContentProps {
  * ```
  */
 export const SidebarContent = ({ children } : SidebarContentProps) => (
-  <Stack gap={1}>
+  <Stack gap={1} className="px-3 py-1">
     {Array.isArray(children) ? children.map((child, index) => (
       // eslint-disable-next-line react/no-array-index-key
       <React.Fragment key={index}>
diff --git a/src/generic/unlink-modal/data/apiHooks.ts b/src/generic/unlink-modal/data/apiHooks.ts
index 8cf7639cc8..40f3ce80c7 100644
--- a/src/generic/unlink-modal/data/apiHooks.ts
+++ b/src/generic/unlink-modal/data/apiHooks.ts
@@ -3,6 +3,7 @@ import { courseLibrariesQueryKeys } from '@src/course-libraries';
 import { getCourseKey } from '@src/generic/key-utils';
 
 import { unlinkDownstream } from './api';
+import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
 
 export const useUnlinkDownstream = () => {
   const queryClient = useQueryClient();
@@ -13,6 +14,9 @@ export const useUnlinkDownstream = () => {
       queryClient.invalidateQueries({
         queryKey: courseLibrariesQueryKeys.courseLibraries(courseKey),
       });
+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.course(courseKey),
+      });
     },
   });
 };

From 88738216b5c2c345a1e90f07a47b6ee57793257f Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 20 Jan 2026 11:36:58 +0530
Subject: [PATCH 05/60] feat: handle sync issues in various situations

---
 src/CourseAuthoringRoutes.tsx                 | 10 +-
 src/course-outline/CourseOutline.tsx          |  5 +-
 src/course-outline/data/api.ts                |  6 +-
 src/course-outline/data/apiHooks.ts           | 13 ++-
 src/course-outline/data/types.ts              | 13 +++
 .../header-navigations/HeaderActions.test.tsx |  2 +-
 src/course-outline/hooks.jsx                  |  2 +
 src/course-outline/index.ts                   |  1 +
 .../outline-sidebar/LibraryReferenceCard.tsx  | 96 +++++++++++++++++--
 .../section-card/SectionCard.test.tsx         |  1 -
 .../subsection-card/SubsectionCard.test.tsx   |  1 -
 11 files changed, 127 insertions(+), 23 deletions(-)

diff --git a/src/CourseAuthoringRoutes.tsx b/src/CourseAuthoringRoutes.tsx
index 9bdcbeb75f..3a330377bb 100644
--- a/src/CourseAuthoringRoutes.tsx
+++ b/src/CourseAuthoringRoutes.tsx
@@ -11,7 +11,11 @@ import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import CustomPages from './custom-pages';
 import { FilesPage, VideosPage } from './files-and-videos';
 import { AdvancedSettings } from './advanced-settings';
-import { CourseOutline, OutlineSidebarPagesProvider } from './course-outline';
+import {
+  CourseOutline,
+  OutlineSidebarProvider,
+  OutlineSidebarPagesProvider,
+} from './course-outline';
 import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
@@ -61,7 +65,9 @@ const CourseAuthoringRoutes = () => {
             element={(
               <PageWrap>
                 <OutlineSidebarPagesProvider>
-                  <CourseOutline />
+                  <OutlineSidebarProvider>
+                    <CourseOutline />
+                  </OutlineSidebarProvider>
                 </OutlineSidebarPagesProvider>
               </PageWrap>
             )}
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 8af2d7ff49..3453ffabfe 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -61,7 +61,6 @@ import messages from './messages';
 import headerMessages from './header-navigations/messages';
 import { getTagsExportFile } from './data/api';
 import OutlineAddChildButtons from './OutlineAddChildButtons';
-import { OutlineSidebarProvider } from './outline-sidebar/OutlineSidebarContext';
 import { StatusBar } from './status-bar/StatusBar';
 import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 import { isOutlineNewDesignEnabled } from './utils';
@@ -268,7 +267,7 @@ const CourseOutline = () => {
   }
 
   return (
-    <OutlineSidebarProvider>
+    <>
       <Helmet>
         <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
       </Helmet>
@@ -564,7 +563,7 @@ const CourseOutline = () => {
           {toastMessage}
         </Toast>
       )}
-    </OutlineSidebarProvider>
+    </>
   );
 };
 
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index f07d64cb5e..2b82a6c9ab 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -1,7 +1,7 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { XBlock } from '@src/data/types';
-import { CourseOutline, CourseDetails } from './types';
+import { CourseOutline, CourseDetails, CourseItemUpdateResult } from './types';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
@@ -337,12 +337,12 @@ export async function configureCourseUnit(
  * Edit course section
  * @param {string} itemId
  * @param {string} displayName
- * @returns {Promise<Object>}
+ * @returns {Promise<CourseItemUpdateResult>}
  */
 export async function editItemDisplayName(
   itemId: string,
   displayName: string,
-): Promise<object> {
+): Promise<CourseItemUpdateResult> {
   const { data } = await getAuthenticatedHttpClient()
     .post(getCourseItemApiUrl(itemId), {
       metadata: {
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index a739310437..00832f2a68 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -1,6 +1,7 @@
+import { CourseItemUpdateResult } from '@src/course-outline/data/types';
 import { getCourseKey } from '@src/generic/key-utils';
 import { skipToken, useMutation, useQuery } from '@tanstack/react-query';
-import { createCourseXblock, getCourseDetails, getCourseItem } from './api';
+import { createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem } from './api';
 
 export const courseOutlineQueryKeys = {
   all: ['courseOutline'],
@@ -44,7 +45,7 @@ export const useCreateCourseBlock = (
 export const useCourseItemData = (itemId?: string, enabled: boolean = true) => (
   useQuery({
     queryKey: courseOutlineQueryKeys.courseItemId(itemId),
-    queryFn: enabled && itemId !== undefined ? () => getCourseItem(itemId!) : skipToken,
+    queryFn: enabled && itemId ? () => getCourseItem(itemId!) : skipToken,
   })
 );
 
@@ -54,3 +55,11 @@ export const useCourseDetails = (courseId?: string, enabled: boolean = true) =>
     queryFn: enabled && courseId ? () => getCourseDetails(courseId) : skipToken,
   })
 );
+
+export const useUpdateCourseBlockName = () => useMutation<CourseItemUpdateResult, Error>({
+  mutationFn: editItemDisplayName,
+  onSettled: async () => {
+
+  }
+});
+
diff --git a/src/course-outline/data/types.ts b/src/course-outline/data/types.ts
index ea0b7496f3..4199ea85f4 100644
--- a/src/course-outline/data/types.ts
+++ b/src/course-outline/data/types.ts
@@ -80,3 +80,16 @@ export interface CourseOutlineState {
   pasteFileNotices: object;
   createdOn: null | Date;
 }
+
+export interface CourseItemUpdateResult {
+  id: string;
+  data?: object | null;
+  metadata: {
+    downstreamCustomized?: string[];
+    topLevelDownstreamParentKey?: string;
+    upstream?: string;
+    upstreamDisplayName?: string;
+    upstreamVersion?: number;
+    displayName?: string;
+  }
+}
diff --git a/src/course-outline/header-navigations/HeaderActions.test.tsx b/src/course-outline/header-navigations/HeaderActions.test.tsx
index c992548c34..54b12168ea 100644
--- a/src/course-outline/header-navigations/HeaderActions.test.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.test.tsx
@@ -5,7 +5,7 @@ import {
 
 import messages from './messages';
 import HeaderActions, { HeaderActionsProps } from './HeaderActions';
-import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
+import { OutlineSidebarProvider } from '@src/course-outline';
 
 const headerNavigationsActions = {
   lmsLink: '',
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index b82e68cb49..bf1c2dd3da 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -59,6 +59,7 @@ import {
 } from './data/thunk';
 import { containerComparisonQueryKeys } from '../container-comparison/data/apiHooks';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
@@ -189,6 +190,7 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(editCourseItemQuery(itemId, sectionId, displayName));
     // Invalidate container diff queries to update sync diff preview
     queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
+    queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.course(courseId) });
   };
 
   const handleDeleteItemSubmit = () => {
diff --git a/src/course-outline/index.ts b/src/course-outline/index.ts
index 113a93daaa..ee83abdfbf 100644
--- a/src/course-outline/index.ts
+++ b/src/course-outline/index.ts
@@ -1,2 +1,3 @@
 export { default as CourseOutline } from './CourseOutline';
 export { OutlineSidebarPagesProvider } from './outline-sidebar/OutlineSidebarPagesContext';
+export { OutlineSidebarProvider } from './outline-sidebar/OutlineSidebarContext';
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 5fe2a0b28e..b065b1649e 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -1,19 +1,27 @@
 import { FormattedMessage } from "@edx/frontend-platform/i18n";
 import { Button, Card, Icon, Stack } from "@openedx/paragon";
 import { Cached, LinkOff, Newsstand } from "@openedx/paragon/icons";
-import { useCourseItemData } from "@src/course-outline/data/apiHooks";
+import { invalidateLinksQuery } from "@src/course-libraries/data/apiHooks";
+import { courseOutlineQueryKeys, useCourseItemData } from "@src/course-outline/data/apiHooks";
+import { fetchCourseSectionQuery } from "@src/course-outline/data/thunk";
 import { useOutlineSidebarContext } from "@src/course-outline/outline-sidebar/OutlineSidebarContext";
+import { PreviewLibraryXBlockChanges } from "@src/course-unit/preview-changes";
 import { useCourseAuthoringContext } from "@src/CourseAuthoringContext";
 import { XBlock } from "@src/data/types";
 import { getBlockType, normalizeContainerType } from "@src/generic/key-utils";
+import { useToggleWithValue } from "@src/hooks";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useDispatch } from "react-redux";
 import messages from './messages';
 
 interface SubProps {
   blockData: XBlock;
   displayName: string;
+  openSyncModal: (val: XBlock) => void;
 }
 
-const HasTopParentTextAndButton = ({ blockData, displayName }: SubProps) => {
+const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: SubProps) => {
   const { upstreamInfo } = blockData;
   const { selectedSectionId } = useOutlineSidebarContext();
   const { openContainerInfoSidebar } = useOutlineSidebarContext();
@@ -27,6 +35,13 @@ const HasTopParentTextAndButton = ({ blockData, displayName }: SubProps) => {
     openUnlinkModal({ value: parentData, sectionId: selectedSectionId });
   };
 
+  const handleSyncClick = () => {
+    if (!parentData) {
+      return;
+    }
+    openSyncModal(parentData);
+  };
+
   if (!upstreamInfo?.topLevelParentKey) {
     return null;
   }
@@ -52,11 +67,15 @@ const HasTopParentTextAndButton = ({ blockData, displayName }: SubProps) => {
     );
   }
 
-  if (upstreamInfo.readyToSync) {
+  if (parentData?.upstreamInfo?.readyToSync) {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.hasTopParentReadyToSyncText} values={messageValues} />
-        <Button variant='outline-primary' iconBefore={Cached}>
+        <Button
+          variant='outline-primary'
+          iconBefore={Cached}
+          onClick={handleSyncClick}
+        >
           <FormattedMessage {...messages.hasTopParentReadyToSyncBtn} values={messageValues} />
         </Button>
       </Stack>
@@ -68,7 +87,9 @@ const HasTopParentTextAndButton = ({ blockData, displayName }: SubProps) => {
       <FormattedMessage {...messages.hasTopParentText} values={messageValues} />
       <Button
         variant='outline-primary'
-        onClick={() => openContainerInfoSidebar(upstreamInfo.topLevelParentKey!)}
+        onClick={() => {
+          return openContainerInfoSidebar(upstreamInfo.topLevelParentKey!)
+        }}
       >
         <FormattedMessage {...messages.hasTopParentBtn} values={messageValues} />
       </Button>
@@ -76,7 +97,7 @@ const HasTopParentTextAndButton = ({ blockData, displayName }: SubProps) => {
   );
 }
 
-const TopLevelTextAndButton = ({ blockData, displayName }: SubProps) => {
+const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubProps) => {
   const { upstreamInfo } = blockData;
   const { selectedSectionId } = useOutlineSidebarContext();
   const { openUnlinkModal } = useCourseAuthoringContext();
@@ -91,11 +112,19 @@ const TopLevelTextAndButton = ({ blockData, displayName }: SubProps) => {
     openUnlinkModal({ value: blockData, sectionId: selectedSectionId });
   };
 
+  const handleSyncClick = () => {
+    openSyncModal(blockData);
+  };
+
   if (upstreamInfo?.errorMessage) {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.topParentBrokenLinkText} values={messageValues} />
-        <Button variant='outline-primary' iconBefore={LinkOff} onClick={handleUnlinkClick}>
+        <Button
+          variant='outline-primary'
+          iconBefore={LinkOff}
+          onClick={handleUnlinkClick}
+        >
           <FormattedMessage {...messages.topParentBrokenLinkBtn} />
         </Button>
       </Stack>
@@ -106,7 +135,11 @@ const TopLevelTextAndButton = ({ blockData, displayName }: SubProps) => {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.topParentReaadyToSyncText} values={messageValues} />
-        <Button variant='outline-primary' iconBefore={Cached}>
+        <Button
+          variant='outline-primary'
+          iconBefore={Cached}
+          onClick={handleSyncClick}
+        >
           <FormattedMessage {...messages.topParentReaadyToSyncBtn} values={messageValues} />
         </Button>
       </Stack>
@@ -128,10 +161,43 @@ interface Props {
 
 export const LibraryReferenceCard = ({ itemId }: Props) => {
   const { data: itemData, isPending } = useCourseItemData(itemId);
+  const { selectedSectionId } = useOutlineSidebarContext();
+  const { courseId } = useCourseAuthoringContext();
+  const [isSyncModalOpen, syncModalData, openSyncModal, closeSyncModal] = useToggleWithValue<XBlock>();
+  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
   if (!itemData?.upstreamInfo?.upstreamRef) {
     return null;
   }
 
+  const blockSyncData = useMemo(() => {
+    if (!syncModalData?.upstreamInfo?.readyToSync) {
+      return undefined;
+    }
+    return {
+      displayName: syncModalData.displayName,
+      downstreamBlockId: syncModalData.id,
+      upstreamBlockId: syncModalData.upstreamInfo.upstreamRef,
+      upstreamBlockVersionSynced: syncModalData.upstreamInfo.versionSynced,
+      isReadyToSyncIndividually: syncModalData.upstreamInfo.isReadyToSyncIndividually,
+      isContainer: syncModalData.category === 'vertical' || syncModalData.category === 'sequential' || syncModalData.category === 'chapter',
+      blockType: normalizeContainerType(syncModalData.category),
+    };
+  }, [syncModalData]);
+
+  const handleOnPostChangeSync = useCallback(() => {
+    if (selectedSectionId) {
+      dispatch(fetchCourseSectionQuery([selectedSectionId]));
+    }
+    if (courseId) {
+      invalidateLinksQuery(queryClient, courseId);
+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.course(courseId),
+      });
+    }
+  }, [dispatch, selectedSectionId, queryClient, courseId]);
+
+
   return (
     <div className="px-3">
       <Card isLoading={isPending} className="my-3">
@@ -141,17 +207,27 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
               <Icon src={Newsstand} />
               <h4 className="mb-0"><FormattedMessage {...messages.libraryReferenceCardText} /></h4>
             </Stack>
-            <HasTopParentTextAndButton
+            <TopLevelTextAndButton
               blockData={itemData}
               displayName={itemData.displayName}
+              openSyncModal={openSyncModal}
             />
-            <TopLevelTextAndButton
+            <HasTopParentTextAndButton
               blockData={itemData}
               displayName={itemData.displayName}
+              openSyncModal={openSyncModal}
             />
           </Stack>
         </Card.Section>
       </Card>
+      {blockSyncData && (
+        <PreviewLibraryXBlockChanges
+          blockData={blockSyncData}
+          isModalOpen={isSyncModalOpen}
+          closeModal={closeSyncModal}
+          postChange={handleOnPostChangeSync}
+        />
+      )}
     </div>
   )
 };
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index 22d4c30821..824fefc3f0 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -102,7 +102,6 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     onOpenPublishModal={jest.fn()}
     onOpenHighlightsModal={jest.fn()}
     onOpenDeleteModal={jest.fn()}
-    onOpenUnlinkModal={jest.fn()}
     onOpenConfigureModal={jest.fn()}
     onEditSectionSubmit={onEditSectionSubmit}
     onDuplicateSubmit={jest.fn()}
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 180ccf3078..b7943b8eca 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -129,7 +129,6 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     onOrderChange={jest.fn()}
     onOpenPublishModal={jest.fn()}
     onOpenDeleteModal={jest.fn()}
-    onOpenUnlinkModal={jest.fn()}
     isCustomRelativeDatesActive={false}
     onEditSubmit={onEditSubectionSubmit}
     onDuplicateSubmit={jest.fn()}

From 7f6621a8ed105645459cc8f23538d0b3365151e0 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 20 Jan 2026 13:04:15 +0530
Subject: [PATCH 06/60] refactor: simplify container edit in outline

---
 src/course-outline/CourseOutline.tsx          |  4 --
 src/course-outline/card-header/CardHeader.tsx | 52 +++++++++++--------
 src/course-outline/data/api.ts                | 11 ++--
 src/course-outline/data/apiHooks.ts           | 24 +++++----
 src/course-outline/data/thunk.ts              | 20 -------
 src/course-outline/hooks.jsx                  | 13 -----
 .../outline-sidebar/OutlineSidebarContext.tsx |  2 +-
 .../section-card/SectionCard.tsx              | 34 ++----------
 .../subsection-card/SubsectionCard.tsx        | 36 +++----------
 src/course-outline/unit-card/UnitCard.tsx     | 38 ++++----------
 src/hooks.ts                                  |  4 +-
 11 files changed, 72 insertions(+), 166 deletions(-)

diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 3453ffabfe..b7e3ad7683 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -114,7 +114,6 @@ const CourseOutline = () => {
     handleHighlightsFormSubmit,
     handleConfigureItemSubmit,
     handlePublishItemSubmit,
-    handleEditSubmit,
     handleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
@@ -388,7 +387,6 @@ const CourseOutline = () => {
                                     onOpenPublishModal={openPublishModal}
                                     onOpenConfigureModal={openConfigureModal}
                                     onOpenDeleteModal={openDeleteModal}
-                                    onEditSectionSubmit={handleEditSubmit}
                                     onDuplicateSubmit={handleDuplicateSectionSubmit}
                                     isSectionsExpanded={isSectionsExpanded}
                                     onOrderChange={updateSectionOrderByIndex}
@@ -417,7 +415,6 @@ const CourseOutline = () => {
                                           savingStatus={savingStatus}
                                           onOpenPublishModal={openPublishModal}
                                           onOpenDeleteModal={openDeleteModal}
-                                          onEditSubmit={handleEditSubmit}
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
                                           onOrderChange={updateSubsectionOrderByIndex}
@@ -450,7 +447,6 @@ const CourseOutline = () => {
                                                 onOpenPublishModal={openPublishModal}
                                                 onOpenConfigureModal={openConfigureModal}
                                                 onOpenDeleteModal={openDeleteModal}
-                                                onEditSubmit={handleEditSubmit}
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
                                                 onOrderChange={updateUnitOrderByIndex}
                                                 discussionsSettings={discussionsSettings}
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 1fcf35a05d..ed4cc8dcf2 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -21,29 +21,26 @@ import {
 } from '@openedx/paragon/icons';
 
 import { useContentTagsCount } from '@src/generic/data/apiHooks';
+import { ContentTagsDrawerSheet } from '@src/content-tags-drawer';
 import TagCount from '@src/generic/tag-count';
 import { useEscapeClick } from '@src/hooks';
 import { XBlockActions } from '@src/data/types';
-import { RequestStatus, RequestStatusType } from '@src/data/constants';
-import { ContentTagsDrawerSheet } from '@src/content-tags-drawer';
 import { ITEM_BADGE_STATUS } from '../constants';
 import { scrollToElement } from '../utils';
 import CardStatus from './CardStatus';
 import messages from './messages';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
+import { useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface CardHeaderProps {
   title: string;
   status: string;
-  cardId?: string,
+  cardId: string,
   hasChanges: boolean;
   onClickPublish: () => void;
   onClickConfigure: () => void;
   onClickMenuButton: () => void;
-  onClickEdit: () => void;
-  isFormOpen: boolean;
-  onEditSubmit: (titleValue: string) => void;
-  closeForm: () => void;
   onClickDelete: () => void;
   onClickUnlink: () => void;
   onClickDuplicate: () => void;
@@ -72,7 +69,6 @@ interface CardHeaderProps {
   extraActionsComponent?: ReactNode,
   onClickSync?: () => void;
   readyToSync?: boolean;
-  savingStatus?: RequestStatusType;
 }
 
 const CardHeader = ({
@@ -83,10 +79,6 @@ const CardHeader = ({
   onClickPublish,
   onClickConfigure,
   onClickMenuButton,
-  onClickEdit,
-  isFormOpen,
-  onEditSubmit,
-  closeForm,
   onClickDelete,
   onClickUnlink,
   onClickDuplicate,
@@ -107,7 +99,6 @@ const CardHeader = ({
   extraActionsComponent,
   onClickSync,
   readyToSync,
-  savingStatus,
 }: CardHeaderProps) => {
   const intl = useIntl();
   const [searchParams] = useSearchParams();
@@ -124,6 +115,8 @@ const CardHeader = ({
       openLegacyTagsDrawer();
     }
   }, [setCurrentPageKey, openLegacyTagsDrawer, cardId]);
+  const { courseId } = useCourseAuthoringContext();
+  const [isFormOpen, openForm, closeForm] = useToggle(false);
 
   // Use studio url as base if proctoringExamConfigurationLink is a relative link
   const fullProctoringExamConfigurationLink = () => (
@@ -134,7 +127,6 @@ const CardHeader = ({
     || status === ITEM_BADGE_STATUS.publishedNotLive) && !hasChanges;
 
   const { data: contentTagCount } = useContentTagsCount(cardId);
-  const isSaving = savingStatus === RequestStatus.IN_PROGRESS;
 
   useEffect(() => {
     const locatorId = searchParams.get('show');
@@ -163,9 +155,23 @@ const CardHeader = ({
       setTitleValue(title);
       closeForm();
     },
-    dependency: title,
+    dependency: [title, closeForm, titleValue],
   });
 
+  const editMutation = useUpdateCourseBlockName(courseId);
+  const handleEditSubmit = async (titleValue: string) => {
+    if (title !== titleValue) {
+      // both itemId and sectionId are same
+      await editMutation.mutateAsync({
+        itemId: cardId,
+        displayName: titleValue,
+      }, {
+        onSuccess: closeForm,
+      });
+    }
+    closeForm();
+  };
+
   return (
     <>
       {
@@ -188,10 +194,10 @@ const CardHeader = ({
               name="displayName"
               onChange={(e) => setTitleValue(e.target.value)}
               aria-label={intl.formatMessage(messages.editFieldAriaLabel)}
-              onBlur={() => onEditSubmit(titleValue)}
-              onKeyDown={/* istanbul ignore next */ (e) => {
+              onBlur={() => handleEditSubmit(titleValue)}
+              onKeyDown={(e) => {
                 if (e.key === 'Enter') {
-                  onEditSubmit(titleValue);
+                  handleEditSubmit(titleValue);
                 } else if (e.key === ' ') {
                   // Avoid passing propagation to the `SortableItem` in the card,
                   // which executes a `preventDefault`. If propagation is not prevented,
@@ -199,7 +205,7 @@ const CardHeader = ({
                   e.stopPropagation();
                 }
               }}
-              disabled={isSaving}
+              disabled={editMutation.isPending}
             />
           </Form.Group>
         ) : (
@@ -211,9 +217,9 @@ const CardHeader = ({
               alt={intl.formatMessage(messages.altButtonRename)}
               tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
               iconAs={EditIcon}
-              onClick={onClickEdit}
+              onClick={openForm}
               // @ts-ignore
-              disabled={isSaving}
+              disabled={editMutation.isPending}
             />
           </Stack>
         )}
@@ -265,7 +271,7 @@ const CardHeader = ({
               </Dropdown.Item>
               <Dropdown.Item
                 data-testid={`${namePrefix}-card-header__menu-configure-button`}
-                disabled={isSaving}
+                disabled={editMutation.isPending}
                 onClick={onClickConfigure}
               >
                 {intl.formatMessage(messages.menuConfigure)}
@@ -273,7 +279,7 @@ const CardHeader = ({
               {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
                 <Dropdown.Item
                   data-testid={`${namePrefix}-card-header__menu-manage-tags-button`}
-                  disabled={isSaving}
+                  disabled={editMutation.isPending}
                   onClick={openManageTagsDrawer}
                 >
                   {intl.formatMessage(messages.menuManageTags)}
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index 2b82a6c9ab..31e999ac43 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -335,14 +335,11 @@ export async function configureCourseUnit(
 
 /**
  * Edit course section
- * @param {string} itemId
- * @param {string} displayName
- * @returns {Promise<CourseItemUpdateResult>}
  */
-export async function editItemDisplayName(
-  itemId: string,
-  displayName: string,
-): Promise<CourseItemUpdateResult> {
+export async function editItemDisplayName({ itemId, displayName }: {
+  itemId: string;
+  displayName: string;
+}): Promise<CourseItemUpdateResult> {
   const { data } = await getAuthenticatedHttpClient()
     .post(getCourseItemApiUrl(itemId), {
       metadata: {
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index 00832f2a68..eb606bf2a3 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -1,6 +1,7 @@
-import { CourseItemUpdateResult } from '@src/course-outline/data/types';
+import { containerComparisonQueryKeys } from '@src/container-comparison/data/apiHooks';
+import type { XBlock } from '@src/data/types';
 import { getCourseKey } from '@src/generic/key-utils';
-import { skipToken, useMutation, useQuery } from '@tanstack/react-query';
+import { skipToken, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem } from './api';
 
 export const courseOutlineQueryKeys = {
@@ -42,8 +43,9 @@ export const useCreateCourseBlock = (
   },
 });
 
-export const useCourseItemData = (itemId?: string, enabled: boolean = true) => (
+export const useCourseItemData = (itemId?: string, initialData?: XBlock, enabled: boolean = true) => (
   useQuery({
+    initialData,
     queryKey: courseOutlineQueryKeys.courseItemId(itemId),
     queryFn: enabled && itemId ? () => getCourseItem(itemId!) : skipToken,
   })
@@ -56,10 +58,14 @@ export const useCourseDetails = (courseId?: string, enabled: boolean = true) =>
   })
 );
 
-export const useUpdateCourseBlockName = () => useMutation<CourseItemUpdateResult, Error>({
-  mutationFn: editItemDisplayName,
-  onSettled: async () => {
-
-  }
-});
+export const useUpdateCourseBlockName = (courseId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: editItemDisplayName,
+    onSettled: async (_data, _err, variables) => {
+      queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
+    },
+  });
+};
 
diff --git a/src/course-outline/data/thunk.ts b/src/course-outline/data/thunk.ts
index 5c975fe247..81a7004a56 100644
--- a/src/course-outline/data/thunk.ts
+++ b/src/course-outline/data/thunk.ts
@@ -376,26 +376,6 @@ export function configureCourseUnitQuery(
   };
 }
 
-export function editCourseItemQuery(itemId: string, sectionId: string, displayName: string) {
-  return async (dispatch) => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
-
-    try {
-      await editItemDisplayName(itemId, displayName).then(async (result) => {
-        if (result) {
-          await dispatch(fetchCourseSectionQuery([sectionId]));
-          dispatch(hideProcessingNotification());
-          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-        }
-      });
-    } catch {
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  };
-}
-
 /**
  * Generic function to delete course item, see below wrapper funcs for specific implementations.
  * @param {string} itemId
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index bf1c2dd3da..8cbf5a21d5 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useToggle } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
-import { useQueryClient } from '@tanstack/react-query';
 
 import moment from 'moment';
 import { getSavingStatus as getGenericSavingStatus } from '@src/generic/data/selectors';
@@ -35,7 +34,6 @@ import {
   deleteCourseSectionQuery,
   deleteCourseSubsectionQuery,
   deleteCourseUnitQuery,
-  editCourseItemQuery,
   duplicateSectionQuery,
   duplicateSubsectionQuery,
   duplicateUnitQuery,
@@ -57,13 +55,10 @@ import {
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
-import { containerComparisonQueryKeys } from '../container-comparison/data/apiHooks';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
-  const queryClient = useQueryClient();
   const { handleAddSection } = useCourseAuthoringContext();
   const { selectedContainerId, clearSelection } = useOutlineSidebarContext();
 
@@ -186,13 +181,6 @@ const useCourseOutline = ({ courseId }) => {
     handleConfigureModalClose();
   };
 
-  const handleEditSubmit = (itemId, sectionId, displayName) => {
-    dispatch(editCourseItemQuery(itemId, sectionId, displayName));
-    // Invalidate container diff queries to update sync diff preview
-    queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
-    queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.course(courseId) });
-  };
-
   const handleDeleteItemSubmit = () => {
     switch (currentItem.category) {
       case COURSE_BLOCK_NAMES.chapter.id:
@@ -317,7 +305,6 @@ const useCourseOutline = ({ courseId }) => {
     handleHighlightsFormSubmit,
     handleConfigureItemSubmit,
     handlePublishItemSubmit,
-    handleEditSubmit,
     statusBarData,
     isEnableHighlightsModalOpen,
     openEnableHighlightsModal,
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index db020c7c28..bad336d902 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -103,7 +103,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       setSelectedContainerId(undefined);
       setSelectedSectionId(undefined);
     },
-    dependency: [stopCurrentFlow, selectedContainerId],
+    dependency: [stopCurrentFlow],
   });
 
   const context = useMemo<OutlineSidebarContextData>(
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 96cad7237a..ac73d3c856 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -10,7 +10,6 @@ import classNames from 'classnames';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { setCurrentItem, setCurrentSection } from '@src/course-outline/data/slice';
-import { RequestStatus, RequestStatusType } from '@src/data/constants';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
 import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import { DragContext } from '@src/course-outline/drag-helper/DragContextProvider';
@@ -27,6 +26,7 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import messages from './messages';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 interface SectionCardProps {
   section: XBlock,
@@ -36,8 +36,6 @@ interface SectionCardProps {
   onOpenHighlightsModal: (section: XBlock) => void,
   onOpenPublishModal: () => void,
   onOpenConfigureModal: () => void,
-  onEditSectionSubmit: (itemId: string, sectionId: string, displayName: string) => void,
-  savingStatus?: RequestStatusType,
   onOpenDeleteModal: () => void,
   onDuplicateSubmit: () => void,
   isSectionsExpanded: boolean,
@@ -48,7 +46,7 @@ interface SectionCardProps {
 }
 
 const SectionCard = ({
-  section,
+  section: initialData,
   isSelfPaced,
   isCustomRelativeDatesActive,
   children,
@@ -57,8 +55,6 @@ const SectionCard = ({
   onOpenHighlightsModal,
   onOpenPublishModal,
   onOpenConfigureModal,
-  onEditSectionSubmit,
-  savingStatus,
   onOpenDeleteModal,
   onDuplicateSubmit,
   isSectionsExpanded,
@@ -71,9 +67,11 @@ const SectionCard = ({
   const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
-  const isScrolledToElement = locatorId === section.id;
   const { courseId, openUnlinkModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
+  // Set initialData state from course outline and subsequently depend on its own state
+  const { data: section = initialData } = useCourseItemData(initialData.id, initialData);
+  const isScrolledToElement = locatorId === section?.id;
 
   // Expand the section if a search result should be shown/scrolled to
   const containsSearchResult = () => {
@@ -101,7 +99,6 @@ const SectionCard = ({
     return false;
   };
   const [isExpanded, setIsExpanded] = useState(containsSearchResult() || isSectionsExpanded);
-  const [isFormOpen, openForm, closeForm] = useToggle(false);
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'section';
 
@@ -191,16 +188,6 @@ const SectionCard = ({
     dispatch(setCurrentSection(section));
   };
 
-  const handleEditSubmit = (titleValue: string) => {
-    if (displayName !== titleValue) {
-      // both itemId and sectionId are same
-      onEditSectionSubmit(id, id, titleValue);
-      return;
-    }
-
-    closeForm();
-  };
-
   const handleOpenHighlightsModal = () => {
     onOpenHighlightsModal(section);
   };
@@ -213,12 +200,6 @@ const SectionCard = ({
     onOrderChange(index, index + 1);
   };
 
-  useEffect(() => {
-    if (savingStatus === RequestStatus.SUCCESSFUL) {
-      closeForm();
-    }
-  }, [savingStatus]);
-
   const titleComponent = (
     <TitleButton
       title={displayName}
@@ -282,17 +263,12 @@ const SectionCard = ({
                 onClickMenuButton={handleClickMenuButton}
                 onClickPublish={onOpenPublishModal}
                 onClickConfigure={onOpenConfigureModal}
-                onClickEdit={openForm}
                 onClickDelete={onOpenDeleteModal}
                 onClickUnlink={() => openUnlinkModal({ value: section, sectionId: section.id })}
                 onClickMoveUp={handleSectionMoveUp}
                 onClickMoveDown={handleSectionMoveDown}
                 onClickSync={openSyncModal}
                 onClickCard={(e) => onClickCard(e, true)}
-                isFormOpen={isFormOpen}
-                closeForm={closeForm}
-                onEditSubmit={handleEditSubmit}
-                savingStatus={savingStatus}
                 onClickDuplicate={onDuplicateSubmit}
                 titleComponent={titleComponent}
                 namePrefix={namePrefix}
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index caec75a869..644f46b07f 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -11,7 +11,6 @@ import { isEmpty } from 'lodash';
 
 import CourseOutlineSubsectionCardExtraActionsSlot from '@src/plugin-slots/CourseOutlineSubsectionCardExtraActionsSlot';
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '@src/course-outline/data/slice';
-import { RequestStatus, RequestStatusType } from '@src/data/constants';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
 import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import { DragContext } from '@src/course-outline/drag-helper/DragContextProvider';
@@ -29,6 +28,7 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import messages from './messages';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 interface SubsectionCardProps {
   section: XBlock,
@@ -38,8 +38,6 @@ interface SubsectionCardProps {
   isSelfPaced: boolean,
   isCustomRelativeDatesActive: boolean,
   onOpenPublishModal: () => void,
-  onEditSubmit: (itemId: string, sectionId: string, displayName: string) => void,
-  savingStatus?: RequestStatusType,
   onOpenDeleteModal: () => void,
   onDuplicateSubmit: () => void,
   index: number,
@@ -51,8 +49,8 @@ interface SubsectionCardProps {
 }
 
 const SubsectionCard = ({
-  section,
-  subsection,
+  section: initialSectionData,
+  subsection: initialData,
   isSectionsExpanded,
   isSelfPaced,
   isCustomRelativeDatesActive,
@@ -60,8 +58,6 @@ const SubsectionCard = ({
   index,
   getPossibleMoves,
   onOpenPublishModal,
-  onEditSubmit,
-  savingStatus,
   onOpenDeleteModal,
   onDuplicateSubmit,
   onOrderChange,
@@ -76,13 +72,15 @@ const SubsectionCard = ({
   const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
-  const isScrolledToElement = locatorId === subsection.id;
-  const [isFormOpen, openForm, closeForm] = useToggle(false);
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'subsection';
   const { sharedClipboardData, showPasteUnit } = useClipboard();
   const { courseId, openUnlinkModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
+  // Set initialData state from course outline and subsequently depend on its own state
+  const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
+  const { data: subsection = initialData } = useCourseItemData(initialData.id, initialData);
+  const isScrolledToElement = locatorId === subsection.id;
 
   const {
     id,
@@ -160,15 +158,6 @@ const SubsectionCard = ({
     }
   }, [dispatch, section, queryClient, courseId]);
 
-  const handleEditSubmit = (titleValue: string) => {
-    if (displayName !== titleValue) {
-      onEditSubmit(id, section.id, titleValue);
-      return;
-    }
-
-    closeForm();
-  };
-
   const handleSubsectionMoveUp = () => {
     onOrderChange(section, moveUpDetails);
   };
@@ -226,12 +215,6 @@ const SubsectionCard = ({
     setIsExpanded((prevState) => (containsSearchResult() || prevState));
   }, [locatorId, setIsExpanded]);
 
-  useEffect(() => {
-    if (savingStatus === RequestStatus.SUCCESSFUL) {
-      closeForm();
-    }
-  }, [savingStatus]);
-
   const isDraggable = (
     actions.draggable
       && (actions.allowMoveUp || actions.allowMoveDown)
@@ -285,7 +268,6 @@ const SubsectionCard = ({
                 hasChanges={hasChanges}
                 onClickMenuButton={handleClickMenuButton}
                 onClickPublish={onOpenPublishModal}
-                onClickEdit={openForm}
                 onClickDelete={onOpenDeleteModal}
                 onClickUnlink={() => openUnlinkModal({ value: subsection, sectionId: section.id })}
                 onClickMoveUp={handleSubsectionMoveUp}
@@ -293,10 +275,6 @@ const SubsectionCard = ({
                 onClickConfigure={onOpenConfigureModal}
                 onClickSync={openSyncModal}
                 onClickCard={(e) => onClickCard(e, true)}
-                isFormOpen={isFormOpen}
-                closeForm={closeForm}
-                onEditSubmit={handleEditSubmit}
-                savingStatus={savingStatus}
                 onClickDuplicate={onDuplicateSubmit}
                 titleComponent={titleComponent}
                 namePrefix={namePrefix}
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index eca75ed522..5cc044ecf8 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -14,7 +14,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import CourseOutlineUnitCardExtraActionsSlot from '@src/plugin-slots/CourseOutlineUnitCardExtraActionsSlot';
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '@src/course-outline/data/slice';
 import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
-import { RequestStatus, RequestStatusType } from '@src/data/constants';
+import { RequestStatusType } from '@src/data/constants';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
 import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import TitleLink from '@src/course-outline/card-header/TitleLink';
@@ -27,6 +27,7 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import type { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 interface UnitCardProps {
   unit: XBlock;
@@ -34,7 +35,6 @@ interface UnitCardProps {
   section: XBlock;
   onOpenPublishModal: () => void;
   onOpenConfigureModal: () => void;
-  onEditSubmit: (itemId: string, sectionId: string, displayName: string) => void,
   savingStatus?: RequestStatusType;
   onOpenDeleteModal: () => void;
   onDuplicateSubmit: () => void;
@@ -50,17 +50,15 @@ interface UnitCardProps {
 }
 
 const UnitCard = ({
-  unit,
-  subsection,
-  section,
+  unit: initialData,
+  subsection: initialSubsectionData,
+  section: initialSectionData,
   isSelfPaced,
   isCustomRelativeDatesActive,
   index,
   getPossibleMoves,
   onOpenPublishModal,
   onOpenConfigureModal,
-  onEditSubmit,
-  savingStatus,
   onOpenDeleteModal,
   onDuplicateSubmit,
   onOrderChange,
@@ -71,14 +69,16 @@ const UnitCard = ({
   const [searchParams] = useSearchParams();
   const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const locatorId = searchParams.get('show');
-  const isScrolledToElement = locatorId === unit.id;
-  const [isFormOpen, openForm, closeForm] = useToggle(false);
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'unit';
 
   const { copyToClipboard } = useClipboard();
   const { courseId, getUnitUrl, openUnlinkModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
+  const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
+  const { data: subsection = initialSubsectionData } = useCourseItemData(initialSubsectionData.id, initialSubsectionData);
+  const { data: unit = initialData } = useCourseItemData(initialData.id, initialData);
+  const isScrolledToElement = locatorId === unit.id;
 
   const {
     id,
@@ -137,15 +137,6 @@ const UnitCard = ({
     dispatch(setCurrentSubsection(subsection));
   };
 
-  const handleEditSubmit = (titleValue: string) => {
-    if (displayName !== titleValue) {
-      onEditSubmit(id, section.id, titleValue);
-      return;
-    }
-
-    closeForm();
-  };
-
   const handleUnitMoveUp = () => {
     onOrderChange(section, moveUpDetails);
   };
@@ -204,12 +195,6 @@ const UnitCard = ({
     }
   }, [isScrolledToElement]);
 
-  useEffect(() => {
-    if (savingStatus === RequestStatus.SUCCESSFUL) {
-      closeForm();
-    }
-  }, [savingStatus]);
-
   if (!isHeaderVisible) {
     return null;
   }
@@ -257,17 +242,12 @@ const UnitCard = ({
             onClickMenuButton={handleClickMenuButton}
             onClickPublish={onOpenPublishModal}
             onClickConfigure={onOpenConfigureModal}
-            onClickEdit={openForm}
             onClickDelete={onOpenDeleteModal}
             onClickUnlink={() => openUnlinkModal({ value: unit, sectionId: section.id })}
             onClickMoveUp={handleUnitMoveUp}
             onClickMoveDown={handleUnitMoveDown}
             onClickSync={openSyncModal}
             onClickCard={onClickCard}
-            isFormOpen={isFormOpen}
-            closeForm={closeForm}
-            onEditSubmit={handleEditSubmit}
-            savingStatus={savingStatus}
             onClickDuplicate={onDuplicateSubmit}
             titleComponent={titleComponent}
             namePrefix={namePrefix}
diff --git a/src/hooks.ts b/src/hooks.ts
index 1ee155ec81..368f253d3a 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -38,10 +38,10 @@ export const useEscapeClick = ({ onEscape, dependency }: { onEscape: () => void,
       }
     };
 
-    window.addEventListener('keydown', handleEscapeClick);
+    document.addEventListener('keydown', handleEscapeClick);
 
     return () => {
-      window.removeEventListener('keydown', handleEscapeClick);
+      document.removeEventListener('keydown', handleEscapeClick);
     };
   }, [dependency]);
 };

From d656b5987a7496ded51e34f52b4268773cbda013 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 20 Jan 2026 20:11:34 +0530
Subject: [PATCH 07/60] refactor: outline children state syncing

---
 src/CourseAuthoringContext.tsx                | 21 ++++--
 src/course-outline/CourseOutline.tsx          | 15 +---
 src/course-outline/card-header/CardHeader.tsx |  8 +--
 src/course-outline/data/api.ts                |  8 +--
 src/course-outline/data/apiHooks.ts           | 31 +++++++--
 src/course-outline/data/thunk.ts              | 22 ------
 src/course-outline/hooks.jsx                  | 12 ----
 .../outline-sidebar/LibraryReferenceCard.tsx  |  6 +-
 .../{PublishModal.jsx => PublishModal.tsx}    | 69 ++++++++++++-------
 .../section-card/SectionCard.tsx              | 14 ++--
 .../subsection-card/SubsectionCard.tsx        | 14 ++--
 src/course-outline/unit-card/UnitCard.tsx     | 14 ++--
 12 files changed, 125 insertions(+), 109 deletions(-)
 rename src/course-outline/publish-modal/{PublishModal.jsx => PublishModal.tsx} (54%)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 05ce784ff6..17359a8888 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -15,7 +15,7 @@ import { XBlock } from '@src/data/types';
 import { useUnlinkDownstream } from '@src/generic/unlink-modal';
 import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
 
-type UnlinkModalState = {
+type ModalState = {
   value: XBlock;
   sectionId: string;
 }
@@ -33,10 +33,14 @@ export type CourseAuthoringContextData = {
   openUnitPage: (locator: string) => void;
   getUnitUrl: (locator: string) => string;
   isUnlinkModalOpen: boolean;
-  currentUnlinkModalData?: UnlinkModalState;
-  openUnlinkModal: (value: UnlinkModalState) => void;
+  currentUnlinkModalData?: ModalState;
+  openUnlinkModal: (value: ModalState) => void;
   closeUnlinkModal: () => void;
   handleUnlinkItemSubmit: () => Promise<void>;
+  isPublishModalOpen: boolean;
+  currentPublishModalData?: ModalState;
+  openPublishModal: (value: ModalState) => void;
+  closePublishModal: () => void;
 };
 
 /**
@@ -64,7 +68,8 @@ export const CourseAuthoringProvider = ({
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
   const { courseStructure } = useSelector(getOutlineIndexData);
   const { id: courseUsageKey } = courseStructure || {};
-  const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<UnlinkModalState>();
+  const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<ModalState>();
+  const [isPublishModalOpen, currentPublishModalData, openPublishModal, closePublishModal] = useToggleWithValue<ModalState>();
 
   const getUnitUrl = (locator: string) => {
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
@@ -150,6 +155,10 @@ export const CourseAuthoringProvider = ({
     closeUnlinkModal,
     currentUnlinkModalData,
     handleUnlinkItemSubmit,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
   }), [
     courseId,
     courseUsageKey,
@@ -166,6 +175,10 @@ export const CourseAuthoringProvider = ({
     closeUnlinkModal,
     currentUnlinkModalData,
     handleUnlinkItemSubmit,
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
   ]);
 
   return (
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index b7e3ad7683..f4e2742e88 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -95,14 +95,11 @@ const CourseOutline = () => {
     isInternetConnectionAlertFailed,
     isDisabledReindexButton,
     isHighlightsModalOpen,
-    isPublishModalOpen,
     isConfigureModalOpen,
     isDeleteModalOpen,
     closeHighlightsModal,
-    closePublishModal,
     handleConfigureModalClose,
     closeDeleteModal,
-    openPublishModal,
     openConfigureModal,
     openDeleteModal,
     headerNavigationsActions,
@@ -113,7 +110,6 @@ const CourseOutline = () => {
     handleOpenHighlightsModal,
     handleHighlightsFormSubmit,
     handleConfigureItemSubmit,
-    handlePublishItemSubmit,
     handleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
@@ -382,9 +378,7 @@ const CourseOutline = () => {
                                     canMoveItem={canMoveSection(sections)}
                                     isSelfPaced={statusBarData.isSelfPaced}
                                     isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                                    savingStatus={savingStatus}
                                     onOpenHighlightsModal={handleOpenHighlightsModal}
-                                    onOpenPublishModal={openPublishModal}
                                     onOpenConfigureModal={openConfigureModal}
                                     onOpenDeleteModal={openDeleteModal}
                                     onDuplicateSubmit={handleDuplicateSectionSubmit}
@@ -412,8 +406,6 @@ const CourseOutline = () => {
                                           isSectionsExpanded={isSectionsExpanded}
                                           isSelfPaced={statusBarData.isSelfPaced}
                                           isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                                          savingStatus={savingStatus}
-                                          onOpenPublishModal={openPublishModal}
                                           onOpenDeleteModal={openDeleteModal}
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
@@ -444,7 +436,6 @@ const CourseOutline = () => {
                                                   subsection.childInfo.children,
                                                 )}
                                                 savingStatus={savingStatus}
-                                                onOpenPublishModal={openPublishModal}
                                                 onOpenConfigureModal={openConfigureModal}
                                                 onOpenDeleteModal={openDeleteModal}
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
@@ -504,11 +495,7 @@ const CourseOutline = () => {
           onClose={closeHighlightsModal}
           onSubmit={handleHighlightsFormSubmit}
         />
-        <PublishModal
-          isOpen={isPublishModalOpen}
-          onClose={closePublishModal}
-          onPublishSubmit={handlePublishItemSubmit}
-        />
+        <PublishModal />
         <ConfigureModal
           isOpen={isConfigureModalOpen}
           onClose={handleConfigureModalClose}
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index ed4cc8dcf2..77768a6e54 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -155,11 +155,11 @@ const CardHeader = ({
       setTitleValue(title);
       closeForm();
     },
-    dependency: [title, closeForm, titleValue],
+    dependency: [title],
   });
 
   const editMutation = useUpdateCourseBlockName(courseId);
-  const handleEditSubmit = async (titleValue: string) => {
+  const handleEditSubmit = useCallback(async () => {
     if (title !== titleValue) {
       // both itemId and sectionId are same
       await editMutation.mutateAsync({
@@ -170,7 +170,7 @@ const CardHeader = ({
       });
     }
     closeForm();
-  };
+  }, [title, titleValue, cardId, editMutation]);
 
   return (
     <>
@@ -194,7 +194,7 @@ const CardHeader = ({
               name="displayName"
               onChange={(e) => setTitleValue(e.target.value)}
               aria-label={intl.formatMessage(messages.editFieldAriaLabel)}
-              onBlur={() => handleEditSubmit(titleValue)}
+              onBlur={handleEditSubmit}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
                   handleEditSubmit(titleValue);
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index 31e999ac43..6f57b9aaf4 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -201,13 +201,13 @@ export async function updateCourseSectionHighlights(
 }
 
 /**
- * Publish course section
- * @param {string} sectionId
+ * Publish course item
+ * @param {string} itemId
  * @returns {Promise<Object>}
  */
-export async function publishCourseSection(sectionId: string): Promise<object> {
+export async function publishCourseItem(itemId: string): Promise<CourseItemUpdateResult> {
   const { data } = await getAuthenticatedHttpClient()
-    .post(getCourseItemApiUrl(sectionId), {
+    .post(getCourseItemApiUrl(itemId), {
       publish: 'make_public',
     });
 
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index eb606bf2a3..08180e0590 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -2,7 +2,7 @@ import { containerComparisonQueryKeys } from '@src/container-comparison/data/api
 import type { XBlock } from '@src/data/types';
 import { getCourseKey } from '@src/generic/key-utils';
 import { skipToken, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem } from './api';
+import { createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem, publishCourseItem } from './api';
 
 export const courseOutlineQueryKeys = {
   all: ['courseOutline'],
@@ -36,12 +36,17 @@ export const courseOutlineQueryKeys = {
  */
 export const useCreateCourseBlock = (
   callback?: ((locator: string, parentLocator: string) => void),
-) => useMutation({
-  mutationFn: createCourseXblock,
-  onSettled: async (data: { locator: string }, _err, variables) => {
-    callback?.(data.locator, variables.parentLocator);
-  },
-});
+) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createCourseXblock,
+    onSettled: async (data: { locator: string; }, _err, variables) => {
+      // FIXME: invalidate section query
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
+      callback?.(data.locator, variables.parentLocator);
+    },
+  })
+};
 
 export const useCourseItemData = (itemId?: string, initialData?: XBlock, enabled: boolean = true) => (
   useQuery({
@@ -63,9 +68,21 @@ export const useUpdateCourseBlockName = (courseId: string) => {
   return useMutation({
     mutationFn: editItemDisplayName,
     onSettled: async (_data, _err, variables) => {
+      // FIXME: invalidate section query
       queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
     },
   });
 };
 
+export const usePublishCourseItem = (sectionId?: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: publishCourseItem,
+    onSettled: async (_data, _err, itemId) => {
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(itemId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionId) });
+    },
+  });
+};
+
diff --git a/src/course-outline/data/thunk.ts b/src/course-outline/data/thunk.ts
index 81a7004a56..3be2d54270 100644
--- a/src/course-outline/data/thunk.ts
+++ b/src/course-outline/data/thunk.ts
@@ -13,13 +13,11 @@ import { getErrorDetails } from '../utils/getErrorDetails';
 import {
   deleteCourseItem,
   duplicateCourseItem,
-  editItemDisplayName,
   enableCourseHighlightsEmails,
   getCourseBestPractices,
   getCourseLaunch,
   getCourseOutlineIndex,
   getCourseItem,
-  publishCourseSection,
   configureCourseSection,
   configureCourseSubsection,
   configureCourseUnit,
@@ -266,26 +264,6 @@ export function updateCourseSectionHighlightsQuery(sectionId: string, highlights
   };
 }
 
-export function publishCourseItemQuery(itemId: string, sectionId: string) {
-  return async (dispatch) => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
-
-    try {
-      await publishCourseSection(itemId).then(async (result) => {
-        if (result) {
-          await dispatch(fetchCourseSectionQuery([sectionId]));
-          dispatch(hideProcessingNotification());
-          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-        }
-      });
-    } catch {
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  };
-}
-
 export function configureCourseItemQuery(sectionId: string, configureFn: () => Promise<any>) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 8cbf5a21d5..2984beb6e9 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -42,7 +42,6 @@ import {
   fetchCourseLaunchQuery,
   fetchCourseOutlineIndexQuery,
   fetchCourseReindexQuery,
-  publishCourseItemQuery,
   updateCourseSectionHighlightsQuery,
   configureCourseSectionQuery,
   configureCourseSubsectionQuery,
@@ -93,7 +92,6 @@ const useCourseOutline = ({ courseId }) => {
   const [isDisabledReindexButton, setDisableReindexButton] = useState(false);
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const [isHighlightsModalOpen, openHighlightsModal, closeHighlightsModal] = useToggle(false);
-  const [isPublishModalOpen, openPublishModal, closePublishModal] = useToggle(false);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
 
@@ -152,12 +150,6 @@ const useCourseOutline = ({ courseId }) => {
     closeHighlightsModal();
   };
 
-  const handlePublishItemSubmit = () => {
-    dispatch(publishCourseItemQuery(currentItem.id, currentSection.id));
-
-    closePublishModal();
-  };
-
   const handleConfigureModalClose = () => {
     closeConfigureModal();
     // reset the currentItem so the ConfigureModal's state is also reset
@@ -294,9 +286,6 @@ const useCourseOutline = ({ courseId }) => {
     showSuccessAlert,
     isDisabledReindexButton,
     isSectionsExpanded,
-    isPublishModalOpen,
-    openPublishModal,
-    closePublishModal,
     isConfigureModalOpen,
     openConfigureModal,
     handleConfigureModalClose,
@@ -304,7 +293,6 @@ const useCourseOutline = ({ courseId }) => {
     handleEnableHighlightsSubmit,
     handleHighlightsFormSubmit,
     handleConfigureItemSubmit,
-    handlePublishItemSubmit,
     statusBarData,
     isEnableHighlightsModalOpen,
     openEnableHighlightsModal,
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index b065b1649e..05f992d223 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -166,9 +166,6 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
   const [isSyncModalOpen, syncModalData, openSyncModal, closeSyncModal] = useToggleWithValue<XBlock>();
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
-  if (!itemData?.upstreamInfo?.upstreamRef) {
-    return null;
-  }
 
   const blockSyncData = useMemo(() => {
     if (!syncModalData?.upstreamInfo?.readyToSync) {
@@ -197,6 +194,9 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
     }
   }, [dispatch, selectedSectionId, queryClient, courseId]);
 
+  if (!itemData?.upstreamInfo?.upstreamRef) {
+    return null;
+  }
 
   return (
     <div className="px-3">
diff --git a/src/course-outline/publish-modal/PublishModal.jsx b/src/course-outline/publish-modal/PublishModal.tsx
similarity index 54%
rename from src/course-outline/publish-modal/PublishModal.jsx
rename to src/course-outline/publish-modal/PublishModal.tsx
index b56488c050..5b749534ca 100644
--- a/src/course-outline/publish-modal/PublishModal.jsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -1,33 +1,60 @@
 /* eslint-disable import/named */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ModalDialog,
-  Button,
   ActionRow,
 } from '@openedx/paragon';
-import { useSelector } from 'react-redux';
 
-import { getCurrentItem } from '../data/selectors';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import messages from './messages';
+import { courseOutlineQueryKeys, usePublishCourseItem } from '@src/course-outline/data/apiHooks';
+import { XBlock } from '@src/data/types';
+import LoadingButton from '@src/generic/loading-button';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useQueryClient } from '@tanstack/react-query';
 
-const PublishModal = ({
-  isOpen,
-  onClose,
-  onPublishSubmit,
-}) => {
+const PublishModal = () => {
   const intl = useIntl();
-  const { displayName, childInfo, category } = useSelector(getCurrentItem);
+  const { isPublishModalOpen, currentPublishModalData, closePublishModal  } = useCourseAuthoringContext();
+  const { id, displayName, childInfo, category } = currentPublishModalData?.value || {};
   const categoryName = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
-  const children = childInfo?.children || [];
+  const children: XBlock[] = childInfo?.children || [];
+  const publishMutation = usePublishCourseItem(currentPublishModalData?.sectionId)
+  const queryClient = useQueryClient();
+
+  const childrenIds = useMemo(() => children.reduce((
+    result: string[],
+    current: XBlock
+  ): string[] => {
+      let grandChildren = current.childInfo?.children.filter((child) => child.hasChanges) || [];
+      let temp = [...result, ...grandChildren.map((child) => child.id)];
+      if (current.hasChanges) {
+        temp.push(current.id);
+      }
+      return temp;
+    }, []), [children])
+
+  const onPublishSubmit = async () => {
+    if (id) {
+      await publishMutation.mutateAsync(id, {
+        onSettled: () => {
+          closePublishModal();
+          // Update query client to refresh the data of all children blocks
+          childrenIds.forEach((blockId) => {
+            queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
+          });
+        }
+      })
+    }
+  };
 
   return (
     <ModalDialog
+      title={intl.formatMessage(messages.title, { title: displayName })}
       className="publish-modal"
-      isOpen={isOpen}
-      onClose={onClose}
+      isOpen={isPublishModalOpen}
+      onClose={closePublishModal}
       hasCloseButton
       isFullscreenOnMobile
       isOverflowVisible={false}
@@ -72,22 +99,16 @@ const PublishModal = ({
           <ModalDialog.CloseButton variant="tertiary">
             {intl.formatMessage(messages.cancelButton)}
           </ModalDialog.CloseButton>
-          <Button
+          <LoadingButton
             data-testid="publish-confirm-button"
             onClick={onPublishSubmit}
-          >
-            {intl.formatMessage(messages.publishButton)}
-          </Button>
+            label={intl.formatMessage(messages.publishButton)}
+          />
+
         </ActionRow>
       </ModalDialog.Footer>
     </ModalDialog>
   );
 };
 
-PublishModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onPublishSubmit: PropTypes.func.isRequired,
-};
-
 export default PublishModal;
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index ac73d3c856..cde2010c0f 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -26,7 +26,7 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import messages from './messages';
-import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 interface SectionCardProps {
   section: XBlock,
@@ -34,7 +34,6 @@ interface SectionCardProps {
   isCustomRelativeDatesActive: boolean,
   children: ReactNode,
   onOpenHighlightsModal: (section: XBlock) => void,
-  onOpenPublishModal: () => void,
   onOpenConfigureModal: () => void,
   onOpenDeleteModal: () => void,
   onDuplicateSubmit: () => void,
@@ -53,7 +52,6 @@ const SectionCard = ({
   index,
   canMoveItem,
   onOpenHighlightsModal,
-  onOpenPublishModal,
   onOpenConfigureModal,
   onOpenDeleteModal,
   onDuplicateSubmit,
@@ -67,7 +65,7 @@ const SectionCard = ({
   const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
-  const { courseId, openUnlinkModal } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal, openPublishModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   // Set initialData state from course outline and subsequently depend on its own state
   const { data: section = initialData } = useCourseItemData(initialData.id, initialData);
@@ -106,6 +104,12 @@ const SectionCard = ({
     setIsExpanded(isSectionsExpanded);
   }, [isSectionsExpanded]);
 
+  /**
+  Temporary measure to keep the react-query state updated with redux state  */
+  useEffect(() => {
+    queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
+  }, [initialData]);
+
   const {
     id,
     category,
@@ -261,7 +265,7 @@ const SectionCard = ({
                 status={sectionStatus}
                 hasChanges={hasChanges}
                 onClickMenuButton={handleClickMenuButton}
-                onClickPublish={onOpenPublishModal}
+                onClickPublish={() => openPublishModal({ value: section, sectionId: section.id })}
                 onClickConfigure={onOpenConfigureModal}
                 onClickDelete={onOpenDeleteModal}
                 onClickUnlink={() => openUnlinkModal({ value: section, sectionId: section.id })}
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 644f46b07f..fe367b4d8f 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -28,7 +28,7 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import messages from './messages';
-import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 interface SubsectionCardProps {
   section: XBlock,
@@ -37,7 +37,6 @@ interface SubsectionCardProps {
   isSectionsExpanded: boolean,
   isSelfPaced: boolean,
   isCustomRelativeDatesActive: boolean,
-  onOpenPublishModal: () => void,
   onOpenDeleteModal: () => void,
   onDuplicateSubmit: () => void,
   index: number,
@@ -57,7 +56,6 @@ const SubsectionCard = ({
   children,
   index,
   getPossibleMoves,
-  onOpenPublishModal,
   onOpenDeleteModal,
   onDuplicateSubmit,
   onOrderChange,
@@ -75,7 +73,7 @@ const SubsectionCard = ({
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'subsection';
   const { sharedClipboardData, showPasteUnit } = useClipboard();
-  const { courseId, openUnlinkModal } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal, openPublishModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   // Set initialData state from course outline and subsequently depend on its own state
   const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
@@ -141,6 +139,12 @@ const SubsectionCard = ({
     setIsExpanded(isSectionsExpanded);
   }, [isSectionsExpanded]);
 
+  /**
+  Temporary measure to keep the react-query state updated with redux state  */
+  useEffect(() => {
+    queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
+  }, [initialData]);
+
   const handleExpandContent = () => {
     setIsExpanded((prevState) => !prevState);
   };
@@ -267,7 +271,7 @@ const SubsectionCard = ({
                 cardId={id}
                 hasChanges={hasChanges}
                 onClickMenuButton={handleClickMenuButton}
-                onClickPublish={onOpenPublishModal}
+                onClickPublish={() => openPublishModal({ value: subsection, sectionId: section.id })}
                 onClickDelete={onOpenDeleteModal}
                 onClickUnlink={() => openUnlinkModal({ value: subsection, sectionId: section.id })}
                 onClickMoveUp={handleSubsectionMoveUp}
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 5cc044ecf8..bb229634f1 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -27,13 +27,12 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import type { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
-import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 interface UnitCardProps {
   unit: XBlock;
   subsection: XBlock;
   section: XBlock;
-  onOpenPublishModal: () => void;
   onOpenConfigureModal: () => void;
   savingStatus?: RequestStatusType;
   onOpenDeleteModal: () => void;
@@ -57,7 +56,6 @@ const UnitCard = ({
   isCustomRelativeDatesActive,
   index,
   getPossibleMoves,
-  onOpenPublishModal,
   onOpenConfigureModal,
   onOpenDeleteModal,
   onDuplicateSubmit,
@@ -73,7 +71,7 @@ const UnitCard = ({
   const namePrefix = 'unit';
 
   const { copyToClipboard } = useClipboard();
-  const { courseId, getUnitUrl, openUnlinkModal } = useCourseAuthoringContext();
+  const { courseId, getUnitUrl, openUnlinkModal, openPublishModal } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
   const { data: subsection = initialSubsectionData } = useCourseItemData(initialSubsectionData.id, initialSubsectionData);
@@ -186,6 +184,12 @@ const UnitCard = ({
     />
   );
 
+  /**
+  Temporary measure to keep the react-query state updated with redux state  */
+  useEffect(() => {
+    queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
+  }, [initialData]);
+
   useEffect(() => {
     // if this items has been newly added, scroll to it.
     if (currentRef.current && (unit.shouldScroll || isScrolledToElement)) {
@@ -240,7 +244,7 @@ const UnitCard = ({
             hasChanges={hasChanges}
             cardId={id}
             onClickMenuButton={handleClickMenuButton}
-            onClickPublish={onOpenPublishModal}
+            onClickPublish={() => openPublishModal({ value: unit, sectionId: section.id })}
             onClickConfigure={onOpenConfigureModal}
             onClickDelete={onOpenDeleteModal}
             onClickUnlink={() => openUnlinkModal({ value: unit, sectionId: section.id })}

From 207eba230a54571996a0719a2dbbc3901874dab1 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 20 Jan 2026 20:23:40 +0530
Subject: [PATCH 08/60] fix: rebase issues

---
 .../outline-sidebar/constants.ts              | 28 -------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 src/course-outline/outline-sidebar/constants.ts

diff --git a/src/course-outline/outline-sidebar/constants.ts b/src/course-outline/outline-sidebar/constants.ts
deleted file mode 100644
index 39c084b777..0000000000
--- a/src/course-outline/outline-sidebar/constants.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { HelpOutline, Info, Plus } from '@openedx/paragon/icons';
-import type { SidebarPage } from '@src/generic/sidebar';
-import OutlineHelpSidebar from './OutlineHelpSidebar';
-import { InfoSidebar } from './InfoSidebar';
-import messages from './messages';
-import { AddSidebar } from './AddSidebar';
-import type { OutlineSidebarPageKeys } from './OutlineSidebarContext';
-
-export type OutlineSidebarPages = Record<OutlineSidebarPageKeys, SidebarPage>;
-
-export const OUTLINE_SIDEBAR_PAGES: OutlineSidebarPages = {
-  info: {
-    component: InfoSidebar,
-    icon: Info,
-    title: messages.sidebarButtonInfo,
-  },
-  help: {
-    component: OutlineHelpSidebar,
-    icon: HelpOutline,
-    title: messages.sidebarButtonHelp,
-  },
-  add: {
-    component: AddSidebar,
-    icon: Plus,
-    title: messages.sidebarButtonAdd,
-    hideFromActionMenu: true,
-  },
-};

From 3ce54296d30f7d74f209b1aef992bc3fa775f60b Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 21 Jan 2026 10:18:55 +0530
Subject: [PATCH 09/60] refactor: work on publish

---
 src/course-outline/card-header/CardHeader.tsx |  2 +-
 .../outline-sidebar/OutlineSidebarContext.tsx |  2 +-
 .../outline-sidebar/SectionInfoSidebar.tsx    | 13 ++++++++++++-
 .../outline-sidebar/SubsectionInfoSidebar.tsx | 19 ++++++++++++++++---
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 77768a6e54..a6d07bf9fb 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -197,7 +197,7 @@ const CardHeader = ({
               onBlur={handleEditSubmit}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
-                  handleEditSubmit(titleValue);
+                  handleEditSubmit();
                 } else if (e.key === ' ') {
                   // Avoid passing propagation to the `SortableItem` in the card,
                   // which executes a `preventDefault`. If propagation is not prevented,
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index bad336d902..3744f2fa21 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -38,7 +38,7 @@ interface OutlineSidebarContextData {
   // The container is not necessarily selected to open a selected sidebar.
   // Example: Align sidebar
   currentContainerId?: string;
-  openContainerInfoSidebar: (containerId: string) => void;
+  openContainerInfoSidebar: (containerId: string, sectionId?: string) => void;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index a3f8dffac3..0741ab8b40 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -14,6 +14,7 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface Props {
   sectionId: string;
@@ -63,6 +64,16 @@ export const SectionSidebar = ({ sectionId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { data: sectionData, isLoading } = useCourseItemData(sectionId);
+  const { openPublishModal  } = useCourseAuthoringContext();
+
+  const handlePublish = () => {
+    if (sectionData?.hasChanges) {
+      openPublishModal({
+        value: sectionData,
+        sectionId: sectionData.id,
+      })
+    }
+  }
 
   if (isLoading) {
     return <Loading />;
@@ -74,7 +85,7 @@ export const SectionSidebar = ({ sectionId }: Props) => {
         title={sectionData?.displayName || ''}
         icon={SchoolOutline}
       />
-      <PublishButon onClick={() => {}} />
+      {sectionData?.hasChanges && <PublishButon onClick={handlePublish} />}
       <Tabs
         variant="tabs"
         className="my-2 d-flex justify-content-around"
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index 75d5c0b971..d021b62486 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -14,6 +14,8 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 interface Props {
   subsectionId: string;
@@ -62,7 +64,18 @@ const SubsectionInfoSidebar = ({ subsectionId }: Props) => {
 export const SubsectionSidebar = ({ subsectionId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
-  const { data: sectionData, isLoading } = useCourseItemData(subsectionId);
+  const { data: subsectionData, isLoading } = useCourseItemData(subsectionId);
+  const { selectedSectionId } = useOutlineSidebarContext();
+  const { openPublishModal  } = useCourseAuthoringContext();
+
+  const handlePublish = () => {
+    if (selectedSectionId && subsectionData?.hasChanges) {
+      openPublishModal({
+        value: subsectionData,
+        sectionId: selectedSectionId,
+      })
+    }
+  }
 
   if (isLoading) {
     return <Loading />;
@@ -71,10 +84,10 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
   return (
     <>
       <SidebarTitle
-        title={sectionData?.displayName || ''}
+        title={subsectionData?.displayName || ''}
         icon={SchoolOutline}
       />
-      <PublishButon onClick={() => {}} />
+      {subsectionData?.hasChanges && <PublishButon onClick={handlePublish} />}
       <Tabs
         variant="tabs"
         className="my-2 d-flex justify-content-around"

From 9ede050f743c8db4c450a69bb8c17d96b205f6ba Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 21 Jan 2026 20:51:25 +0530
Subject: [PATCH 10/60] refactor: current item tracking

---
 src/CourseAuthoringContext.tsx                | 15 +++++-
 src/course-outline/CourseOutline.tsx          |  4 +-
 src/course-outline/card-header/CardHeader.tsx |  1 -
 src/course-outline/data/selectors.ts          |  3 --
 src/course-outline/data/slice.ts              | 15 ------
 src/course-outline/data/types.ts              |  3 --
 .../highlights-modal/HighlightsModal.jsx      |  6 +--
 src/course-outline/hooks.jsx                  | 50 ++++++++-----------
 .../section-card/SectionCard.tsx              |  9 ++--
 .../subsection-card/SubsectionCard.tsx        | 11 ++--
 src/course-outline/unit-card/UnitCard.tsx     | 11 ++--
 .../configure-modal/ConfigureModal.jsx        |  2 +-
 12 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 17359a8888..ee9c412e98 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -1,5 +1,5 @@
 import { getConfig } from '@edx/frontend-platform';
-import { createContext, useCallback, useContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
@@ -41,6 +41,8 @@ export type CourseAuthoringContextData = {
   currentPublishModalData?: ModalState;
   openPublishModal: (value: ModalState) => void;
   closePublishModal: () => void;
+  currentSelection?: SelectionState;
+  setCurrentSelection: (value?: SelectionState) => void;
 };
 
 /**
@@ -57,6 +59,12 @@ type CourseAuthoringProviderProps = {
   courseId: string;
 };
 
+type SelectionState = {
+  current: XBlock;
+  section?: XBlock;
+  subsection?: XBlock;
+}
+
 export const CourseAuthoringProvider = ({
   children,
   courseId,
@@ -70,6 +78,7 @@ export const CourseAuthoringProvider = ({
   const { id: courseUsageKey } = courseStructure || {};
   const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<ModalState>();
   const [isPublishModalOpen, currentPublishModalData, openPublishModal, closePublishModal] = useToggleWithValue<ModalState>();
+  const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
 
   const getUnitUrl = (locator: string) => {
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
@@ -159,6 +168,8 @@ export const CourseAuthoringProvider = ({
     currentPublishModalData,
     openPublishModal,
     closePublishModal,
+    currentSelection,
+    setCurrentSelection,
   }), [
     courseId,
     courseUsageKey,
@@ -179,6 +190,8 @@ export const CourseAuthoringProvider = ({
     currentPublishModalData,
     openPublishModal,
     closePublishModal,
+    currentSelection,
+    setCurrentSelection,
   ]);
 
   return (
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index f4e2742e88..33ff8f7561 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -37,7 +37,6 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
 import { ContainerType } from '@src/generic/key-utils';
 import {
-  getCurrentItem,
   getProctoredExamsFlag,
   getTimedExamsFlag,
 } from './data/selectors';
@@ -77,6 +76,7 @@ const CourseOutline = () => {
     isUnlinkModalOpen,
     closeUnlinkModal,
     handleUnlinkItemSubmit,
+    currentSelection,
   } = useCourseAuthoringContext();
 
   const {
@@ -163,7 +163,7 @@ const CourseOutline = () => {
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const currentItemData = useSelector(getCurrentItem);
+  const currentItemData = currentSelection?.current;
 
   const itemCategory = currentItemData?.category;
   const itemCategoryName = COURSE_BLOCK_NAMES[itemCategory]?.name.toLowerCase();
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index a6d07bf9fb..fa50fd3c57 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -161,7 +161,6 @@ const CardHeader = ({
   const editMutation = useUpdateCourseBlockName(courseId);
   const handleEditSubmit = useCallback(async () => {
     if (title !== titleValue) {
-      // both itemId and sectionId are same
       await editMutation.mutateAsync({
         itemId: cardId,
         displayName: titleValue,
diff --git a/src/course-outline/data/selectors.ts b/src/course-outline/data/selectors.ts
index 587badfcc6..b5ab44022b 100644
--- a/src/course-outline/data/selectors.ts
+++ b/src/course-outline/data/selectors.ts
@@ -3,9 +3,6 @@ export const getLoadingStatus = (state) => state.courseOutline.loadingStatus;
 export const getStatusBarData = (state) => state.courseOutline.statusBarData;
 export const getSavingStatus = (state) => state.courseOutline.savingStatus;
 export const getSectionsList = (state) => state.courseOutline.sectionsList;
-export const getCurrentItem = (state) => state.courseOutline.currentItem;
-export const getCurrentSection = (state) => state.courseOutline.currentSection;
-export const getCurrentSubsection = (state) => state.courseOutline.currentSubsection;
 export const getCourseActions = (state) => state.courseOutline.actions;
 export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
 export const getProctoredExamsFlag = (state) => state.courseOutline.enableProctoredExams;
diff --git a/src/course-outline/data/slice.ts b/src/course-outline/data/slice.ts
index c56d66470d..fb90616304 100644
--- a/src/course-outline/data/slice.ts
+++ b/src/course-outline/data/slice.ts
@@ -37,9 +37,6 @@ const initialState = {
   },
   sectionsList: [],
   isCustomRelativeDatesActive: false,
-  currentSection: {},
-  currentSubsection: {},
-  currentItem: {},
   actions: {
     deletable: true,
     unlinkable: false,
@@ -125,21 +122,12 @@ const slice = createSlice({
     updateSectionList: (state: CourseOutlineState, { payload }) => {
       state.sectionsList = state.sectionsList.map((section) => (section.id in payload ? payload[section.id] : section));
     },
-    setCurrentItem: (state: CourseOutlineState, { payload }) => {
-      state.currentItem = payload;
-    },
     reorderSectionList: (state: CourseOutlineState, { payload }) => {
       const sectionsList = [...state.sectionsList];
       sectionsList.sort((a, b) => payload.indexOf(a.id) - payload.indexOf(b.id));
 
       state.sectionsList = [...sectionsList];
     },
-    setCurrentSection: (state: CourseOutlineState, { payload }) => {
-      state.currentSection = payload;
-    },
-    setCurrentSubsection: (state: CourseOutlineState, { payload }) => {
-      state.currentSubsection = payload;
-    },
     addSection: (state: CourseOutlineState, { payload }) => {
       state.sectionsList = [
         ...state.sectionsList,
@@ -233,9 +221,6 @@ export const {
   updateCourseLaunchQueryStatus,
   updateSavingStatus,
   updateSectionList,
-  setCurrentItem,
-  setCurrentSection,
-  setCurrentSubsection,
   deleteSection,
   deleteSubsection,
   deleteUnit,
diff --git a/src/course-outline/data/types.ts b/src/course-outline/data/types.ts
index 4199ea85f4..b141b7d792 100644
--- a/src/course-outline/data/types.ts
+++ b/src/course-outline/data/types.ts
@@ -71,9 +71,6 @@ export interface CourseOutlineState {
   statusBarData: CourseOutlineStatusBar;
   sectionsList: Array<XBlock>;
   isCustomRelativeDatesActive: boolean;
-  currentSection: XBlock | {};
-  currentSubsection: XBlock | {};
-  currentItem: XBlock | {};
   actions: XBlockActions;
   enableProctoredExams: boolean;
   enableTimedExams: boolean;
diff --git a/src/course-outline/highlights-modal/HighlightsModal.jsx b/src/course-outline/highlights-modal/HighlightsModal.jsx
index 91d806f0b2..c540d78362 100644
--- a/src/course-outline/highlights-modal/HighlightsModal.jsx
+++ b/src/course-outline/highlights-modal/HighlightsModal.jsx
@@ -8,14 +8,13 @@ import {
   Hyperlink,
 } from '@openedx/paragon';
 import { Formik } from 'formik';
-import { useSelector } from 'react-redux';
 
 import { useHelpUrls } from '../../help-urls/hooks';
 import FormikControl from '../../generic/FormikControl';
-import { getCurrentSection } from '../data/selectors';
 import { HIGHLIGHTS_FIELD_MAX_LENGTH } from '../constants';
 import { getHighlightsFormValues } from '../utils';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 const HighlightsModal = ({
   isOpen,
@@ -23,7 +22,8 @@ const HighlightsModal = ({
   onSubmit,
 }) => {
   const intl = useIntl();
-  const { highlights = [], displayName } = useSelector(getCurrentSection);
+  const { currentSelection } = useCourseAuthoringContext();
+  const { highlights = [], displayName } = currentSelection?.current || {};
   const initialFormValues = getHighlightsFormValues(highlights);
 
   const {
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 2984beb6e9..7ba08e41f2 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -11,8 +11,6 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { ContainerType } from '@src/generic/key-utils';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
-  setCurrentItem,
-  setCurrentSection,
   resetScrollField,
   updateSavingStatus,
 } from './data/slice';
@@ -23,9 +21,6 @@ import {
   getStatusBarData,
   getSectionsList,
   getCourseActions,
-  getCurrentItem,
-  getCurrentSection,
-  getCurrentSubsection,
   getCustomRelativeDatesActiveFlag,
   getErrors,
   getCreatedOn,
@@ -58,7 +53,7 @@ import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/Ou
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
-  const { handleAddSection } = useCourseAuthoringContext();
+  const { handleAddSection, setCurrentSelection, currentSelection } = useCourseAuthoringContext();
   const { selectedContainerId, clearSelection } = useOutlineSidebarContext();
 
   const {
@@ -80,9 +75,6 @@ const useCourseOutline = ({ courseId }) => {
   const savingStatus = useSelector(getSavingStatus);
   const courseActions = useSelector(getCourseActions);
   const sectionsList = useSelector(getSectionsList);
-  const currentItem = useSelector(getCurrentItem);
-  const currentSection = useSelector(getCurrentSection);
-  const currentSubsection = useSelector(getCurrentSubsection);
   const isCustomRelativeDatesActive = useSelector(getCustomRelativeDatesActiveFlag);
   const genericSavingStatus = useSelector(getGenericSavingStatus);
   const errors = useSelector(getErrors);
@@ -138,34 +130,36 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleOpenHighlightsModal = (section) => {
-    dispatch(setCurrentItem(section));
-    dispatch(setCurrentSection(section));
+    setCurrentSelection({
+      current: section,
+      section,
+    });
     openHighlightsModal();
   };
 
   const handleHighlightsFormSubmit = (highlights) => {
     const dataToSend = Object.values(highlights).filter(Boolean);
-    dispatch(updateCourseSectionHighlightsQuery(currentItem.id, dataToSend));
+    dispatch(updateCourseSectionHighlightsQuery(currentSelection?.current.id, dataToSend));
 
     closeHighlightsModal();
   };
 
   const handleConfigureModalClose = () => {
     closeConfigureModal();
-    // reset the currentItem so the ConfigureModal's state is also reset
-    dispatch(setCurrentItem({}));
+    // reset the currentSelection?.current so the ConfigureModal's state is also reset
+    setCurrentSelection(undefined)
   };
 
   const handleConfigureItemSubmit = (...arg) => {
-    switch (currentItem.category) {
+    switch (currentSelection?.current.category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(configureCourseSectionQuery(currentSection.id, ...arg));
+        dispatch(configureCourseSectionQuery(currentSelection?.section.id, ...arg));
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(configureCourseSubsectionQuery(currentItem.id, currentSection.id, ...arg));
+        dispatch(configureCourseSubsectionQuery(currentSelection?.current.id, currentSelection?.section.id, ...arg));
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
-        dispatch(configureCourseUnitQuery(currentItem.id, currentSection.id, ...arg));
+        dispatch(configureCourseUnitQuery(currentSelection?.current.id, currentSelection?.section.id, ...arg));
         break;
       default:
         return;
@@ -174,39 +168,39 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleDeleteItemSubmit = () => {
-    switch (currentItem.category) {
+    switch (currentSelection?.current.category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(deleteCourseSectionQuery(currentItem.id));
+        dispatch(deleteCourseSectionQuery(currentSelection?.current.id));
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(deleteCourseSubsectionQuery(currentItem.id, currentSection.id));
+        dispatch(deleteCourseSubsectionQuery(currentSelection?.current.id, currentSelection?.section.id));
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
         dispatch(deleteCourseUnitQuery(
-          currentItem.id,
-          currentSubsection.id,
-          currentSection.id,
+          currentSelection?.current.id,
+          currentSelection?.subsection.id,
+          currentSelection?.section.id,
         ));
         break;
       default:
         return;
     }
-    if (selectedContainerId === currentItem.id) {
+    if (selectedContainerId === currentSelection?.current.id) {
       clearSelection();
     }
     closeDeleteModal();
   };
 
   const handleDuplicateSectionSubmit = () => {
-    dispatch(duplicateSectionQuery(currentSection.id, courseStructure.id));
+    dispatch(duplicateSectionQuery(currentSelection?.section.id, courseStructure.id));
   };
 
   const handleDuplicateSubsectionSubmit = () => {
-    dispatch(duplicateSubsectionQuery(currentSubsection.id, currentSection.id));
+    dispatch(duplicateSubsectionQuery(currentSelection?.subsection.id, currentSelection?.section.id));
   };
 
   const handleDuplicateUnitSubmit = () => {
-    dispatch(duplicateUnitQuery(currentItem.id, currentSubsection.id, currentSection.id));
+    dispatch(duplicateUnitQuery(currentSelection?.current.id, currentSelection?.subsection.id, currentSelection?.section.id));
   };
 
   const handleVideoSharingOptionChange = (value) => {
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index cde2010c0f..07215648dd 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -9,7 +9,6 @@ import { useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 import { useQueryClient } from '@tanstack/react-query';
 
-import { setCurrentItem, setCurrentSection } from '@src/course-outline/data/slice';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
 import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import { DragContext } from '@src/course-outline/drag-helper/DragContextProvider';
@@ -65,7 +64,7 @@ const SectionCard = ({
   const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
-  const { courseId, openUnlinkModal, openPublishModal } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   // Set initialData state from course outline and subsequently depend on its own state
   const { data: section = initialData } = useCourseItemData(initialData.id, initialData);
@@ -188,8 +187,10 @@ const SectionCard = ({
   };
 
   const handleClickMenuButton = () => {
-    dispatch(setCurrentItem(section));
-    dispatch(setCurrentSection(section));
+    setCurrentSelection({
+      current: section,
+      section,
+    });
   };
 
   const handleOpenHighlightsModal = () => {
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index fe367b4d8f..3f5588c801 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -10,7 +10,6 @@ import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 
 import CourseOutlineSubsectionCardExtraActionsSlot from '@src/plugin-slots/CourseOutlineSubsectionCardExtraActionsSlot';
-import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '@src/course-outline/data/slice';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
 import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import { DragContext } from '@src/course-outline/drag-helper/DragContextProvider';
@@ -73,7 +72,7 @@ const SubsectionCard = ({
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'subsection';
   const { sharedClipboardData, showPasteUnit } = useClipboard();
-  const { courseId, openUnlinkModal, openPublishModal } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   // Set initialData state from course outline and subsequently depend on its own state
   const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
@@ -150,9 +149,11 @@ const SubsectionCard = ({
   };
 
   const handleClickMenuButton = () => {
-    dispatch(setCurrentSection(section));
-    dispatch(setCurrentSubsection(subsection));
-    dispatch(setCurrentItem(subsection));
+    setCurrentSelection({
+      current: subsection,
+      subsection,
+      section,
+    });
   };
 
   const handleOnPostChangeSync = useCallback(() => {
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index bb229634f1..145049c3ad 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -12,7 +12,6 @@ import { useSearchParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 
 import CourseOutlineUnitCardExtraActionsSlot from '@src/plugin-slots/CourseOutlineUnitCardExtraActionsSlot';
-import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '@src/course-outline/data/slice';
 import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
 import { RequestStatusType } from '@src/data/constants';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
@@ -71,7 +70,7 @@ const UnitCard = ({
   const namePrefix = 'unit';
 
   const { copyToClipboard } = useClipboard();
-  const { courseId, getUnitUrl, openUnlinkModal, openPublishModal } = useCourseAuthoringContext();
+  const { courseId, getUnitUrl, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
   const { data: subsection = initialSubsectionData } = useCourseItemData(initialSubsectionData.id, initialSubsectionData);
@@ -130,9 +129,11 @@ const UnitCard = ({
   const borderStyle = getItemStatusBorder(unitStatus);
 
   const handleClickMenuButton = () => {
-    dispatch(setCurrentItem(unit));
-    dispatch(setCurrentSection(section));
-    dispatch(setCurrentSubsection(subsection));
+    setCurrentSelection({
+      current: unit,
+      subsection,
+      section,
+    });
   };
 
   const handleUnitMoveUp = () => {
diff --git a/src/generic/configure-modal/ConfigureModal.jsx b/src/generic/configure-modal/ConfigureModal.jsx
index e34dfbcc15..a62b9da8bb 100644
--- a/src/generic/configure-modal/ConfigureModal.jsx
+++ b/src/generic/configure-modal/ConfigureModal.jsx
@@ -61,7 +61,7 @@ const ConfigureModal = ({
     showReviewRules,
     onlineProctoringRules,
     discussionEnabled,
-  } = currentItemData;
+  } = currentItemData || {};
 
   const getSelectedGroups = () => {
     if (userPartitionInfo?.selectedPartitionIndex >= 0) {

From 895d3004685bd3f82073182dd50fda9aa8d880ba Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 22 Jan 2026 10:37:40 +0530
Subject: [PATCH 11/60] refactor: container selection in sidebar

---
 src/CourseAuthoringContext.tsx                | 15 ++++----
 src/course-outline/CourseOutline.tsx          |  2 +-
 src/course-outline/card-header/CardHeader.tsx | 23 +++++++++---
 src/course-outline/data/apiHooks.ts           |  2 --
 .../highlights-modal/HighlightsModal.jsx      |  2 +-
 src/course-outline/hooks.jsx                  | 36 +++++++++----------
 .../outline-sidebar/InfoSidebar.tsx           | 10 +++---
 .../outline-sidebar/LibraryReferenceCard.tsx  | 20 +++++------
 .../outline-sidebar/OutlineSidebarContext.tsx | 29 ++++++---------
 .../outline-sidebar/SubsectionInfoSidebar.tsx |  6 ++--
 .../section-card/SectionCard.tsx              |  8 ++---
 .../subsection-card/SubsectionCard.tsx        | 10 +++---
 src/course-outline/unit-card/UnitCard.tsx     | 10 +++---
 src/data/types.ts                             |  6 ++++
 14 files changed, 94 insertions(+), 85 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index ee9c412e98..8980fb0429 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
+import { courseOutlineQueryKeys, useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
 import { useDispatch, useSelector } from 'react-redux';
 import { addSection, addSubsection, updateSavingStatus } from '@src/course-outline/data/slice';
@@ -11,9 +11,10 @@ import { RequestStatus, RequestStatusType } from './data/constants';
 import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { CourseDetailsData } from './data/api';
 import { useToggleWithValue } from '@src/hooks';
-import { XBlock } from '@src/data/types';
+import { SelectionState, XBlock } from '@src/data/types';
 import { useUnlinkDownstream } from '@src/generic/unlink-modal';
 import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
+import { useQueryClient } from '@tanstack/react-query';
 
 type ModalState = {
   value: XBlock;
@@ -59,12 +60,6 @@ type CourseAuthoringProviderProps = {
   courseId: string;
 };
 
-type SelectionState = {
-  current: XBlock;
-  section?: XBlock;
-  subsection?: XBlock;
-}
-
 export const CourseAuthoringProvider = ({
   children,
   courseId,
@@ -79,6 +74,7 @@ export const CourseAuthoringProvider = ({
   const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<ModalState>();
   const [isPublishModalOpen, currentPublishModalData, openPublishModal, closePublishModal] = useToggleWithValue<ModalState>();
   const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
+  const queryClient = useQueryClient();
 
   const getUnitUrl = (locator: string) => {
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
@@ -109,6 +105,9 @@ export const CourseAuthoringProvider = ({
    * Open the unit page for a given locator.
    */
   const openUnitPage = (locator: string) => {
+    queryClient.invalidateQueries({
+      queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
+    });
     const url = getUnitUrl(locator);
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
       // instanbul ignore next
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 33ff8f7561..550b915771 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -163,7 +163,7 @@ const CourseOutline = () => {
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const currentItemData = currentSelection?.current;
+  const currentItemData = currentSelection?.currentId;
 
   const itemCategory = currentItemData?.category;
   const itemCategoryName = COURSE_BLOCK_NAMES[itemCategory]?.name.toLowerCase();
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index fa50fd3c57..82280c9a3e 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -30,8 +30,9 @@ import { scrollToElement } from '../utils';
 import CardStatus from './CardStatus';
 import messages from './messages';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
-import { useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
+import { courseOutlineQueryKeys, useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface CardHeaderProps {
   title: string;
@@ -106,6 +107,7 @@ const CardHeader = ({
   const cardHeaderRef = useRef(null);
   const [isLegacyManageTagsDrawerOpen, openLegacyTagsDrawer, closeLegacyTagsDrawer] = useToggle(false);
   const { setCurrentPageKey } = useOutlineSidebarContext();
+  const queryClient = useQueryClient();
 
   const openManageTagsDrawer = useCallback(() => {
     const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
@@ -115,7 +117,7 @@ const CardHeader = ({
       openLegacyTagsDrawer();
     }
   }, [setCurrentPageKey, openLegacyTagsDrawer, cardId]);
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, currentSelection } = useCourseAuthoringContext();
   const [isFormOpen, openForm, closeForm] = useToggle(false);
 
   // Use studio url as base if proctoringExamConfigurationLink is a relative link
@@ -128,6 +130,11 @@ const CardHeader = ({
 
   const { data: contentTagCount } = useContentTagsCount(cardId);
 
+  const onEditClick = () => {
+    onClickMenuButton();
+    openForm();
+  }
+
   useEffect(() => {
     const locatorId = searchParams.get('show');
     if (!locatorId) {
@@ -165,7 +172,15 @@ const CardHeader = ({
         itemId: cardId,
         displayName: titleValue,
       }, {
-        onSuccess: closeForm,
+        onSuccess: () => {
+          closeForm();
+          queryClient.invalidateQueries({
+            queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
+          });
+          queryClient.invalidateQueries({
+            queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.subsectionId),
+          });
+        },
       });
     }
     closeForm();
@@ -216,7 +231,7 @@ const CardHeader = ({
               alt={intl.formatMessage(messages.altButtonRename)}
               tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
               iconAs={EditIcon}
-              onClick={openForm}
+              onClick={onEditClick}
               // @ts-ignore
               disabled={editMutation.isPending}
             />
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index 08180e0590..3f876e4f11 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -41,7 +41,6 @@ export const useCreateCourseBlock = (
   return useMutation({
     mutationFn: createCourseXblock,
     onSettled: async (data: { locator: string; }, _err, variables) => {
-      // FIXME: invalidate section query
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
       callback?.(data.locator, variables.parentLocator);
     },
@@ -68,7 +67,6 @@ export const useUpdateCourseBlockName = (courseId: string) => {
   return useMutation({
     mutationFn: editItemDisplayName,
     onSettled: async (_data, _err, variables) => {
-      // FIXME: invalidate section query
       queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
     },
diff --git a/src/course-outline/highlights-modal/HighlightsModal.jsx b/src/course-outline/highlights-modal/HighlightsModal.jsx
index c540d78362..7a80dbe675 100644
--- a/src/course-outline/highlights-modal/HighlightsModal.jsx
+++ b/src/course-outline/highlights-modal/HighlightsModal.jsx
@@ -23,7 +23,7 @@ const HighlightsModal = ({
 }) => {
   const intl = useIntl();
   const { currentSelection } = useCourseAuthoringContext();
-  const { highlights = [], displayName } = currentSelection?.current || {};
+  const { highlights = [], displayName } = currentSelection?.currentId || {};
   const initialFormValues = getHighlightsFormValues(highlights);
 
   const {
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 7ba08e41f2..7d9c1b622b 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -54,7 +54,7 @@ import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/Ou
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
   const { handleAddSection, setCurrentSelection, currentSelection } = useCourseAuthoringContext();
-  const { selectedContainerId, clearSelection } = useOutlineSidebarContext();
+  const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
   const {
     reindexLink,
@@ -131,15 +131,15 @@ const useCourseOutline = ({ courseId }) => {
 
   const handleOpenHighlightsModal = (section) => {
     setCurrentSelection({
-      current: section,
-      section,
+      currentId: section.id,
+      sectionId: section.id,
     });
     openHighlightsModal();
   };
 
   const handleHighlightsFormSubmit = (highlights) => {
     const dataToSend = Object.values(highlights).filter(Boolean);
-    dispatch(updateCourseSectionHighlightsQuery(currentSelection?.current.id, dataToSend));
+    dispatch(updateCourseSectionHighlightsQuery(currentSelection?.currentId.id, dataToSend));
 
     closeHighlightsModal();
   };
@@ -151,15 +151,15 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleConfigureItemSubmit = (...arg) => {
-    switch (currentSelection?.current.category) {
+    switch (currentSelection?.currentId.category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(configureCourseSectionQuery(currentSelection?.section.id, ...arg));
+        dispatch(configureCourseSectionQuery(currentSelection?.sectionId.id, ...arg));
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(configureCourseSubsectionQuery(currentSelection?.current.id, currentSelection?.section.id, ...arg));
+        dispatch(configureCourseSubsectionQuery(currentSelection?.currentId.id, currentSelection?.sectionId.id, ...arg));
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
-        dispatch(configureCourseUnitQuery(currentSelection?.current.id, currentSelection?.section.id, ...arg));
+        dispatch(configureCourseUnitQuery(currentSelection?.currentId.id, currentSelection?.sectionId.id, ...arg));
         break;
       default:
         return;
@@ -168,39 +168,39 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleDeleteItemSubmit = () => {
-    switch (currentSelection?.current.category) {
+    switch (currentSelection?.currentId.category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(deleteCourseSectionQuery(currentSelection?.current.id));
+        dispatch(deleteCourseSectionQuery(currentSelection?.currentId.id));
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(deleteCourseSubsectionQuery(currentSelection?.current.id, currentSelection?.section.id));
+        dispatch(deleteCourseSubsectionQuery(currentSelection?.currentId.id, currentSelection?.sectionId.id));
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
         dispatch(deleteCourseUnitQuery(
-          currentSelection?.current.id,
-          currentSelection?.subsection.id,
-          currentSelection?.section.id,
+          currentSelection?.currentId.id,
+          currentSelection?.subsectionId.id,
+          currentSelection?.sectionId.id,
         ));
         break;
       default:
         return;
     }
-    if (selectedContainerId === currentSelection?.current.id) {
+    if (selectedContainerState.currentId === currentSelection?.currentId.id) {
       clearSelection();
     }
     closeDeleteModal();
   };
 
   const handleDuplicateSectionSubmit = () => {
-    dispatch(duplicateSectionQuery(currentSelection?.section.id, courseStructure.id));
+    dispatch(duplicateSectionQuery(currentSelection?.sectionId.id, courseStructure.id));
   };
 
   const handleDuplicateSubsectionSubmit = () => {
-    dispatch(duplicateSubsectionQuery(currentSelection?.subsection.id, currentSelection?.section.id));
+    dispatch(duplicateSubsectionQuery(currentSelection?.subsectionId.id, currentSelection?.sectionId.id));
   };
 
   const handleDuplicateUnitSubmit = () => {
-    dispatch(duplicateUnitQuery(currentSelection?.current.id, currentSelection?.subsection.id, currentSelection?.section.id));
+    dispatch(duplicateUnitQuery(currentSelection?.currentId.id, currentSelection?.subsectionId.id, currentSelection?.sectionId.id));
   };
 
   const handleVideoSharingOptionChange = (value) => {
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/InfoSidebar.tsx
index bf24b7e093..980ecb06e9 100644
--- a/src/course-outline/outline-sidebar/InfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/InfoSidebar.tsx
@@ -5,21 +5,21 @@ import { SectionSidebar } from "./SectionInfoSidebar";
 import { SubsectionSidebar } from "@src/course-outline/outline-sidebar/SubsectionInfoSidebar";
 
 export const InfoSidebar = () => {
-  const { selectedContainerId } = useOutlineSidebarContext();
-  if (!selectedContainerId) {
+  const { selectedContainerState } = useOutlineSidebarContext();
+  if (!selectedContainerState) {
     return (
       <CourseInfoSidebar />
     )
   }
-  const itemType = getBlockType(selectedContainerId);
+  const itemType = getBlockType(selectedContainerState.currentId);
 
   switch (itemType) {
     case ContainerType.Chapter:
     case ContainerType.Section:
-      return <SectionSidebar sectionId={selectedContainerId} />
+      return <SectionSidebar sectionId={selectedContainerState.currentId} />
     case ContainerType.Sequential:
     case ContainerType.Subsection:
-      return <SubsectionSidebar subsectionId={selectedContainerId} />
+      return <SubsectionSidebar subsectionId={selectedContainerState.currentId} />
     case ContainerType.Vertical:
     case ContainerType.Unit:
       return <div>Unit sidebar</div>;
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 05f992d223..fbaf335102 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -23,16 +23,16 @@ interface SubProps {
 
 const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: SubProps) => {
   const { upstreamInfo } = blockData;
-  const { selectedSectionId } = useOutlineSidebarContext();
+  const { selectedContainerState } = useOutlineSidebarContext();
   const { openContainerInfoSidebar } = useOutlineSidebarContext();
   const { openUnlinkModal } = useCourseAuthoringContext();
   const { data: parentData, isPending } = useCourseItemData(upstreamInfo?.topLevelParentKey);
 
   const handleUnlinkClick = () => {
-    if (!selectedSectionId || !parentData) {
+    if (!selectedContainerState?.sectionId || !parentData) {
       return;
     }
-    openUnlinkModal({ value: parentData, sectionId: selectedSectionId });
+    openUnlinkModal({ value: parentData, sectionId: selectedContainerState.sectionId });
   };
 
   const handleSyncClick = () => {
@@ -99,17 +99,17 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
 
 const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubProps) => {
   const { upstreamInfo } = blockData;
-  const { selectedSectionId } = useOutlineSidebarContext();
+  const { selectedContainerState } = useOutlineSidebarContext();
   const { openUnlinkModal } = useCourseAuthoringContext();
   const messageValues = {
     name: displayName,
   }
 
   const handleUnlinkClick = () => {
-    if (!selectedSectionId) {
+    if (!selectedContainerState?.sectionId) {
       return;
     }
-    openUnlinkModal({ value: blockData, sectionId: selectedSectionId });
+    openUnlinkModal({ value: blockData, sectionId: selectedContainerState.sectionId });
   };
 
   const handleSyncClick = () => {
@@ -161,7 +161,7 @@ interface Props {
 
 export const LibraryReferenceCard = ({ itemId }: Props) => {
   const { data: itemData, isPending } = useCourseItemData(itemId);
-  const { selectedSectionId } = useOutlineSidebarContext();
+  const { selectedContainerState } = useOutlineSidebarContext();
   const { courseId } = useCourseAuthoringContext();
   const [isSyncModalOpen, syncModalData, openSyncModal, closeSyncModal] = useToggleWithValue<XBlock>();
   const dispatch = useDispatch();
@@ -183,8 +183,8 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
   }, [syncModalData]);
 
   const handleOnPostChangeSync = useCallback(() => {
-    if (selectedSectionId) {
-      dispatch(fetchCourseSectionQuery([selectedSectionId]));
+    if (selectedContainerState?.sectionId) {
+      dispatch(fetchCourseSectionQuery([selectedContainerState.sectionId]));
     }
     if (courseId) {
       invalidateLinksQuery(queryClient, courseId);
@@ -192,7 +192,7 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
         queryKey: courseOutlineQueryKeys.course(courseId),
       });
     }
-  }, [dispatch, selectedSectionId, queryClient, courseId]);
+  }, [dispatch, selectedContainerState, queryClient, courseId]);
 
   if (!itemData?.upstreamInfo?.upstreamRef) {
     return null;
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 3744f2fa21..4139d4f7fa 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -2,7 +2,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -10,6 +9,7 @@ import { useToggle } from '@openedx/paragon';
 
 import { useEscapeClick, useStateWithUrlSearchParam } from '@src/hooks';
 import { isOutlineNewDesignEnabled } from '../utils';
+import { SelectionState } from '@src/data/types';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlowType = 'use-section' | 'use-subsection' | 'use-unit' | null;
@@ -32,8 +32,7 @@ interface OutlineSidebarContextData {
   isOpen: boolean;
   open: () => void;
   toggle: () => void;
-  selectedContainerId?: string;
-  selectedSectionId?: string;
+  selectedContainerState?: SelectionState;
   // The Id of the container used in the current sidebar page
   // The container is not necessarily selected to open a selected sidebar.
   // Example: Align sidebar
@@ -54,8 +53,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   const [currentFlow, setCurrentFlow] = useState<OutlineFlow | null>(null);
   const [isOpen, open, , toggle] = useToggle(true);
 
-  const [selectedSectionId, setSelectedSectionId] = useState<string | undefined>();
-  const [selectedContainerId, setSelectedContainerId] = useState<string | undefined>();
+  const [selectedContainerState, setSelectedContainerState] = useState<SelectionState | undefined>();
 
   /**
   * Stops current add content flow.
@@ -74,18 +72,14 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
 
   const openContainerInfoSidebar = useCallback((containerId: string, sectionId?: string) => {
     if (isOutlineNewDesignEnabled()) {
-      setSelectedContainerId(containerId);
-      if (sectionId) {
-        setSelectedSectionId(sectionId);
-      }
+      setSelectedContainerState({ currentId: containerId, sectionId });
       setCurrentPageKey('info');
     }
-  }, [setSelectedContainerId, setSelectedSectionId]);
+  }, [setSelectedContainerState, setCurrentPageKey]);
 
   const clearSelection = useCallback(() => {
-    setSelectedSectionId(undefined);
-    setSelectedContainerId(undefined);
-  }, [setSelectedSectionId, selectedContainerId]);
+    setSelectedContainerState(undefined);
+  }, [selectedContainerState]);
 
   /**
   * Starts add content flow.
@@ -100,8 +94,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   useEscapeClick({
     onEscape: () => {
       stopCurrentFlow();
-      setSelectedContainerId(undefined);
-      setSelectedSectionId(undefined);
+      setSelectedContainerState(undefined);
     },
     dependency: [stopCurrentFlow],
   });
@@ -116,9 +109,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       isOpen,
       open,
       toggle,
-      selectedContainerId,
+      selectedContainerState,
       currentContainerId,
-      selectedSectionId,
       openContainerInfoSidebar,
       clearSelection,
     }),
@@ -131,9 +123,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       isOpen,
       open,
       toggle,
-      selectedContainerId,
+      selectedContainerState,
       currentContainerId,
-      selectedSectionId,
       openContainerInfoSidebar,
       clearSelection,
     ],
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index d021b62486..38fb609a2a 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -65,14 +65,14 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { data: subsectionData, isLoading } = useCourseItemData(subsectionId);
-  const { selectedSectionId } = useOutlineSidebarContext();
+  const { selectedContainerState } = useOutlineSidebarContext();
   const { openPublishModal  } = useCourseAuthoringContext();
 
   const handlePublish = () => {
-    if (selectedSectionId && subsectionData?.hasChanges) {
+    if (selectedContainerState?.sectionId && subsectionData?.hasChanges) {
       openPublishModal({
         value: subsectionData,
-        sectionId: selectedSectionId,
+        sectionId: selectedContainerState?.sectionId,
       })
     }
   }
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 07215648dd..2d1a8aea7b 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -61,7 +61,7 @@ const SectionCard = ({
   const currentRef = useRef(null);
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
-  const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
+  const { selectedContainerState, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const { courseId, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
@@ -188,8 +188,8 @@ const SectionCard = ({
 
   const handleClickMenuButton = () => {
     setCurrentSelection({
-      current: section,
-      section,
+      currentId: section.id,
+      sectionId: section.id,
     });
   };
 
@@ -252,7 +252,7 @@ const SectionCard = ({
             'section-card',
             {
               highlight: isScrolledToElement,
-              'outline-card-selected': section.id === selectedContainerId,
+              'outline-card-selected': section.id === selectedContainerState?.currentId,
             },
           )}
           data-testid="section-card"
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 3f5588c801..514419f99c 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -66,7 +66,7 @@ const SubsectionCard = ({
   const intl = useIntl();
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
-  const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
+  const { selectedContainerState, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
@@ -150,9 +150,9 @@ const SubsectionCard = ({
 
   const handleClickMenuButton = () => {
     setCurrentSelection({
-      current: subsection,
-      subsection,
-      section,
+      currentId: subsection.id,
+      subsectionId: subsection.id,
+      sectionId: section.id,
     });
   };
 
@@ -258,7 +258,7 @@ const SubsectionCard = ({
             'subsection-card',
             {
               highlight: isScrolledToElement,
-              'outline-card-selected': subsection.id === selectedContainerId,
+              'outline-card-selected': subsection.id === selectedContainerState?.currentId,
             },
           )}
           data-testid="subsection-card"
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 145049c3ad..8ad331476a 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -64,7 +64,7 @@ const UnitCard = ({
   const currentRef = useRef(null);
   const dispatch = useDispatch();
   const [searchParams] = useSearchParams();
-  const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
+  const { selectedContainerState, openContainerInfoSidebar } = useOutlineSidebarContext();
   const locatorId = searchParams.get('show');
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'unit';
@@ -130,9 +130,9 @@ const UnitCard = ({
 
   const handleClickMenuButton = () => {
     setCurrentSelection({
-      current: unit,
-      subsection,
-      section,
+      currentId: unit.id,
+      subsectionId: subsection.id,
+      sectionId: section.id,
     });
   };
 
@@ -233,7 +233,7 @@ const UnitCard = ({
             'unit-card',
             {
               highlight: isScrolledToElement,
-              'outline-card-selected': unit.id === selectedContainerId,
+              'outline-card-selected': unit.id === selectedContainerState?.currentId,
             },
           )}
           data-testid="unit-card"
diff --git a/src/data/types.ts b/src/data/types.ts
index b08656dd25..8c0fd99d40 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -153,3 +153,9 @@ export interface UserTaskStatusWithUuid {
   modified: string;
   uuid: string;
 }
+
+export type SelectionState = {
+  currentId: string;
+  sectionId?: string;
+  subsectionId?: string;
+}

From fd3a70029b63a0034ab0e79b093cf7f1ee129386 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 23 Jan 2026 11:45:19 +0530
Subject: [PATCH 12/60] fix: container selection usage

---
 src/course-outline/CourseOutline.tsx          |  3 +-
 .../highlights-modal/HighlightsModal.jsx      |  4 ++-
 src/course-outline/hooks.jsx                  | 34 ++++++++++---------
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 550b915771..94bbd5384a 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -63,6 +63,7 @@ import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { StatusBar } from './status-bar/StatusBar';
 import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 import { isOutlineNewDesignEnabled } from './utils';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 const CourseOutline = () => {
   const intl = useIntl();
@@ -163,7 +164,7 @@ const CourseOutline = () => {
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const currentItemData = currentSelection?.currentId;
+  const { data: currentItemData } = useCourseItemData(currentSelection?.currentId);
 
   const itemCategory = currentItemData?.category;
   const itemCategoryName = COURSE_BLOCK_NAMES[itemCategory]?.name.toLowerCase();
diff --git a/src/course-outline/highlights-modal/HighlightsModal.jsx b/src/course-outline/highlights-modal/HighlightsModal.jsx
index 7a80dbe675..4d5cbc9f55 100644
--- a/src/course-outline/highlights-modal/HighlightsModal.jsx
+++ b/src/course-outline/highlights-modal/HighlightsModal.jsx
@@ -15,6 +15,7 @@ import { HIGHLIGHTS_FIELD_MAX_LENGTH } from '../constants';
 import { getHighlightsFormValues } from '../utils';
 import messages from './messages';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 const HighlightsModal = ({
   isOpen,
@@ -23,7 +24,8 @@ const HighlightsModal = ({
 }) => {
   const intl = useIntl();
   const { currentSelection } = useCourseAuthoringContext();
-  const { highlights = [], displayName } = currentSelection?.currentId || {};
+  const { data: currentItemData } = useCourseItemData(currentSelection?.currentId);
+  const { highlights = [], displayName } = currentItemData || {};
   const initialFormValues = getHighlightsFormValues(highlights);
 
   const {
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 7d9c1b622b..bdf5ad7fd7 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -8,7 +8,7 @@ import { getSavingStatus as getGenericSavingStatus } from '@src/generic/data/sel
 import { RequestStatus } from '@src/data/constants';
 
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { ContainerType } from '@src/generic/key-utils';
+import { ContainerType, getBlockType } from '@src/generic/key-utils';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
   resetScrollField,
@@ -139,7 +139,7 @@ const useCourseOutline = ({ courseId }) => {
 
   const handleHighlightsFormSubmit = (highlights) => {
     const dataToSend = Object.values(highlights).filter(Boolean);
-    dispatch(updateCourseSectionHighlightsQuery(currentSelection?.currentId.id, dataToSend));
+    dispatch(updateCourseSectionHighlightsQuery(currentSelection?.currentId, dataToSend));
 
     closeHighlightsModal();
   };
@@ -151,15 +151,16 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleConfigureItemSubmit = (...arg) => {
-    switch (currentSelection?.currentId.category) {
+    const category = getBlockType(currentSelection.currentId)
+    switch (category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(configureCourseSectionQuery(currentSelection?.sectionId.id, ...arg));
+        dispatch(configureCourseSectionQuery(currentSelection?.sectionId, ...arg));
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(configureCourseSubsectionQuery(currentSelection?.currentId.id, currentSelection?.sectionId.id, ...arg));
+        dispatch(configureCourseSubsectionQuery(currentSelection?.currentId, currentSelection?.sectionId, ...arg));
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
-        dispatch(configureCourseUnitQuery(currentSelection?.currentId.id, currentSelection?.sectionId.id, ...arg));
+        dispatch(configureCourseUnitQuery(currentSelection?.currentId, currentSelection?.sectionId, ...arg));
         break;
       default:
         return;
@@ -168,39 +169,40 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleDeleteItemSubmit = () => {
-    switch (currentSelection?.currentId.category) {
+    const category = getBlockType(currentSelection.currentId)
+    switch (category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(deleteCourseSectionQuery(currentSelection?.currentId.id));
+        dispatch(deleteCourseSectionQuery(currentSelection?.currentId));
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(deleteCourseSubsectionQuery(currentSelection?.currentId.id, currentSelection?.sectionId.id));
+        dispatch(deleteCourseSubsectionQuery(currentSelection?.currentId, currentSelection?.sectionId));
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
         dispatch(deleteCourseUnitQuery(
-          currentSelection?.currentId.id,
-          currentSelection?.subsectionId.id,
-          currentSelection?.sectionId.id,
+          currentSelection?.currentId,
+          currentSelection?.subsectionId,
+          currentSelection?.sectionId,
         ));
         break;
       default:
         return;
     }
-    if (selectedContainerState.currentId === currentSelection?.currentId.id) {
+    if (selectedContainerState.currentId === currentSelection?.currentId) {
       clearSelection();
     }
     closeDeleteModal();
   };
 
   const handleDuplicateSectionSubmit = () => {
-    dispatch(duplicateSectionQuery(currentSelection?.sectionId.id, courseStructure.id));
+    dispatch(duplicateSectionQuery(currentSelection?.sectionId, courseStructure.id));
   };
 
   const handleDuplicateSubsectionSubmit = () => {
-    dispatch(duplicateSubsectionQuery(currentSelection?.subsectionId.id, currentSelection?.sectionId.id));
+    dispatch(duplicateSubsectionQuery(currentSelection?.subsectionId, currentSelection?.sectionId));
   };
 
   const handleDuplicateUnitSubmit = () => {
-    dispatch(duplicateUnitQuery(currentSelection?.currentId.id, currentSelection?.subsectionId.id, currentSelection?.sectionId.id));
+    dispatch(duplicateUnitQuery(currentSelection?.currentId, currentSelection?.subsectionId, currentSelection?.sectionId));
   };
 
   const handleVideoSharingOptionChange = (value) => {

From 77146107b3dc5f2d93a8fb16411d3c72738a08b0 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 23 Jan 2026 16:30:37 +0530
Subject: [PATCH 13/60] feat: unit preview

---
 .../outline-sidebar/InfoSidebar.tsx           |   5 +-
 .../outline-sidebar/UnitInfoSidebar.tsx       | 128 ++++++++++++++++++
 .../outline-sidebar/messages.ts               |  14 +-
 .../xblock-container-iframe/index.tsx         |  10 +-
 .../xblock-container-iframe/types.ts          |   1 +
 5 files changed, 152 insertions(+), 6 deletions(-)
 create mode 100644 src/course-outline/outline-sidebar/UnitInfoSidebar.tsx

diff --git a/src/course-outline/outline-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/InfoSidebar.tsx
index 980ecb06e9..4c8bbb5993 100644
--- a/src/course-outline/outline-sidebar/InfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/InfoSidebar.tsx
@@ -2,7 +2,8 @@ import { useOutlineSidebarContext } from "./OutlineSidebarContext";
 import { CourseInfoSidebar } from "./CourseInfoSidebar"
 import { ContainerType, getBlockType } from "@src/generic/key-utils";
 import { SectionSidebar } from "./SectionInfoSidebar";
-import { SubsectionSidebar } from "@src/course-outline/outline-sidebar/SubsectionInfoSidebar";
+import { SubsectionSidebar } from "./SubsectionInfoSidebar";
+import { UnitSidebar } from "./UnitInfoSidebar";
 
 export const InfoSidebar = () => {
   const { selectedContainerState } = useOutlineSidebarContext();
@@ -22,7 +23,7 @@ export const InfoSidebar = () => {
       return <SubsectionSidebar subsectionId={selectedContainerState.currentId} />
     case ContainerType.Vertical:
     case ContainerType.Unit:
-      return <div>Unit sidebar</div>;
+      return <UnitSidebar unitId={selectedContainerState.currentId} />
     default:
       return <CourseInfoSidebar />;
   }
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
new file mode 100644
index 0000000000..5056e8b19f
--- /dev/null
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -0,0 +1,128 @@
+import { useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Tab, Tabs, useToggle } from '@openedx/paragon';
+import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+
+import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
+import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { useGetBlockTypes } from '@src/search-manager';
+
+import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+
+import messages from './messages';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import Loading from '@src/generic/Loading';
+import { LibraryReferenceCard } from './LibraryReferenceCard';
+import { PublishButon } from './PublishButon';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import XBlockContainerIframe from '@src/course-unit/xblock-container-iframe';
+import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
+
+interface Props {
+  unitId: string;
+}
+
+const UnitInfoSidebar = ({ unitId }: Props) => {
+  const intl = useIntl();
+  const { data: componentData } = useGetBlockTypes(
+    [`breadcrumbs.usage_key = "${unitId}"`],
+  );
+
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
+  return (
+    <>
+      <LibraryReferenceCard itemId={unitId} />
+      <SidebarContent>
+        <SidebarSection
+          title={intl.formatMessage(messages.unitContentSummaryText)}
+          icon={SchoolOutline}
+        >
+          {componentData && <ComponentCountSnippet componentData={componentData} />}
+        </SidebarSection>
+        <SidebarSection
+          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
+          icon={Tag}
+          actions={[
+            {
+              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+              onClick: openManageTagsDrawer,
+            },
+          ]}
+        >
+          <ContentTagsSnippet contentId={unitId} />
+        </SidebarSection>
+      </SidebarContent>
+      <ContentTagsDrawerSheet
+        id={unitId}
+        onClose={closeManageTagsDrawer}
+        showSheet={isManageTagsDrawerOpen}
+      />
+    </>
+  );
+};
+
+export const UnitSidebar = ({ unitId }: Props) => {
+  const intl = useIntl();
+  const [tab, setTab] = useState<'preview'| 'info' | 'settings'>('info');
+  const { data: unitData, isLoading } = useCourseItemData(unitId);
+  const { selectedContainerState } = useOutlineSidebarContext();
+  const { openPublishModal, courseId } = useCourseAuthoringContext();
+
+  const handlePublish = () => {
+    if (selectedContainerState?.sectionId && unitData?.hasChanges) {
+      openPublishModal({
+        value: unitData,
+        sectionId: selectedContainerState?.sectionId,
+      })
+    }
+  }
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <SidebarTitle
+        title={unitData?.displayName || ''}
+        icon={SchoolOutline}
+      />
+      {unitData?.hasChanges && <PublishButon onClick={handlePublish} />}
+      <Tabs
+        variant="tabs"
+        className="my-2 d-flex justify-content-around"
+        id="add-content-tabs"
+        activeKey={tab}
+        onSelect={setTab}
+        mountOnEnter
+      >
+        <Tab.Pane
+          eventKey="preview"
+          title={intl.formatMessage(messages.previewTabText)}
+          // To make sure that data is fresh
+          unmountOnExit
+        >
+          <IframeProvider>
+            <XBlockContainerIframe
+              courseId={courseId}
+              blockId={unitId}
+              isUnitVerticalType={false}
+              unitXBlockActions={{ handleDelete: () => {}, handleDuplicate: () => {}, handleUnlink: () => {} }}
+              courseVerticalChildren={[]}
+              handleConfigureSubmit={() => {}}
+              readonly
+            />
+          </IframeProvider>
+        </Tab.Pane>
+        <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
+          <UnitInfoSidebar unitId={unitId} />
+        </Tab>
+        <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
+          <div>Settings</div>
+        </Tab>
+      </Tabs>
+    </>
+  );
+}
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index dd8039c7c2..d80083f4f5 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -135,6 +135,11 @@ const messages = defineMessages({
     defaultMessage: 'Subsection Content Summary',
     description: 'Title of the summary section in the subsection info sidebar',
   },
+  unitContentSummaryText: {
+    id: 'course-authoring.course-outline.sidebar.unit.content-summary-text',
+    defaultMessage: 'Unit Content Summary',
+    description: 'Title of the summary section in the unit info sidebar',
+  },
   publishContainerButton: {
     id: 'course-authoring.course-outline.sidebar.generic.publish.button',
     defaultMessage: 'Publish Changes',
@@ -145,15 +150,20 @@ const messages = defineMessages({
     defaultMessage: '(Draft)',
     description: 'Draft text in publish button',
   },
+  previewTabText: {
+    id: 'course-authoring.course-outline.sidebar.generic.preview.tab.text',
+    defaultMessage: 'Preview',
+    description: 'Preview tab title in container sidebar',
+  },
   infoTabText: {
     id: 'course-authoring.course-outline.sidebar.generic.info.tab.text',
     defaultMessage: 'Details',
-    description: 'Information tab title in section sidebar',
+    description: 'Information tab title in container sidebar',
   },
   settingsTabText: {
     id: 'course-authoring.course-outline.sidebar.generic.info.settings.text',
     defaultMessage: 'Settings',
-    description: 'Settings tab title in section sidebar',
+    description: 'Settings tab title in container sidebar',
   },
   libraryReferenceCardText: {
     id: 'course-authoring.course-outline.sidebar.library.reference.card.text',
diff --git a/src/course-unit/xblock-container-iframe/index.tsx b/src/course-unit/xblock-container-iframe/index.tsx
index 5b67b340af..4dec9fa425 100644
--- a/src/course-unit/xblock-container-iframe/index.tsx
+++ b/src/course-unit/xblock-container-iframe/index.tsx
@@ -41,7 +41,13 @@ import {
 import { formatAccessManagedXBlockData, getIframeUrl, getLegacyEditModalUrl } from './utils';
 
 const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
-  courseId, blockId, unitXBlockActions, courseVerticalChildren, handleConfigureSubmit, isUnitVerticalType,
+  courseId,
+  blockId,
+  unitXBlockActions,
+  courseVerticalChildren,
+  handleConfigureSubmit,
+  isUnitVerticalType,
+  readonly,
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -210,7 +216,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
     handleRefreshIframe,
   });
 
-  useIframeMessages(messageHandlers);
+  useIframeMessages(readonly ? {}: messageHandlers);
 
   return (
     <>
diff --git a/src/course-unit/xblock-container-iframe/types.ts b/src/course-unit/xblock-container-iframe/types.ts
index a4051cbe3c..8115dca47e 100644
--- a/src/course-unit/xblock-container-iframe/types.ts
+++ b/src/course-unit/xblock-container-iframe/types.ts
@@ -37,6 +37,7 @@ export interface XBlockContainerIframeProps {
   };
   courseVerticalChildren: Array<XBlockTypes>;
   handleConfigureSubmit: (XBlockId: string, ...args: any[]) => void;
+  readonly?: boolean;
 }
 
 export type AccessManagedXBlockDataTypes = {

From 011b71213a0a0ba3906ca8f63acca852dafe7d08 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 23 Jan 2026 18:33:54 +0530
Subject: [PATCH 14/60] feat: open button

---
 .../outline-sidebar/UnitInfoSidebar.tsx       | 22 +++++++++++++++----
 .../outline-sidebar/messages.ts               |  5 +++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index 5056e8b19f..8437620fd8 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Tab, Tabs, useToggle } from '@openedx/paragon';
-import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+import { Button, Stack, Tab, Tabs, useToggle } from '@openedx/paragon';
+import { Expand, OpenInFull, SchoolOutline, Tag } from '@openedx/paragon/icons';
 
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
 import { ComponentCountSnippet } from '@src/generic/block-type-utils';
@@ -18,6 +18,7 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import XBlockContainerIframe from '@src/course-unit/xblock-container-iframe';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
+import { Link } from 'react-router-dom';
 
 interface Props {
   unitId: string;
@@ -68,7 +69,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
   const [tab, setTab] = useState<'preview'| 'info' | 'settings'>('info');
   const { data: unitData, isLoading } = useCourseItemData(unitId);
   const { selectedContainerState } = useOutlineSidebarContext();
-  const { openPublishModal, courseId } = useCourseAuthoringContext();
+  const { openPublishModal, getUnitUrl, courseId } = useCourseAuthoringContext();
 
   const handlePublish = () => {
     if (selectedContainerState?.sectionId && unitData?.hasChanges) {
@@ -89,7 +90,20 @@ export const UnitSidebar = ({ unitId }: Props) => {
         title={unitData?.displayName || ''}
         icon={SchoolOutline}
       />
-      {unitData?.hasChanges && <PublishButon onClick={handlePublish} />}
+      <Stack direction='horizontal' gap={1} className="mx-2">
+        <Button
+          variant="outline-primary"
+          as={Link}
+          to={getUnitUrl(unitId)}
+          iconBefore={OpenInFull}
+          block={!unitData?.hasChanges}
+        >
+          {intl.formatMessage(messages.openUnitPage)}
+        </Button>
+        {unitData?.hasChanges && (
+          <PublishButon onClick={handlePublish} />
+        )}
+      </Stack>
       <Tabs
         variant="tabs"
         className="my-2 d-flex justify-content-around"
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index d80083f4f5..c16b3ebcab 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -140,6 +140,11 @@ const messages = defineMessages({
     defaultMessage: 'Unit Content Summary',
     description: 'Title of the summary section in the unit info sidebar',
   },
+  openUnitPage: {
+    id: 'course-authoring.course-outline.sidebar.unit.open-btn-text',
+    defaultMessage: 'Open',
+    description: 'Button to open unit page from sidebar',
+  },
   publishContainerButton: {
     id: 'course-authoring.course-outline.sidebar.generic.publish.button',
     defaultMessage: 'Publish Changes',

From e63d1bc61ae2a6c671b640d6fb0c437a486c61a3 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 23 Jan 2026 21:39:20 +0530
Subject: [PATCH 15/60] refactor: align sidebar respects selection

---
 src/CourseAuthoringContext.tsx                |  9 +++-
 src/course-outline/card-header/CardHeader.tsx |  3 +-
 .../outline-sidebar/LibraryReferenceCard.tsx  | 27 +++++++++--
 .../outline-sidebar/OutlineAlignSidebar.tsx   | 20 ++++----
 .../outline-sidebar/OutlineSidebarContext.tsx | 46 +++++++++++++------
 .../outline-sidebar/UnitInfoSidebar.tsx       |  4 +-
 .../section-card/SectionCard.tsx              |  2 +-
 .../subsection-card/SubsectionCard.tsx        |  2 +-
 src/course-outline/unit-card/UnitCard.tsx     |  6 +--
 9 files changed, 81 insertions(+), 38 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 8980fb0429..6ef90c6d78 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -43,7 +43,7 @@ export type CourseAuthoringContextData = {
   openPublishModal: (value: ModalState) => void;
   closePublishModal: () => void;
   currentSelection?: SelectionState;
-  setCurrentSelection: (value?: SelectionState) => void;
+  setCurrentSelection: React.Dispatch<React.SetStateAction<SelectionState | undefined>>;
 };
 
 /**
@@ -73,6 +73,13 @@ export const CourseAuthoringProvider = ({
   const { id: courseUsageKey } = courseStructure || {};
   const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<ModalState>();
   const [isPublishModalOpen, currentPublishModalData, openPublishModal, closePublishModal] = useToggleWithValue<ModalState>();
+  /**
+  * This will hold the state of current item that is being operated on,
+  * For example:
+  *  - the details of container that is being edited.
+  *  - the details of container of which see more dropdown is open.
+  * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.
+  */
   const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
   const queryClient = useQueryClient();
 
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 82280c9a3e..b5b5150bf7 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -112,7 +112,8 @@ const CardHeader = ({
   const openManageTagsDrawer = useCallback(() => {
     const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
     if (showNewSidebar) {
-      setCurrentPageKey('align', cardId);
+      setCurrentPageKey('align');
+      onClickMenuButton();
     } else {
       openLegacyTagsDrawer();
     }
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index fbaf335102..5e064e5958 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -8,7 +8,7 @@ import { useOutlineSidebarContext } from "@src/course-outline/outline-sidebar/Ou
 import { PreviewLibraryXBlockChanges } from "@src/course-unit/preview-changes";
 import { useCourseAuthoringContext } from "@src/CourseAuthoringContext";
 import { XBlock } from "@src/data/types";
-import { getBlockType, normalizeContainerType } from "@src/generic/key-utils";
+import { ContainerType, getBlockType, normalizeContainerType } from "@src/generic/key-utils";
 import { useToggleWithValue } from "@src/hooks";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
@@ -42,6 +42,27 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
     openSyncModal(parentData);
   };
 
+  const handleGoToParent = () => {
+    // istanbul ignore: to satisfy checker
+    if (!upstreamInfo?.topLevelParentKey) {
+      return null;
+    }
+    const category = getBlockType(upstreamInfo.topLevelParentKey) as ContainerType;
+    if ([ContainerType.Chapter, ContainerType.Section].includes(category)) {
+      return openContainerInfoSidebar(
+        upstreamInfo.topLevelParentKey,
+        undefined,
+        upstreamInfo.topLevelParentKey,
+      )
+    }
+    // Only possible option is sequential or subsection
+    return openContainerInfoSidebar(
+      upstreamInfo.topLevelParentKey,
+      upstreamInfo.topLevelParentKey,
+      selectedContainerState?.sectionId
+    )
+  }
+
   if (!upstreamInfo?.topLevelParentKey) {
     return null;
   }
@@ -87,9 +108,7 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
       <FormattedMessage {...messages.hasTopParentText} values={messageValues} />
       <Button
         variant='outline-primary'
-        onClick={() => {
-          return openContainerInfoSidebar(upstreamInfo.topLevelParentKey!)
-        }}
+        onClick={handleGoToParent}
       >
         <FormattedMessage {...messages.hasTopParentBtn} values={messageValues} />
       </Button>
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index 73593d0572..9ba4a839b1 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -2,23 +2,19 @@ import { SchoolOutline } from '@openedx/paragon/icons';
 import { ContentTagsDrawer } from '@src/content-tags-drawer';
 import { useContentData } from '@src/content-tags-drawer/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useCourseDetails } from '@src/data/apiHooks';
 import { SidebarTitle } from '@src/generic/sidebar';
+import { useMemo } from 'react';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 export const OutlineAlignSidebar = () => {
-  const { courseId } = useCourseAuthoringContext();
-  const { currentContainerId } = useOutlineSidebarContext();
+  const { courseId, currentSelection } = useCourseAuthoringContext();
+  const { selectedContainerState } = useOutlineSidebarContext();
 
-  const sidebarContentId = currentContainerId || courseId;
+  const sidebarContentId = useMemo(() => {
+    return currentSelection?.currentId || selectedContainerState?.currentId || courseId
+  }, [currentSelection, selectedContainerState, courseId]);
 
-  const {
-    data: courseData,
-  } = useCourseDetails(courseId);
-
-  const {
-    data: contentData,
-  } = useContentData(currentContainerId);
+  const { data: contentData } = useContentData(sidebarContentId);
 
   return (
     <div>
@@ -26,7 +22,7 @@ export const OutlineAlignSidebar = () => {
         title={
           contentData && 'displayName' in contentData
             ? contentData.displayName
-            : courseData?.name || ''
+            : contentData?.courseDisplayNameWithDefault || ''
         }
         icon={SchoolOutline}
       />
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 4139d4f7fa..5630113b9f 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -2,6 +2,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -10,6 +11,7 @@ import { useToggle } from '@openedx/paragon';
 import { useEscapeClick, useStateWithUrlSearchParam } from '@src/hooks';
 import { isOutlineNewDesignEnabled } from '../utils';
 import { SelectionState } from '@src/data/types';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlowType = 'use-section' | 'use-subsection' | 'use-unit' | null;
@@ -25,7 +27,7 @@ export type OutlineFlow = {
 
 interface OutlineSidebarContextData {
   currentPageKey: OutlineSidebarPageKeys;
-  setCurrentPageKey: (pageKey: OutlineSidebarPageKeys, containerId?: string) => void;
+  setCurrentPageKey: (pageKey: OutlineSidebarPageKeys) => void;
   currentFlow: OutlineFlow | null;
   startCurrentFlow: (flow: OutlineFlow) => void;
   stopCurrentFlow: () => void;
@@ -33,17 +35,12 @@ interface OutlineSidebarContextData {
   open: () => void;
   toggle: () => void;
   selectedContainerState?: SelectionState;
-  // The Id of the container used in the current sidebar page
-  // The container is not necessarily selected to open a selected sidebar.
-  // Example: Align sidebar
-  currentContainerId?: string;
-  openContainerInfoSidebar: (containerId: string, sectionId?: string) => void;
+  openContainerInfoSidebar: (containerId: string, subsectionId?: string, sectionId?: string) => void;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
 
 export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNode }) => {
-  const [currentContainerId, setCurrentContainerId] = useState<string>();
   const [currentPageKey, setCurrentPageKeyState] = useStateWithUrlSearchParam<OutlineSidebarPageKeys>(
     'info',
     'sidebar',
@@ -53,7 +50,29 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   const [currentFlow, setCurrentFlow] = useState<OutlineFlow | null>(null);
   const [isOpen, open, , toggle] = useToggle(true);
 
+  /**
+  * Use this to store the selected container's information and should always contain full ancestor info.
+  * If selected container is a section, set containerId and sectionId to same value and subsectionId should
+  * be undefined.
+  * If selected container is a subsection, set containerId and subsectionId to same value and sectionId
+  * should be set to its parent section id.
+  * If selected container is an unit, set containerId as unitId, subsectionId as its parent subsection's id
+  * and sectionId should be set to its top parent section's id.
+  */
   const [selectedContainerState, setSelectedContainerState] = useState<SelectionState | undefined>();
+  const { setCurrentSelection } = useCourseAuthoringContext();
+
+  /**
+  * Set currentSelection to same as selectedContainerState whenever
+  * selectedContainerState or currentPageKey changes.
+  * This allows us to reset the currentSelection.
+  */
+  useEffect(() => {
+    // To allow tag buttons on other cards to jump to align page and not loose its selection
+    if (currentPageKey !== 'align') {
+      setCurrentSelection(selectedContainerState);
+    }
+  }, [currentPageKey, selectedContainerState]);
 
   /**
   * Stops current add content flow.
@@ -63,16 +82,19 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     setCurrentFlow(null);
   }, [setCurrentFlow]);
 
-  const setCurrentPageKey = useCallback((pageKey: OutlineSidebarPageKeys, containerId?: string) => {
+  const setCurrentPageKey = useCallback((pageKey: OutlineSidebarPageKeys) => {
     setCurrentPageKeyState(pageKey);
     setCurrentFlow(null);
-    setCurrentContainerId(containerId);
     open();
   }, [open, setCurrentFlow]);
 
-  const openContainerInfoSidebar = useCallback((containerId: string, sectionId?: string) => {
+  const openContainerInfoSidebar = useCallback((
+    containerId: string,
+    subsectionId?: string,
+    sectionId?: string
+  ) => {
     if (isOutlineNewDesignEnabled()) {
-      setSelectedContainerState({ currentId: containerId, sectionId });
+      setSelectedContainerState({ currentId: containerId, subsectionId, sectionId });
       setCurrentPageKey('info');
     }
   }, [setSelectedContainerState, setCurrentPageKey]);
@@ -110,7 +132,6 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       open,
       toggle,
       selectedContainerState,
-      currentContainerId,
       openContainerInfoSidebar,
       clearSelection,
     }),
@@ -124,7 +145,6 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       open,
       toggle,
       selectedContainerState,
-      currentContainerId,
       openContainerInfoSidebar,
       clearSelection,
     ],
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index 8437620fd8..4324be6a8e 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -112,7 +112,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
         onSelect={setTab}
         mountOnEnter
       >
-        <Tab.Pane
+        <Tab
           eventKey="preview"
           title={intl.formatMessage(messages.previewTabText)}
           // To make sure that data is fresh
@@ -129,7 +129,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
               readonly
             />
           </IframeProvider>
-        </Tab.Pane>
+        </Tab>
         <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
           <UnitInfoSidebar unitId={unitId} />
         </Tab>
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 2d1a8aea7b..260cbb2da8 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -225,7 +225,7 @@ const SectionCard = ({
 
   const onClickCard = useCallback((e: React.MouseEvent, preventNodeEvents: boolean) => {
     if (!preventNodeEvents || e.target === e.currentTarget) {
-      openContainerInfoSidebar(section.id, section.id);
+      openContainerInfoSidebar(section.id, undefined, section.id);
       setIsExpanded(true);
     }
   }, [openContainerInfoSidebar]);
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 514419f99c..03636b313e 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -229,7 +229,7 @@ const SubsectionCard = ({
 
   const onClickCard = useCallback((e: React.MouseEvent, preventNodeEvents: boolean) => {
     if (!preventNodeEvents || e.target === e.currentTarget) {
-      openContainerInfoSidebar(subsection.id, section.id);
+      openContainerInfoSidebar(subsection.id, subsection.id, section.id);
       setIsExpanded(true);
     }
   }, [openContainerInfoSidebar]);
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 8ad331476a..25448c43ce 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -128,7 +128,7 @@ const UnitCard = ({
   });
   const borderStyle = getItemStatusBorder(unitStatus);
 
-  const handleClickMenuButton = () => {
+  const selectAndTrigger = () => {
     setCurrentSelection({
       currentId: unit.id,
       subsectionId: subsection.id,
@@ -158,7 +158,7 @@ const UnitCard = ({
 
   const onClickCard = useCallback((e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      openContainerInfoSidebar(unit.id, section.id);
+      openContainerInfoSidebar(unit.id, subsection.id, section.id);
     }
   }, [openContainerInfoSidebar]);
 
@@ -244,7 +244,7 @@ const UnitCard = ({
             status={unitStatus}
             hasChanges={hasChanges}
             cardId={id}
-            onClickMenuButton={handleClickMenuButton}
+            onClickMenuButton={selectAndTrigger}
             onClickPublish={() => openPublishModal({ value: unit, sectionId: section.id })}
             onClickConfigure={onOpenConfigureModal}
             onClickDelete={onOpenDeleteModal}

From dd47229b76a7a631acfbd40e25ee1e466a73bff9 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 23 Jan 2026 22:06:15 +0530
Subject: [PATCH 16/60] fix: lint and type issues

---
 src/CourseAuthoringContext.tsx                | 48 ++++++---------
 src/course-outline/CourseOutline.tsx          |  5 +-
 src/course-outline/card-header/CardHeader.tsx |  8 +--
 src/course-outline/data/apiHooks.ts           | 13 ++--
 .../header-navigations/HeaderActions.test.tsx |  2 +-
 .../header-navigations/HeaderActions.tsx      | 10 ++-
 .../highlights-modal/HighlightsModal.jsx      |  4 +-
 src/course-outline/hooks.jsx                  | 42 ++++++++++---
 .../outline-sidebar/InfoSidebar.tsx           | 23 ++++---
 .../outline-sidebar/LibraryReferenceCard.tsx  | 61 ++++++++++---------
 .../outline-sidebar/OutlineAlignSidebar.tsx   |  8 ++-
 .../outline-sidebar/OutlineSidebarContext.tsx |  5 +-
 .../outline-sidebar/PublishButon.tsx          | 35 +++++------
 .../outline-sidebar/SectionInfoSidebar.tsx    | 12 ++--
 .../outline-sidebar/SubsectionInfoSidebar.tsx | 14 ++---
 .../outline-sidebar/UnitInfoSidebar.tsx       | 26 ++++----
 .../publish-modal/PublishModal.tsx            | 32 +++++-----
 .../section-card/SectionCard.test.tsx         |  7 +--
 .../section-card/SectionCard.tsx              |  6 +-
 .../subsection-card/SubsectionCard.test.tsx   |  7 +--
 .../subsection-card/SubsectionCard.tsx        |  6 +-
 .../unit-card/UnitCard.test.tsx               |  8 +--
 src/course-outline/unit-card/UnitCard.tsx     | 13 ++--
 .../xblock-container-iframe/index.tsx         |  2 +-
 .../xblock-container-iframe/types.ts          |  2 +-
 src/data/types.ts                             |  2 +-
 .../configure-modal/ConfigureModal.jsx        |  4 +-
 src/generic/unlink-modal/data/apiHooks.ts     |  2 +-
 src/hooks.ts                                  |  1 -
 29 files changed, 221 insertions(+), 187 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 6ef90c6d78..7dffded8d4 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -1,5 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import {
+  createContext, useContext, useMemo, useState,
+} from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { courseOutlineQueryKeys, useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
@@ -7,19 +9,17 @@ import { useDispatch, useSelector } from 'react-redux';
 import { addSection, addSubsection, updateSavingStatus } from '@src/course-outline/data/slice';
 import { useNavigate } from 'react-router';
 import { getOutlineIndexData } from '@src/course-outline/data/selectors';
-import { RequestStatus, RequestStatusType } from './data/constants';
-import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
-import { CourseDetailsData } from './data/api';
 import { useToggleWithValue } from '@src/hooks';
 import { SelectionState, XBlock } from '@src/data/types';
-import { useUnlinkDownstream } from '@src/generic/unlink-modal';
-import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
 import { useQueryClient } from '@tanstack/react-query';
+import { CourseDetailsData } from './data/api';
+import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
+import { RequestStatus, RequestStatusType } from './data/constants';
 
 type ModalState = {
   value: XBlock;
   sectionId: string;
-}
+};
 
 export type CourseAuthoringContextData = {
   /** The ID of the current course */
@@ -37,7 +37,6 @@ export type CourseAuthoringContextData = {
   currentUnlinkModalData?: ModalState;
   openUnlinkModal: (value: ModalState) => void;
   closeUnlinkModal: () => void;
-  handleUnlinkItemSubmit: () => Promise<void>;
   isPublishModalOpen: boolean;
   currentPublishModalData?: ModalState;
   openPublishModal: (value: ModalState) => void;
@@ -71,8 +70,18 @@ export const CourseAuthoringProvider = ({
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
   const { courseStructure } = useSelector(getOutlineIndexData);
   const { id: courseUsageKey } = courseStructure || {};
-  const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] = useToggleWithValue<ModalState>();
-  const [isPublishModalOpen, currentPublishModalData, openPublishModal, closePublishModal] = useToggleWithValue<ModalState>();
+  const [
+    isUnlinkModalOpen,
+    currentUnlinkModalData,
+    openUnlinkModal,
+    closeUnlinkModal,
+  ] = useToggleWithValue<ModalState>();
+  const [
+    isPublishModalOpen,
+    currentPublishModalData,
+    openPublishModal,
+    closePublishModal,
+  ] = useToggleWithValue<ModalState>();
   /**
   * This will hold the state of current item that is being operated on,
   * For example:
@@ -91,23 +100,6 @@ export const CourseAuthoringProvider = ({
     return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
   };
 
-  const { mutateAsync: unlinkDownstream } = useUnlinkDownstream();
-
-  /** Handle the submit of the item unlinking XBlock from library counterpart. */
-  const handleUnlinkItemSubmit = useCallback(async () => {
-    // istanbul ignore if: this should never happen
-    if (!currentUnlinkModalData) {
-      return;
-    }
-
-    await unlinkDownstream(currentUnlinkModalData.value.id, {
-      onSuccess: () => {
-        dispatch(fetchCourseSectionQuery([currentUnlinkModalData.sectionId]))
-        closeUnlinkModal();
-      },
-    });
-  }, [currentUnlinkModalData, unlinkDownstream, closeUnlinkModal, fetchCourseSectionQuery]);
-
   /**
    * Open the unit page for a given locator.
    */
@@ -169,7 +161,6 @@ export const CourseAuthoringProvider = ({
     openUnlinkModal,
     closeUnlinkModal,
     currentUnlinkModalData,
-    handleUnlinkItemSubmit,
     isPublishModalOpen,
     currentPublishModalData,
     openPublishModal,
@@ -191,7 +182,6 @@ export const CourseAuthoringProvider = ({
     openUnlinkModal,
     closeUnlinkModal,
     currentUnlinkModalData,
-    handleUnlinkItemSubmit,
     isPublishModalOpen,
     currentPublishModalData,
     openPublishModal,
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 94bbd5384a..e693c26e59 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -36,6 +36,7 @@ import { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
 import { ContainerType } from '@src/generic/key-utils';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import {
   getProctoredExamsFlag,
   getTimedExamsFlag,
@@ -63,7 +64,6 @@ import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { StatusBar } from './status-bar/StatusBar';
 import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 import { isOutlineNewDesignEnabled } from './utils';
-import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 const CourseOutline = () => {
   const intl = useIntl();
@@ -76,7 +76,6 @@ const CourseOutline = () => {
     handleAddSection,
     isUnlinkModalOpen,
     closeUnlinkModal,
-    handleUnlinkItemSubmit,
     currentSelection,
   } = useCourseAuthoringContext();
 
@@ -130,6 +129,7 @@ const CourseOutline = () => {
     handleUnitDragAndDrop,
     errors,
     resetScrollState,
+    handleUnlinkItemSubmit,
   } = useCourseOutline({ courseId });
 
   // Show the new actions bar if it is enabled in the configuration.
@@ -436,7 +436,6 @@ const CourseOutline = () => {
                                                   subsection,
                                                   subsection.childInfo.children,
                                                 )}
-                                                savingStatus={savingStatus}
                                                 onOpenConfigureModal={openConfigureModal}
                                                 onOpenDeleteModal={openDeleteModal}
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index b5b5150bf7..7f6acec7e8 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -25,14 +25,14 @@ import { ContentTagsDrawerSheet } from '@src/content-tags-drawer';
 import TagCount from '@src/generic/tag-count';
 import { useEscapeClick } from '@src/hooks';
 import { XBlockActions } from '@src/data/types';
+import { courseOutlineQueryKeys, useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useQueryClient } from '@tanstack/react-query';
 import { ITEM_BADGE_STATUS } from '../constants';
 import { scrollToElement } from '../utils';
 import CardStatus from './CardStatus';
 import messages from './messages';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
-import { courseOutlineQueryKeys, useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
-import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useQueryClient } from '@tanstack/react-query';
 
 interface CardHeaderProps {
   title: string;
@@ -134,7 +134,7 @@ const CardHeader = ({
   const onEditClick = () => {
     onClickMenuButton();
     openForm();
-  }
+  };
 
   useEffect(() => {
     const locatorId = searchParams.get('show');
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index 3f876e4f11..f3030858f9 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -1,8 +1,12 @@
 import { containerComparisonQueryKeys } from '@src/container-comparison/data/apiHooks';
 import type { XBlock } from '@src/data/types';
 import { getCourseKey } from '@src/generic/key-utils';
-import { skipToken, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem, publishCourseItem } from './api';
+import {
+  skipToken, useMutation, useQuery, useQueryClient,
+} from '@tanstack/react-query';
+import {
+  createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem, publishCourseItem,
+} from './api';
 
 export const courseOutlineQueryKeys = {
   all: ['courseOutline'],
@@ -11,7 +15,7 @@ export const courseOutlineQueryKeys = {
    */
   course: (courseId?: string) => [...courseOutlineQueryKeys.all, courseId],
   courseItemId: (itemId?: string) => [
-    ...courseOutlineQueryKeys.course(itemId ? getCourseKey(itemId): undefined),
+    ...courseOutlineQueryKeys.course(itemId ? getCourseKey(itemId) : undefined),
     itemId,
   ],
   courseDetails: (courseId?: string) => [
@@ -44,7 +48,7 @@ export const useCreateCourseBlock = (
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
       callback?.(data.locator, variables.parentLocator);
     },
-  })
+  });
 };
 
 export const useCourseItemData = (itemId?: string, initialData?: XBlock, enabled: boolean = true) => (
@@ -83,4 +87,3 @@ export const usePublishCourseItem = (sectionId?: string) => {
     },
   });
 };
-
diff --git a/src/course-outline/header-navigations/HeaderActions.test.tsx b/src/course-outline/header-navigations/HeaderActions.test.tsx
index 54b12168ea..f5d4d76257 100644
--- a/src/course-outline/header-navigations/HeaderActions.test.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.test.tsx
@@ -3,9 +3,9 @@ import {
   fireEvent, initializeMocks, render, screen,
 } from '@src/testUtils';
 
+import { OutlineSidebarProvider } from '@src/course-outline';
 import messages from './messages';
 import HeaderActions, { HeaderActionsProps } from './HeaderActions';
-import { OutlineSidebarProvider } from '@src/course-outline';
 
 const headerNavigationsActions = {
   lmsLink: '',
diff --git a/src/course-outline/header-navigations/HeaderActions.tsx b/src/course-outline/header-navigations/HeaderActions.tsx
index bddd876e94..5406c96b15 100644
--- a/src/course-outline/header-navigations/HeaderActions.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.tsx
@@ -28,7 +28,13 @@ const HeaderActions = ({
   const intl = useIntl();
   const { lmsLink } = actions;
 
-  const { setCurrentPageKey } = useOutlineSidebarContext();
+  const { clearSelection, open, setCurrentPageKey } = useOutlineSidebarContext();
+
+  const handleCourseInfoClick = () => {
+    clearSelection();
+    setCurrentPageKey('info');
+    open();
+  };
 
   return (
     <Stack direction="horizontal" gap={3}>
@@ -42,7 +48,7 @@ const HeaderActions = ({
       >
         <Button
           iconBefore={InfoOutline}
-          onClick={() => setCurrentPageKey('info')}
+          onClick={handleCourseInfoClick}
           variant="outline-primary"
         >
           {intl.formatMessage(messages.courseInfoButton)}
diff --git a/src/course-outline/highlights-modal/HighlightsModal.jsx b/src/course-outline/highlights-modal/HighlightsModal.jsx
index 4d5cbc9f55..1fd254cfe0 100644
--- a/src/course-outline/highlights-modal/HighlightsModal.jsx
+++ b/src/course-outline/highlights-modal/HighlightsModal.jsx
@@ -9,13 +9,13 @@ import {
 } from '@openedx/paragon';
 import { Formik } from 'formik';
 
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { useHelpUrls } from '../../help-urls/hooks';
 import FormikControl from '../../generic/FormikControl';
 import { HIGHLIGHTS_FIELD_MAX_LENGTH } from '../constants';
 import { getHighlightsFormValues } from '../utils';
 import messages from './messages';
-import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 const HighlightsModal = ({
   isOpen,
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index bdf5ad7fd7..844bad01e7 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useToggle } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
@@ -9,6 +9,8 @@ import { RequestStatus } from '@src/data/constants';
 
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { ContainerType, getBlockType } from '@src/generic/key-utils';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { useUnlinkDownstream } from '@src/generic/unlink-modal';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
   resetScrollField,
@@ -49,11 +51,16 @@ import {
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
-import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
-  const { handleAddSection, setCurrentSelection, currentSelection } = useCourseAuthoringContext();
+  const {
+    handleAddSection,
+    setCurrentSelection,
+    currentSelection,
+    currentUnlinkModalData,
+    closeUnlinkModal,
+  } = useCourseAuthoringContext();
   const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
   const {
@@ -147,11 +154,27 @@ const useCourseOutline = ({ courseId }) => {
   const handleConfigureModalClose = () => {
     closeConfigureModal();
     // reset the currentSelection?.current so the ConfigureModal's state is also reset
-    setCurrentSelection(undefined)
+    setCurrentSelection(undefined);
   };
 
+  const { mutateAsync: unlinkDownstream } = useUnlinkDownstream();
+
+  /** Handle the submit of the item unlinking XBlock from library counterpart. */
+  const handleUnlinkItemSubmit = useCallback(async () => {
+    // istanbul ignore if: this should never happen
+    if (!currentUnlinkModalData) {
+      return;
+    }
+
+    await unlinkDownstream(currentUnlinkModalData.value.id, {
+      onSuccess: () => {
+        closeUnlinkModal();
+      },
+    });
+  }, [currentUnlinkModalData, unlinkDownstream, closeUnlinkModal]);
+
   const handleConfigureItemSubmit = (...arg) => {
-    const category = getBlockType(currentSelection.currentId)
+    const category = getBlockType(currentSelection.currentId);
     switch (category) {
       case COURSE_BLOCK_NAMES.chapter.id:
         dispatch(configureCourseSectionQuery(currentSelection?.sectionId, ...arg));
@@ -169,7 +192,7 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleDeleteItemSubmit = () => {
-    const category = getBlockType(currentSelection.currentId)
+    const category = getBlockType(currentSelection.currentId);
     switch (category) {
       case COURSE_BLOCK_NAMES.chapter.id:
         dispatch(deleteCourseSectionQuery(currentSelection?.currentId));
@@ -202,7 +225,11 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const handleDuplicateUnitSubmit = () => {
-    dispatch(duplicateUnitQuery(currentSelection?.currentId, currentSelection?.subsectionId, currentSelection?.sectionId));
+    dispatch(duplicateUnitQuery(
+      currentSelection?.currentId,
+      currentSelection?.subsectionId,
+      currentSelection?.sectionId,
+    ));
   };
 
   const handleVideoSharingOptionChange = (value) => {
@@ -322,6 +349,7 @@ const useCourseOutline = ({ courseId }) => {
     handleUnitDragAndDrop,
     errors,
     resetScrollState,
+    handleUnlinkItemSubmit,
   };
 };
 
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/InfoSidebar.tsx
index 4c8bbb5993..4008e4b1f4 100644
--- a/src/course-outline/outline-sidebar/InfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/InfoSidebar.tsx
@@ -1,31 +1,30 @@
-import { useOutlineSidebarContext } from "./OutlineSidebarContext";
-import { CourseInfoSidebar } from "./CourseInfoSidebar"
-import { ContainerType, getBlockType } from "@src/generic/key-utils";
-import { SectionSidebar } from "./SectionInfoSidebar";
-import { SubsectionSidebar } from "./SubsectionInfoSidebar";
-import { UnitSidebar } from "./UnitInfoSidebar";
+import { ContainerType, getBlockType } from '@src/generic/key-utils';
+import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import { CourseInfoSidebar } from './CourseInfoSidebar';
+import { SectionSidebar } from './SectionInfoSidebar';
+import { SubsectionSidebar } from './SubsectionInfoSidebar';
+import { UnitSidebar } from './UnitInfoSidebar';
 
 export const InfoSidebar = () => {
   const { selectedContainerState } = useOutlineSidebarContext();
   if (!selectedContainerState) {
     return (
       <CourseInfoSidebar />
-    )
+    );
   }
   const itemType = getBlockType(selectedContainerState.currentId);
 
   switch (itemType) {
     case ContainerType.Chapter:
     case ContainerType.Section:
-      return <SectionSidebar sectionId={selectedContainerState.currentId} />
+      return <SectionSidebar sectionId={selectedContainerState.currentId} />;
     case ContainerType.Sequential:
     case ContainerType.Subsection:
-      return <SubsectionSidebar subsectionId={selectedContainerState.currentId} />
+      return <SubsectionSidebar subsectionId={selectedContainerState.currentId} />;
     case ContainerType.Vertical:
     case ContainerType.Unit:
-      return <UnitSidebar unitId={selectedContainerState.currentId} />
+      return <UnitSidebar unitId={selectedContainerState.currentId} />;
     default:
       return <CourseInfoSidebar />;
   }
-}
-
+};
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 5e064e5958..8655d043af 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -1,18 +1,20 @@
-import { FormattedMessage } from "@edx/frontend-platform/i18n";
-import { Button, Card, Icon, Stack } from "@openedx/paragon";
-import { Cached, LinkOff, Newsstand } from "@openedx/paragon/icons";
-import { invalidateLinksQuery } from "@src/course-libraries/data/apiHooks";
-import { courseOutlineQueryKeys, useCourseItemData } from "@src/course-outline/data/apiHooks";
-import { fetchCourseSectionQuery } from "@src/course-outline/data/thunk";
-import { useOutlineSidebarContext } from "@src/course-outline/outline-sidebar/OutlineSidebarContext";
-import { PreviewLibraryXBlockChanges } from "@src/course-unit/preview-changes";
-import { useCourseAuthoringContext } from "@src/CourseAuthoringContext";
-import { XBlock } from "@src/data/types";
-import { ContainerType, getBlockType, normalizeContainerType } from "@src/generic/key-utils";
-import { useToggleWithValue } from "@src/hooks";
-import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useMemo } from "react";
-import { useDispatch } from "react-redux";
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Button, Card, Icon, Stack,
+} from '@openedx/paragon';
+import { Cached, LinkOff, Newsstand } from '@openedx/paragon/icons';
+import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
+import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { XBlock } from '@src/data/types';
+import { ContainerType, getBlockType, normalizeContainerType } from '@src/generic/key-utils';
+import { useToggleWithValue } from '@src/hooks';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
 import messages from './messages';
 
 interface SubProps {
@@ -53,15 +55,15 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
         upstreamInfo.topLevelParentKey,
         undefined,
         upstreamInfo.topLevelParentKey,
-      )
+      );
     }
     // Only possible option is sequential or subsection
     return openContainerInfoSidebar(
       upstreamInfo.topLevelParentKey,
       upstreamInfo.topLevelParentKey,
-      selectedContainerState?.sectionId
-    )
-  }
+      selectedContainerState?.sectionId,
+    );
+  };
 
   if (!upstreamInfo?.topLevelParentKey) {
     return null;
@@ -70,14 +72,14 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
   const messageValues = {
     parentType: normalizeContainerType(getBlockType(upstreamInfo.topLevelParentKey)),
     name: displayName,
-  }
+  };
 
   if (upstreamInfo.errorMessage) {
     return (
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.hasTopParentBrokenLinkText} values={messageValues} />
         <Button
-          variant='outline-primary'
+          variant="outline-primary"
           iconBefore={LinkOff}
           disabled={isPending}
           onClick={handleUnlinkClick}
@@ -93,7 +95,7 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.hasTopParentReadyToSyncText} values={messageValues} />
         <Button
-          variant='outline-primary'
+          variant="outline-primary"
           iconBefore={Cached}
           onClick={handleSyncClick}
         >
@@ -107,14 +109,14 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
     <Stack direction="vertical" gap={2}>
       <FormattedMessage {...messages.hasTopParentText} values={messageValues} />
       <Button
-        variant='outline-primary'
+        variant="outline-primary"
         onClick={handleGoToParent}
       >
         <FormattedMessage {...messages.hasTopParentBtn} values={messageValues} />
       </Button>
     </Stack>
   );
-}
+};
 
 const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubProps) => {
   const { upstreamInfo } = blockData;
@@ -122,7 +124,7 @@ const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubPro
   const { openUnlinkModal } = useCourseAuthoringContext();
   const messageValues = {
     name: displayName,
-  }
+  };
 
   const handleUnlinkClick = () => {
     if (!selectedContainerState?.sectionId) {
@@ -140,7 +142,7 @@ const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubPro
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.topParentBrokenLinkText} values={messageValues} />
         <Button
-          variant='outline-primary'
+          variant="outline-primary"
           iconBefore={LinkOff}
           onClick={handleUnlinkClick}
         >
@@ -155,7 +157,7 @@ const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubPro
       <Stack direction="vertical" gap={2}>
         <FormattedMessage {...messages.topParentReaadyToSyncText} values={messageValues} />
         <Button
-          variant='outline-primary'
+          variant="outline-primary"
           iconBefore={Cached}
           onClick={handleSyncClick}
         >
@@ -172,7 +174,7 @@ const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubPro
   }
 
   return null;
-}
+};
 
 interface Props {
   itemId?: string;
@@ -248,6 +250,5 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
         />
       )}
     </div>
-  )
+  );
 };
-
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index 9ba4a839b1..25fb78362d 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -10,9 +10,11 @@ export const OutlineAlignSidebar = () => {
   const { courseId, currentSelection } = useCourseAuthoringContext();
   const { selectedContainerState } = useOutlineSidebarContext();
 
-  const sidebarContentId = useMemo(() => {
-    return currentSelection?.currentId || selectedContainerState?.currentId || courseId
-  }, [currentSelection, selectedContainerState, courseId]);
+  const sidebarContentId = useMemo(() => currentSelection?.currentId || selectedContainerState?.currentId || courseId, [
+    currentSelection,
+    selectedContainerState,
+    courseId,
+  ]);
 
   const { data: contentData } = useContentData(sidebarContentId);
 
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 5630113b9f..57a8833ce3 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -9,9 +9,9 @@ import {
 import { useToggle } from '@openedx/paragon';
 
 import { useEscapeClick, useStateWithUrlSearchParam } from '@src/hooks';
-import { isOutlineNewDesignEnabled } from '../utils';
 import { SelectionState } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { isOutlineNewDesignEnabled } from '../utils';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlowType = 'use-section' | 'use-subsection' | 'use-unit' | null;
@@ -36,6 +36,7 @@ interface OutlineSidebarContextData {
   toggle: () => void;
   selectedContainerState?: SelectionState;
   openContainerInfoSidebar: (containerId: string, subsectionId?: string, sectionId?: string) => void;
+  clearSelection: () => void;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
@@ -91,7 +92,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   const openContainerInfoSidebar = useCallback((
     containerId: string,
     subsectionId?: string,
-    sectionId?: string
+    sectionId?: string,
   ) => {
     if (isOutlineNewDesignEnabled()) {
       setSelectedContainerState({ currentId: containerId, subsectionId, sectionId });
diff --git a/src/course-outline/outline-sidebar/PublishButon.tsx b/src/course-outline/outline-sidebar/PublishButon.tsx
index 5e4aaf612a..0288192c94 100644
--- a/src/course-outline/outline-sidebar/PublishButon.tsx
+++ b/src/course-outline/outline-sidebar/PublishButon.tsx
@@ -1,25 +1,22 @@
-import { FormattedMessage } from "@edx/frontend-platform/i18n"
-import { Button } from "@openedx/paragon"
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
 import messages from './messages';
 
 interface Props {
   onClick: () => void;
 }
 
-export const PublishButon = ({ onClick }: Props) => {
-  return (
-    <Button
-      variant="outline-primary w-100 rounded status-button draft-status"
-      className="m-1"
-      onClick={onClick}
-    >
-      <strong className="mr-1">
-        <FormattedMessage
-          {...messages.publishContainerButton}
-        />
-      </strong>
-      <FormattedMessage {...messages.draftText} />
-    </Button>
-  )
-}
-
+export const PublishButon = ({ onClick }: Props) => (
+  <Button
+    variant="outline-primary w-100 rounded status-button draft-status"
+    className="m-1"
+    onClick={onClick}
+  >
+    <strong className="mr-1">
+      <FormattedMessage
+        {...messages.publishContainerButton}
+      />
+    </strong>
+    <FormattedMessage {...messages.draftText} />
+  </Button>
+);
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index 0741ab8b40..899cb904c6 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -9,12 +9,12 @@ import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
 
-import messages from './messages';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import messages from './messages';
 import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
-import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface Props {
   sectionId: string;
@@ -64,16 +64,16 @@ export const SectionSidebar = ({ sectionId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { data: sectionData, isLoading } = useCourseItemData(sectionId);
-  const { openPublishModal  } = useCourseAuthoringContext();
+  const { openPublishModal } = useCourseAuthoringContext();
 
   const handlePublish = () => {
     if (sectionData?.hasChanges) {
       openPublishModal({
         value: sectionData,
         sectionId: sectionData.id,
-      })
+      });
     }
-  }
+  };
 
   if (isLoading) {
     return <Loading />;
@@ -103,4 +103,4 @@ export const SectionSidebar = ({ sectionId }: Props) => {
       </Tabs>
     </>
   );
-}
+};
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index 38fb609a2a..bfd0ca82d2 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -9,13 +9,13 @@ import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
 
-import messages from './messages';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
-import { LibraryReferenceCard } from './LibraryReferenceCard';
-import { PublishButon } from './PublishButon';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { LibraryReferenceCard } from './LibraryReferenceCard';
+import { PublishButon } from './PublishButon';
+import messages from './messages';
 
 interface Props {
   subsectionId: string;
@@ -66,16 +66,16 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { data: subsectionData, isLoading } = useCourseItemData(subsectionId);
   const { selectedContainerState } = useOutlineSidebarContext();
-  const { openPublishModal  } = useCourseAuthoringContext();
+  const { openPublishModal } = useCourseAuthoringContext();
 
   const handlePublish = () => {
     if (selectedContainerState?.sectionId && subsectionData?.hasChanges) {
       openPublishModal({
         value: subsectionData,
         sectionId: selectedContainerState?.sectionId,
-      })
+      });
     }
-  }
+  };
 
   if (isLoading) {
     return <Loading />;
@@ -105,4 +105,4 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
       </Tabs>
     </>
   );
-}
+};
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index 4324be6a8e..c65295d60c 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -1,7 +1,11 @@
 import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Stack, Tab, Tabs, useToggle } from '@openedx/paragon';
-import { Expand, OpenInFull, SchoolOutline, Tag } from '@openedx/paragon/icons';
+import {
+  Button, Stack, Tab, Tabs, useToggle,
+} from '@openedx/paragon';
+import {
+  OpenInFull, SchoolOutline, Tag,
+} from '@openedx/paragon/icons';
 
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
 import { ComponentCountSnippet } from '@src/generic/block-type-utils';
@@ -9,16 +13,16 @@ import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
 
-import messages from './messages';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
-import { LibraryReferenceCard } from './LibraryReferenceCard';
-import { PublishButon } from './PublishButon';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import XBlockContainerIframe from '@src/course-unit/xblock-container-iframe';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 import { Link } from 'react-router-dom';
+import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import { PublishButon } from './PublishButon';
+import { LibraryReferenceCard } from './LibraryReferenceCard';
+import messages from './messages';
 
 interface Props {
   unitId: string;
@@ -66,7 +70,7 @@ const UnitInfoSidebar = ({ unitId }: Props) => {
 
 export const UnitSidebar = ({ unitId }: Props) => {
   const intl = useIntl();
-  const [tab, setTab] = useState<'preview'| 'info' | 'settings'>('info');
+  const [tab, setTab] = useState<'preview' | 'info' | 'settings'>('info');
   const { data: unitData, isLoading } = useCourseItemData(unitId);
   const { selectedContainerState } = useOutlineSidebarContext();
   const { openPublishModal, getUnitUrl, courseId } = useCourseAuthoringContext();
@@ -76,9 +80,9 @@ export const UnitSidebar = ({ unitId }: Props) => {
       openPublishModal({
         value: unitData,
         sectionId: selectedContainerState?.sectionId,
-      })
+      });
     }
-  }
+  };
 
   if (isLoading) {
     return <Loading />;
@@ -90,7 +94,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
         title={unitData?.displayName || ''}
         icon={SchoolOutline}
       />
-      <Stack direction='horizontal' gap={1} className="mx-2">
+      <Stack direction="horizontal" gap={1} className="mx-2">
         <Button
           variant="outline-primary"
           as={Link}
@@ -139,4 +143,4 @@ export const UnitSidebar = ({ unitId }: Props) => {
       </Tabs>
     </>
   );
-}
+};
diff --git a/src/course-outline/publish-modal/PublishModal.tsx b/src/course-outline/publish-modal/PublishModal.tsx
index 5b749534ca..360d5be7c4 100644
--- a/src/course-outline/publish-modal/PublishModal.tsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -6,34 +6,36 @@ import {
   ActionRow,
 } from '@openedx/paragon';
 
-import { COURSE_BLOCK_NAMES } from '../constants';
-import messages from './messages';
 import { courseOutlineQueryKeys, usePublishCourseItem } from '@src/course-outline/data/apiHooks';
 import { XBlock } from '@src/data/types';
 import LoadingButton from '@src/generic/loading-button';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useQueryClient } from '@tanstack/react-query';
+import messages from './messages';
+import { COURSE_BLOCK_NAMES } from '../constants';
 
 const PublishModal = () => {
   const intl = useIntl();
-  const { isPublishModalOpen, currentPublishModalData, closePublishModal  } = useCourseAuthoringContext();
-  const { id, displayName, childInfo, category } = currentPublishModalData?.value || {};
+  const { isPublishModalOpen, currentPublishModalData, closePublishModal } = useCourseAuthoringContext();
+  const {
+    id, displayName, childInfo, category,
+  } = currentPublishModalData?.value || {};
   const categoryName = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
   const children: XBlock[] = childInfo?.children || [];
-  const publishMutation = usePublishCourseItem(currentPublishModalData?.sectionId)
+  const publishMutation = usePublishCourseItem(currentPublishModalData?.sectionId);
   const queryClient = useQueryClient();
 
   const childrenIds = useMemo(() => children.reduce((
     result: string[],
-    current: XBlock
+    current: XBlock,
   ): string[] => {
-      let grandChildren = current.childInfo?.children.filter((child) => child.hasChanges) || [];
-      let temp = [...result, ...grandChildren.map((child) => child.id)];
-      if (current.hasChanges) {
-        temp.push(current.id);
-      }
-      return temp;
-    }, []), [children])
+    const grandChildren = current.childInfo?.children.filter((child) => child.hasChanges) || [];
+    const temp = [...result, ...grandChildren.map((child) => child.id)];
+    if (current.hasChanges) {
+      temp.push(current.id);
+    }
+    return temp;
+  }, []), [children]);
 
   const onPublishSubmit = async () => {
     if (id) {
@@ -44,8 +46,8 @@ const PublishModal = () => {
           childrenIds.forEach((blockId) => {
             queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
           });
-        }
-      })
+        },
+      });
     }
   };
 
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index 824fefc3f0..b8c23fa90d 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -6,7 +6,7 @@ import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
 import SectionCard from './SectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
-import { OutlineInfoSidebar } from '../outline-sidebar/OutlineInfoSidebar';
+import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -99,11 +99,9 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     index={1}
     canMoveItem={jest.fn()}
     onOrderChange={jest.fn()}
-    onOpenPublishModal={jest.fn()}
     onOpenHighlightsModal={jest.fn()}
     onOpenDeleteModal={jest.fn()}
     onOpenConfigureModal={jest.fn()}
-    onEditSectionSubmit={onEditSectionSubmit}
     onDuplicateSubmit={jest.fn()}
     isSectionsExpanded
     isSelfPaced={false}
@@ -332,7 +330,7 @@ describe('<SectionCard />', () => {
     const mockSetCurrentPageKey = jest.fn();
 
     const testSidebarPage = {
-      component: OutlineInfoSidebar,
+      component: CourseInfoSidebar,
       icon: Info,
       title: '',
     };
@@ -354,6 +352,7 @@ describe('<SectionCard />', () => {
         startCurrentFlow: jest.fn(),
         stopCurrentFlow: jest.fn(),
         openContainerInfoSidebar: jest.fn(),
+        clearSelection: jest.fn(),
       }));
     setConfig({
       ...getConfig(),
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 260cbb2da8..98d8b38043 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -24,8 +24,8 @@ import type { XBlock } from '@src/data/types';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import messages from './messages';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
+import messages from './messages';
 
 interface SectionCardProps {
   section: XBlock,
@@ -64,7 +64,9 @@ const SectionCard = ({
   const { selectedContainerState, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
-  const { courseId, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
+  const {
+    courseId, openUnlinkModal, openPublishModal, setCurrentSelection,
+  } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   // Set initialData state from course outline and subsequently depend on its own state
   const { data: section = initialData } = useCourseItemData(initialData.id, initialData);
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index b7943b8eca..19b80ba87f 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -9,7 +9,7 @@ import userEvent from '@testing-library/user-event';
 import cardHeaderMessages from '../card-header/messages';
 import SubsectionCard from './SubsectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
-import { OutlineInfoSidebar } from '../outline-sidebar/OutlineInfoSidebar';
+import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
 let store;
 const containerKey = 'lct:org:lib:unit:1';
@@ -127,10 +127,8 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     isSelfPaced={false}
     getPossibleMoves={jest.fn()}
     onOrderChange={jest.fn()}
-    onOpenPublishModal={jest.fn()}
     onOpenDeleteModal={jest.fn()}
     isCustomRelativeDatesActive={false}
-    onEditSubmit={onEditSubectionSubmit}
     onDuplicateSubmit={jest.fn()}
     onOpenConfigureModal={jest.fn()}
     onPasteClick={jest.fn()}
@@ -442,7 +440,7 @@ describe('<SubsectionCard />', () => {
     const mockSetCurrentPageKey = jest.fn();
 
     const testSidebarPage = {
-      component: OutlineInfoSidebar,
+      component: CourseInfoSidebar,
       icon: Info,
       title: '',
     };
@@ -464,6 +462,7 @@ describe('<SubsectionCard />', () => {
         startCurrentFlow: jest.fn(),
         stopCurrentFlow: jest.fn(),
         openContainerInfoSidebar: jest.fn(),
+        clearSelection: jest.fn(),
       }));
     setConfig({
       ...getConfig(),
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 03636b313e..1829fca393 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -26,8 +26,8 @@ import type { XBlock } from '@src/data/types';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import messages from './messages';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
+import messages from './messages';
 
 interface SubsectionCardProps {
   section: XBlock,
@@ -72,7 +72,9 @@ const SubsectionCard = ({
   const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'subsection';
   const { sharedClipboardData, showPasteUnit } = useClipboard();
-  const { courseId, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
+  const {
+    courseId, openUnlinkModal, openPublishModal, setCurrentSelection,
+  } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   // Set initialData state from course outline and subsequently depend on its own state
   const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
index cf29be757c..36f505a67e 100644
--- a/src/course-outline/unit-card/UnitCard.test.tsx
+++ b/src/course-outline/unit-card/UnitCard.test.tsx
@@ -8,7 +8,7 @@ import { Info } from '@openedx/paragon/icons';
 import UnitCard from './UnitCard';
 import cardMessages from '../card-header/messages';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
-import { OutlineInfoSidebar } from '../outline-sidebar/OutlineInfoSidebar';
+import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -92,11 +92,8 @@ const renderComponent = (props?: object) => render(
     index={1}
     getPossibleMoves={jest.fn()}
     onOrderChange={jest.fn()}
-    onOpenPublishModal={jest.fn()}
     onOpenDeleteModal={jest.fn()}
-    onOpenUnlinkModal={jest.fn()}
     onOpenConfigureModal={jest.fn()}
-    onEditSubmit={jest.fn()}
     onDuplicateSubmit={jest.fn()}
     isSelfPaced={false}
     isCustomRelativeDatesActive={false}
@@ -301,7 +298,7 @@ describe('<UnitCard />', () => {
     const mockSetCurrentPageKey = jest.fn();
 
     const testSidebarPage = {
-      component: OutlineInfoSidebar,
+      component: CourseInfoSidebar,
       icon: Info,
       title: '',
     };
@@ -323,6 +320,7 @@ describe('<UnitCard />', () => {
         startCurrentFlow: jest.fn(),
         stopCurrentFlow: jest.fn(),
         openContainerInfoSidebar: jest.fn(),
+        clearSelection: jest.fn(),
       }));
     setConfig({
       ...getConfig(),
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 25448c43ce..17901bd66d 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -13,7 +13,6 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import CourseOutlineUnitCardExtraActionsSlot from '@src/plugin-slots/CourseOutlineUnitCardExtraActionsSlot';
 import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
-import { RequestStatusType } from '@src/data/constants';
 import CardHeader from '@src/course-outline/card-header/CardHeader';
 import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import TitleLink from '@src/course-outline/card-header/TitleLink';
@@ -25,15 +24,14 @@ import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import type { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 
 interface UnitCardProps {
   unit: XBlock;
   subsection: XBlock;
   section: XBlock;
   onOpenConfigureModal: () => void;
-  savingStatus?: RequestStatusType;
   onOpenDeleteModal: () => void;
   onDuplicateSubmit: () => void;
   index: number;
@@ -70,10 +68,15 @@ const UnitCard = ({
   const namePrefix = 'unit';
 
   const { copyToClipboard } = useClipboard();
-  const { courseId, getUnitUrl, openUnlinkModal, openPublishModal, setCurrentSelection } = useCourseAuthoringContext();
+  const {
+    courseId, getUnitUrl, openUnlinkModal, openPublishModal, setCurrentSelection,
+  } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
   const { data: section = initialSectionData } = useCourseItemData(initialSectionData.id, initialSectionData);
-  const { data: subsection = initialSubsectionData } = useCourseItemData(initialSubsectionData.id, initialSubsectionData);
+  const { data: subsection = initialSubsectionData } = useCourseItemData(
+    initialSubsectionData.id,
+    initialSubsectionData,
+  );
   const { data: unit = initialData } = useCourseItemData(initialData.id, initialData);
   const isScrolledToElement = locatorId === unit.id;
 
diff --git a/src/course-unit/xblock-container-iframe/index.tsx b/src/course-unit/xblock-container-iframe/index.tsx
index 4dec9fa425..2d449b0d0b 100644
--- a/src/course-unit/xblock-container-iframe/index.tsx
+++ b/src/course-unit/xblock-container-iframe/index.tsx
@@ -216,7 +216,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
     handleRefreshIframe,
   });
 
-  useIframeMessages(readonly ? {}: messageHandlers);
+  useIframeMessages(readonly ? {} : messageHandlers);
 
   return (
     <>
diff --git a/src/course-unit/xblock-container-iframe/types.ts b/src/course-unit/xblock-container-iframe/types.ts
index 8115dca47e..f09df13604 100644
--- a/src/course-unit/xblock-container-iframe/types.ts
+++ b/src/course-unit/xblock-container-iframe/types.ts
@@ -58,7 +58,7 @@ export type AccessManagedXBlockDataTypes = {
   ancestorHasStaffLock?: boolean;
   isPrereq?: boolean;
   prereqs?: XBlockPrereqs[];
-  prereq?: number;
+  prereq?: string;
   prereqMinScore?: number;
   prereqMinCompletion?: number;
   releasedToStudents?: boolean;
diff --git a/src/data/types.ts b/src/data/types.ts
index 8c0fd99d40..f4484e3aa4 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -158,4 +158,4 @@ export type SelectionState = {
   currentId: string;
   sectionId?: string;
   subsectionId?: string;
-}
+};
diff --git a/src/generic/configure-modal/ConfigureModal.jsx b/src/generic/configure-modal/ConfigureModal.jsx
index a62b9da8bb..d41458b8a2 100644
--- a/src/generic/configure-modal/ConfigureModal.jsx
+++ b/src/generic/configure-modal/ConfigureModal.jsx
@@ -361,7 +361,7 @@ ConfigureModal.propTypes = {
       blockDisplayName: PropTypes.string,
       blockUsageKey: PropTypes.string,
     }),
-    prereq: PropTypes.number,
+    prereq: PropTypes.string,
     prereqMinScore: PropTypes.number,
     prereqMinCompletion: PropTypes.number,
     releasedToStudents: PropTypes.bool,
@@ -374,7 +374,7 @@ ConfigureModal.propTypes = {
     showReviewRules: PropTypes.bool,
     onlineProctoringRules: PropTypes.string,
     discussionEnabled: PropTypes.bool,
-  }).isRequired,
+  }),
   isXBlockComponent: PropTypes.bool,
   isSelfPaced: PropTypes.bool.isRequired,
 };
diff --git a/src/generic/unlink-modal/data/apiHooks.ts b/src/generic/unlink-modal/data/apiHooks.ts
index 40f3ce80c7..f1af9b4319 100644
--- a/src/generic/unlink-modal/data/apiHooks.ts
+++ b/src/generic/unlink-modal/data/apiHooks.ts
@@ -2,8 +2,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { courseLibrariesQueryKeys } from '@src/course-libraries';
 import { getCourseKey } from '@src/generic/key-utils';
 
-import { unlinkDownstream } from './api';
 import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
+import { unlinkDownstream } from './api';
 
 export const useUnlinkDownstream = () => {
   const queryClient = useQueryClient();
diff --git a/src/hooks.ts b/src/hooks.ts
index 368f253d3a..ca11c7ae4a 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -215,7 +215,6 @@ export function useStickyState<T>(
   return [value, setValue];
 }
 
-
 export function useToggleWithValue<T>(defaultValue?: T): [
   isDefined: boolean, value: T | undefined, define: ((val: T) => void), undefine: () => void,
 ] {

From 1668e2fd6bce4cbd600ba4332be8edc89df21c3a Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 27 Jan 2026 12:53:03 +0530
Subject: [PATCH 17/60] fix: tests

---
 src/course-outline/CourseOutline.test.tsx     |  99 ++++---------
 .../OutlineAddChildButtons.test.tsx           |   2 +
 .../card-header/CardHeader.test.tsx           |  54 +++++---
 .../header-navigations/HeaderActions.test.tsx |  11 +-
 ...odal.test.jsx => HighlightsModal.test.tsx} |  65 ++++-----
 .../outline-sidebar/AddSidebar.test.tsx       |   2 +
 .../OutlineAlignSidebar.test.tsx              |   6 +-
 .../publish-modal/PublishModal.test.jsx       | 131 ------------------
 .../publish-modal/PublishModal.test.tsx       | 122 ++++++++++++++++
 .../section-card/SectionCard.test.tsx         |  39 ++----
 .../subsection-card/SubsectionCard.test.tsx   |  43 +++---
 .../unit-card/UnitCard.test.tsx               |  48 ++++---
 .../SubsectionUnitRedirect.test.tsx           |   2 +-
 src/hooks.ts                                  |   4 +-
 14 files changed, 293 insertions(+), 335 deletions(-)
 rename src/course-outline/highlights-modal/{HighlightsModal.test.jsx => HighlightsModal.test.tsx} (78%)
 delete mode 100644 src/course-outline/publish-modal/PublishModal.test.jsx
 create mode 100644 src/course-outline/publish-modal/PublishModal.test.tsx

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index 68784f1d47..4e1bcdbbaa 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -61,6 +61,7 @@ import {
   moveSubsection,
   moveUnit,
 } from './drag-helper/utils';
+import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 let axiosMock: import('axios-mock-adapter/types');
 let store;
@@ -141,7 +142,9 @@ const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 const renderComponent = () => render(
   <CourseAuthoringProvider courseId={courseId}>
     <OutlineSidebarPagesProvider>
-      <CourseOutline />
+      <OutlineSidebarProvider>
+        <CourseOutline />
+      </OutlineSidebarProvider>
     </OutlineSidebarPagesProvider>
   </CourseAuthoringProvider>,
 );
@@ -692,7 +695,7 @@ describe('<CourseOutline />', () => {
 
   it('check edit title works for section, subsection and unit', async () => {
     const { findAllByTestId } = renderComponent();
-    const checkEditTitle = async (section, element, item, newName, elementName) => {
+    const checkEditTitle = async (element, item, newName, elementName) => {
       axiosMock.reset();
       axiosMock
         .onPost(getCourseItemApiUrl(item.id))
@@ -700,26 +703,10 @@ describe('<CourseOutline />', () => {
       // mock section, subsection and unit name and check within the elements.
       // this is done to avoid adding conditions to this mock.
       axiosMock
-        .onGet(getXBlockApiUrl(section.id))
+        .onGet(getXBlockApiUrl(item.id))
         .reply(200, {
-          ...section,
+          ...item,
           display_name: newName,
-          childInfo: {
-            children: [
-              {
-                ...section.childInfo.children[0],
-                display_name: newName,
-                childInfo: {
-                  children: [
-                    {
-                      ...section.childInfo.children[0].childInfo.children[0],
-                      display_name: newName,
-                    },
-                  ],
-                },
-              },
-            ],
-          },
         });
 
       const editButton = await within(element).findByTestId(`${elementName}-edit-button`);
@@ -741,17 +728,17 @@ describe('<CourseOutline />', () => {
     // check section
     const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
     const [sectionElement] = await findAllByTestId('section-card');
-    await checkEditTitle(section, sectionElement, section, 'New section name', 'section');
+    await checkEditTitle(sectionElement, section, 'New section name', 'section');
 
     // check subsection
     const [subsection] = section.childInfo.children;
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
-    await checkEditTitle(section, subsectionElement, subsection, 'New subsection name', 'subsection');
+    await checkEditTitle(subsectionElement, subsection, 'New subsection name', 'subsection');
 
     // check unit
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
-    await checkEditTitle(section, unitElement, unit, 'New unit name', 'unit');
+    await checkEditTitle(unitElement, unit, 'New unit name', 'unit');
   });
 
   it('check whether section, subsection and unit is deleted when corresponding delete button is clicked', async () => {
@@ -877,47 +864,12 @@ describe('<CourseOutline />', () => {
           publish: 'make_public',
         })
         .reply(200, { dummy: 'value' });
-
-      let mockReturnValue = {
-        ...section,
-        childInfo: {
-          children: [
-            {
-              ...section.childInfo.children[0],
-              published: true,
-              visibilityState: 'live',
-            },
-            ...section.childInfo.children.slice(1),
-          ],
-        },
-      };
-      if (elementName === 'unit') {
-        mockReturnValue = {
-          ...section,
-          childInfo: {
-            children: [
-              {
-                ...section.childInfo.children[0],
-                childInfo: {
-                  displayName: 'Unit Tests',
-                  children: [
-                    {
-                      ...section.childInfo.children[0].childInfo.children[0],
-                      published: true,
-                      visibilityState: 'live',
-                    },
-                    ...section.childInfo.children[0].childInfo.children.slice(1),
-                  ],
-                },
-              },
-              ...section.childInfo.children.slice(1),
-            ],
-          },
-        };
-      }
       axiosMock
-        .onGet(getXBlockApiUrl(section.id))
-        .reply(200, mockReturnValue);
+        .onGet(getXBlockApiUrl(item.id))
+        .reply(200, {
+          ...item,
+          visibilityState: 'live',
+        });
 
       const menu = await within(element).findByTestId(`${elementName}-card-header__menu-button`);
       fireEvent.click(menu);
@@ -944,6 +896,17 @@ describe('<CourseOutline />', () => {
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
     const newReleaseDateIso = '2025-09-10T22:00:00Z';
     const newReleaseDate = '09/10/2025';
+
+    const [firstSection] = await findAllByTestId('section-card');
+
+    const sectionDropdownButton = await within(firstSection).findByTestId('section-card-header__menu-button');
+    await act(async () => fireEvent.click(sectionDropdownButton));
+    const configureBtn = await within(firstSection).findByTestId('section-card-header__menu-configure-button');
+    await act(async () => fireEvent.click(configureBtn));
+    let releaseDateStack = await findByTestId('release-date-stack');
+    let releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
+    expect(releaseDatePicker).toHaveValue('08/10/2023');
+
     axiosMock
       .onPost(getCourseItemApiUrl(section.id), {
         publish: 'republish',
@@ -961,16 +924,6 @@ describe('<CourseOutline />', () => {
         start: newReleaseDateIso,
       });
 
-    const [firstSection] = await findAllByTestId('section-card');
-
-    const sectionDropdownButton = await within(firstSection).findByTestId('section-card-header__menu-button');
-    await act(async () => fireEvent.click(sectionDropdownButton));
-    const configureBtn = await within(firstSection).findByTestId('section-card-header__menu-configure-button');
-    await act(async () => fireEvent.click(configureBtn));
-    let releaseDateStack = await findByTestId('release-date-stack');
-    let releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
-    expect(releaseDatePicker).toHaveValue('08/10/2023');
-
     await act(async () => fireEvent.change(releaseDatePicker, { target: { value: newReleaseDate } }));
     expect(releaseDatePicker).toHaveValue(newReleaseDate);
     const saveButton = await findByTestId('configure-save-button');
diff --git a/src/course-outline/OutlineAddChildButtons.test.tsx b/src/course-outline/OutlineAddChildButtons.test.tsx
index 044414245e..ed5ce3267d 100644
--- a/src/course-outline/OutlineAddChildButtons.test.tsx
+++ b/src/course-outline/OutlineAddChildButtons.test.tsx
@@ -16,6 +16,7 @@ const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
 const handleAddUnit = { mutateAsync: jest.fn() };
 const courseUsageKey = 'some/usage/key';
+const setCurrentSelection = jest.fn();
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 5,
@@ -24,6 +25,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    setCurrentSelection,
   }),
 }));
 
diff --git a/src/course-outline/card-header/CardHeader.test.tsx b/src/course-outline/card-header/CardHeader.test.tsx
index 05d5c43860..2566556012 100644
--- a/src/course-outline/card-header/CardHeader.test.tsx
+++ b/src/course-outline/card-header/CardHeader.test.tsx
@@ -7,13 +7,14 @@ import {
 import CardHeader from './CardHeader';
 import TitleButton from './TitleButton';
 import messages from './messages';
-import { RequestStatus } from '../../data/constants';
 import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
+import { userEvent } from '@testing-library/user-event';
 
 const onExpandMock = jest.fn();
 const onClickMenuButtonMock = jest.fn();
 const onClickPublishMock = jest.fn();
-const onClickEditMock = jest.fn();
 const onClickDeleteMock = jest.fn();
 const onClickUnlinkMock = jest.fn();
 const onClickDuplicateMock = jest.fn();
@@ -29,6 +30,12 @@ jest.mock('../../generic/data/api', () => ({
   getTagsCount: () => mockGetTagsCount(),
 }));
 
+let useUpdateCourseBlockNameMock = { mutateAsync: jest.fn(), isPending: false };
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  useUpdateCourseBlockName: () => useUpdateCourseBlockNameMock,
+}));
+
 const cardHeaderProps = {
   title: 'Some title',
   status: ITEM_BADGE_STATUS.live,
@@ -36,8 +43,6 @@ const cardHeaderProps = {
   hasChanges: false,
   onClickMenuButton: onClickMenuButtonMock,
   onClickPublish: onClickPublishMock,
-  onClickEdit: onClickEditMock,
-  isFormOpen: false,
   onEditSubmit: jest.fn(),
   closeForm: closeFormMock,
   isDisabledEditField: false,
@@ -80,7 +85,13 @@ const renderComponent = (props?: object, entry = '/') => {
       routerProps: {
         initialEntries: [entry],
       },
-      extraWrapper: OutlineSidebarProvider,
+      extraWrapper: ({ children }) => (
+        <CourseAuthoringProvider courseId={courseId}>
+          <OutlineSidebarProvider>
+            {children}
+          </OutlineSidebarProvider>
+        </CourseAuthoringProvider>
+      )
     },
   );
 };
@@ -214,20 +225,21 @@ describe('<CardHeader />', () => {
     expect(screen.getAllByText('Manage tags').length).toBe(2);
   });
 
-  it('calls onClickEdit when the button is clicked', async () => {
+  it('calls onClickMenu when the edit button is clicked', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     const editButton = await screen.findByTestId('subsection-edit-button');
-    await act(async () => fireEvent.click(editButton));
-    expect(onClickEditMock).toHaveBeenCalled();
+    await user.click(editButton);
+    expect(onClickMenuButtonMock).toHaveBeenCalled();
   });
 
-  it('check is field visible when isFormOpen is true', async () => {
-    renderComponent({
-      ...cardHeaderProps,
-      isFormOpen: true,
-    });
+  it('check is field visible when edit is clicked', async () => {
+    const user = userEvent.setup();
+    renderComponent();
 
+    const editButton = await screen.findByTestId('subsection-edit-button');
+    await user.click(editButton);
     expect(await screen.findByTestId('subsection-edit-field')).toBeInTheDocument();
     await waitFor(() => {
       expect(screen.queryByTestId('subsection-card-header__expanded-btn')).not.toBeInTheDocument();
@@ -248,15 +260,21 @@ describe('<CardHeader />', () => {
   });
 
   it('check editing is disabled when saving is in progress', async () => {
-    renderComponent({ ...cardHeaderProps, savingStatus: RequestStatus.IN_PROGRESS });
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    useUpdateCourseBlockNameMock.isPending = true;
+    const user = userEvent.setup();
+    renderComponent();
 
-    expect(await screen.findByTestId('subsection-edit-button')).toBeDisabled();
+    expect(await screen.findByLabelText('Rename')).toBeDisabled();
 
     // Ensure menu items related to editing are disabled
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
-    expect(await screen.findByTestId('subsection-card-header__menu-configure-button')).toHaveAttribute('aria-disabled', 'true');
-    expect(await screen.findByTestId('subsection-card-header__menu-manage-tags-button')).toHaveAttribute('aria-disabled', 'true');
+    await user.click(menuButton);
+    expect(await screen.findByText('Configure')).toHaveAttribute('aria-disabled', 'true');
+    expect(await screen.findByText('Manage tags')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('calls onClickDelete when item is clicked', async () => {
diff --git a/src/course-outline/header-navigations/HeaderActions.test.tsx b/src/course-outline/header-navigations/HeaderActions.test.tsx
index f5d4d76257..2e9a916f41 100644
--- a/src/course-outline/header-navigations/HeaderActions.test.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.test.tsx
@@ -6,6 +6,7 @@ import {
 import { OutlineSidebarProvider } from '@src/course-outline';
 import messages from './messages';
 import HeaderActions, { HeaderActionsProps } from './HeaderActions';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 const headerNavigationsActions = {
   lmsLink: '',
@@ -34,7 +35,15 @@ const renderComponent = (props?: Partial<HeaderActionsProps>) => render(
     courseActions={courseActions}
     {...props}
   />,
-  { extraWrapper: OutlineSidebarProvider },
+  {
+    extraWrapper: ({ children }) => (
+      <CourseAuthoringProvider courseId='1'>
+        <OutlineSidebarProvider>
+          {children}
+        </OutlineSidebarProvider>
+      </CourseAuthoringProvider>
+    )
+  },
 );
 
 describe('<HeaderActions />', () => {
diff --git a/src/course-outline/highlights-modal/HighlightsModal.test.jsx b/src/course-outline/highlights-modal/HighlightsModal.test.tsx
similarity index 78%
rename from src/course-outline/highlights-modal/HighlightsModal.test.jsx
rename to src/course-outline/highlights-modal/HighlightsModal.test.tsx
index 4b57b59f92..8421c61339 100644
--- a/src/course-outline/highlights-modal/HighlightsModal.test.jsx
+++ b/src/course-outline/highlights-modal/HighlightsModal.test.tsx
@@ -1,22 +1,30 @@
-import React from 'react';
 import {
-  render, fireEvent, act, waitFor,
-} from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { useSelector } from 'react-redux';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import initializeStore from '../../store';
+  initializeMocks, render, fireEvent, act, waitFor,
+} from '@src/testUtils';
+
 import HighlightsModal from './HighlightsModal';
 import messages from './messages';
 
-let store;
 const mockPathname = '/foo-bar';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
+const currentItemMock = {
+  highlights: ['Highlight 1', 'Highlight 2'],
+  displayName: 'Test Section',
+};
+
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    courseUsageKey: 'course-usage-key',
+    courseDetails: { name: 'Test course' },
+    currentSelection: { currentId: 1 },
+  }),
+}));
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  useCourseItemData: () => ({
+    data: currentItemMock
+  }),
 }));
 
 jest.mock('react-router-dom', () => ({
@@ -32,39 +40,20 @@ jest.mock('../../help-urls/hooks', () => ({
   }),
 }));
 
-const currentItemMock = {
-  highlights: ['Highlight 1', 'Highlight 2'],
-  displayName: 'Test Section',
-};
-
 const onCloseMock = jest.fn();
 const onSubmitMock = jest.fn();
 
 const renderComponent = () => render(
-  <AppProvider store={store}>
-    <IntlProvider locale="en">
-      <HighlightsModal
-        isOpen
-        onClose={onCloseMock}
-        onSubmit={onSubmitMock}
-      />
-    </IntlProvider>,
-  </AppProvider>,
+  <HighlightsModal
+    isOpen
+    onClose={onCloseMock}
+    onSubmit={onSubmitMock}
+  />,
 );
 
 describe('<HighlightsModal />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    useSelector.mockReturnValue(currentItemMock);
+    initializeMocks();
   });
 
   it('renders HighlightsModal component correctly', () => {
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index f3dd87a3e6..7a371f1169 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -31,6 +31,7 @@ mockLibraryBlockMetadata.applyMock();
 mockGetContainerMetadata.applyMock();
 
 const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
+const setCurrentSelection = jest.fn();
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 5,
@@ -39,6 +40,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    setCurrentSelection,
   }),
 }));
 
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
index 1c1b133206..3188294d96 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import * as CourseAuthoringContext from '@src/CourseAuthoringContext';
@@ -25,8 +24,9 @@ describe('OutlineAlignSidebar', () => {
     jest
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
       .mockReturnValue({
-        currentContainerId:
-          'block-v1:test+course+run+type@sequential+block@seq1',
+        selectedContainerState: {
+          currentId: 'block-v1:test+course+run+type@sequential+block@seq1',
+        },
       } as any);
     jest
       .spyOn(CourseDetailsApi, 'useCourseDetails')
diff --git a/src/course-outline/publish-modal/PublishModal.test.jsx b/src/course-outline/publish-modal/PublishModal.test.jsx
deleted file mode 100644
index f83a993d70..0000000000
--- a/src/course-outline/publish-modal/PublishModal.test.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { useSelector } from 'react-redux';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import initializeStore from '../../store';
-import PublishModal from './PublishModal';
-import messages from './messages';
-
-let store;
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
-jest.mock('@edx/frontend-platform/i18n', () => ({
-  ...jest.requireActual('@edx/frontend-platform/i18n'),
-  useIntl: () => ({
-    formatMessage: (message) => message.defaultMessage,
-  }),
-}));
-
-const currentItemMock = {
-  displayName: 'Publish',
-  childInfo: {
-    displayName: 'Subsection',
-    children: [
-      {
-        displayName: 'Subsection 1',
-        id: 1,
-        hasChanges: true,
-        childInfo: {
-          displayName: 'Unit',
-          children: [
-            {
-              id: 11,
-              displayName: 'Subsection_1 Unit 1',
-              hasChanges: true,
-            },
-          ],
-        },
-      },
-      {
-        displayName: 'Subsection 2',
-        id: 2,
-        hasChanges: true,
-        childInfo: {
-          displayName: 'Unit',
-          children: [
-            {
-              id: 21,
-              displayName: 'Subsection_2 Unit 1',
-              hasChanges: true,
-            },
-          ],
-        },
-      },
-      {
-        displayName: 'Subsection 3',
-        id: 3,
-        childInfo: {
-          children: [],
-        },
-      },
-    ],
-  },
-};
-
-const onCloseMock = jest.fn();
-const onPublishSubmitMock = jest.fn();
-
-const renderComponent = () => render(
-  <AppProvider store={store}>
-    <IntlProvider locale="en">
-      <PublishModal
-        isOpen
-        onClose={onCloseMock}
-        onPublishSubmit={onPublishSubmitMock}
-      />
-    </IntlProvider>,
-  </AppProvider>,
-);
-
-describe('<PublishModal />', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    useSelector.mockReturnValue(currentItemMock);
-  });
-
-  it('renders PublishModal component correctly', () => {
-    const { getByText, getByRole, queryByText } = renderComponent();
-
-    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.description.defaultMessage)).toBeInTheDocument();
-    expect(getByText(/Subsection 1/i)).toBeInTheDocument();
-    expect(getByText(/Subsection_1 Unit 1/i)).toBeInTheDocument();
-    expect(getByText(/Subsection 2/i)).toBeInTheDocument();
-    expect(getByText(/Subsection_2 Unit 1/i)).toBeInTheDocument();
-    expect(queryByText(/Subsection 3/i)).not.toBeInTheDocument();
-    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
-    expect(getByRole('button', { name: messages.publishButton.defaultMessage })).toBeInTheDocument();
-  });
-
-  it('calls the onClose function when the cancel button is clicked', () => {
-    const { getByRole } = renderComponent();
-
-    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
-    fireEvent.click(cancelButton);
-    expect(onCloseMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls the onPublishSubmit function when save button is clicked', async () => {
-    const { getByRole } = renderComponent();
-
-    const publishButton = getByRole('button', { name: messages.publishButton.defaultMessage });
-    fireEvent.click(publishButton);
-    expect(onPublishSubmitMock).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/src/course-outline/publish-modal/PublishModal.test.tsx b/src/course-outline/publish-modal/PublishModal.test.tsx
new file mode 100644
index 0000000000..4889766435
--- /dev/null
+++ b/src/course-outline/publish-modal/PublishModal.test.tsx
@@ -0,0 +1,122 @@
+import { initializeMocks, screen, render } from '@src/testUtils';
+
+import PublishModal from './PublishModal';
+import messages from './messages';
+import userEvent from '@testing-library/user-event';
+
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const currentItemMock = {
+  id: 'section-id-1',
+  displayName: 'Publish',
+  childInfo: {
+    displayName: 'Subsection',
+    children: [
+      {
+        displayName: 'Subsection 1',
+        id: 1,
+        hasChanges: true,
+        childInfo: {
+          displayName: 'Unit',
+          children: [
+            {
+              id: 11,
+              displayName: 'Subsection_1 Unit 1',
+              hasChanges: true,
+            },
+          ],
+        },
+      },
+      {
+        displayName: 'Subsection 2',
+        id: 2,
+        hasChanges: true,
+        childInfo: {
+          displayName: 'Unit',
+          children: [
+            {
+              id: 21,
+              displayName: 'Subsection_2 Unit 1',
+              hasChanges: true,
+            },
+          ],
+        },
+      },
+      {
+        displayName: 'Subsection 3',
+        id: 3,
+        childInfo: {
+          children: [],
+        },
+      },
+    ],
+  },
+};
+
+const onCloseMock = jest.fn();
+const onPublishSubmitMock = jest.fn();
+
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    courseUsageKey: 'course-usage-key',
+    isPublishModalOpen: true,
+    currentPublishModalData: {value: currentItemMock},
+    closePublishModal: onCloseMock,
+  }),
+}));
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  usePublishCourseItem: () => ({
+    mutateAsync: onPublishSubmitMock,
+  }),
+}));
+
+const renderComponent = () => render(
+  <PublishModal />
+);
+
+describe('<PublishModal />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders PublishModal component correctly', async () => {
+    renderComponent();
+
+    expect(await screen.findByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(await screen.findByText(messages.description.defaultMessage)).toBeInTheDocument();
+    expect(await screen.findByText(/Subsection 1/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Subsection_1 Unit 1/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Subsection 2/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Subsection_2 Unit 1/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Subsection 3/i)).not.toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: messages.publishButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the onClose function when the cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const cancelButton = await screen.findByRole('button', { name: messages.cancelButton.defaultMessage });
+    await user.click(cancelButton);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the onPublishSubmit function when save button is clicked', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const publishButton = await screen.findByRole('button', { name: messages.publishButton.defaultMessage });
+    await user.click(publishButton);
+    expect(onPublishSubmitMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index b8c23fa90d..abe750603b 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -7,9 +7,11 @@ import { Info } from '@openedx/paragon/icons';
 import SectionCard from './SectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
 import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
+import userEvent from '@testing-library/user-event';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
+const setCurrentSelection = jest.fn();
 
 jest.mock('@src/course-unit/data/apiHooks', () => ({
   useAcceptLibraryBlockChanges: () => ({
@@ -25,6 +27,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     courseId: 5,
     handleAddSubsectionFromLibrary: jest.fn(),
     handleNewSubsectionSubmit: jest.fn(),
+    setCurrentSelection,
   }),
 }));
 
@@ -91,8 +94,6 @@ const section = {
   },
 } satisfies Partial<XBlock> as XBlock;
 
-const onEditSectionSubmit = jest.fn();
-
 const renderComponent = (props?: object, entry = '/course/:courseId') => render(
   <SectionCard
     section={section}
@@ -172,24 +173,6 @@ describe('<SectionCard />', () => {
     expect(screen.queryByRole('button', { name: 'New subsection' })).toBeInTheDocument();
   });
 
-  it('title only updates if changed', async () => {
-    renderComponent();
-
-    let editButton = await screen.findByTestId('section-edit-button');
-    fireEvent.click(editButton);
-    let editField = await screen.findByTestId('section-edit-field');
-    fireEvent.blur(editField);
-
-    expect(onEditSectionSubmit).not.toHaveBeenCalled();
-
-    editButton = await screen.findByTestId('section-edit-button');
-    fireEvent.click(editButton);
-    editField = await screen.findByTestId('section-edit-field');
-    fireEvent.change(editField, { target: { value: 'some random value' } });
-    fireEvent.blur(editField);
-    expect(onEditSectionSubmit).toHaveBeenCalled();
-  });
-
   it('hides header based on isHeaderVisible flag', async () => {
     const { queryByTestId } = renderComponent({
       section: {
@@ -307,6 +290,7 @@ describe('<SectionCard />', () => {
   });
 
   it('should open legacy manage tags', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
@@ -315,18 +299,19 @@ describe('<SectionCard />', () => {
     renderComponent();
     const element = await screen.findByTestId('section-card');
     const menu = await within(element).findByTestId('section-card-header__menu-button');
-    fireEvent.click(menu);
+    await user.click(menu);
 
     const manageTagsBtn = await within(element).findByTestId('section-card-header__menu-manage-tags-button');
     expect(manageTagsBtn).toBeInTheDocument();
 
-    fireEvent.click(manageTagsBtn);
+    await user.click(manageTagsBtn);
 
     const drawer = await screen.findByRole('alert');
     expect(within(drawer).getByText(/manage tags/i));
   });
 
   it('should open align sidebar', async () => {
+    const user = userEvent.setup();
     const mockSetCurrentPageKey = jest.fn();
 
     const testSidebarPage = {
@@ -362,15 +347,19 @@ describe('<SectionCard />', () => {
     renderComponent();
     const element = await screen.findByTestId('section-card');
     const menu = await within(element).findByTestId('section-card-header__menu-button');
-    fireEvent.click(menu);
+    await user.click(menu);
 
     const manageTagsBtn = await within(element).findByTestId('section-card-header__menu-manage-tags-button');
     expect(manageTagsBtn).toBeInTheDocument();
 
-    fireEvent.click(manageTagsBtn);
+    await user.click(manageTagsBtn);
 
     await waitFor(() => {
-      expect(mockSetCurrentPageKey).toHaveBeenCalledWith('align', section.id);
+      expect(mockSetCurrentPageKey).toHaveBeenCalledWith('align');
+    });
+    expect(setCurrentSelection).toHaveBeenCalledWith({
+      currentId: section.id,
+      sectionId: section.id,
     });
   });
 });
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 19b80ba87f..6157241c08 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -14,6 +14,7 @@ import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 let store;
 const containerKey = 'lct:org:lib:unit:1';
 const handleOnAddUnitFromLibrary = { mutateAsync: jest.fn(), isPending: false };
+const setCurrentSelection = jest.fn();
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -33,6 +34,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     handleAddUnit: handleOnAddUnitFromLibrary,
     handleAddSubsection: {},
     handleAddSection: {},
+    setCurrentSelection,
   }),
 }));
 
@@ -117,8 +119,6 @@ const section: XBlock = {
   },
 } satisfies Partial<XBlock> as XBlock;
 
-const onEditSubectionSubmit = jest.fn();
-
 const renderComponent = (props?: object, entry = '/course/:courseId') => render(
   <SubsectionCard
     section={section}
@@ -204,28 +204,11 @@ describe('<SubsectionCard />', () => {
 
     const menu = await screen.findByTestId('subsection-card-header__menu');
     fireEvent.click(menu);
-    const { currentSection, currentSubsection, currentItem } = store.getState().courseOutline;
-    expect(currentSection).toEqual(section);
-    expect(currentSubsection).toEqual(subsection);
-    expect(currentItem).toEqual(subsection);
-  });
-
-  it('title only updates if changed', async () => {
-    renderComponent();
-
-    let editButton = await screen.findByTestId('subsection-edit-button');
-    fireEvent.click(editButton);
-    let editField = await screen.findByTestId('subsection-edit-field');
-    fireEvent.blur(editField);
-
-    expect(onEditSubectionSubmit).not.toHaveBeenCalled();
-
-    editButton = await screen.findByTestId('subsection-edit-button');
-    fireEvent.click(editButton);
-    editField = await screen.findByTestId('subsection-edit-field');
-    fireEvent.change(editField, { target: { value: 'some random value' } });
-    fireEvent.keyDown(editField, { key: 'Enter', keyCode: 13 });
-    expect(onEditSubectionSubmit).toHaveBeenCalled();
+    expect(setCurrentSelection).toHaveBeenCalledWith({
+      currentId: subsection.id,
+      subsectionId: subsection.id,
+      sectionId: section.id,
+    });
   });
 
   it('hides header based on isHeaderVisible flag', async () => {
@@ -437,6 +420,7 @@ describe('<SubsectionCard />', () => {
   });
 
   it('should open align sidebar', async () => {
+    const user = userEvent.setup();
     const mockSetCurrentPageKey = jest.fn();
 
     const testSidebarPage = {
@@ -472,15 +456,20 @@ describe('<SubsectionCard />', () => {
     renderComponent();
     const element = await screen.findByTestId('subsection-card');
     const menu = await within(element).findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menu);
+    await user.click(menu);
 
     const manageTagsBtn = await within(element).findByTestId('subsection-card-header__menu-manage-tags-button');
     expect(manageTagsBtn).toBeInTheDocument();
 
-    fireEvent.click(manageTagsBtn);
+    await user.click(manageTagsBtn);
 
     await waitFor(() => {
-      expect(mockSetCurrentPageKey).toHaveBeenCalledWith('align', subsection.id);
+      expect(mockSetCurrentPageKey).toHaveBeenCalledWith('align');
+    });
+    expect(setCurrentSelection).toHaveBeenCalledWith({
+      currentId: subsection.id,
+      subsectionId: subsection.id,
+      sectionId: section.id,
     });
   });
 });
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
index 36f505a67e..44aa77cde0 100644
--- a/src/course-outline/unit-card/UnitCard.test.tsx
+++ b/src/course-outline/unit-card/UnitCard.test.tsx
@@ -1,6 +1,6 @@
 import { getConfig, setConfig } from '@edx/frontend-platform';
 import {
-  act, fireEvent, initializeMocks, render, screen, waitFor, within,
+  initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 
 import { XBlock } from '@src/data/types';
@@ -9,9 +9,11 @@ import UnitCard from './UnitCard';
 import cardMessages from '../card-header/messages';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
 import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
+import userEvent from '@testing-library/user-event';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
+const setCurrentSelection = jest.fn();
 
 jest.mock('@src/course-unit/data/apiHooks', () => ({
   useAcceptLibraryBlockChanges: () => ({
@@ -26,6 +28,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 5,
     getUnitUrl: (id: string) => `/some/${id}`,
+    setCurrentSelection,
   }),
 }));
 
@@ -129,7 +132,8 @@ describe('<UnitCard />', () => {
     expect(card).not.toHaveClass('outline-card-selected');
   });
 
-  it('render UnitCard component in selected state', () => {
+  it('render UnitCard component in selected state', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
@@ -146,7 +150,7 @@ describe('<UnitCard />', () => {
     // Get the <Row> that contains the card and click it to select the card
     const el = container.querySelector('div.row.mx-0') as HTMLInputElement;
     expect(el).not.toBeNull();
-    fireEvent.click(el!);
+    await user.click(el!);
 
     // The card is selected
     expect(card).toHaveClass('outline-card-selected');
@@ -163,6 +167,7 @@ describe('<UnitCard />', () => {
   });
 
   it('hides duplicate & delete option based on duplicable & deletable action flag', async () => {
+    const user = userEvent.setup();
     const { findByTestId } = renderComponent({
       unit: {
         ...unit,
@@ -176,12 +181,13 @@ describe('<UnitCard />', () => {
     });
     const element = await findByTestId('unit-card');
     const menu = await within(element).findByTestId('unit-card-header__menu-button');
-    await act(async () => fireEvent.click(menu));
+    await user.click(menu);
     expect(within(element).queryByTestId('unit-card-header__menu-duplicate-button')).not.toBeInTheDocument();
     expect(within(element).queryByTestId('unit-card-header__menu-delete-button')).not.toBeInTheDocument();
   });
 
   it('hides move, duplicate & delete options if parent was imported from library', async () => {
+    const user = userEvent.setup();
     const { findByTestId } = renderComponent({
       subsection: {
         ...subsection,
@@ -194,7 +200,7 @@ describe('<UnitCard />', () => {
     });
     const element = await findByTestId('unit-card');
     const menu = await within(element).findByTestId('unit-card-header__menu-button');
-    await act(async () => fireEvent.click(menu));
+    await user.click(menu);
     expect(within(element).queryByTestId('unit-card-header__menu-duplicate-button')).not.toBeInTheDocument();
     expect(within(element).queryByTestId('unit-card-header__menu-delete-button')).not.toBeInTheDocument();
     expect(
@@ -206,6 +212,7 @@ describe('<UnitCard />', () => {
   });
 
   it('shows copy option based on enableCopyPasteUnits flag', async () => {
+    const user = userEvent.setup();
     const { findByTestId } = renderComponent({
       unit: {
         ...unit,
@@ -214,7 +221,7 @@ describe('<UnitCard />', () => {
     });
     const element = await findByTestId('unit-card');
     const menu = await within(element).findByTestId('unit-card-header__menu-button');
-    await act(async () => fireEvent.click(menu));
+    await user.click(menu);
     expect(within(element).queryByText(cardMessages.menuCopy.defaultMessage)).toBeInTheDocument();
   });
 
@@ -230,51 +237,54 @@ describe('<UnitCard />', () => {
   });
 
   it('should sync unit changes from upstream', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     expect(await screen.findByTestId('unit-card-header')).toBeInTheDocument();
 
     // Click on sync button
     const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
-    fireEvent.click(syncButton);
+    await user.click(syncButton);
 
     // Should open compare preview modal
     expect(screen.getByRole('heading', { name: /preview changes: unit name/i })).toBeInTheDocument();
 
     // Click on accept changes
     const acceptChangesButton = screen.getByText(/accept changes/i);
-    fireEvent.click(acceptChangesButton);
+    await user.click(acceptChangesButton);
 
     await waitFor(() => expect(mockUseAcceptLibraryBlockChanges).toHaveBeenCalled());
   });
 
   it('should decline sync unit changes from upstream', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     expect(await screen.findByTestId('unit-card-header')).toBeInTheDocument();
 
     // Click on sync button
     const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
-    fireEvent.click(syncButton);
+    await user.click(syncButton);
 
     // Should open compare preview modal
     expect(screen.getByRole('heading', { name: /preview changes: unit name/i })).toBeInTheDocument();
 
     // Click on ignore changes
     const ignoreChangesButton = screen.getByRole('button', { name: /ignore changes/i });
-    fireEvent.click(ignoreChangesButton);
+    await user.click(ignoreChangesButton);
 
     // Should open the confirmation modal
     expect(screen.getByRole('heading', { name: /ignore these changes\?/i })).toBeInTheDocument();
 
     // Click on ignore button
     const ignoreButton = screen.getByRole('button', { name: /ignore/i });
-    fireEvent.click(ignoreButton);
+    await user.click(ignoreButton);
 
     await waitFor(() => expect(mockUseIgnoreLibraryBlockChanges).toHaveBeenCalled());
   });
 
   it('should open legacy manage tags', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
@@ -283,18 +293,19 @@ describe('<UnitCard />', () => {
     renderComponent();
     const element = await screen.findByTestId('unit-card');
     const menu = await within(element).findByTestId('unit-card-header__menu-button');
-    fireEvent.click(menu);
+    await user.click(menu);
 
     const manageTagsBtn = await within(element).findByTestId('unit-card-header__menu-manage-tags-button');
     expect(manageTagsBtn).toBeInTheDocument();
 
-    fireEvent.click(manageTagsBtn);
+    await user.click(manageTagsBtn);
 
     const drawer = await screen.findByRole('alert');
     expect(within(drawer).getByText(/manage tags/i));
   });
 
   it('should open align sidebar', async () => {
+    const user = userEvent.setup();
     const mockSetCurrentPageKey = jest.fn();
 
     const testSidebarPage = {
@@ -330,15 +341,20 @@ describe('<UnitCard />', () => {
     renderComponent();
     const element = await screen.findByTestId('unit-card');
     const menu = await within(element).findByTestId('unit-card-header__menu-button');
-    fireEvent.click(menu);
+    await user.click(menu);
 
     const manageTagsBtn = await within(element).findByTestId('unit-card-header__menu-manage-tags-button');
     expect(manageTagsBtn).toBeInTheDocument();
 
-    fireEvent.click(manageTagsBtn);
+    await user.click(manageTagsBtn);
 
     await waitFor(() => {
-      expect(mockSetCurrentPageKey).toHaveBeenCalledWith('align', unit.id);
+      expect(mockSetCurrentPageKey).toHaveBeenCalledWith('align');
+    });
+    expect(setCurrentSelection).toHaveBeenCalledWith({
+      currentId: unit.id,
+      subsectionId: subsection.id,
+      sectionId: section.id,
     });
   });
 });
diff --git a/src/course-unit/SubsectionUnitRedirect.test.tsx b/src/course-unit/SubsectionUnitRedirect.test.tsx
index db5fe8a8c9..8a8f14f082 100644
--- a/src/course-unit/SubsectionUnitRedirect.test.tsx
+++ b/src/course-unit/SubsectionUnitRedirect.test.tsx
@@ -7,7 +7,7 @@ import { getXBlockApiUrl } from '../course-outline/data/api';
 
 let axiosMock;
 const courseId = '123';
-const subsectionId = 'block-v1+edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5';
+const subsectionId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5';
 const path = '/subsection/:subsectionId';
 
 const expectedCourseItemDataWithUnit = {
diff --git a/src/hooks.ts b/src/hooks.ts
index ca11c7ae4a..c697e01fbf 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -38,10 +38,10 @@ export const useEscapeClick = ({ onEscape, dependency }: { onEscape: () => void,
       }
     };
 
-    document.addEventListener('keydown', handleEscapeClick);
+    window.addEventListener('keydown', handleEscapeClick);
 
     return () => {
-      document.removeEventListener('keydown', handleEscapeClick);
+      window.removeEventListener('keydown', handleEscapeClick);
     };
   }, [dependency]);
 };

From e37dbe175518f713a516d0187052f30612f9a0e7 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 27 Jan 2026 12:53:56 +0530
Subject: [PATCH 18/60] fix: lint issues

---
 src/course-outline/CourseOutline.test.tsx              |  2 +-
 src/course-outline/card-header/CardHeader.test.tsx     | 10 +++++-----
 .../header-navigations/HeaderActions.test.tsx          |  6 +++---
 .../highlights-modal/HighlightsModal.test.tsx          |  2 +-
 src/course-outline/publish-modal/PublishModal.test.tsx |  7 +++----
 src/course-outline/section-card/SectionCard.test.tsx   |  2 +-
 .../subsection-card/SubsectionCard.test.tsx            |  1 -
 src/course-outline/unit-card/UnitCard.test.tsx         |  2 +-
 8 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index 4e1bcdbbaa..e7ee842443 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -18,6 +18,7 @@ import {
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import { userEvent } from '@testing-library/user-event';
+import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import {
   getCourseBestPracticesApiUrl,
   getCourseLaunchApiUrl,
@@ -61,7 +62,6 @@ import {
   moveSubsection,
   moveUnit,
 } from './drag-helper/utils';
-import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 let axiosMock: import('axios-mock-adapter/types');
 let store;
diff --git a/src/course-outline/card-header/CardHeader.test.tsx b/src/course-outline/card-header/CardHeader.test.tsx
index 2566556012..840493c7a6 100644
--- a/src/course-outline/card-header/CardHeader.test.tsx
+++ b/src/course-outline/card-header/CardHeader.test.tsx
@@ -4,13 +4,13 @@ import { ITEM_BADGE_STATUS } from '@src/course-outline/constants';
 import {
   act, fireEvent, initializeMocks, render, screen, waitFor,
 } from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
+import { userEvent } from '@testing-library/user-event';
 import CardHeader from './CardHeader';
 import TitleButton from './TitleButton';
 import messages from './messages';
 import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
-import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
-import { userEvent } from '@testing-library/user-event';
 
 const onExpandMock = jest.fn();
 const onClickMenuButtonMock = jest.fn();
@@ -30,7 +30,7 @@ jest.mock('../../generic/data/api', () => ({
   getTagsCount: () => mockGetTagsCount(),
 }));
 
-let useUpdateCourseBlockNameMock = { mutateAsync: jest.fn(), isPending: false };
+const useUpdateCourseBlockNameMock = { mutateAsync: jest.fn(), isPending: false };
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   ...jest.requireActual('@src/course-outline/data/apiHooks'),
   useUpdateCourseBlockName: () => useUpdateCourseBlockNameMock,
@@ -91,7 +91,7 @@ const renderComponent = (props?: object, entry = '/') => {
             {children}
           </OutlineSidebarProvider>
         </CourseAuthoringProvider>
-      )
+      ),
     },
   );
 };
diff --git a/src/course-outline/header-navigations/HeaderActions.test.tsx b/src/course-outline/header-navigations/HeaderActions.test.tsx
index 2e9a916f41..772339f298 100644
--- a/src/course-outline/header-navigations/HeaderActions.test.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.test.tsx
@@ -4,9 +4,9 @@ import {
 } from '@src/testUtils';
 
 import { OutlineSidebarProvider } from '@src/course-outline';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import messages from './messages';
 import HeaderActions, { HeaderActionsProps } from './HeaderActions';
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 const headerNavigationsActions = {
   lmsLink: '',
@@ -37,12 +37,12 @@ const renderComponent = (props?: Partial<HeaderActionsProps>) => render(
   />,
   {
     extraWrapper: ({ children }) => (
-      <CourseAuthoringProvider courseId='1'>
+      <CourseAuthoringProvider courseId="1">
         <OutlineSidebarProvider>
           {children}
         </OutlineSidebarProvider>
       </CourseAuthoringProvider>
-    )
+    ),
   },
 );
 
diff --git a/src/course-outline/highlights-modal/HighlightsModal.test.tsx b/src/course-outline/highlights-modal/HighlightsModal.test.tsx
index 8421c61339..cc9fecff9b 100644
--- a/src/course-outline/highlights-modal/HighlightsModal.test.tsx
+++ b/src/course-outline/highlights-modal/HighlightsModal.test.tsx
@@ -23,7 +23,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
 
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   useCourseItemData: () => ({
-    data: currentItemMock
+    data: currentItemMock,
   }),
 }));
 
diff --git a/src/course-outline/publish-modal/PublishModal.test.tsx b/src/course-outline/publish-modal/PublishModal.test.tsx
index 4889766435..08c42d4801 100644
--- a/src/course-outline/publish-modal/PublishModal.test.tsx
+++ b/src/course-outline/publish-modal/PublishModal.test.tsx
@@ -1,9 +1,8 @@
 import { initializeMocks, screen, render } from '@src/testUtils';
 
+import userEvent from '@testing-library/user-event';
 import PublishModal from './PublishModal';
 import messages from './messages';
-import userEvent from '@testing-library/user-event';
-
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
@@ -67,7 +66,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     courseId: 5,
     courseUsageKey: 'course-usage-key',
     isPublishModalOpen: true,
-    currentPublishModalData: {value: currentItemMock},
+    currentPublishModalData: { value: currentItemMock },
     closePublishModal: onCloseMock,
   }),
 }));
@@ -80,7 +79,7 @@ jest.mock('@src/course-outline/data/apiHooks', () => ({
 }));
 
 const renderComponent = () => render(
-  <PublishModal />
+  <PublishModal />,
 );
 
 describe('<PublishModal />', () => {
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index abe750603b..ce74d6aec5 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -4,10 +4,10 @@ import {
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
+import userEvent from '@testing-library/user-event';
 import SectionCard from './SectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
 import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
-import userEvent from '@testing-library/user-event';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 6157241c08..175b4dd6f0 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -11,7 +11,6 @@ import SubsectionCard from './SubsectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
 import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
-let store;
 const containerKey = 'lct:org:lib:unit:1';
 const handleOnAddUnitFromLibrary = { mutateAsync: jest.fn(), isPending: false };
 const setCurrentSelection = jest.fn();
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
index 44aa77cde0..c273050eef 100644
--- a/src/course-outline/unit-card/UnitCard.test.tsx
+++ b/src/course-outline/unit-card/UnitCard.test.tsx
@@ -5,11 +5,11 @@ import {
 
 import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
+import userEvent from '@testing-library/user-event';
 import UnitCard from './UnitCard';
 import cardMessages from '../card-header/messages';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
 import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
-import userEvent from '@testing-library/user-event';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();

From 91762538405b3b96693af485d92a301df68fc278 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 27 Jan 2026 13:01:01 +0530
Subject: [PATCH 19/60] fix: lint issues

---
 src/course-outline/subsection-card/SubsectionCard.test.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 175b4dd6f0..81cc2022f0 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -149,8 +149,7 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
 
 describe('<SubsectionCard />', () => {
   beforeEach(() => {
-    const mocks = initializeMocks();
-    store = mocks.reduxStore;
+    initializeMocks();
   });
 
   it('render SubsectionCard component correctly', () => {

From 61a7d5abc29265fc3d3dab97557dfa59e896987b Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 27 Jan 2026 16:05:16 +0530
Subject: [PATCH 20/60] test: improve coverage

---
 src/course-outline/CourseOutline.test.tsx | 12 ++++++++++++
 src/course-outline/hooks.jsx              |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index e7ee842443..7cfab05f0c 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -69,8 +69,18 @@ const mockPathname = '/foo-bar';
 const courseId = '123';
 const getContainerKey = jest.fn().mockReturnValue('lct:org:lib:unit:1');
 const getContainerType = jest.fn().mockReturnValue('unit');
+const clearSelection = jest.fn();
+let selectedContainerId: string;
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
+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(),
+    clearSelection,
+    selectedContainerState: { currentId: selectedContainerId }
+  }),
+}));
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -750,6 +760,7 @@ describe('<CourseOutline />', () => {
     const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+    selectedContainerId = section.id;
 
     const checkDeleteBtn = async (item, element, elementName) => {
       await waitFor(() => {
@@ -777,6 +788,7 @@ describe('<CourseOutline />', () => {
     await checkDeleteBtn(subsection, subsectionElement, 'subsection');
     // check section
     await checkDeleteBtn(section, sectionElement, 'section');
+    expect(clearSelection).toHaveBeenCalledTimes(1);
   });
 
   it('check whether section, subsection and unit is duplicated successfully', async () => {
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 844bad01e7..656f24744d 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -208,7 +208,8 @@ const useCourseOutline = ({ courseId }) => {
         ));
         break;
       default:
-        return;
+        // istanbul ignore next
+        throw new Error(`Unrecognized category ${category}`);;
     }
     if (selectedContainerState.currentId === currentSelection?.currentId) {
       clearSelection();

From 53d699f52b8281779c539f1a985b701cea47d950 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 27 Jan 2026 20:22:10 +0530
Subject: [PATCH 21/60] feat: resizable and responsive sidebar

---
 src/course-outline/CourseOutline.tsx          |  2 +-
 src/generic/resizable/Resizable.tsx           | 71 +++++++++++++++++++
 src/generic/resizable/index.scss              | 21 ++++++
 src/generic/sidebar/Sidebar.tsx               | 57 ++++++++-------
 src/generic/sidebar/index.scss                |  3 +-
 src/generic/styles.scss                       |  1 +
 .../library-filters/LibraryDropdownFilter.tsx |  1 +
 .../library-filters/SidebarFilters.tsx        | 22 +++---
 src/search-manager/SearchFilterWidget.tsx     |  2 +-
 9 files changed, 139 insertions(+), 41 deletions(-)
 create mode 100644 src/generic/resizable/Resizable.tsx
 create mode 100644 src/generic/resizable/index.scss

diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index e693c26e59..4dddf75d20 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -332,7 +332,7 @@ const CourseOutline = () => {
               />
             )}
           <hr className="mt-4 mb-0 w-100 text-light-400" />
-          <div className="d-flex align-items-baseline flex-wrap">
+          <div className="d-flex align-items-baseline">
             <div className="flex-fill">
               <article>
                 <div>
diff --git a/src/generic/resizable/Resizable.tsx b/src/generic/resizable/Resizable.tsx
new file mode 100644
index 0000000000..b604380801
--- /dev/null
+++ b/src/generic/resizable/Resizable.tsx
@@ -0,0 +1,71 @@
+import { useWindowSize } from "@openedx/paragon";
+import React, { useRef, useState, useCallback, useMemo } from "react";
+
+const MIN_WIDTH = 440; // px
+
+interface ResizableBoxProps {
+  children: React.ReactNode;
+  minWidth?: number;
+  maxWidth?: number
+}
+
+/**
+ * Creates a resizable box that can be dragged to resize the width from the left side.
+ */
+export const ResizableBox = ({
+  children,
+  minWidth = MIN_WIDTH,
+  maxWidth,
+}: ResizableBoxProps) => {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState<number>(minWidth); // initial width
+  const { width: windowWidth } = useWindowSize();
+
+  // Store the start values while dragging
+  const startXRef = useRef<number>(0);
+  const startWidthRef = useRef<number>(0);
+  const defaultMaxWidth = useMemo(() => {
+    if (!windowWidth) {
+      return Infinity;
+    }
+    return Math.abs(windowWidth * 0.65);
+  }, [windowWidth]);
+
+  const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault(); // prevent text selection
+    startXRef.current = e.clientX;
+    startWidthRef.current = width;
+
+    // Attach listeners to the whole document so dragging works even outside the box
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }, [width]);
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    const dx = e.clientX - startXRef.current; // positive = mouse moved right
+    const newWidth = Math.min(
+      Math.max(startWidthRef.current - dx, minWidth),
+      maxWidth || defaultMaxWidth,
+    );
+    setWidth(newWidth);
+  }, [maxWidth, minWidth, defaultMaxWidth]);
+
+  const onMouseUp = useCallback(() => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  }, [onMouseMove]);
+
+  return (
+      <div
+        className="resizable"
+        ref={boxRef}
+        style={{ width: `${width}px` }}
+      >
+        <div className="resizable-handle" onMouseDown={onMouseDown} />
+        <div className="w-100">
+          {children}
+        </div>
+      </div>
+  );
+};
+
diff --git a/src/generic/resizable/index.scss b/src/generic/resizable/index.scss
new file mode 100644
index 0000000000..c565f84756
--- /dev/null
+++ b/src/generic/resizable/index.scss
@@ -0,0 +1,21 @@
+/* The box that will be resized */
+.resizable {
+  position: relative;
+  display: flex;
+}
+
+/* Custom left‑hand handle */
+.resizable-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  cursor: ew-resize;
+  background: var(--pgn-color-dark-200);
+}
+
+.resizable-handle:hover {
+  background: var(--pgn-color-dark-400);
+}
+
diff --git a/src/generic/sidebar/Sidebar.tsx b/src/generic/sidebar/Sidebar.tsx
index 2e08b5d9fd..60584d5611 100644
--- a/src/generic/sidebar/Sidebar.tsx
+++ b/src/generic/sidebar/Sidebar.tsx
@@ -11,6 +11,7 @@ import {
   FormatIndentDecrease,
   FormatIndentIncrease,
 } from '@openedx/paragon/icons';
+import { ResizableBox } from '@src/generic/resizable/Resizable';
 import type { MessageDescriptor } from 'react-intl';
 
 import messages from './messages';
@@ -91,33 +92,35 @@ export function Sidebar<T extends SidebarPages>({
   return (
     <Stack direction="horizontal" className="sidebar align-items-baseline ml-3" gap={2}>
       {isOpen && !!currentPageKey && (
-        <div className="sidebar-content p-3 bg-white border-right">
-          <Dropdown data-testid="sidebar-dropdown">
-            <Dropdown.Toggle
-              id="dropdown-toggle-with-iconbutton"
-              as={Button}
-              variant="tertiary"
-              className="x-small text-primary font-weight-bold pl-0"
-            >
-              {intl.formatMessage(pages[currentPageKey].title)}
-              <Icon src={pages[currentPageKey].icon} size="xs" className="ml-2" />
-            </Dropdown.Toggle>
-            <Dropdown.Menu className="mt-1">
-              {Object.entries(pages).map(([key, page]) => (
-                <Dropdown.Item
-                  key={key}
-                  onClick={() => setCurrentPageKey(key)}
-                >
-                  <Stack direction="horizontal" gap={2}>
-                    <Icon src={page.icon} />
-                    {intl.formatMessage(page.title)}
-                  </Stack>
-                </Dropdown.Item>
-              ))}
-            </Dropdown.Menu>
-          </Dropdown>
-          <SidebarComponent />
-        </div>
+        <ResizableBox>
+          <div className="sidebar-content p-3 bg-white border-right">
+            <Dropdown data-testid="sidebar-dropdown">
+              <Dropdown.Toggle
+                id="dropdown-toggle-with-iconbutton"
+                as={Button}
+                variant="tertiary"
+                className="x-small text-primary font-weight-bold pl-0"
+              >
+                {intl.formatMessage(pages[currentPageKey].title)}
+                <Icon src={pages[currentPageKey].icon} size="xs" className="ml-2" />
+              </Dropdown.Toggle>
+              <Dropdown.Menu className="mt-1">
+                {Object.entries(pages).map(([key, page]) => (
+                  <Dropdown.Item
+                    key={key}
+                    onClick={() => setCurrentPageKey(key)}
+                  >
+                    <Stack direction="horizontal" gap={2}>
+                      <Icon src={page.icon} />
+                      {intl.formatMessage(page.title)}
+                    </Stack>
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+            <SidebarComponent />
+          </div>
+        </ResizableBox>
       )}
       <div className="sidebar-toggle" data-testid="sidebar-toggle">
         <IconButton
diff --git a/src/generic/sidebar/index.scss b/src/generic/sidebar/index.scss
index 22d71a094e..2611e97ed4 100644
--- a/src/generic/sidebar/index.scss
+++ b/src/generic/sidebar/index.scss
@@ -1,8 +1,7 @@
 .sidebar {
   .sidebar-content {
     flex: 0 1 auto;
-    max-width: 700px;
-    min-width: 400px;
+    min-width: 440px;
     overflow-y: auto;
     min-height: 100vh;
     height: 100%;
diff --git a/src/generic/styles.scss b/src/generic/styles.scss
index 4764f9bb8a..084c66fe79 100644
--- a/src/generic/styles.scss
+++ b/src/generic/styles.scss
@@ -17,3 +17,4 @@
 @import "./inplace-text-editor/InplaceTextEditor";
 @import "./upstream-info-icon/UpstreamInfoIcon";
 @import "./sidebar/";
+@import "./resizable/";
diff --git a/src/library-authoring/library-filters/LibraryDropdownFilter.tsx b/src/library-authoring/library-filters/LibraryDropdownFilter.tsx
index 657535762e..748184749d 100644
--- a/src/library-authoring/library-filters/LibraryDropdownFilter.tsx
+++ b/src/library-authoring/library-filters/LibraryDropdownFilter.tsx
@@ -92,6 +92,7 @@ export const LibraryDropdownFilter = () => {
       id="library-filter-dropdown"
       as={ButtonGroup}
       autoClose="outside"
+      className="flex-fill mw-xs"
     >
       <OverlayTrigger
         placement="auto"
diff --git a/src/library-authoring/library-filters/SidebarFilters.tsx b/src/library-authoring/library-filters/SidebarFilters.tsx
index 829639d1ec..2a0c2bacaa 100644
--- a/src/library-authoring/library-filters/SidebarFilters.tsx
+++ b/src/library-authoring/library-filters/SidebarFilters.tsx
@@ -19,19 +19,21 @@ export const SidebarFilters = ({ onlyOneType }: FiltersProps) => {
 
   return (
     <Stack gap={3} className="my-3">
-      <Stack direction="horizontal" gap={1}>
+      <Stack className='flex-wrap' direction="horizontal" gap={1}>
         <LibraryDropdownFilter />
-        <SearchKeywordsField />
-        <IconButton
-          onClick={toggle}
-          alt={intl.formatMessage(messages.additionalFilterBtnAltText)}
-          size="md"
-          src={FilterList}
-          className="rounded-sm border ml-2"
-        />
+        <Stack direction="horizontal" gap={1}>
+          <SearchKeywordsField />
+          <IconButton
+            onClick={toggle}
+            alt={intl.formatMessage(messages.additionalFilterBtnAltText)}
+            size="md"
+            src={FilterList}
+            className="rounded-sm border ml-2"
+          />
+        </Stack>
       </Stack>
       {isOn && (
-      <Stack direction="horizontal">
+      <Stack className='flex-wrap' direction="horizontal" gap={2}>
         {!(onlyOneType) && <FilterByBlockType />}
         <FilterByTags />
         <CollectionDropdownFilter />
diff --git a/src/search-manager/SearchFilterWidget.tsx b/src/search-manager/SearchFilterWidget.tsx
index 5e1e1598cb..36fa8fe835 100644
--- a/src/search-manager/SearchFilterWidget.tsx
+++ b/src/search-manager/SearchFilterWidget.tsx
@@ -41,7 +41,7 @@ const SearchFilterWidget: React.FC<{
 
   return (
     <>
-      <div className="d-flex mr-3">
+      <div className="d-flex">
         <Button
           ref={setTarget}
           variant={appliedFilters.length ? 'light' : 'outline-primary'}

From 12caa4714b7b87d0cabf5ce3609dc35a5f1b528e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 28 Jan 2026 15:21:40 +0530
Subject: [PATCH 22/60] refactor: parent calc

---
 .../outline-sidebar/AddSidebar.tsx            | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 6522cabab5..3f7ad44ac4 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -25,6 +25,7 @@ import { MultiLibraryProvider } from '@src/library-authoring/common/context/Mult
 import { COURSE_BLOCK_NAMES } from '@src/constants';
 import messages from './messages';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 type ContainerTypes = 'unit' | 'subsection' | 'section';
 
@@ -48,18 +49,30 @@ const getLastEditableParent = (blockList: Array<XBlock>) => {
 
 /** Add Content Button */
 const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
-  const sectionsList = useSelector(getSectionsList);
-  const lastSection = getLastEditableParent(sectionsList);
-  const lastSubsection = getLastEditableParent(lastSection?.childInfo.children || []);
-  const { currentFlow, stopCurrentFlow } = useOutlineSidebarContext();
-  const sectionParentId = currentFlow?.parentLocator || lastSection?.id;
-  const subsectionParentId = currentFlow?.parentLocator || lastSubsection?.id;
   const {
     courseUsageKey,
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
   } = useCourseAuthoringContext();
+  const { currentFlow, stopCurrentFlow, selectedContainerState } = useOutlineSidebarContext();
+  const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
+  const sectionsList = useSelector(getSectionsList);
+  const lastSection = currentItemData?.category === 'chapter' ? currentItemData : currentItemData ? undefined: getLastEditableParent(sectionsList);
+  const lastSubsection = useMemo(() => {
+    if (currentItemData?.category === 'sequential') {
+      return currentItemData;
+    }
+    if (currentItemData?.category === 'chapter') {
+      return getLastEditableParent(currentItemData?.childInfo.children || []);
+    }
+    if (currentItemData) {
+      return undefined;
+    }
+    return getLastEditableParent(lastSection?.childInfo.children || []);
+  }, []);
+  const sectionParentId = currentFlow?.parentLocator || lastSection?.id;
+  const subsectionParentId = currentFlow?.parentLocator || lastSubsection?.id;
 
   const onCreateContent = useCallback(async () => {
     switch (blockType) {
@@ -105,12 +118,16 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     lastSubsection,
   ]);
 
+  const disabled = useMemo(() => {
+    return (!lastSection && blockType === 'subsection') || (!lastSubsection && blockType === 'unit')
+  }, []);
+
   return (
     <Button
       variant="tertiary shadow"
       className="mx-2 justify-content-start px-4 font-weight-bold"
       onClick={onCreateContent}
-      disabled={(!lastSection && blockType === 'subsection') || (!lastSubsection && blockType === 'unit')}
+      disabled={disabled}
     >
       <Stack direction="horizontal" gap={3}>
         <span className={`p-2 rounded ${getIconBorderStyleColor(blockType)}`}>
@@ -301,7 +318,8 @@ const AddTabs = () => {
 export const AddSidebar = () => {
   const intl = useIntl();
   const { courseDetails } = useCourseAuthoringContext();
-  const { currentFlow } = useOutlineSidebarContext();
+  const { currentFlow, selectedContainerState } = useOutlineSidebarContext();
+  const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
   const titleAndIcon = useMemo(() => {
     switch (currentFlow?.flowType) {
       case 'use-subsection':
@@ -309,6 +327,9 @@ export const AddSidebar = () => {
       case 'use-unit':
         return { title: currentFlow.parentTitle, icon: getItemIcon('subsection') };
       default:
+        if (currentItemData) {
+          return { title: currentItemData.displayName, icon: getItemIcon(currentItemData.category) };
+        }
         return { title: courseDetails?.name || '', icon: SchoolOutline };
     }
   }, [currentFlow, intl, getItemIcon]);

From f3d1b3fdafd3ced5440135dbaa665477c84a130e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 28 Jan 2026 20:57:53 +0530
Subject: [PATCH 23/60] refactor: add sidebar actions

---
 .../OutlineAddChildButtons.test.tsx           |   6 +-
 src/course-outline/OutlineAddChildButtons.tsx |  16 +-
 src/course-outline/hooks.jsx                  |   2 +-
 .../outline-sidebar/AddSidebar.test.tsx       |   4 +-
 .../outline-sidebar/AddSidebar.tsx            | 186 +++++++-----------
 .../outline-sidebar/OutlineSidebarContext.tsx |  63 +++++-
 6 files changed, 145 insertions(+), 132 deletions(-)

diff --git a/src/course-outline/OutlineAddChildButtons.test.tsx b/src/course-outline/OutlineAddChildButtons.test.tsx
index ed5ce3267d..c1ad7c7a32 100644
--- a/src/course-outline/OutlineAddChildButtons.test.tsx
+++ b/src/course-outline/OutlineAddChildButtons.test.tsx
@@ -4,7 +4,7 @@ import { ContainerType } from '@src/generic/key-utils';
 import {
   initializeMocks, render, screen, waitFor,
 } from '@src/testUtils';
-import { OutlineFlow, OutlineFlowType, OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { OutlineFlow, OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import OutlineAddChildButtons from './OutlineAddChildButtons';
 
 jest.mock('react-redux', () => ({
@@ -126,7 +126,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
       expect(useBtn).toBeInTheDocument();
       await userEvent.click(useBtn);
       await waitFor(() => expect(startCurrentFlow).toHaveBeenCalledWith({
-        flowType: `use-${containerType}`,
+        flowType: containerType,
         parentLocator,
         parentTitle,
       }));
@@ -136,7 +136,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
       const parentLocator = `parent-of-${containerType}`;
       const parentTitle = `parent-title-of-${containerType}`;
       currentFlow = {
-        flowType: `use-${containerType}` as OutlineFlowType,
+        flowType: containerType,
         parentLocator,
         parentTitle,
       };
diff --git a/src/course-outline/OutlineAddChildButtons.tsx b/src/course-outline/OutlineAddChildButtons.tsx
index e064092754..fd4c0416e1 100644
--- a/src/course-outline/OutlineAddChildButtons.tsx
+++ b/src/course-outline/OutlineAddChildButtons.tsx
@@ -6,7 +6,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import { getStudioHomeData } from '@src/studio-home/data/selectors';
 import { ContainerType } from '@src/generic/key-utils';
-import { type OutlineFlowType, useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { LoadingSpinner } from '@src/generic/Loading';
 import { useCallback } from 'react';
@@ -39,11 +39,11 @@ const AddPlaceholder = ({ parentLocator }: { parentLocator?: string }) => {
 
   const getTitle = () => {
     switch (currentFlow?.flowType) {
-      case 'use-section':
+      case ContainerType.Section:
         return intl.formatMessage(messages.placeholderSectionText);
-      case 'use-subsection':
+      case ContainerType.Subsection:
         return intl.formatMessage(messages.placeholderSubsectionText);
-      case 'use-unit':
+      case ContainerType.Unit:
         return intl.formatMessage(messages.placeholderUnitText);
       default:
         // istanbul ignore next: this should never happen
@@ -121,7 +121,7 @@ const NewOutlineAddChildButtons = ({
     importButton: messages.useUnitFromLibraryButton,
   };
   let onNewCreateContent: () => Promise<void>;
-  let flowType: OutlineFlowType;
+  let flowType: ContainerType;
 
   // Based on the childType, determine the correct action and messages to display.
   switch (childType) {
@@ -135,7 +135,7 @@ const NewOutlineAddChildButtons = ({
         parentLocator: courseUsageKey,
         displayName: COURSE_BLOCK_NAMES.chapter.name,
       });
-      flowType = 'use-section';
+      flowType = ContainerType.Section;
       break;
     case ContainerType.Subsection:
       messageMap = {
@@ -147,7 +147,7 @@ const NewOutlineAddChildButtons = ({
         parentLocator,
         displayName: COURSE_BLOCK_NAMES.sequential.name,
       });
-      flowType = 'use-subsection';
+      flowType = ContainerType.Subsection;
       break;
     case ContainerType.Unit:
       messageMap = {
@@ -159,7 +159,7 @@ const NewOutlineAddChildButtons = ({
         parentLocator,
         displayName: COURSE_BLOCK_NAMES.vertical.name,
       });
-      flowType = 'use-unit';
+      flowType = ContainerType.Unit;
       break;
     default:
       // istanbul ignore next: unreachable
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 656f24744d..482dfc5548 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -211,10 +211,10 @@ const useCourseOutline = ({ courseId }) => {
         // istanbul ignore next
         throw new Error(`Unrecognized category ${category}`);;
     }
+    closeDeleteModal();
     if (selectedContainerState.currentId === currentSelection?.currentId) {
       clearSelection();
     }
-    closeDeleteModal();
   };
 
   const handleDuplicateSectionSubmit = () => {
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index 7a371f1169..d6f14c13bc 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -14,11 +14,11 @@ import {
 } from '@src/library-authoring/data/api.mocks';
 import {
   type OutlineFlow,
-  type OutlineFlowType,
   OutlineSidebarProvider,
 } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import fetchMock from 'fetch-mock-jest';
 import { AddSidebar } from './AddSidebar';
+import type { ContainerType } from '@src/generic/key-utils';
 
 const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
@@ -210,7 +210,7 @@ describe('AddSidebar component', () => {
       const firstSection = sectionList[0];
       const firstSubsection = firstSection.childInfo.children[0];
       currentFlow = {
-        flowType: `use-${category}` as OutlineFlowType,
+        flowType: category as ContainerType,
         parentLocator: category === 'subsection' ? firstSection.id : firstSubsection.id,
         parentTitle: category === 'subsection' ? firstSection.displayName : firstSubsection.displayName!,
       };
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 3f7ad44ac4..6ac8cfd76e 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -10,15 +10,12 @@ import {
   Button, Icon, Stack, Tab, Tabs,
 } from '@openedx/paragon';
 import { getIconBorderStyleColor, getItemIcon } from '@src/generic/block-type-utils';
-import { useSelector } from 'react-redux';
-import { getSectionsList } from '@src/course-outline/data/selectors';
 import {
   useCallback, useEffect, useMemo, useState,
 } from 'react';
 import { ComponentSelectedEvent } from '@src/library-authoring/common/context/ComponentPickerContext';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
 import { ContainerType } from '@src/generic/key-utils';
-import type { XBlock } from '@src/data/types';
 import { ContentType } from '@src/library-authoring/routes';
 import { ComponentPicker } from '@src/library-authoring';
 import { MultiLibraryProvider } from '@src/library-authoring/common/context/MultiLibraryContext';
@@ -27,24 +24,10 @@ import messages from './messages';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 
-type ContainerTypes = 'unit' | 'subsection' | 'section';
 
 type AddContentButtonProps = {
   name: string,
-  blockType: ContainerTypes,
-};
-
-const getLastEditableParent = (blockList: Array<XBlock>) => {
-  let index = 1;
-  let lastBlock: XBlock;
-  while (index <= blockList.length) {
-    lastBlock = blockList[blockList.length - index];
-    if (lastBlock.actions.childAddable) {
-      return lastBlock;
-    }
-    index++;
-  }
-  return undefined;
+  blockType: ContainerType,
 };
 
 /** Add Content Button */
@@ -55,24 +38,16 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     handleAddSubsection,
     handleAddUnit,
   } = useCourseAuthoringContext();
-  const { currentFlow, stopCurrentFlow, selectedContainerState } = useOutlineSidebarContext();
+  const {
+    currentFlow,
+    stopCurrentFlow,
+    selectedContainerState,
+    lastEditableSection,
+    lastEditableSubsection,
+  } = useOutlineSidebarContext();
   const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
-  const sectionsList = useSelector(getSectionsList);
-  const lastSection = currentItemData?.category === 'chapter' ? currentItemData : currentItemData ? undefined: getLastEditableParent(sectionsList);
-  const lastSubsection = useMemo(() => {
-    if (currentItemData?.category === 'sequential') {
-      return currentItemData;
-    }
-    if (currentItemData?.category === 'chapter') {
-      return getLastEditableParent(currentItemData?.childInfo.children || []);
-    }
-    if (currentItemData) {
-      return undefined;
-    }
-    return getLastEditableParent(lastSection?.childInfo.children || []);
-  }, []);
-  const sectionParentId = currentFlow?.parentLocator || lastSection?.id;
-  const subsectionParentId = currentFlow?.parentLocator || lastSubsection?.id;
+  const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
+  const subsectionParentId = currentFlow?.parentLocator || lastEditableSubsection?.id;
 
   const onCreateContent = useCallback(async () => {
     switch (blockType) {
@@ -114,20 +89,31 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     handleAddSubsection,
     handleAddUnit,
     currentFlow,
-    lastSection,
-    lastSubsection,
+    lastEditableSection,
+    lastEditableSubsection,
   ]);
 
-  const disabled = useMemo(() => {
-    return (!lastSection && blockType === 'subsection') || (!lastSubsection && blockType === 'unit')
-  }, []);
+  const enabled = useMemo(() => {
+    return (
+      (currentFlow)
+      || (blockType === 'subsection' &&  lastEditableSection)
+      || (blockType === 'unit' && lastEditableSubsection)
+      || (blockType === 'section' && !currentItemData)
+    )
+  }, [
+    currentFlow,
+    blockType,
+    currentItemData,
+    lastEditableSection,
+    lastEditableSubsection,
+  ]);
 
   return (
     <Button
       variant="tertiary shadow"
       className="mx-2 justify-content-start px-4 font-weight-bold"
       onClick={onCreateContent}
-      disabled={disabled}
+      disabled={!enabled}
     >
       <Stack direction="horizontal" gap={3}>
         <span className={`p-2 rounded ${getIconBorderStyleColor(blockType)}`}>
@@ -144,46 +130,30 @@ const AddNewContent = () => {
   const intl = useIntl();
   const { currentFlow } = useOutlineSidebarContext();
   const btns = useCallback(() => {
-    switch (currentFlow?.flowType) {
-      case 'use-section':
-        return (
-          <AddContentButton
-            name={intl.formatMessage(contentMessages.sectionButton)}
-            blockType="section"
-          />
-        );
-      case 'use-subsection':
-        return (
-          <AddContentButton
-            name={intl.formatMessage(contentMessages.subsectionButton)}
-            blockType="subsection"
-          />
-        );
-      case 'use-unit':
-        return (
-          <AddContentButton
-            name={intl.formatMessage(contentMessages.unitButton)}
-            blockType="unit"
-          />
-        );
-      default:
-        return (
-          <>
-            <AddContentButton
-              name={intl.formatMessage(contentMessages.sectionButton)}
-              blockType="section"
-            />
-            <AddContentButton
-              name={intl.formatMessage(contentMessages.subsectionButton)}
-              blockType="subsection"
-            />
-            <AddContentButton
-              name={intl.formatMessage(contentMessages.unitButton)}
-              blockType="unit"
-            />
-          </>
-        );
+    if (currentFlow?.flowType) {
+      return (
+        <AddContentButton
+          name={intl.formatMessage(contentMessages[`${currentFlow.flowType}Button`])}
+          blockType={currentFlow.flowType}
+        />
+      );
     }
+    return (
+      <>
+        <AddContentButton
+          name={intl.formatMessage(contentMessages.sectionButton)}
+          blockType={ContainerType.Section}
+        />
+        <AddContentButton
+          name={intl.formatMessage(contentMessages.subsectionButton)}
+          blockType={ContainerType.Subsection}
+        />
+        <AddContentButton
+          name={intl.formatMessage(contentMessages.unitButton)}
+          blockType={ContainerType.Unit}
+        />
+      </>
+    );
   }, [currentFlow, intl]);
 
   return (
@@ -201,13 +171,16 @@ const ShowLibraryContent = () => {
     handleAddSubsection,
     handleAddUnit,
   } = useCourseAuthoringContext();
-  const sectionsList: Array<XBlock> = useSelector(getSectionsList);
-  const { currentFlow, stopCurrentFlow } = useOutlineSidebarContext();
+  const {
+    currentFlow,
+    stopCurrentFlow,
+    lastEditableSection,
+    lastEditableSubsection,
+    selectedContainerState,
+  } = useOutlineSidebarContext();
 
-  const lastSection = getLastEditableParent(sectionsList);
-  const lastSubsection = getLastEditableParent(lastSection?.childInfo.children || []);
-  const sectionParentId = currentFlow?.parentLocator || lastSection?.id;
-  const subsectionParentId = currentFlow?.parentLocator || lastSubsection?.id;
+  const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
+  const subsectionParentId = currentFlow?.parentLocator || lastEditableSubsection?.id;
 
   const onComponentSelected: ComponentSelectedEvent = useCallback(async ({ usageKey, blockType }) => {
     switch (blockType) {
@@ -249,27 +222,22 @@ const ShowLibraryContent = () => {
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
-    lastSection,
-    lastSubsection,
+    lastEditableSection,
+    lastEditableSubsection,
     currentFlow,
     stopCurrentFlow,
   ]);
 
   const allowedBlocks = useMemo(() => {
-    const blocks: ContainerTypes[] = ['section'];
-    switch (currentFlow?.flowType) {
-      case 'use-section':
-        return ['section'];
-      case 'use-subsection':
-        return ['subsection'];
-      case 'use-unit':
-        return ['unit'];
-      default:
-        if (lastSection) { blocks.push('subsection'); }
-        if (lastSubsection) { blocks.push('unit'); }
-        return blocks;
+    const blocks: ContainerType[] = [];
+    if (currentFlow?.flowType) {
+        return [currentFlow.flowType];
     }
-  }, [lastSection, lastSubsection, sectionsList, currentFlow]);
+    if (!selectedContainerState) { blocks.push(ContainerType.Section); }
+    if (lastEditableSection) { blocks.push(ContainerType.Subsection); }
+    if (lastEditableSubsection) { blocks.push(ContainerType.Unit); }
+    return blocks;
+  }, [lastEditableSection, lastEditableSubsection, currentFlow]);
 
   return (
     <MultiLibraryProvider>
@@ -321,17 +289,13 @@ export const AddSidebar = () => {
   const { currentFlow, selectedContainerState } = useOutlineSidebarContext();
   const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
   const titleAndIcon = useMemo(() => {
-    switch (currentFlow?.flowType) {
-      case 'use-subsection':
-        return { title: currentFlow.parentTitle, icon: getItemIcon('section') };
-      case 'use-unit':
-        return { title: currentFlow.parentTitle, icon: getItemIcon('subsection') };
-      default:
-        if (currentItemData) {
-          return { title: currentItemData.displayName, icon: getItemIcon(currentItemData.category) };
-        }
-        return { title: courseDetails?.name || '', icon: SchoolOutline };
+    if (currentFlow?.flowType) {
+      return { title: currentFlow.parentTitle, icon: getItemIcon(currentFlow.flowType) };
+    }
+    if (currentItemData) {
+      return { title: currentItemData.displayName, icon: getItemIcon(currentItemData.category) };
     }
+    return { title: courseDetails?.name || '', icon: SchoolOutline };
   }, [currentFlow, intl, getItemIcon]);
 
   return (
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 57a8833ce3..3826e538cf 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -9,18 +9,18 @@ import {
 import { useToggle } from '@openedx/paragon';
 
 import { useEscapeClick, useStateWithUrlSearchParam } from '@src/hooks';
-import { SelectionState } from '@src/data/types';
+import { SelectionState, XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { isOutlineNewDesignEnabled } from '../utils';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { useSelector } from 'react-redux';
+import { getSectionsList } from '@src/course-outline/data/selectors';
+import { findLastIndex } from 'lodash';
+import { ContainerType } from '@src/generic/key-utils';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
-export type OutlineFlowType = 'use-section' | 'use-subsection' | 'use-unit' | null;
 export type OutlineFlow = {
-  flowType: 'use-section';
-  parentLocator?: string;
-  parentTitle?: string;
-} | {
-  flowType: OutlineFlowType;
+  flowType: ContainerType;
   parentLocator: string;
   parentTitle: string;
 };
@@ -37,10 +37,33 @@ interface OutlineSidebarContextData {
   selectedContainerState?: SelectionState;
   openContainerInfoSidebar: (containerId: string, subsectionId?: string, sectionId?: string) => void;
   clearSelection: () => void;
+  /** Stores last section that allows adding subsections inside it. */
+  lastEditableSection?: XBlock;
+  /** Stores last subsection that allows adding units inside it. */
+  lastEditableSubsection?: XBlock;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
 
+const getLastEditableSection = (blockList: Array<XBlock>) => {
+  let lastIndex = findLastIndex(blockList, (item) => item.actions.childAddable);
+  return blockList[lastIndex];
+};
+
+const getLastEditableSubsection = (blockList: Array<XBlock>, startIndex?: number) => {
+  let lastSectionIndex = findLastIndex(blockList, (item) => item.actions.childAddable, startIndex);
+  if (lastSectionIndex !== -1) {
+    let lastSubsectionIndex = findLastIndex(blockList[lastSectionIndex].childInfo.children, (item) => item.actions.childAddable);
+    if (lastSubsectionIndex !== -1) {
+      return blockList[lastSectionIndex].childInfo.children[lastSubsectionIndex];
+    }
+    if (lastSectionIndex > 0) {
+      return getLastEditableSubsection(blockList, lastSectionIndex - 1);
+    }
+  }
+  return undefined;
+};
+
 export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNode }) => {
   const [currentPageKey, setCurrentPageKeyState] = useStateWithUrlSearchParam<OutlineSidebarPageKeys>(
     'info',
@@ -114,6 +137,28 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     setCurrentFlow(flow);
   }, [setCurrentFlow, setCurrentPageKey]);
 
+  const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
+  const sectionsList = useSelector(getSectionsList);
+
+  /** Stores last section that allows adding subsections inside it. */
+  const lastEditableSection = useMemo(() => {
+    if (currentItemData?.category === 'chapter' && currentItemData.actions.childAddable) {
+      return currentItemData;
+    }
+    return currentItemData ? undefined: getLastEditableSection(sectionsList)
+  }, [currentItemData, sectionsList]);
+
+  /** Stores last subsection that allows adding units inside it. */
+  const lastEditableSubsection = useMemo(() => {
+    if (currentItemData?.category === 'sequential' && currentItemData.actions.childAddable) {
+      return currentItemData;
+    }
+    if (currentItemData?.category === 'chapter') {
+      return getLastEditableSection(currentItemData?.childInfo.children || []);
+    }
+    return currentItemData ? undefined: getLastEditableSubsection(sectionsList);
+  }, [currentItemData, sectionsList]);
+
   useEscapeClick({
     onEscape: () => {
       stopCurrentFlow();
@@ -135,6 +180,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       selectedContainerState,
       openContainerInfoSidebar,
       clearSelection,
+      lastEditableSection,
+      lastEditableSubsection,
     }),
     [
       currentPageKey,
@@ -148,6 +195,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       selectedContainerState,
       openContainerInfoSidebar,
       clearSelection,
+      lastEditableSection,
+      lastEditableSubsection,
     ],
   );
 

From b4f0d43cda2d24a68e4f83d754c8049d20230061 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 28 Jan 2026 22:07:29 +0530
Subject: [PATCH 24/60] feat: alert

---
 .../outline-sidebar/AddSidebar.tsx            | 38 +++++++++++++++----
 .../outline-sidebar/OutlineSidebarContext.tsx |  4 ++
 .../outline-sidebar/messages.ts               |  5 +++
 .../library-filters/SidebarFilters.tsx        |  2 +-
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 6ac8cfd76e..d8cb4f286c 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { SchoolOutline } from '@openedx/paragon/icons';
+import { InfoOutline, SchoolOutline } from '@openedx/paragon/icons';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
 
@@ -15,16 +15,31 @@ import {
 } from 'react';
 import { ComponentSelectedEvent } from '@src/library-authoring/common/context/ComponentPickerContext';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
-import { ContainerType } from '@src/generic/key-utils';
+import { ContainerType, normalizeContainerType } from '@src/generic/key-utils';
 import { ContentType } from '@src/library-authoring/routes';
 import { ComponentPicker } from '@src/library-authoring';
 import { MultiLibraryProvider } from '@src/library-authoring/common/context/MultiLibraryContext';
 import { COURSE_BLOCK_NAMES } from '@src/constants';
 import messages from './messages';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
-import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import AlertMessage from '@src/generic/alert-message';
 
 
+const CannotAddContentAlert = () => {
+  const intl = useIntl();
+  const { currentItemData } = useOutlineSidebarContext();
+  return (
+    <AlertMessage
+      variant='info'
+      description={intl.formatMessage(messages.cannotAddAlertMsg, {
+        name: currentItemData?.displayName,
+        category: normalizeContainerType(currentItemData?.category || ''),
+      })}
+      icon={InfoOutline}
+    />
+  );
+}
+
 type AddContentButtonProps = {
   name: string,
   blockType: ContainerType,
@@ -41,11 +56,10 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
   const {
     currentFlow,
     stopCurrentFlow,
-    selectedContainerState,
     lastEditableSection,
     lastEditableSubsection,
+    currentItemData,
   } = useOutlineSidebarContext();
-  const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
   const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
   const subsectionParentId = currentFlow?.parentLocator || lastEditableSubsection?.id;
 
@@ -128,7 +142,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
 /** Add New Content Tab Section */
 const AddNewContent = () => {
   const intl = useIntl();
-  const { currentFlow } = useOutlineSidebarContext();
+  const { currentFlow, currentItemData } = useOutlineSidebarContext();
   const btns = useCallback(() => {
     if (currentFlow?.flowType) {
       return (
@@ -156,6 +170,10 @@ const AddNewContent = () => {
     );
   }, [currentFlow, intl]);
 
+  if (!currentItemData?.actions.childAddable) {
+    return <CannotAddContentAlert />
+  }
+
   return (
     <Stack gap={2}>
       {btns()}
@@ -177,6 +195,7 @@ const ShowLibraryContent = () => {
     lastEditableSection,
     lastEditableSubsection,
     selectedContainerState,
+    currentItemData,
   } = useOutlineSidebarContext();
 
   const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
@@ -239,6 +258,10 @@ const ShowLibraryContent = () => {
     return blocks;
   }, [lastEditableSection, lastEditableSubsection, currentFlow]);
 
+  if (!currentItemData?.actions.childAddable) {
+    return <CannotAddContentAlert />
+  }
+
   return (
     <MultiLibraryProvider>
       <ComponentPicker
@@ -286,8 +309,7 @@ const AddTabs = () => {
 export const AddSidebar = () => {
   const intl = useIntl();
   const { courseDetails } = useCourseAuthoringContext();
-  const { currentFlow, selectedContainerState } = useOutlineSidebarContext();
-  const { data: currentItemData } = useCourseItemData(selectedContainerState?.currentId);
+  const { currentFlow, currentItemData } = useOutlineSidebarContext();
   const titleAndIcon = useMemo(() => {
     if (currentFlow?.flowType) {
       return { title: currentFlow.parentTitle, icon: getItemIcon(currentFlow.flowType) };
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 3826e538cf..a1daef5a81 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -41,6 +41,8 @@ interface OutlineSidebarContextData {
   lastEditableSection?: XBlock;
   /** Stores last subsection that allows adding units inside it. */
   lastEditableSubsection?: XBlock;
+  /** XBlock data of selectedContainerState.currentId */
+  currentItemData?: XBlock;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
@@ -182,6 +184,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       clearSelection,
       lastEditableSection,
       lastEditableSubsection,
+      currentItemData,
     }),
     [
       currentPageKey,
@@ -197,6 +200,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       clearSelection,
       lastEditableSection,
       lastEditableSubsection,
+      currentItemData,
     ],
   );
 
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index c16b3ebcab..dcf59640df 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -230,6 +230,11 @@ const messages = defineMessages({
     defaultMessage: 'Review Updates',
     description: 'Text displayed in sidebar library reference card button when it is has updates available.',
   },
+  cannotAddAlertMsg: {
+    id: 'course-authoring.course-outline.sidebar.library.reference.add-sidebar.alert.text',
+    defaultMessage: '{name} is a library {category}. Content cannot be added to Library referenced {category}s.',
+    description: 'Alert displayed in sidebar when author tries to add content in library referenced blocks',
+  },
 });
 
 export default messages;
diff --git a/src/library-authoring/library-filters/SidebarFilters.tsx b/src/library-authoring/library-filters/SidebarFilters.tsx
index 2a0c2bacaa..1d6c0cc52b 100644
--- a/src/library-authoring/library-filters/SidebarFilters.tsx
+++ b/src/library-authoring/library-filters/SidebarFilters.tsx
@@ -19,7 +19,7 @@ export const SidebarFilters = ({ onlyOneType }: FiltersProps) => {
 
   return (
     <Stack gap={3} className="my-3">
-      <Stack className='flex-wrap' direction="horizontal" gap={1}>
+      <Stack className='flex-wrap' direction="horizontal" gap={2}>
         <LibraryDropdownFilter />
         <Stack direction="horizontal" gap={1}>
           <SearchKeywordsField />

From a9814ac61e3a89a097f0a57c63a3ceff4e05a07c Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 29 Jan 2026 14:36:41 +0530
Subject: [PATCH 25/60] feat: new unit handler

---
 src/CourseAuthoringContext.tsx                | 21 ++++++++++++++---
 src/course-outline/CourseOutline.tsx          |  2 ++
 .../OutlineAddChildButtons.test.tsx           |  6 ++---
 src/course-outline/OutlineAddChildButtons.tsx | 12 ++++++----
 src/course-outline/data/apiHooks.ts           |  4 ++--
 src/course-outline/data/slice.ts              | 16 +++++++++++++
 .../outline-sidebar/AddSidebar.test.tsx       |  4 +++-
 .../outline-sidebar/AddSidebar.tsx            | 23 +++++++++++++++----
 .../outline-sidebar/OutlineSidebarContext.tsx |  6 ++---
 .../subsection-card/SubsectionCard.test.tsx   |  2 +-
 10 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 7dffded8d4..8e80e8c63f 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -6,7 +6,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { courseOutlineQueryKeys, useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
 import { useDispatch, useSelector } from 'react-redux';
-import { addSection, addSubsection, updateSavingStatus } from '@src/course-outline/data/slice';
+import { addSection, addSubsection, addUnit, updateSavingStatus } from '@src/course-outline/data/slice';
 import { useNavigate } from 'react-router';
 import { getOutlineIndexData } from '@src/course-outline/data/selectors';
 import { useToggleWithValue } from '@src/hooks';
@@ -30,6 +30,7 @@ export type CourseAuthoringContextData = {
   canChangeProviders: boolean;
   handleAddSection: ReturnType<typeof useCreateCourseBlock>;
   handleAddSubsection: ReturnType<typeof useCreateCourseBlock>;
+  handleAddAndOpenUnit: ReturnType<typeof useCreateCourseBlock>;
   handleAddUnit: ReturnType<typeof useCreateCourseBlock>;
   openUnitPage: (locator: string) => void;
   getUnitUrl: (locator: string) => string;
@@ -103,7 +104,7 @@ export const CourseAuthoringProvider = ({
   /**
    * Open the unit page for a given locator.
    */
-  const openUnitPage = (locator: string) => {
+  const openUnitPage = async (locator: string) => {
     queryClient.invalidateQueries({
       queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
     });
@@ -139,12 +140,24 @@ export const CourseAuthoringProvider = ({
     }
   };
 
+  const addUnitToCourse = async (locator: string, parentLocator: string) => {
+    try {
+      const data = await getCourseItem(locator);
+      data.shouldScroll = true;
+      // Page should scroll to newly added subsection.
+      dispatch(addUnit({ parentLocator, data }));
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+
   const handleAddSection = useCreateCourseBlock(addSectionToCourse);
   const handleAddSubsection = useCreateCourseBlock(addSubsectionToCourse);
   /**
   * import a unit block from library and redirect user to this unit page.
   */
-  const handleAddUnit = useCreateCourseBlock(openUnitPage);
+  const handleAddAndOpenUnit = useCreateCourseBlock(openUnitPage);
+  const handleAddUnit = useCreateCourseBlock(addUnitToCourse);
 
   const context = useMemo<CourseAuthoringContextData>(() => ({
     courseId,
@@ -155,6 +168,7 @@ export const CourseAuthoringProvider = ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     getUnitUrl,
     openUnitPage,
     isUnlinkModalOpen,
@@ -176,6 +190,7 @@ export const CourseAuthoringProvider = ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     getUnitUrl,
     openUnitPage,
     isUnlinkModalOpen,
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 4dddf75d20..1f2115b3c6 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -73,6 +73,7 @@ const CourseOutline = () => {
     courseUsageKey,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     handleAddSection,
     isUnlinkModalOpen,
     closeUnlinkModal,
@@ -525,6 +526,7 @@ const CourseOutline = () => {
           isShow={
             isShowProcessingNotification
             || handleAddUnit.isPending
+            || handleAddAndOpenUnit.isPending
             || handleAddSubsection.isPending
             || handleAddSection.isPending
           }
diff --git a/src/course-outline/OutlineAddChildButtons.test.tsx b/src/course-outline/OutlineAddChildButtons.test.tsx
index c1ad7c7a32..6bc8737fae 100644
--- a/src/course-outline/OutlineAddChildButtons.test.tsx
+++ b/src/course-outline/OutlineAddChildButtons.test.tsx
@@ -14,7 +14,7 @@ jest.mock('react-redux', () => ({
 
 const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
-const handleAddUnit = { mutateAsync: jest.fn() };
+const handleAddAndOpenUnit = { mutateAsync: jest.fn() };
 const courseUsageKey = 'some/usage/key';
 const setCurrentSelection = jest.fn();
 jest.mock('@src/CourseAuthoringContext', () => ({
@@ -24,7 +24,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     getUnitUrl: (id: string) => `/some/${id}`,
     handleAddSection,
     handleAddSubsection,
-    handleAddUnit,
+    handleAddAndOpenUnit,
     setCurrentSelection,
   }),
 }));
@@ -103,7 +103,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
           }));
           break;
         case ContainerType.Unit:
-          await waitFor(() => expect(handleAddUnit.mutateAsync).toHaveBeenCalledWith({
+          await waitFor(() => expect(handleAddAndOpenUnit.mutateAsync).toHaveBeenCalledWith({
             type: ContainerType.Vertical,
             parentLocator,
             displayName: 'Unit',
diff --git a/src/course-outline/OutlineAddChildButtons.tsx b/src/course-outline/OutlineAddChildButtons.tsx
index fd4c0416e1..3fd1f55d84 100644
--- a/src/course-outline/OutlineAddChildButtons.tsx
+++ b/src/course-outline/OutlineAddChildButtons.tsx
@@ -31,6 +31,7 @@ const AddPlaceholder = ({ parentLocator }: { parentLocator?: string }) => {
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
   } = useCourseAuthoringContext();
 
   if (!currentFlow || currentFlow.parentLocator !== parentLocator) {
@@ -59,6 +60,7 @@ const AddPlaceholder = ({ parentLocator }: { parentLocator?: string }) => {
         <Stack direction="horizontal" gap={3}>
           {(handleAddSection.isPending
             || handleAddSubsection.isPending
+            || handleAddAndOpenUnit.isPending
             || handleAddUnit.isPending) && (
             <LoadingSpinner />
           )}
@@ -113,7 +115,7 @@ const NewOutlineAddChildButtons = ({
     courseUsageKey,
     handleAddSection,
     handleAddSubsection,
-    handleAddUnit,
+    handleAddAndOpenUnit,
   } = useCourseAuthoringContext();
   const { startCurrentFlow } = useOutlineSidebarContext();
   let messageMap = {
@@ -154,7 +156,7 @@ const NewOutlineAddChildButtons = ({
         newButton: messages.newUnitButton,
         importButton: messages.useUnitFromLibraryButton,
       };
-      onNewCreateContent = () => handleAddUnit.mutateAsync({
+      onNewCreateContent = () => handleAddAndOpenUnit.mutateAsync({
         type: ContainerType.Vertical,
         parentLocator,
         displayName: COURSE_BLOCK_NAMES.vertical.name,
@@ -237,7 +239,7 @@ const LegacyOutlineAddChildButtons = ({
     courseUsageKey,
     handleAddSection,
     handleAddSubsection,
-    handleAddUnit,
+    handleAddAndOpenUnit,
   } = useCourseAuthoringContext();
   const [
     isAddLibrarySectionModalOpen,
@@ -301,12 +303,12 @@ const LegacyOutlineAddChildButtons = ({
         importButton: messages.useUnitFromLibraryButton,
         modalTitle: messages.unitPickerModalTitle,
       };
-      onNewCreateContent = () => handleAddUnit.mutateAsync({
+      onNewCreateContent = () => handleAddAndOpenUnit.mutateAsync({
         type: ContainerType.Vertical,
         parentLocator,
         displayName: COURSE_BLOCK_NAMES.vertical.name,
       });
-      onUseLibraryContent = (selected: SelectedComponent) => handleAddUnit.mutateAsync({
+      onUseLibraryContent = (selected: SelectedComponent) => handleAddAndOpenUnit.mutateAsync({
         type: COMPONENT_TYPES.libraryV2,
         category: ContainerType.Vertical,
         parentLocator,
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index f3030858f9..cb04c85423 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -39,14 +39,14 @@ export const courseOutlineQueryKeys = {
  * Can also be used to import block from library by passing `libraryContentKey` in request body
  */
 export const useCreateCourseBlock = (
-  callback?: ((locator: string, parentLocator: string) => void),
+  callback?: ((locator: string, parentLocator: string) => Promise<void>),
 ) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: createCourseXblock,
     onSettled: async (data: { locator: string; }, _err, variables) => {
+      await callback?.(data.locator, variables.parentLocator);
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
-      callback?.(data.locator, variables.parentLocator);
     },
   });
 };
diff --git a/src/course-outline/data/slice.ts b/src/course-outline/data/slice.ts
index fb90616304..56a67f7e7b 100644
--- a/src/course-outline/data/slice.ts
+++ b/src/course-outline/data/slice.ts
@@ -171,6 +171,21 @@ const slice = createSlice({
         return section;
       });
     },
+    addUnit: (state: CourseOutlineState, { payload }) => {
+      state.sectionsList = state.sectionsList.map((section) => {
+        section.childInfo.children = section.childInfo.children.map((subsection) => {
+          if (subsection.id !== payload.parentLocator) {
+            return subsection;
+          }
+          subsection.childInfo.children = [
+            ...subsection.childInfo.children.filter(({ id }) => id !== payload.data.id),
+            payload.data,
+          ];
+          return subsection;
+        });
+        return section;
+      });
+    },
     deleteUnit: (state: CourseOutlineState, { payload }) => {
       state.sectionsList = state.sectionsList.map((section) => {
         if (section.id !== payload.sectionId) {
@@ -224,6 +239,7 @@ export const {
   deleteSection,
   deleteSubsection,
   deleteUnit,
+  addUnit,
   duplicateSection,
   reorderSectionList,
   setPasteFileNotices,
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index d6f14c13bc..b9cc084eeb 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -23,6 +23,7 @@ import type { ContainerType } from '@src/generic/key-utils';
 const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
 const handleAddUnit = { mutateAsync: jest.fn() };
+const handleAddAndOpenUnit = { mutateAsync: jest.fn() };
 mockContentSearchConfig.applyMock();
 mockContentLibrary.applyMock();
 mockGetCollectionMetadata.applyMock();
@@ -40,6 +41,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     handleAddSection,
     handleAddSubsection,
     handleAddUnit,
+    handleAddAndOpenUnit,
     setCurrentSelection,
   }),
 }));
@@ -179,7 +181,7 @@ describe('AddSidebar component', () => {
     const addBtns = await screen.findAllByRole('button', { name: 'Add' });
     // first one is unit as per mock
     await user.click(addBtns[0]);
-    expect(handleAddUnit.mutateAsync).toHaveBeenCalledWith({
+    expect(handleAddAndOpenUnit.mutateAsync).toHaveBeenCalledWith({
       type: 'library_v2',
       category: 'vertical',
       parentLocator: lastSubsection.id,
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index d8cb4f286c..65a1c30d8a 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -51,7 +51,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     courseUsageKey,
     handleAddSection,
     handleAddSubsection,
-    handleAddUnit,
+    handleAddAndOpenUnit,
   } = useCourseAuthoringContext();
   const {
     currentFlow,
@@ -59,6 +59,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     lastEditableSection,
     lastEditableSubsection,
     currentItemData,
+    openContainerInfoSidebar,
   } = useOutlineSidebarContext();
   const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
   const subsectionParentId = currentFlow?.parentLocator || lastEditableSubsection?.id;
@@ -70,6 +71,12 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
           type: ContainerType.Chapter,
           parentLocator: courseUsageKey,
           displayName: COURSE_BLOCK_NAMES.chapter.name,
+        }, {
+          onSuccess: (data: { locator: string; }) => openContainerInfoSidebar(
+            data.locator,
+            undefined,
+            data.locator,
+          )
         });
         break;
       case 'subsection':
@@ -78,12 +85,18 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
             type: ContainerType.Sequential,
             parentLocator: sectionParentId,
             displayName: COURSE_BLOCK_NAMES.sequential.name,
+          }, {
+            onSuccess: (data: { locator: string; }) => openContainerInfoSidebar(
+              data.locator,
+              data.locator,
+              sectionParentId,
+            )
           });
         }
         break;
       case 'unit':
         if (subsectionParentId) {
-          await handleAddUnit.mutateAsync({
+          await handleAddAndOpenUnit.mutateAsync({
             type: ContainerType.Vertical,
             parentLocator: subsectionParentId,
             displayName: COURSE_BLOCK_NAMES.vertical.name,
@@ -101,7 +114,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     courseUsageKey,
     handleAddSection,
     handleAddSubsection,
-    handleAddUnit,
+    handleAddAndOpenUnit,
     currentFlow,
     lastEditableSection,
     lastEditableSubsection,
@@ -170,7 +183,7 @@ const AddNewContent = () => {
     );
   }, [currentFlow, intl]);
 
-  if (!currentItemData?.actions.childAddable) {
+  if (currentItemData && !currentItemData.actions.childAddable) {
     return <CannotAddContentAlert />
   }
 
@@ -258,7 +271,7 @@ const ShowLibraryContent = () => {
     return blocks;
   }, [lastEditableSection, lastEditableSubsection, currentFlow]);
 
-  if (!currentItemData?.actions.childAddable) {
+  if (currentItemData && !currentItemData.actions.childAddable) {
     return <CannotAddContentAlert />
   }
 
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index a1daef5a81..9879d64054 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -47,7 +47,7 @@ interface OutlineSidebarContextData {
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
 
-const getLastEditableSection = (blockList: Array<XBlock>) => {
+const getLastEditableItem = (blockList: Array<XBlock>) => {
   let lastIndex = findLastIndex(blockList, (item) => item.actions.childAddable);
   return blockList[lastIndex];
 };
@@ -147,7 +147,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     if (currentItemData?.category === 'chapter' && currentItemData.actions.childAddable) {
       return currentItemData;
     }
-    return currentItemData ? undefined: getLastEditableSection(sectionsList)
+    return currentItemData ? undefined: getLastEditableItem(sectionsList)
   }, [currentItemData, sectionsList]);
 
   /** Stores last subsection that allows adding units inside it. */
@@ -156,7 +156,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       return currentItemData;
     }
     if (currentItemData?.category === 'chapter') {
-      return getLastEditableSection(currentItemData?.childInfo.children || []);
+      return getLastEditableItem(currentItemData?.childInfo.children || []);
     }
     return currentItemData ? undefined: getLastEditableSubsection(sectionsList);
   }, [currentItemData, sectionsList]);
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 81cc2022f0..ec25456fbb 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -30,7 +30,7 @@ jest.mock('@src/course-unit/data/apiHooks', () => ({
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 5,
-    handleAddUnit: handleOnAddUnitFromLibrary,
+    handleAddAndOpenUnit: handleOnAddUnitFromLibrary,
     handleAddSubsection: {},
     handleAddSection: {},
     setCurrentSelection,

From 90b1d6cfbe1ff02229d6c855c3b7e2a942a648d8 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 29 Jan 2026 16:51:20 +0530
Subject: [PATCH 26/60] refactor: currentflow

---
 src/course-outline/CourseOutline.tsx          |  2 -
 .../OutlineAddChildButtons.test.tsx           |  9 ---
 src/course-outline/OutlineAddChildButtons.tsx | 12 ++--
 .../outline-sidebar/AddSidebar.test.tsx       |  2 +-
 .../outline-sidebar/AddSidebar.tsx            | 69 +++++++++++++++----
 .../outline-sidebar/OutlineAlignSidebar.tsx   | 18 ++++-
 .../outline-sidebar/OutlineSidebarContext.tsx | 49 +++++++------
 .../outline-sidebar/SectionInfoSidebar.tsx    |  7 +-
 .../outline-sidebar/SubsectionInfoSidebar.tsx |  6 +-
 .../outline-sidebar/UnitInfoSidebar.tsx       |  7 +-
 .../section-card/SectionCard.test.tsx         |  2 +-
 .../section-card/SectionCard.tsx              |  1 -
 .../subsection-card/SubsectionCard.test.tsx   |  2 +-
 .../subsection-card/SubsectionCard.tsx        |  2 +-
 .../unit-card/UnitCard.test.tsx               |  2 +-
 src/generic/sidebar/SidebarTitle.tsx          | 18 ++++-
 16 files changed, 139 insertions(+), 69 deletions(-)

diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 1f2115b3c6..6d58bc02ca 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -456,7 +456,6 @@ const CourseOutline = () => {
                               <OutlineAddChildButtons
                                 childType={ContainerType.Section}
                                 parentLocator={courseUsageKey}
-                                parentTitle={courseName}
                               />
                             )}
                           </>
@@ -466,7 +465,6 @@ const CourseOutline = () => {
                               <OutlineAddChildButtons
                                 childType={ContainerType.Section}
                                 parentLocator={courseUsageKey}
-                                parentTitle={courseName}
                                 btnVariant="primary"
                                 btnClasses="mt-1"
                               />
diff --git a/src/course-outline/OutlineAddChildButtons.test.tsx b/src/course-outline/OutlineAddChildButtons.test.tsx
index 6bc8737fae..ec004b7a81 100644
--- a/src/course-outline/OutlineAddChildButtons.test.tsx
+++ b/src/course-outline/OutlineAddChildButtons.test.tsx
@@ -62,7 +62,6 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
         handleUseFromLibraryClick={useFromLibClickHandler}
         childType={containerType}
         parentLocator=""
-        parentTitle=""
       />, { extraWrapper: OutlineSidebarProvider });
 
       const newBtn = await screen.findByRole('button', { name: `New ${containerType}` });
@@ -77,11 +76,9 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
 
     it('calls appropriate new handlers', async () => {
       const parentLocator = `parent-of-${containerType}`;
-      const parentTitle = `parent-title-of-${containerType}`;
       render(<OutlineAddChildButtons
         childType={containerType}
         parentLocator={parentLocator}
-        parentTitle={parentTitle}
       />, { extraWrapper: OutlineSidebarProvider });
 
       const newBtn = await screen.findByRole('button', { name: `New ${containerType}` });
@@ -116,11 +113,9 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
 
     it('calls appropriate use handlers', async () => {
       const parentLocator = `parent-of-${containerType}`;
-      const parentTitle = `parent-title-of-${containerType}`;
       render(<OutlineAddChildButtons
         childType={containerType}
         parentLocator={parentLocator}
-        parentTitle={parentTitle}
       />, { extraWrapper: OutlineSidebarProvider });
       const useBtn = await screen.findByRole('button', { name: `Use ${containerType} from library` });
       expect(useBtn).toBeInTheDocument();
@@ -128,22 +123,18 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
       await waitFor(() => expect(startCurrentFlow).toHaveBeenCalledWith({
         flowType: containerType,
         parentLocator,
-        parentTitle,
       }));
     });
 
     it('shows appropriate static placeholder', async () => {
       const parentLocator = `parent-of-${containerType}`;
-      const parentTitle = `parent-title-of-${containerType}`;
       currentFlow = {
         flowType: containerType,
         parentLocator,
-        parentTitle,
       };
       render(<OutlineAddChildButtons
         childType={containerType}
         parentLocator={parentLocator}
-        parentTitle={parentTitle}
       />, { extraWrapper: OutlineSidebarProvider });
       // should show placeholder when use button is clicked
       expect(await screen.findByRole('heading', {
diff --git a/src/course-outline/OutlineAddChildButtons.tsx b/src/course-outline/OutlineAddChildButtons.tsx
index 3fd1f55d84..ed4be2645d 100644
--- a/src/course-outline/OutlineAddChildButtons.tsx
+++ b/src/course-outline/OutlineAddChildButtons.tsx
@@ -26,7 +26,7 @@ import messages from './messages';
  */
 const AddPlaceholder = ({ parentLocator }: { parentLocator?: string }) => {
   const intl = useIntl();
-  const { currentFlow, stopCurrentFlow } = useOutlineSidebarContext();
+  const { isCurrentFlowOn, currentFlow, stopCurrentFlow } = useOutlineSidebarContext();
   const {
     handleAddSection,
     handleAddSubsection,
@@ -34,7 +34,7 @@ const AddPlaceholder = ({ parentLocator }: { parentLocator?: string }) => {
     handleAddAndOpenUnit,
   } = useCourseAuthoringContext();
 
-  if (!currentFlow || currentFlow.parentLocator !== parentLocator) {
+  if (!isCurrentFlowOn || currentFlow?.parentLocator !== parentLocator) {
     return null;
   }
 
@@ -86,11 +86,11 @@ interface BaseProps {
   btnClasses?: string;
   btnSize?: 'sm' | 'md' | 'lg' | 'inline';
   parentLocator: string;
+  grandParentLocator?: string;
 }
 
 interface NewChildButtonsProps extends BaseProps {
   handleUseFromLibraryClick?: () => void;
-  parentTitle: string;
 }
 
 const NewOutlineAddChildButtons = ({
@@ -102,7 +102,7 @@ const NewOutlineAddChildButtons = ({
   btnClasses = 'mt-4 border-gray-500 rounded-0',
   btnSize,
   parentLocator,
-  parentTitle,
+  grandParentLocator,
 }: NewChildButtonsProps) => {
   // WARNING: Do not use "useStudioHome" to get "librariesV2Enabled" flag below,
   // as it has a useEffect that fetches course waffle flags whenever
@@ -175,12 +175,12 @@ const NewOutlineAddChildButtons = ({
     startCurrentFlow({
       flowType,
       parentLocator,
-      parentTitle,
+      grandParentLocator,
     });
   }, [
     childType,
     parentLocator,
-    parentTitle,
+    grandParentLocator,
     startCurrentFlow,
   ]);
 
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index b9cc084eeb..8d8fdda4b8 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -214,7 +214,7 @@ describe('AddSidebar component', () => {
       currentFlow = {
         flowType: category as ContainerType,
         parentLocator: category === 'subsection' ? firstSection.id : firstSubsection.id,
-        parentTitle: category === 'subsection' ? firstSection.displayName : firstSubsection.displayName!,
+        grandParentLocator: category === 'unit' ? firstSection.id : undefined,
       };
       renderComponent();
       // Check existing tab content is rendered by default
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 65a1c30d8a..d2fe3c3cb3 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -23,6 +23,8 @@ import { COURSE_BLOCK_NAMES } from '@src/constants';
 import messages from './messages';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import AlertMessage from '@src/generic/alert-message';
+import { useQueryClient } from '@tanstack/react-query';
+import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 
 
 const CannotAddContentAlert = () => {
@@ -61,8 +63,9 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     currentItemData,
     openContainerInfoSidebar,
   } = useOutlineSidebarContext();
-  const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
-  const subsectionParentId = currentFlow?.parentLocator || lastEditableSubsection?.id;
+  const queryClient = useQueryClient();
+  let sectionParentId = lastEditableSection?.id;
+  let subsectionParentId = lastEditableSubsection?.data.id;
 
   const onCreateContent = useCallback(async () => {
     switch (blockType) {
@@ -80,6 +83,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
         });
         break;
       case 'subsection':
+        sectionParentId = currentFlow?.parentLocator || sectionParentId;
         if (sectionParentId) {
           await handleAddSubsection.mutateAsync({
             type: ContainerType.Sequential,
@@ -95,11 +99,21 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
         }
         break;
       case 'unit':
+        sectionParentId = (
+          currentFlow?.grandParentLocator || lastEditableSubsection?.sectionId || sectionParentId
+        );
+        subsectionParentId = currentFlow?.parentLocator || subsectionParentId;
         if (subsectionParentId) {
           await handleAddAndOpenUnit.mutateAsync({
             type: ContainerType.Vertical,
             parentLocator: subsectionParentId,
             displayName: COURSE_BLOCK_NAMES.vertical.name,
+          }, {
+            onSettled: () => {
+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
+              });
+            }
           });
         }
         break;
@@ -155,7 +169,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
 /** Add New Content Tab Section */
 const AddNewContent = () => {
   const intl = useIntl();
-  const { currentFlow, currentItemData } = useOutlineSidebarContext();
+  const { isCurrentFlowOn, currentFlow, currentItemData } = useOutlineSidebarContext();
   const btns = useCallback(() => {
     if (currentFlow?.flowType) {
       return (
@@ -183,7 +197,7 @@ const AddNewContent = () => {
     );
   }, [currentFlow, intl]);
 
-  if (currentItemData && !currentItemData.actions.childAddable) {
+  if (!isCurrentFlowOn && currentItemData && !currentItemData.actions.childAddable) {
     return <CannotAddContentAlert />
   }
 
@@ -203,6 +217,7 @@ const ShowLibraryContent = () => {
     handleAddUnit,
   } = useCourseAuthoringContext();
   const {
+    isCurrentFlowOn,
     currentFlow,
     stopCurrentFlow,
     lastEditableSection,
@@ -210,9 +225,10 @@ const ShowLibraryContent = () => {
     selectedContainerState,
     currentItemData,
   } = useOutlineSidebarContext();
+  const queryClient = useQueryClient();
 
-  const sectionParentId = currentFlow?.parentLocator || lastEditableSection?.id;
-  const subsectionParentId = currentFlow?.parentLocator || lastEditableSubsection?.id;
+  let sectionParentId = lastEditableSection?.id;
+  let subsectionParentId = lastEditableSubsection?.data.id;
 
   const onComponentSelected: ComponentSelectedEvent = useCallback(async ({ usageKey, blockType }) => {
     switch (blockType) {
@@ -225,6 +241,7 @@ const ShowLibraryContent = () => {
         });
         break;
       case 'subsection':
+        sectionParentId = currentFlow?.parentLocator || sectionParentId;
         if (sectionParentId) {
           await handleAddSubsection.mutateAsync({
             type: COMPONENT_TYPES.libraryV2,
@@ -235,12 +252,22 @@ const ShowLibraryContent = () => {
         }
         break;
       case 'unit':
+        sectionParentId = (
+          currentFlow?.grandParentLocator || lastEditableSubsection?.sectionId || sectionParentId
+        );
+        subsectionParentId = currentFlow?.parentLocator || subsectionParentId;
         if (subsectionParentId) {
           await handleAddUnit.mutateAsync({
             type: COMPONENT_TYPES.libraryV2,
             category: ContainerType.Vertical,
             parentLocator: subsectionParentId,
             libraryContentKey: usageKey,
+          }, {
+            onSettled: () => {
+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
+              });
+            }
           });
         }
         break;
@@ -271,7 +298,7 @@ const ShowLibraryContent = () => {
     return blocks;
   }, [lastEditableSection, lastEditableSubsection, currentFlow]);
 
-  if (currentItemData && !currentItemData.actions.childAddable) {
+  if (!isCurrentFlowOn && currentItemData && !currentItemData.actions.childAddable) {
     return <CannotAddContentAlert />
   }
 
@@ -291,13 +318,13 @@ const ShowLibraryContent = () => {
 /** Tabs Component */
 const AddTabs = () => {
   const intl = useIntl();
-  const { currentFlow } = useOutlineSidebarContext();
+  const { isCurrentFlowOn } = useOutlineSidebarContext();
   const [key, setKey] = useState('addNew');
   useEffect(() => {
-    if (currentFlow) {
+    if (isCurrentFlowOn) {
       setKey('addExisting');
     }
-  }, [currentFlow, setKey]);
+  }, [isCurrentFlowOn, setKey]);
 
   return (
     <Tabs
@@ -322,22 +349,36 @@ const AddTabs = () => {
 export const AddSidebar = () => {
   const intl = useIntl();
   const { courseDetails } = useCourseAuthoringContext();
-  const { currentFlow, currentItemData } = useOutlineSidebarContext();
+  const {
+    isCurrentFlowOn,
+    currentFlow,
+    currentItemData,
+    clearSelection,
+    stopCurrentFlow,
+    selectedContainerState,
+  } = useOutlineSidebarContext();
+  const { data: flowData } = useCourseItemData(currentFlow?.parentLocator);
   const titleAndIcon = useMemo(() => {
-    if (currentFlow?.flowType) {
-      return { title: currentFlow.parentTitle, icon: getItemIcon(currentFlow.flowType) };
+    if (isCurrentFlowOn && currentFlow) {
+      return { title: flowData?.displayName || '', icon: getItemIcon(flowData?.category || '') };
     }
     if (currentItemData) {
       return { title: currentItemData.displayName, icon: getItemIcon(currentItemData.category) };
     }
     return { title: courseDetails?.name || '', icon: SchoolOutline };
-  }, [currentFlow, intl, getItemIcon]);
+  }, [isCurrentFlowOn, flowData, currentFlow, intl, getItemIcon]);
+
+  const handleBack = () => {
+    clearSelection();
+    stopCurrentFlow();
+  }
 
   return (
     <div>
       <SidebarTitle
         title={titleAndIcon.title}
         icon={titleAndIcon.icon}
+        onBackBtnClick={(selectedContainerState || isCurrentFlowOn) ? handleBack : undefined}
       />
       <SidebarContent>
         <SidebarSection>
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index 25fb78362d..ca4fa9dbd6 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -7,10 +7,16 @@ import { useMemo } from 'react';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 export const OutlineAlignSidebar = () => {
-  const { courseId, currentSelection } = useCourseAuthoringContext();
-  const { selectedContainerState } = useOutlineSidebarContext();
+  const {
+    courseId,
+    currentSelection,
+    setCurrentSelection,
+  } = useCourseAuthoringContext();
+  const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
-  const sidebarContentId = useMemo(() => currentSelection?.currentId || selectedContainerState?.currentId || courseId, [
+  const sidebarContentId = useMemo(() => {
+    return currentSelection?.currentId || selectedContainerState?.currentId || courseId
+  }, [
     currentSelection,
     selectedContainerState,
     courseId,
@@ -18,6 +24,11 @@ export const OutlineAlignSidebar = () => {
 
   const { data: contentData } = useContentData(sidebarContentId);
 
+  const handleBack = () => {
+    clearSelection();
+    setCurrentSelection(undefined);
+  }
+
   return (
     <div>
       <SidebarTitle
@@ -27,6 +38,7 @@ export const OutlineAlignSidebar = () => {
             : contentData?.courseDisplayNameWithDefault || ''
         }
         icon={SchoolOutline}
+        onBackBtnClick={(sidebarContentId !== courseId) ? handleBack: undefined}
       />
       <ContentTagsDrawer
         id={sidebarContentId}
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 9879d64054..e9f5d0df71 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { useToggle } from '@openedx/paragon';
 
-import { useEscapeClick, useStateWithUrlSearchParam } from '@src/hooks';
+import { useEscapeClick, useStateWithUrlSearchParam, useToggleWithValue } from '@src/hooks';
 import { SelectionState, XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { isOutlineNewDesignEnabled } from '../utils';
@@ -22,13 +22,14 @@ export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlow = {
   flowType: ContainerType;
   parentLocator: string;
-  parentTitle: string;
+  grandParentLocator?: string;
 };
 
 interface OutlineSidebarContextData {
   currentPageKey: OutlineSidebarPageKeys;
   setCurrentPageKey: (pageKey: OutlineSidebarPageKeys) => void;
-  currentFlow: OutlineFlow | null;
+  isCurrentFlowOn?: boolean;
+  currentFlow?: OutlineFlow;
   startCurrentFlow: (flow: OutlineFlow) => void;
   stopCurrentFlow: () => void;
   isOpen: boolean;
@@ -39,8 +40,8 @@ interface OutlineSidebarContextData {
   clearSelection: () => void;
   /** Stores last section that allows adding subsections inside it. */
   lastEditableSection?: XBlock;
-  /** Stores last subsection that allows adding units inside it. */
-  lastEditableSubsection?: XBlock;
+  /** Stores last subsection that allows adding units inside it and its parent sectionId */
+  lastEditableSubsection?: { data: XBlock, sectionId?: string };
   /** XBlock data of selectedContainerState.currentId */
   currentItemData?: XBlock;
 }
@@ -52,12 +53,18 @@ const getLastEditableItem = (blockList: Array<XBlock>) => {
   return blockList[lastIndex];
 };
 
-const getLastEditableSubsection = (blockList: Array<XBlock>, startIndex?: number) => {
+const getLastEditableSubsection = (
+  blockList: Array<XBlock>,
+  startIndex?: number
+): { data: XBlock, sectionId: string } | undefined => {
   let lastSectionIndex = findLastIndex(blockList, (item) => item.actions.childAddable, startIndex);
   if (lastSectionIndex !== -1) {
     let lastSubsectionIndex = findLastIndex(blockList[lastSectionIndex].childInfo.children, (item) => item.actions.childAddable);
     if (lastSubsectionIndex !== -1) {
-      return blockList[lastSectionIndex].childInfo.children[lastSubsectionIndex];
+      return {
+        data: blockList[lastSectionIndex].childInfo.children[lastSubsectionIndex],
+        sectionId: blockList[lastSectionIndex].id,
+      }
     }
     if (lastSectionIndex > 0) {
       return getLastEditableSubsection(blockList, lastSectionIndex - 1);
@@ -73,7 +80,12 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     (value: string) => value as OutlineSidebarPageKeys,
     (value: OutlineSidebarPageKeys) => value,
   );
-  const [currentFlow, setCurrentFlow] = useState<OutlineFlow | null>(null);
+  const [
+    isCurrentFlowOn,
+    currentFlow,
+    setCurrentFlow,
+    stopCurrentFlow,
+  ] = useToggleWithValue<OutlineFlow>();
   const [isOpen, open, , toggle] = useToggle(true);
 
   /**
@@ -100,19 +112,11 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     }
   }, [currentPageKey, selectedContainerState]);
 
-  /**
-  * Stops current add content flow.
-  * This will cause the sidebar to switch back to its normal state and clear out any placeholder containers.
-  */
-  const stopCurrentFlow = useCallback(() => {
-    setCurrentFlow(null);
-  }, [setCurrentFlow]);
-
   const setCurrentPageKey = useCallback((pageKey: OutlineSidebarPageKeys) => {
     setCurrentPageKeyState(pageKey);
-    setCurrentFlow(null);
+    stopCurrentFlow();
     open();
-  }, [open, setCurrentFlow]);
+  }, [open, stopCurrentFlow]);
 
   const openContainerInfoSidebar = useCallback((
     containerId: string,
@@ -153,10 +157,13 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   /** Stores last subsection that allows adding units inside it. */
   const lastEditableSubsection = useMemo(() => {
     if (currentItemData?.category === 'sequential' && currentItemData.actions.childAddable) {
-      return currentItemData;
+      return { data: currentItemData, sectionId: selectedContainerState?.sectionId };
     }
     if (currentItemData?.category === 'chapter') {
-      return getLastEditableItem(currentItemData?.childInfo.children || []);
+      return {
+        data: getLastEditableItem(currentItemData?.childInfo.children || []),
+        sectionId: selectedContainerState?.currentId,
+      };
     }
     return currentItemData ? undefined: getLastEditableSubsection(sectionsList);
   }, [currentItemData, sectionsList]);
@@ -173,6 +180,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     () => ({
       currentPageKey,
       setCurrentPageKey,
+      isCurrentFlowOn,
       currentFlow,
       startCurrentFlow,
       stopCurrentFlow,
@@ -189,6 +197,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     [
       currentPageKey,
       setCurrentPageKey,
+      isCurrentFlowOn,
       currentFlow,
       startCurrentFlow,
       stopCurrentFlow,
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index 899cb904c6..9cc8333618 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -4,7 +4,7 @@ import { Tab, Tabs, useToggle } from '@openedx/paragon';
 import { SchoolOutline, Tag } from '@openedx/paragon/icons';
 
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
-import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
 import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
@@ -15,6 +15,7 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import messages from './messages';
 import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 interface Props {
   sectionId: string;
@@ -65,6 +66,7 @@ export const SectionSidebar = ({ sectionId }: Props) => {
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { data: sectionData, isLoading } = useCourseItemData(sectionId);
   const { openPublishModal } = useCourseAuthoringContext();
+  const { clearSelection } = useOutlineSidebarContext();
 
   const handlePublish = () => {
     if (sectionData?.hasChanges) {
@@ -83,7 +85,8 @@ export const SectionSidebar = ({ sectionId }: Props) => {
     <>
       <SidebarTitle
         title={sectionData?.displayName || ''}
-        icon={SchoolOutline}
+        icon={getItemIcon(sectionData?.category || '')}
+        onBackBtnClick={clearSelection}
       />
       {sectionData?.hasChanges && <PublishButon onClick={handlePublish} />}
       <Tabs
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index bfd0ca82d2..e6c35a10bd 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -4,7 +4,7 @@ import { Tab, Tabs, useToggle } from '@openedx/paragon';
 import { SchoolOutline, Tag } from '@openedx/paragon/icons';
 
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
-import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
 import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
@@ -67,6 +67,7 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
   const { data: subsectionData, isLoading } = useCourseItemData(subsectionId);
   const { selectedContainerState } = useOutlineSidebarContext();
   const { openPublishModal } = useCourseAuthoringContext();
+  const { clearSelection } = useOutlineSidebarContext();
 
   const handlePublish = () => {
     if (selectedContainerState?.sectionId && subsectionData?.hasChanges) {
@@ -85,7 +86,8 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
     <>
       <SidebarTitle
         title={subsectionData?.displayName || ''}
-        icon={SchoolOutline}
+        icon={getItemIcon(subsectionData?.category || '')}
+        onBackBtnClick={clearSelection}
       />
       {subsectionData?.hasChanges && <PublishButon onClick={handlePublish} />}
       <Tabs
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index c65295d60c..a694e5944f 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -8,7 +8,7 @@ import {
 } from '@openedx/paragon/icons';
 
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
-import { ComponentCountSnippet } from '@src/generic/block-type-utils';
+import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
 import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
@@ -72,7 +72,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'preview' | 'info' | 'settings'>('info');
   const { data: unitData, isLoading } = useCourseItemData(unitId);
-  const { selectedContainerState } = useOutlineSidebarContext();
+  const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
   const { openPublishModal, getUnitUrl, courseId } = useCourseAuthoringContext();
 
   const handlePublish = () => {
@@ -92,7 +92,8 @@ export const UnitSidebar = ({ unitId }: Props) => {
     <>
       <SidebarTitle
         title={unitData?.displayName || ''}
-        icon={SchoolOutline}
+        icon={getItemIcon(unitData?.category || '')}
+        onBackBtnClick={clearSelection}
       />
       <Stack direction="horizontal" gap={1} className="mx-2">
         <Button
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index ce74d6aec5..d8c4feb433 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -333,7 +333,7 @@ describe('<SectionCard />', () => {
         isOpen: true,
         open: jest.fn(),
         toggle: jest.fn(),
-        currentFlow: null,
+        currentFlow: undefined,
         startCurrentFlow: jest.fn(),
         stopCurrentFlow: jest.fn(),
         openContainerInfoSidebar: jest.fn(),
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 98d8b38043..102fe7180c 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -337,7 +337,6 @@ const SectionCard = ({
                     onClickCard={(e) => onClickCard(e, true)}
                     childType={ContainerType.Subsection}
                     parentLocator={section.id}
-                    parentTitle={section.displayName}
                   />
                 )}
               </div>
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index ec25456fbb..844a7d4f0d 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -440,7 +440,7 @@ describe('<SubsectionCard />', () => {
         isOpen: true,
         open: jest.fn(),
         toggle: jest.fn(),
-        currentFlow: null,
+        currentFlow: undefined,
         startCurrentFlow: jest.fn(),
         stopCurrentFlow: jest.fn(),
         openContainerInfoSidebar: jest.fn(),
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 1829fca393..3533f15c35 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -324,7 +324,7 @@ const SubsectionCard = ({
                     onClickCard={(e) => onClickCard(e, true)}
                     childType={ContainerType.Unit}
                     parentLocator={subsection.id}
-                    parentTitle={subsection.displayName}
+                    grandParentLocator={section.id}
                   />
                   {enableCopyPasteUnits && showPasteUnit && sharedClipboardData && (
                     <PasteComponent
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
index c273050eef..ea4239796b 100644
--- a/src/course-outline/unit-card/UnitCard.test.tsx
+++ b/src/course-outline/unit-card/UnitCard.test.tsx
@@ -327,7 +327,7 @@ describe('<UnitCard />', () => {
         isOpen: true,
         open: jest.fn(),
         toggle: jest.fn(),
-        currentFlow: null,
+        currentFlow: undefined,
         startCurrentFlow: jest.fn(),
         stopCurrentFlow: jest.fn(),
         openContainerInfoSidebar: jest.fn(),
diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx
index 93b29c373b..00e9b61c73 100644
--- a/src/generic/sidebar/SidebarTitle.tsx
+++ b/src/generic/sidebar/SidebarTitle.tsx
@@ -1,10 +1,12 @@
-import { Icon, Stack } from '@openedx/paragon';
+import { Icon, IconButton, Stack } from '@openedx/paragon';
+import { ArrowBack } from '@openedx/paragon/icons';
 
 interface SidebarTitleProps {
   /** Title of the section */
   title: string;
   /** Icon to be displayed in the section title */
   icon?: React.ComponentType;
+  onBackBtnClick?: () => void;
 }
 
 /**
@@ -16,8 +18,20 @@ interface SidebarTitleProps {
  * This is meant to standardize the look and feel of the sidebar section titles,
  * so that it can be reused across different parts of the application.
  */
-export const SidebarTitle = ({ title, icon }: SidebarTitleProps) => (
+export const SidebarTitle = ({
+  title,
+  icon,
+  onBackBtnClick,
+}: SidebarTitleProps) => (
   <Stack direction="horizontal" gap={2} className="mb-3">
+    {onBackBtnClick && (
+      <IconButton
+        onClick={onBackBtnClick}
+        alt={''}
+        src={ArrowBack}
+        size="inline"
+      />
+    )}
     <Icon src={icon} className="mr-2 text-primary" />
     <h2 className="text-primary h3 mb-0">{title}</h2>
   </Stack>

From f19c2c57213f8ce2813ff83dbb5b717d6705980a Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 29 Jan 2026 17:52:06 +0530
Subject: [PATCH 27/60] fix: sync issues in unlink, publish and general updates

---
 src/CourseAuthoringContext.tsx                |  3 ++-
 src/course-outline/data/apiHooks.ts           |  3 +--
 src/course-outline/hooks.jsx                  | 17 +++++++++++++++++
 .../outline-sidebar/AddSidebar.tsx            | 14 +++++++++++---
 .../outline-sidebar/UnitInfoSidebar.tsx       |  3 ++-
 .../publish-modal/PublishModal.tsx            |  4 +++-
 .../section-card/SectionCard.tsx              |  7 +++++--
 .../subsection-card/SubsectionCard.tsx        |  8 ++++++--
 src/course-outline/unit-card/UnitCard.tsx     | 19 +++++++++++++++----
 src/data/types.ts                             |  1 +
 src/generic/unlink-modal/data/apiHooks.ts     |  2 +-
 11 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 8e80e8c63f..1c575e1a23 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -18,7 +18,8 @@ import { RequestStatus, RequestStatusType } from './data/constants';
 
 type ModalState = {
   value: XBlock;
-  sectionId: string;
+  subsectionId?: string;
+  sectionId?: string;
 };
 
 export type CourseAuthoringContextData = {
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index cb04c85423..d05b02f89d 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -77,13 +77,12 @@ export const useUpdateCourseBlockName = (courseId: string) => {
   });
 };
 
-export const usePublishCourseItem = (sectionId?: string) => {
+export const usePublishCourseItem = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: publishCourseItem,
     onSettled: async (_data, _err, itemId) => {
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(itemId) });
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionId) });
     },
   });
 };
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 482dfc5548..fdeace4a01 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -51,6 +51,8 @@ import {
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
+import { useQueryClient } from '@tanstack/react-query';
+import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
@@ -93,6 +95,7 @@ const useCourseOutline = ({ courseId }) => {
   const [isHighlightsModalOpen, openHighlightsModal, closeHighlightsModal] = useToggle(false);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+  const queryClient = useQueryClient();
 
   const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
 
@@ -169,6 +172,20 @@ const useCourseOutline = ({ courseId }) => {
     await unlinkDownstream(currentUnlinkModalData.value.id, {
       onSuccess: () => {
         closeUnlinkModal();
+        // refresh child block data
+        currentUnlinkModalData.value.childInfo.children.forEach((block) => {
+          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(block.id) });
+          block.childInfo?.children.forEach(({ id: blockId }) => {
+            queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
+          });
+        });
+        // refresh parent blocks data
+        queryClient.invalidateQueries({
+          queryKey: courseOutlineQueryKeys.courseItemId(currentUnlinkModalData?.sectionId),
+        });
+        queryClient.invalidateQueries({
+          queryKey: courseOutlineQueryKeys.courseItemId(currentUnlinkModalData?.subsectionId),
+        });
       },
     });
   }, [currentUnlinkModalData, unlinkDownstream, closeUnlinkModal]);
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index d2fe3c3cb3..1e88716101 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -65,7 +65,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
   } = useOutlineSidebarContext();
   const queryClient = useQueryClient();
   let sectionParentId = lastEditableSection?.id;
-  let subsectionParentId = lastEditableSubsection?.data.id;
+  let subsectionParentId = lastEditableSubsection?.data?.id;
 
   const onCreateContent = useCallback(async () => {
     switch (blockType) {
@@ -228,7 +228,7 @@ const ShowLibraryContent = () => {
   const queryClient = useQueryClient();
 
   let sectionParentId = lastEditableSection?.id;
-  let subsectionParentId = lastEditableSubsection?.data.id;
+  let subsectionParentId = lastEditableSubsection?.data?.id;
 
   const onComponentSelected: ComponentSelectedEvent = useCallback(async ({ usageKey, blockType }) => {
     switch (blockType) {
@@ -366,7 +366,15 @@ export const AddSidebar = () => {
       return { title: currentItemData.displayName, icon: getItemIcon(currentItemData.category) };
     }
     return { title: courseDetails?.name || '', icon: SchoolOutline };
-  }, [isCurrentFlowOn, flowData, currentFlow, intl, getItemIcon]);
+  }, [
+    isCurrentFlowOn,
+    flowData,
+    currentFlow,
+    intl,
+    getItemIcon,
+    currentItemData,
+    courseDetails,
+  ]);
 
   const handleBack = () => {
     clearSelection();
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index a694e5944f..d43b489c75 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -76,10 +76,11 @@ export const UnitSidebar = ({ unitId }: Props) => {
   const { openPublishModal, getUnitUrl, courseId } = useCourseAuthoringContext();
 
   const handlePublish = () => {
-    if (selectedContainerState?.sectionId && unitData?.hasChanges) {
+    if (unitData?.hasChanges) {
       openPublishModal({
         value: unitData,
         sectionId: selectedContainerState?.sectionId,
+        subsectionId: selectedContainerState?.subsectionId
       });
     }
   };
diff --git a/src/course-outline/publish-modal/PublishModal.tsx b/src/course-outline/publish-modal/PublishModal.tsx
index 360d5be7c4..780ab81980 100644
--- a/src/course-outline/publish-modal/PublishModal.tsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -22,7 +22,7 @@ const PublishModal = () => {
   } = currentPublishModalData?.value || {};
   const categoryName = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
   const children: XBlock[] = childInfo?.children || [];
-  const publishMutation = usePublishCourseItem(currentPublishModalData?.sectionId);
+  const publishMutation = usePublishCourseItem();
   const queryClient = useQueryClient();
 
   const childrenIds = useMemo(() => children.reduce((
@@ -46,6 +46,8 @@ const PublishModal = () => {
           childrenIds.forEach((blockId) => {
             queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
           });
+          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.sectionId) });
+          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.subsectionId) });
         },
       });
     }
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 102fe7180c..5f8f278119 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -26,6 +26,7 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 import messages from './messages';
+import moment from 'moment';
 
 interface SectionCardProps {
   section: XBlock,
@@ -108,8 +109,10 @@ const SectionCard = ({
   /**
   Temporary measure to keep the react-query state updated with redux state  */
   useEffect(() => {
-    queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
-  }, [initialData]);
+    if (moment(initialData.editedOnRaw).isAfter(moment(section.editedOnRaw))) {
+      queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
+    }
+  }, [initialData, section]);
 
   const {
     id,
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 3533f15c35..f4bb6737fd 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -28,6 +28,8 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 import messages from './messages';
+import { sub } from 'date-fns';
+import moment from 'moment';
 
 interface SubsectionCardProps {
   section: XBlock,
@@ -143,8 +145,10 @@ const SubsectionCard = ({
   /**
   Temporary measure to keep the react-query state updated with redux state  */
   useEffect(() => {
-    queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
-  }, [initialData]);
+    if (moment(initialData.editedOnRaw).isAfter(moment(subsection.editedOnRaw))) {
+      queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
+    }
+  }, [initialData, subsection]);
 
   const handleExpandContent = () => {
     setIsExpanded((prevState) => !prevState);
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 17901bd66d..aeb01c8772 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -26,6 +26,7 @@ import type { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
+import moment from 'moment';
 
 interface UnitCardProps {
   unit: XBlock;
@@ -191,8 +192,10 @@ const UnitCard = ({
   /**
   Temporary measure to keep the react-query state updated with redux state  */
   useEffect(() => {
-    queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
-  }, [initialData]);
+    if (moment(initialData.editedOnRaw).isAfter(moment(unit.editedOnRaw))) {
+      queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
+    }
+  }, [initialData, unit]);
 
   useEffect(() => {
     // if this items has been newly added, scroll to it.
@@ -248,10 +251,18 @@ const UnitCard = ({
             hasChanges={hasChanges}
             cardId={id}
             onClickMenuButton={selectAndTrigger}
-            onClickPublish={() => openPublishModal({ value: unit, sectionId: section.id })}
+            onClickPublish={() => openPublishModal({
+              value: unit,
+              sectionId: section.id,
+              subsectionId: subsection.id,
+            })}
             onClickConfigure={onOpenConfigureModal}
             onClickDelete={onOpenDeleteModal}
-            onClickUnlink={() => openUnlinkModal({ value: unit, sectionId: section.id })}
+            onClickUnlink={() => openUnlinkModal({
+              value: unit,
+              sectionId: section.id,
+              subsectionId: subsection.id,
+            })}
             onClickMoveUp={handleUnitMoveUp}
             onClickMoveDown={handleUnitMoveDown}
             onClickSync={openSyncModal}
diff --git a/src/data/types.ts b/src/data/types.ts
index f4484e3aa4..8adfc16997 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -78,6 +78,7 @@ export interface XBlock {
   category: string;
   hasChildren: boolean;
   editedOn: string;
+  editedOnRaw: string;
   published: boolean;
   publishedOn: string;
   studioUrl: string;
diff --git a/src/generic/unlink-modal/data/apiHooks.ts b/src/generic/unlink-modal/data/apiHooks.ts
index f1af9b4319..02b7b21d95 100644
--- a/src/generic/unlink-modal/data/apiHooks.ts
+++ b/src/generic/unlink-modal/data/apiHooks.ts
@@ -15,7 +15,7 @@ export const useUnlinkDownstream = () => {
         queryKey: courseLibrariesQueryKeys.courseLibraries(courseKey),
       });
       queryClient.invalidateQueries({
-        queryKey: courseOutlineQueryKeys.course(courseKey),
+        queryKey: courseOutlineQueryKeys.courseItemId(contentId),
       });
     },
   });

From bc9ab4d601b372719b8ad3e0e450ba4a279359cc Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 29 Jan 2026 21:41:59 +0530
Subject: [PATCH 28/60] fix: course outline status bar unpublished badge sync

---
 src/course-outline/data/apiHooks.ts           |  5 +++
 src/course-outline/data/slice.ts              |  1 -
 src/course-outline/data/types.ts              |  2 +-
 .../publish-modal/PublishModal.tsx            |  2 +-
 src/course-outline/status-bar/StatusBar.tsx   | 32 +++++++++++--------
 src/generic/unlink-modal/data/apiHooks.ts     |  3 ++
 6 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index d05b02f89d..57d59fae58 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -47,6 +47,9 @@ export const useCreateCourseBlock = (
     onSettled: async (data: { locator: string; }, _err, variables) => {
       await callback?.(data.locator, variables.parentLocator);
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(data.locator)),
+      });
     },
   });
 };
@@ -72,6 +75,7 @@ export const useUpdateCourseBlockName = (courseId: string) => {
     mutationFn: editItemDisplayName,
     onSettled: async (_data, _err, variables) => {
       queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
     },
   });
@@ -83,6 +87,7 @@ export const usePublishCourseItem = () => {
     mutationFn: publishCourseItem,
     onSettled: async (_data, _err, itemId) => {
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(itemId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(itemId)) });
     },
   });
 };
diff --git a/src/course-outline/data/slice.ts b/src/course-outline/data/slice.ts
index 56a67f7e7b..412346bd26 100644
--- a/src/course-outline/data/slice.ts
+++ b/src/course-outline/data/slice.ts
@@ -33,7 +33,6 @@ const initialState = {
     },
     videoSharingEnabled: false,
     videoSharingOptions: VIDEO_SHARING_OPTIONS.perVideo,
-    hasChanges: false,
   },
   sectionsList: [],
   isCustomRelativeDatesActive: false,
diff --git a/src/course-outline/data/types.ts b/src/course-outline/data/types.ts
index b141b7d792..55323104fc 100644
--- a/src/course-outline/data/types.ts
+++ b/src/course-outline/data/types.ts
@@ -33,6 +33,7 @@ export interface CourseDetails {
   subtitle?: string;
   org: string;
   description?: string;
+  hasChanges: boolean;
 }
 
 export interface ChecklistType {
@@ -50,7 +51,6 @@ export interface CourseOutlineStatusBar {
   checklist: ChecklistType;
   videoSharingEnabled: boolean;
   videoSharingOptions: string;
-  hasChanges: boolean;
 }
 
 export interface CourseOutlineState {
diff --git a/src/course-outline/publish-modal/PublishModal.tsx b/src/course-outline/publish-modal/PublishModal.tsx
index 780ab81980..83a7292736 100644
--- a/src/course-outline/publish-modal/PublishModal.tsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -20,7 +20,7 @@ const PublishModal = () => {
   const {
     id, displayName, childInfo, category,
   } = currentPublishModalData?.value || {};
-  const categoryName = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
+  const categoryName = COURSE_BLOCK_NAMES[category || '']?.name.toLowerCase();
   const children: XBlock[] = childInfo?.children || [];
   const publishMutation = usePublishCourseItem();
   const queryClient = useQueryClient();
diff --git a/src/course-outline/status-bar/StatusBar.tsx b/src/course-outline/status-bar/StatusBar.tsx
index 13b458f99f..93341d587d 100644
--- a/src/course-outline/status-bar/StatusBar.tsx
+++ b/src/course-outline/status-bar/StatusBar.tsx
@@ -12,6 +12,7 @@ import { useWaffleFlags } from '@src/data/apiHooks';
 import { useEntityLinksSummaryByDownstreamContext } from '@src/course-libraries/data/apiHooks';
 import messages from './messages';
 import { NotificationStatusIcon } from './NotificationStatusIcon';
+import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 
 const CourseBadge = ({ startDate, endDate }: { startDate: Moment, endDate: Moment }) => {
   const now = moment().utc();
@@ -42,17 +43,23 @@ const CourseBadge = ({ startDate, endDate }: { startDate: Moment, endDate: Momen
   }
 };
 
-const UnpublishedBadgeStatus = () => (
-  <Badge
-    className="px-2 py-2 bg-draft-status text-gray-700 font-weight-normal"
-    variant="light"
-  >
-    <Stack direction="horizontal" gap={2}>
-      <Icon size="xs" src={Description} />
-      <FormattedMessage {...messages.unpublishedBadgeText} />
-    </Stack>
-  </Badge>
-);
+const UnpublishedBadgeStatus = ({ courseId }: { courseId: string }) => {
+  const { data } = useCourseDetails(courseId);
+  if (!data?.hasChanges) {
+    return null;
+  }
+  return (
+    <Badge
+      className="px-2 py-2 bg-draft-status text-gray-700 font-weight-normal"
+      variant="light"
+    >
+      <Stack direction="horizontal" gap={2}>
+        <Icon size="xs" src={Description} />
+        <FormattedMessage {...messages.unpublishedBadgeText} />
+      </Stack>
+    </Badge>
+  )
+};
 
 const LibraryUpdates = ({ courseId }: { courseId: string }) => {
   const { data } = useEntityLinksSummaryByDownstreamContext(courseId);
@@ -178,7 +185,6 @@ export const StatusBar = ({
     endDate,
     courseReleaseDate,
     checklist,
-    hasChanges,
   } = statusBarData;
 
   const courseReleaseDateObj = moment.utc(courseReleaseDate, 'MMM DD, YYYY [at] HH:mm UTC', true);
@@ -192,7 +198,7 @@ export const StatusBar = ({
   return (
     <Stack direction="horizontal" gap={4}>
       <CourseBadge startDate={courseReleaseDateObj} endDate={endDateObj} />
-      {hasChanges && <UnpublishedBadgeStatus />}
+      <UnpublishedBadgeStatus courseId={courseId} />
       <CourseDates
         startDate={courseReleaseDateObj}
         endDate={endDateObj}
diff --git a/src/generic/unlink-modal/data/apiHooks.ts b/src/generic/unlink-modal/data/apiHooks.ts
index 02b7b21d95..b5da9faceb 100644
--- a/src/generic/unlink-modal/data/apiHooks.ts
+++ b/src/generic/unlink-modal/data/apiHooks.ts
@@ -17,6 +17,9 @@ export const useUnlinkDownstream = () => {
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseItemId(contentId),
       });
+      queryClient.invalidateQueries({
+        queryKey: courseOutlineQueryKeys.courseDetails(courseKey),
+      });
     },
   });
 };

From 48dd188eef79e5c00f517833cc2826bf1233a073 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 29 Jan 2026 21:51:42 +0530
Subject: [PATCH 29/60] fix: lint issues

---
 src/CourseAuthoringContext.tsx                |  4 +-
 src/course-outline/CourseOutline.test.tsx     |  2 +-
 src/course-outline/CourseOutline.tsx          |  2 +-
 src/course-outline/OutlineAddChildButtons.tsx |  2 +-
 src/course-outline/hooks.jsx                  |  6 +--
 .../outline-sidebar/AddSidebar.test.tsx       |  2 +-
 .../outline-sidebar/AddSidebar.tsx            | 35 ++++++-------
 .../outline-sidebar/OutlineAlignSidebar.tsx   |  8 ++-
 .../outline-sidebar/OutlineSidebarContext.tsx | 19 ++++---
 .../outline-sidebar/SectionInfoSidebar.tsx    |  2 +-
 .../outline-sidebar/UnitInfoSidebar.tsx       |  2 +-
 .../publish-modal/PublishModal.tsx            |  8 ++-
 .../section-card/SectionCard.tsx              |  2 +-
 .../status-bar/LegacyStatusBar.test.tsx       |  1 -
 .../status-bar/StatusBar.test.tsx             | 17 ++++---
 src/course-outline/status-bar/StatusBar.tsx   |  4 +-
 .../subsection-card/SubsectionCard.tsx        |  3 +-
 src/course-outline/unit-card/UnitCard.tsx     |  2 +-
 src/generic/resizable/Resizable.tsx           | 50 ++++++++++---------
 src/generic/sidebar/SidebarTitle.tsx          |  2 +-
 .../library-filters/SidebarFilters.tsx        |  4 +-
 21 files changed, 92 insertions(+), 85 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 1c575e1a23..e5bf3fb8cf 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -6,7 +6,9 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { courseOutlineQueryKeys, useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
 import { useDispatch, useSelector } from 'react-redux';
-import { addSection, addSubsection, addUnit, updateSavingStatus } from '@src/course-outline/data/slice';
+import {
+  addSection, addSubsection, addUnit, updateSavingStatus,
+} from '@src/course-outline/data/slice';
 import { useNavigate } from 'react-router';
 import { getOutlineIndexData } from '@src/course-outline/data/selectors';
 import { useToggleWithValue } from '@src/hooks';
diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index 7cfab05f0c..6d820f5d9a 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -78,7 +78,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
   useOutlineSidebarContext: () => ({
     ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     clearSelection,
-    selectedContainerState: { currentId: selectedContainerId }
+    selectedContainerState: { currentId: selectedContainerId },
   }),
 }));
 
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 6d58bc02ca..6708c5d6d7 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -167,7 +167,7 @@ const CourseOutline = () => {
 
   const { data: currentItemData } = useCourseItemData(currentSelection?.currentId);
 
-  const itemCategory = currentItemData?.category;
+  const itemCategory = currentItemData?.category || '';
   const itemCategoryName = COURSE_BLOCK_NAMES[itemCategory]?.name.toLowerCase();
 
   const enableProctoredExams = useSelector(getProctoredExamsFlag);
diff --git a/src/course-outline/OutlineAddChildButtons.tsx b/src/course-outline/OutlineAddChildButtons.tsx
index ed4be2645d..ef8c583b45 100644
--- a/src/course-outline/OutlineAddChildButtons.tsx
+++ b/src/course-outline/OutlineAddChildButtons.tsx
@@ -86,11 +86,11 @@ interface BaseProps {
   btnClasses?: string;
   btnSize?: 'sm' | 'md' | 'lg' | 'inline';
   parentLocator: string;
-  grandParentLocator?: string;
 }
 
 interface NewChildButtonsProps extends BaseProps {
   handleUseFromLibraryClick?: () => void;
+  grandParentLocator?: string;
 }
 
 const NewOutlineAddChildButtons = ({
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index fdeace4a01..27704f9231 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -11,6 +11,8 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { ContainerType, getBlockType } from '@src/generic/key-utils';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { useUnlinkDownstream } from '@src/generic/unlink-modal';
+import { useQueryClient } from '@tanstack/react-query';
+import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
   resetScrollField,
@@ -51,8 +53,6 @@ import {
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
-import { useQueryClient } from '@tanstack/react-query';
-import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
@@ -226,7 +226,7 @@ const useCourseOutline = ({ courseId }) => {
         break;
       default:
         // istanbul ignore next
-        throw new Error(`Unrecognized category ${category}`);;
+        throw new Error(`Unrecognized category ${category}`);
     }
     closeDeleteModal();
     if (selectedContainerState.currentId === currentSelection?.currentId) {
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index 8d8fdda4b8..fc6349ecad 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -17,8 +17,8 @@ import {
   OutlineSidebarProvider,
 } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import fetchMock from 'fetch-mock-jest';
-import { AddSidebar } from './AddSidebar';
 import type { ContainerType } from '@src/generic/key-utils';
+import { AddSidebar } from './AddSidebar';
 
 const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 1e88716101..aea32caceb 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -20,19 +20,18 @@ import { ContentType } from '@src/library-authoring/routes';
 import { ComponentPicker } from '@src/library-authoring';
 import { MultiLibraryProvider } from '@src/library-authoring/common/context/MultiLibraryContext';
 import { COURSE_BLOCK_NAMES } from '@src/constants';
-import messages from './messages';
-import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import AlertMessage from '@src/generic/alert-message';
 import { useQueryClient } from '@tanstack/react-query';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
-
+import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import messages from './messages';
 
 const CannotAddContentAlert = () => {
   const intl = useIntl();
   const { currentItemData } = useOutlineSidebarContext();
   return (
     <AlertMessage
-      variant='info'
+      variant="info"
       description={intl.formatMessage(messages.cannotAddAlertMsg, {
         name: currentItemData?.displayName,
         category: normalizeContainerType(currentItemData?.category || ''),
@@ -40,7 +39,7 @@ const CannotAddContentAlert = () => {
       icon={InfoOutline}
     />
   );
-}
+};
 
 type AddContentButtonProps = {
   name: string,
@@ -79,7 +78,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
             data.locator,
             undefined,
             data.locator,
-          )
+          ),
         });
         break;
       case 'subsection':
@@ -94,7 +93,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
               data.locator,
               data.locator,
               sectionParentId,
-            )
+            ),
           });
         }
         break;
@@ -113,7 +112,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
               queryClient.invalidateQueries({
                 queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
               });
-            }
+            },
           });
         }
         break;
@@ -134,14 +133,12 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     lastEditableSubsection,
   ]);
 
-  const enabled = useMemo(() => {
-    return (
-      (currentFlow)
-      || (blockType === 'subsection' &&  lastEditableSection)
+  const enabled = useMemo(() => (
+    (currentFlow)
+      || (blockType === 'subsection' && lastEditableSection)
       || (blockType === 'unit' && lastEditableSubsection)
       || (blockType === 'section' && !currentItemData)
-    )
-  }, [
+  ), [
     currentFlow,
     blockType,
     currentItemData,
@@ -198,7 +195,7 @@ const AddNewContent = () => {
   }, [currentFlow, intl]);
 
   if (!isCurrentFlowOn && currentItemData && !currentItemData.actions.childAddable) {
-    return <CannotAddContentAlert />
+    return <CannotAddContentAlert />;
   }
 
   return (
@@ -267,7 +264,7 @@ const ShowLibraryContent = () => {
               queryClient.invalidateQueries({
                 queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
               });
-            }
+            },
           });
         }
         break;
@@ -290,7 +287,7 @@ const ShowLibraryContent = () => {
   const allowedBlocks = useMemo(() => {
     const blocks: ContainerType[] = [];
     if (currentFlow?.flowType) {
-        return [currentFlow.flowType];
+      return [currentFlow.flowType];
     }
     if (!selectedContainerState) { blocks.push(ContainerType.Section); }
     if (lastEditableSection) { blocks.push(ContainerType.Subsection); }
@@ -299,7 +296,7 @@ const ShowLibraryContent = () => {
   }, [lastEditableSection, lastEditableSubsection, currentFlow]);
 
   if (!isCurrentFlowOn && currentItemData && !currentItemData.actions.childAddable) {
-    return <CannotAddContentAlert />
+    return <CannotAddContentAlert />;
   }
 
   return (
@@ -379,7 +376,7 @@ export const AddSidebar = () => {
   const handleBack = () => {
     clearSelection();
     stopCurrentFlow();
-  }
+  };
 
   return (
     <div>
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index ca4fa9dbd6..cb53536cbd 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -14,9 +14,7 @@ export const OutlineAlignSidebar = () => {
   } = useCourseAuthoringContext();
   const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
-  const sidebarContentId = useMemo(() => {
-    return currentSelection?.currentId || selectedContainerState?.currentId || courseId
-  }, [
+  const sidebarContentId = useMemo(() => currentSelection?.currentId || selectedContainerState?.currentId || courseId, [
     currentSelection,
     selectedContainerState,
     courseId,
@@ -27,7 +25,7 @@ export const OutlineAlignSidebar = () => {
   const handleBack = () => {
     clearSelection();
     setCurrentSelection(undefined);
-  }
+  };
 
   return (
     <div>
@@ -38,7 +36,7 @@ export const OutlineAlignSidebar = () => {
             : contentData?.courseDisplayNameWithDefault || ''
         }
         icon={SchoolOutline}
-        onBackBtnClick={(sidebarContentId !== courseId) ? handleBack: undefined}
+        onBackBtnClick={(sidebarContentId !== courseId) ? handleBack : undefined}
       />
       <ContentTagsDrawer
         id={sidebarContentId}
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index e9f5d0df71..8af1c50335 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -11,12 +11,12 @@ import { useToggle } from '@openedx/paragon';
 import { useEscapeClick, useStateWithUrlSearchParam, useToggleWithValue } from '@src/hooks';
 import { SelectionState, XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { isOutlineNewDesignEnabled } from '../utils';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { useSelector } from 'react-redux';
 import { getSectionsList } from '@src/course-outline/data/selectors';
 import { findLastIndex } from 'lodash';
 import { ContainerType } from '@src/generic/key-utils';
+import { isOutlineNewDesignEnabled } from '../utils';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlow = {
@@ -49,22 +49,25 @@ interface OutlineSidebarContextData {
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
 
 const getLastEditableItem = (blockList: Array<XBlock>) => {
-  let lastIndex = findLastIndex(blockList, (item) => item.actions.childAddable);
+  const lastIndex = findLastIndex(blockList, (item) => item.actions.childAddable);
   return blockList[lastIndex];
 };
 
 const getLastEditableSubsection = (
   blockList: Array<XBlock>,
-  startIndex?: number
+  startIndex?: number,
 ): { data: XBlock, sectionId: string } | undefined => {
-  let lastSectionIndex = findLastIndex(blockList, (item) => item.actions.childAddable, startIndex);
+  const lastSectionIndex = findLastIndex(blockList, (item) => item.actions.childAddable, startIndex);
   if (lastSectionIndex !== -1) {
-    let lastSubsectionIndex = findLastIndex(blockList[lastSectionIndex].childInfo.children, (item) => item.actions.childAddable);
+    const lastSubsectionIndex = findLastIndex(
+      blockList[lastSectionIndex].childInfo.children,
+      (item) => item.actions.childAddable,
+    );
     if (lastSubsectionIndex !== -1) {
       return {
         data: blockList[lastSectionIndex].childInfo.children[lastSubsectionIndex],
         sectionId: blockList[lastSectionIndex].id,
-      }
+      };
     }
     if (lastSectionIndex > 0) {
       return getLastEditableSubsection(blockList, lastSectionIndex - 1);
@@ -151,7 +154,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
     if (currentItemData?.category === 'chapter' && currentItemData.actions.childAddable) {
       return currentItemData;
     }
-    return currentItemData ? undefined: getLastEditableItem(sectionsList)
+    return currentItemData ? undefined : getLastEditableItem(sectionsList);
   }, [currentItemData, sectionsList]);
 
   /** Stores last subsection that allows adding units inside it. */
@@ -165,7 +168,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
         sectionId: selectedContainerState?.currentId,
       };
     }
-    return currentItemData ? undefined: getLastEditableSubsection(sectionsList);
+    return currentItemData ? undefined : getLastEditableSubsection(sectionsList);
   }, [currentItemData, sectionsList]);
 
   useEscapeClick({
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index 9cc8333618..71e0edd583 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -12,10 +12,10 @@ import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sideb
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import messages from './messages';
 import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
-import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 
 interface Props {
   sectionId: string;
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index d43b489c75..6cf8c9822b 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -80,7 +80,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
       openPublishModal({
         value: unitData,
         sectionId: selectedContainerState?.sectionId,
-        subsectionId: selectedContainerState?.subsectionId
+        subsectionId: selectedContainerState?.subsectionId,
       });
     }
   };
diff --git a/src/course-outline/publish-modal/PublishModal.tsx b/src/course-outline/publish-modal/PublishModal.tsx
index 83a7292736..dd91e3dbc5 100644
--- a/src/course-outline/publish-modal/PublishModal.tsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -46,8 +46,12 @@ const PublishModal = () => {
           childrenIds.forEach((blockId) => {
             queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
           });
-          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.sectionId) });
-          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.subsectionId) });
+          queryClient.invalidateQueries({
+            queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.sectionId),
+          });
+          queryClient.invalidateQueries({
+            queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.subsectionId),
+          });
         },
       });
     }
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 5f8f278119..9762fa12e6 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -25,8 +25,8 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
-import messages from './messages';
 import moment from 'moment';
+import messages from './messages';
 
 interface SectionCardProps {
   section: XBlock,
diff --git a/src/course-outline/status-bar/LegacyStatusBar.test.tsx b/src/course-outline/status-bar/LegacyStatusBar.test.tsx
index 1aa12d7a77..e6669d7f31 100644
--- a/src/course-outline/status-bar/LegacyStatusBar.test.tsx
+++ b/src/course-outline/status-bar/LegacyStatusBar.test.tsx
@@ -50,7 +50,6 @@ const statusBarData: CourseOutlineStatusBar = {
   highlightsEnabledForMessaging: true,
   videoSharingEnabled: true,
   videoSharingOptions: VIDEO_SHARING_OPTIONS.allOn,
-  hasChanges: true,
 };
 
 const queryClient = new QueryClient();
diff --git a/src/course-outline/status-bar/StatusBar.test.tsx b/src/course-outline/status-bar/StatusBar.test.tsx
index 4bd9672226..8857de48bb 100644
--- a/src/course-outline/status-bar/StatusBar.test.tsx
+++ b/src/course-outline/status-bar/StatusBar.test.tsx
@@ -20,7 +20,6 @@ const statusBarData: CourseOutlineStatusBar = {
   highlightsEnabledForMessaging: true,
   videoSharingEnabled: true,
   videoSharingOptions: VIDEO_SHARING_OPTIONS.allOn,
-  hasChanges: false,
 };
 
 jest.mock('@src/course-libraries/data/apiHooks', () => ({
@@ -30,6 +29,14 @@ jest.mock('@src/course-libraries/data/apiHooks', () => ({
   }),
 }));
 
+let mockHasChanges = false;
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  useCourseDetails: () => ({
+    data: [{ hasChanges: mockHasChanges }],
+    isLoading: false,
+  }),
+}));
+
 const renderComponent = (props?: Partial<StatusBarProps>) => render(
   <StatusBar
     courseId={courseId}
@@ -83,12 +90,8 @@ describe('<StatusBar />', () => {
   });
 
   it('renders unpublished badge', async () => {
-    renderComponent({
-      statusBarData: {
-        ...statusBarData,
-        hasChanges: true,
-      },
-    });
+    mockHasChanges = true;
+    renderComponent();
     expect(await screen.findByText('Unpublished Changes')).toBeInTheDocument();
   });
 
diff --git a/src/course-outline/status-bar/StatusBar.tsx b/src/course-outline/status-bar/StatusBar.tsx
index 93341d587d..d5f0918fd6 100644
--- a/src/course-outline/status-bar/StatusBar.tsx
+++ b/src/course-outline/status-bar/StatusBar.tsx
@@ -10,9 +10,9 @@ import {
 } from '@openedx/paragon/icons';
 import { useWaffleFlags } from '@src/data/apiHooks';
 import { useEntityLinksSummaryByDownstreamContext } from '@src/course-libraries/data/apiHooks';
+import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 import messages from './messages';
 import { NotificationStatusIcon } from './NotificationStatusIcon';
-import { useCourseDetails } from '@src/course-outline/data/apiHooks';
 
 const CourseBadge = ({ startDate, endDate }: { startDate: Moment, endDate: Moment }) => {
   const now = moment().utc();
@@ -58,7 +58,7 @@ const UnpublishedBadgeStatus = ({ courseId }: { courseId: string }) => {
         <FormattedMessage {...messages.unpublishedBadgeText} />
       </Stack>
     </Badge>
-  )
+  );
 };
 
 const LibraryUpdates = ({ courseId }: { courseId: string }) => {
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index f4bb6737fd..e5d0b642f6 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -27,9 +27,8 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
-import messages from './messages';
-import { sub } from 'date-fns';
 import moment from 'moment';
+import messages from './messages';
 
 interface SubsectionCardProps {
   section: XBlock,
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index aeb01c8772..6098fe8f84 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -25,8 +25,8 @@ import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import type { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
-import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 import moment from 'moment';
+import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 
 interface UnitCardProps {
   unit: XBlock;
diff --git a/src/generic/resizable/Resizable.tsx b/src/generic/resizable/Resizable.tsx
index b604380801..cf96080375 100644
--- a/src/generic/resizable/Resizable.tsx
+++ b/src/generic/resizable/Resizable.tsx
@@ -1,5 +1,7 @@
-import { useWindowSize } from "@openedx/paragon";
-import React, { useRef, useState, useCallback, useMemo } from "react";
+import { useWindowSize } from '@openedx/paragon';
+import React, {
+  useRef, useState, useCallback, useMemo,
+} from 'react';
 
 const MIN_WIDTH = 440; // px
 
@@ -31,16 +33,6 @@ export const ResizableBox = ({
     return Math.abs(windowWidth * 0.65);
   }, [windowWidth]);
 
-  const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault(); // prevent text selection
-    startXRef.current = e.clientX;
-    startWidthRef.current = width;
-
-    // Attach listeners to the whole document so dragging works even outside the box
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-  }, [width]);
-
   const onMouseMove = useCallback((e: MouseEvent) => {
     const dx = e.clientX - startXRef.current; // positive = mouse moved right
     const newWidth = Math.min(
@@ -51,21 +43,31 @@ export const ResizableBox = ({
   }, [maxWidth, minWidth, defaultMaxWidth]);
 
   const onMouseUp = useCallback(() => {
-    document.removeEventListener("mousemove", onMouseMove);
-    document.removeEventListener("mouseup", onMouseUp);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
   }, [onMouseMove]);
 
+  const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault(); // prevent text selection
+    startXRef.current = e.clientX;
+    startWidthRef.current = width;
+
+    // Attach listeners to the whole document so dragging works even outside the box
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, [width]);
+
   return (
-      <div
-        className="resizable"
-        ref={boxRef}
-        style={{ width: `${width}px` }}
-      >
-        <div className="resizable-handle" onMouseDown={onMouseDown} />
-        <div className="w-100">
-          {children}
-        </div>
+    <div
+      className="resizable"
+      ref={boxRef}
+      style={{ width: `${width}px` }}
+    >
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */}
+      <div className="resizable-handle" onMouseDown={onMouseDown} />
+      <div className="w-100">
+        {children}
       </div>
+    </div>
   );
 };
-
diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx
index 00e9b61c73..c13abfd848 100644
--- a/src/generic/sidebar/SidebarTitle.tsx
+++ b/src/generic/sidebar/SidebarTitle.tsx
@@ -27,7 +27,7 @@ export const SidebarTitle = ({
     {onBackBtnClick && (
       <IconButton
         onClick={onBackBtnClick}
-        alt={''}
+        alt=""
         src={ArrowBack}
         size="inline"
       />
diff --git a/src/library-authoring/library-filters/SidebarFilters.tsx b/src/library-authoring/library-filters/SidebarFilters.tsx
index 1d6c0cc52b..1db7e2f1a9 100644
--- a/src/library-authoring/library-filters/SidebarFilters.tsx
+++ b/src/library-authoring/library-filters/SidebarFilters.tsx
@@ -19,7 +19,7 @@ export const SidebarFilters = ({ onlyOneType }: FiltersProps) => {
 
   return (
     <Stack gap={3} className="my-3">
-      <Stack className='flex-wrap' direction="horizontal" gap={2}>
+      <Stack className="flex-wrap" direction="horizontal" gap={2}>
         <LibraryDropdownFilter />
         <Stack direction="horizontal" gap={1}>
           <SearchKeywordsField />
@@ -33,7 +33,7 @@ export const SidebarFilters = ({ onlyOneType }: FiltersProps) => {
         </Stack>
       </Stack>
       {isOn && (
-      <Stack className='flex-wrap' direction="horizontal" gap={2}>
+      <Stack className="flex-wrap" direction="horizontal" gap={2}>
         {!(onlyOneType) && <FilterByBlockType />}
         <FilterByTags />
         <CollectionDropdownFilter />

From 1436c27552a99224b7d738e33f4e842bacbf1c0f Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Sun, 1 Feb 2026 16:32:25 +0530
Subject: [PATCH 30/60] refactor: delete

---
 src/course-outline/data/apiHooks.ts           |  12 +-
 src/course-outline/data/thunk.ts              |  49 --------
 src/course-outline/hooks.jsx                  |  63 ++++++++--
 .../outline-sidebar/AddSidebar.tsx            | 117 +++++++++++-------
 .../outline-sidebar/OutlineSidebarContext.tsx |   2 +-
 5 files changed, 135 insertions(+), 108 deletions(-)

diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index 57d59fae58..b1c852f95f 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -5,7 +5,7 @@ import {
   skipToken, useMutation, useQuery, useQueryClient,
 } from '@tanstack/react-query';
 import {
-  createCourseXblock, editItemDisplayName, getCourseDetails, getCourseItem, publishCourseItem,
+  createCourseXblock, deleteCourseItem, editItemDisplayName, getCourseDetails, getCourseItem, publishCourseItem,
 } from './api';
 
 export const courseOutlineQueryKeys = {
@@ -91,3 +91,13 @@ export const usePublishCourseItem = () => {
     },
   });
 };
+
+export const useDeleteCourseItem = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteCourseItem,
+    onSettled: async (_data, _err, itemId) => {
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(itemId)) });
+    },
+  });
+}
diff --git a/src/course-outline/data/thunk.ts b/src/course-outline/data/thunk.ts
index 3be2d54270..b94c7cc106 100644
--- a/src/course-outline/data/thunk.ts
+++ b/src/course-outline/data/thunk.ts
@@ -354,55 +354,6 @@ export function configureCourseUnitQuery(
   };
 }
 
-/**
- * Generic function to delete course item, see below wrapper funcs for specific implementations.
- * @param {string} itemId
- * @param {() => {}} deleteItemFn
- */
-function deleteCourseItemQuery(itemId: string, deleteItemFn: () => {}) {
-  return async (dispatch) => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
-
-    try {
-      await deleteCourseItem(itemId);
-      dispatch(deleteItemFn());
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-    } catch {
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  };
-}
-
-export function deleteCourseSectionQuery(sectionId: string) {
-  return async (dispatch) => {
-    dispatch(deleteCourseItemQuery(
-      sectionId,
-      () => deleteSection({ itemId: sectionId }),
-    ));
-  };
-}
-
-export function deleteCourseSubsectionQuery(subsectionId: string, sectionId: string) {
-  return async (dispatch) => {
-    dispatch(deleteCourseItemQuery(
-      subsectionId,
-      () => deleteSubsection({ itemId: subsectionId, sectionId }),
-    ));
-  };
-}
-
-export function deleteCourseUnitQuery(unitId: string, subsectionId: string, sectionId: string) {
-  return async (dispatch) => {
-    dispatch(deleteCourseItemQuery(
-      unitId,
-      () => deleteUnit({ itemId: unitId, subsectionId, sectionId }),
-    ));
-  };
-}
-
 /**
  * Generic function to duplicate any course item. See wrapper functions below for specific implementations.
  * @param {string} itemId
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 27704f9231..28f1685d4a 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -12,9 +12,12 @@ import { ContainerType, getBlockType } from '@src/generic/key-utils';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { useUnlinkDownstream } from '@src/generic/unlink-modal';
 import { useQueryClient } from '@tanstack/react-query';
-import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
+import { courseOutlineQueryKeys, useDeleteCourseItem } from '@src/course-outline/data/apiHooks';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
+  deleteSection,
+  deleteSubsection,
+  deleteUnit,
   resetScrollField,
   updateSavingStatus,
 } from './data/slice';
@@ -30,9 +33,6 @@ import {
   getCreatedOn,
 } from './data/selectors';
 import {
-  deleteCourseSectionQuery,
-  deleteCourseSubsectionQuery,
-  deleteCourseUnitQuery,
   duplicateSectionQuery,
   duplicateSubsectionQuery,
   duplicateUnitQuery,
@@ -208,21 +208,60 @@ const useCourseOutline = ({ courseId }) => {
     handleConfigureModalClose();
   };
 
-  const handleDeleteItemSubmit = () => {
+  const deleteMutation = useDeleteCourseItem();
+
+  const handleDeleteItemSubmit = async () => {
+    // istanbul ignore if
+    if (!currentSelection) {
+      return;
+    }
     const category = getBlockType(currentSelection.currentId);
     switch (category) {
       case COURSE_BLOCK_NAMES.chapter.id:
-        dispatch(deleteCourseSectionQuery(currentSelection?.currentId));
+        await deleteMutation.mutateAsync(
+          currentSelection.currentId,
+          {
+            onSettled: () => dispatch(deleteSection({ itemId: sectionId })),
+          }
+        );
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
-        dispatch(deleteCourseSubsectionQuery(currentSelection?.currentId, currentSelection?.sectionId));
+        await deleteMutation.mutateAsync(
+          currentSelection.currentId,
+          {
+            onSettled: () => {
+              dispatch(deleteSubsection({
+                itemId: currentSelection.currentId,
+                sectionId: currentSelection.sectionId,
+              }));
+              // invalidate parent section data
+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
+              });
+            }
+          }
+        );
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
-        dispatch(deleteCourseUnitQuery(
-          currentSelection?.currentId,
-          currentSelection?.subsectionId,
-          currentSelection?.sectionId,
-        ));
+        await deleteMutation.mutateAsync(
+          currentSelection.currentId,
+          {
+            onSettled: () => {
+              dispatch(deleteUnit({
+                itemId: currentSelection.currentId,
+                subsectionId: currentSelection.subsectionId,
+                sectionId: currentSelection.sectionId,
+              }));
+              // invalidate parent subsection and section data
+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.subsectionId),
+              });
+              queryClient.invalidateQueries({
+                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
+              });
+            }
+          }
+        );
         break;
       default:
         // istanbul ignore next
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index aea32caceb..23fcdba82d 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -59,42 +59,71 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     stopCurrentFlow,
     lastEditableSection,
     lastEditableSubsection,
-    currentItemData,
     openContainerInfoSidebar,
   } = useOutlineSidebarContext();
   const queryClient = useQueryClient();
   let sectionParentId = lastEditableSection?.id;
   let subsectionParentId = lastEditableSubsection?.data?.id;
 
+  const addSection = async (onSuccess?: (data: { locator: string; }) => void) => {
+    await handleAddSection.mutateAsync({
+      type: ContainerType.Chapter,
+      parentLocator: courseUsageKey,
+      displayName: COURSE_BLOCK_NAMES.chapter.name,
+    }, {
+        onSuccess: (data: { locator: string; }) => {
+          if (onSuccess) {
+            onSuccess(data);
+          } else {
+            openContainerInfoSidebar(data.locator, undefined, data.locator)
+          }
+        },
+      });
+  }
+
+  const addSubsection = async (sectionParentId: string, onSuccess?: (data: { locator: string; }) => void) => {
+    await handleAddSubsection.mutateAsync({
+      type: ContainerType.Sequential,
+      parentLocator: sectionParentId,
+      displayName: COURSE_BLOCK_NAMES.sequential.name,
+    }, {
+        onSuccess: (data: { locator: string; }) => {
+          if (onSuccess) {
+            onSuccess(data);
+          } else {
+            openContainerInfoSidebar(data.locator, data.locator, sectionParentId)
+          }
+        },
+      });
+  }
+
+  const addUnit = async (subsectionParentId: string, sectionParentId?: string, onSettled?: () => void) => {
+    await handleAddAndOpenUnit.mutateAsync({
+      type: ContainerType.Vertical,
+      parentLocator: subsectionParentId,
+      displayName: COURSE_BLOCK_NAMES.vertical.name,
+    }, {
+        onSettled: () => {
+          if (onSettled) {
+            onSettled();
+          } else {
+            queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId) })
+          }
+        },
+      });
+  }
+
   const onCreateContent = useCallback(async () => {
     switch (blockType) {
       case 'section':
-        await handleAddSection.mutateAsync({
-          type: ContainerType.Chapter,
-          parentLocator: courseUsageKey,
-          displayName: COURSE_BLOCK_NAMES.chapter.name,
-        }, {
-          onSuccess: (data: { locator: string; }) => openContainerInfoSidebar(
-            data.locator,
-            undefined,
-            data.locator,
-          ),
-        });
+        addSection();
         break;
       case 'subsection':
         sectionParentId = currentFlow?.parentLocator || sectionParentId;
         if (sectionParentId) {
-          await handleAddSubsection.mutateAsync({
-            type: ContainerType.Sequential,
-            parentLocator: sectionParentId,
-            displayName: COURSE_BLOCK_NAMES.sequential.name,
-          }, {
-            onSuccess: (data: { locator: string; }) => openContainerInfoSidebar(
-              data.locator,
-              data.locator,
-              sectionParentId,
-            ),
-          });
+          addSubsection(sectionParentId);
+        } else {
+          addSection(({ locator }) => addSubsection(locator));
         }
         break;
       case 'unit':
@@ -102,17 +131,17 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
           currentFlow?.grandParentLocator || lastEditableSubsection?.sectionId || sectionParentId
         );
         subsectionParentId = currentFlow?.parentLocator || subsectionParentId;
+        // __AUTO_GENERATED_PRINT_VAR_START__
+        console.log("AddContentButton#(anon) subsectionParentId: ", subsectionParentId); // __AUTO_GENERATED_PRINT_VAR_END__
         if (subsectionParentId) {
-          await handleAddAndOpenUnit.mutateAsync({
-            type: ContainerType.Vertical,
-            parentLocator: subsectionParentId,
-            displayName: COURSE_BLOCK_NAMES.vertical.name,
-          }, {
-            onSettled: () => {
-              queryClient.invalidateQueries({
-                queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
-              });
-            },
+          addUnit(subsectionParentId, sectionParentId);
+        } else if (sectionParentId) {
+          addSubsection(sectionParentId, ({ locator }) => addUnit(locator));
+        } else {
+          addSection(({ locator: sectionId }) => {
+            addSubsection(sectionId, ({ locator: subsectionId }) => {
+              addUnit(subsectionId, sectionId)
+            })
           });
         }
         break;
@@ -129,21 +158,19 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     handleAddSubsection,
     handleAddAndOpenUnit,
     currentFlow,
-    lastEditableSection,
+    sectionParentId,
+    subsectionParentId,
     lastEditableSubsection,
   ]);
 
-  const enabled = useMemo(() => (
-    (currentFlow)
-      || (blockType === 'subsection' && lastEditableSection)
-      || (blockType === 'unit' && lastEditableSubsection)
-      || (blockType === 'section' && !currentItemData)
+  const disabled = useMemo(() => (
+    handleAddSection.isPending ||
+    handleAddSubsection.isPending ||
+    handleAddAndOpenUnit.isPending
   ), [
-    currentFlow,
-    blockType,
-    currentItemData,
-    lastEditableSection,
-    lastEditableSubsection,
+      handleAddSection,
+      handleAddSubsection,
+      handleAddAndOpenUnit,
   ]);
 
   return (
@@ -151,7 +178,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
       variant="tertiary shadow"
       className="mx-2 justify-content-start px-4 font-weight-bold"
       onClick={onCreateContent}
-      disabled={!enabled}
+      disabled={disabled}
     >
       <Stack direction="horizontal" gap={3}>
         <span className={`p-2 rounded ${getIconBorderStyleColor(blockType)}`}>
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 8af1c50335..c094eddd21 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -169,7 +169,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       };
     }
     return currentItemData ? undefined : getLastEditableSubsection(sectionsList);
-  }, [currentItemData, sectionsList]);
+  }, [currentItemData, sectionsList, selectedContainerState]);
 
   useEscapeClick({
     onEscape: () => {

From 4d34deb587d8a72fae3884abea1e48a77d5681d8 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Sun, 1 Feb 2026 16:40:17 +0530
Subject: [PATCH 31/60] fix: rebase issues and delete typo

---
 src/course-outline/hooks.jsx                    | 17 ++++++++++++++---
 .../OutlineSidebarPagesContext.tsx              |  4 ++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 28f1685d4a..39afbe153c 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -210,7 +210,7 @@ const useCourseOutline = ({ courseId }) => {
 
   const deleteMutation = useDeleteCourseItem();
 
-  const handleDeleteItemSubmit = async () => {
+  const handleDeleteItemSubmit = useCallback(async () => {
     // istanbul ignore if
     if (!currentSelection) {
       return;
@@ -221,7 +221,7 @@ const useCourseOutline = ({ courseId }) => {
         await deleteMutation.mutateAsync(
           currentSelection.currentId,
           {
-            onSettled: () => dispatch(deleteSection({ itemId: sectionId })),
+            onSettled: () => dispatch(deleteSection({ itemId: currentSelection.currentId })),
           }
         );
         break;
@@ -271,7 +271,18 @@ const useCourseOutline = ({ courseId }) => {
     if (selectedContainerState.currentId === currentSelection?.currentId) {
       clearSelection();
     }
-  };
+  }, [
+    deleteMutation,
+    clearSelection,
+    closeDeleteModal,
+    queryClient,
+    currentSelection,
+    courseOutlineQueryKeys,
+    dispatch,
+    deleteSection,
+    deleteUnit,
+    deleteSubsection,
+  ]);
 
   const handleDuplicateSectionSubmit = () => {
     dispatch(duplicateSectionQuery(currentSelection?.sectionId, courseStructure.id));
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
index 8aaf0412ab..e3fe73e578 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
@@ -9,7 +9,7 @@ import type { SidebarPage } from '@src/generic/sidebar';
 import { AddSidebar } from './AddSidebar';
 import { OutlineAlignSidebar } from './OutlineAlignSidebar';
 import OutlineHelpSidebar from './OutlineHelpSidebar';
-import { OutlineInfoSidebar } from './OutlineInfoSidebar';
+import { InfoSidebar } from './InfoSidebar';
 import messages from './messages';
 
 export type OutlineSidebarPages = {
@@ -21,7 +21,7 @@ export type OutlineSidebarPages = {
 
 const getOutlineSidebarPages = () => ({
   info: {
-    component: OutlineInfoSidebar,
+    component: InfoSidebar,
     icon: Info,
     title: messages.sidebarButtonInfo,
   },

From a56961f32968fbe4d1203df2bcf1461964216dc2 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Sun, 1 Feb 2026 16:44:24 +0530
Subject: [PATCH 32/60] fix: lint issues

---
 src/course-outline/data/apiHooks.ts           |  2 +-
 src/course-outline/data/thunk.ts              |  4 -
 src/course-outline/hooks.jsx                  | 10 +--
 .../outline-sidebar/AddSidebar.tsx            | 80 +++++++++----------
 4 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index b1c852f95f..a2cf7b37c6 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -100,4 +100,4 @@ export const useDeleteCourseItem = () => {
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(itemId)) });
     },
   });
-}
+};
diff --git a/src/course-outline/data/thunk.ts b/src/course-outline/data/thunk.ts
index b94c7cc106..8441715cfa 100644
--- a/src/course-outline/data/thunk.ts
+++ b/src/course-outline/data/thunk.ts
@@ -11,7 +11,6 @@ import {
 } from '../utils/getChecklistForStatusBar';
 import { getErrorDetails } from '../utils/getErrorDetails';
 import {
-  deleteCourseItem,
   duplicateCourseItem,
   enableCourseHighlightsEmails,
   getCourseBestPractices,
@@ -40,9 +39,6 @@ import {
   updateSavingStatus,
   updateSectionList,
   updateFetchSectionLoadingStatus,
-  deleteSection,
-  deleteSubsection,
-  deleteUnit,
   duplicateSection,
   reorderSectionList,
   setPasteFileNotices,
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 39afbe153c..7ce72260cb 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -222,7 +222,7 @@ const useCourseOutline = ({ courseId }) => {
           currentSelection.currentId,
           {
             onSettled: () => dispatch(deleteSection({ itemId: currentSelection.currentId })),
-          }
+          },
         );
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
@@ -238,8 +238,8 @@ const useCourseOutline = ({ courseId }) => {
               queryClient.invalidateQueries({
                 queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
               });
-            }
-          }
+            },
+          },
         );
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
@@ -259,8 +259,8 @@ const useCourseOutline = ({ courseId }) => {
               queryClient.invalidateQueries({
                 queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
               });
-            }
-          }
+            },
+          },
         );
         break;
       default:
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 23fcdba82d..f0b5cad846 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -71,47 +71,47 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
       parentLocator: courseUsageKey,
       displayName: COURSE_BLOCK_NAMES.chapter.name,
     }, {
-        onSuccess: (data: { locator: string; }) => {
-          if (onSuccess) {
-            onSuccess(data);
-          } else {
-            openContainerInfoSidebar(data.locator, undefined, data.locator)
-          }
-        },
-      });
-  }
+      onSuccess: (data: { locator: string; }) => {
+        if (onSuccess) {
+          onSuccess(data);
+        } else {
+          openContainerInfoSidebar(data.locator, undefined, data.locator);
+        }
+      },
+    });
+  };
 
-  const addSubsection = async (sectionParentId: string, onSuccess?: (data: { locator: string; }) => void) => {
+  const addSubsection = async (sectionId: string, onSuccess?: (data: { locator: string; }) => void) => {
     await handleAddSubsection.mutateAsync({
       type: ContainerType.Sequential,
-      parentLocator: sectionParentId,
+      parentLocator: sectionId,
       displayName: COURSE_BLOCK_NAMES.sequential.name,
     }, {
-        onSuccess: (data: { locator: string; }) => {
-          if (onSuccess) {
-            onSuccess(data);
-          } else {
-            openContainerInfoSidebar(data.locator, data.locator, sectionParentId)
-          }
-        },
-      });
-  }
+      onSuccess: (data: { locator: string; }) => {
+        if (onSuccess) {
+          onSuccess(data);
+        } else {
+          openContainerInfoSidebar(data.locator, data.locator, sectionId);
+        }
+      },
+    });
+  };
 
-  const addUnit = async (subsectionParentId: string, sectionParentId?: string, onSettled?: () => void) => {
+  const addUnit = async (subsectionId: string, sectionId?: string, onSettled?: () => void) => {
     await handleAddAndOpenUnit.mutateAsync({
       type: ContainerType.Vertical,
-      parentLocator: subsectionParentId,
+      parentLocator: subsectionId,
       displayName: COURSE_BLOCK_NAMES.vertical.name,
     }, {
-        onSettled: () => {
-          if (onSettled) {
-            onSettled();
-          } else {
-            queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId) })
-          }
-        },
-      });
-  }
+      onSettled: () => {
+        if (onSettled) {
+          onSettled();
+        } else {
+          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionId) });
+        }
+      },
+    });
+  };
 
   const onCreateContent = useCallback(async () => {
     switch (blockType) {
@@ -131,8 +131,6 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
           currentFlow?.grandParentLocator || lastEditableSubsection?.sectionId || sectionParentId
         );
         subsectionParentId = currentFlow?.parentLocator || subsectionParentId;
-        // __AUTO_GENERATED_PRINT_VAR_START__
-        console.log("AddContentButton#(anon) subsectionParentId: ", subsectionParentId); // __AUTO_GENERATED_PRINT_VAR_END__
         if (subsectionParentId) {
           addUnit(subsectionParentId, sectionParentId);
         } else if (sectionParentId) {
@@ -140,8 +138,8 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
         } else {
           addSection(({ locator: sectionId }) => {
             addSubsection(sectionId, ({ locator: subsectionId }) => {
-              addUnit(subsectionId, sectionId)
-            })
+              addUnit(subsectionId, sectionId);
+            });
           });
         }
         break;
@@ -164,13 +162,13 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
   ]);
 
   const disabled = useMemo(() => (
-    handleAddSection.isPending ||
-    handleAddSubsection.isPending ||
-    handleAddAndOpenUnit.isPending
+    handleAddSection.isPending
+    || handleAddSubsection.isPending
+    || handleAddAndOpenUnit.isPending
   ), [
-      handleAddSection,
-      handleAddSubsection,
-      handleAddAndOpenUnit,
+    handleAddSection,
+    handleAddSubsection,
+    handleAddAndOpenUnit,
   ]);
 
   return (

From 4976d0f0b9d93fa51a9da5e8abde61f15e983170 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 2 Feb 2026 11:22:27 +0530
Subject: [PATCH 33/60] fix: failing tests

---
 src/course-outline/CourseOutline.test.tsx     | 170 +++++++++---------
 .../OutlineAddChildButtons.test.tsx           |   3 +
 .../outline-sidebar/AddSidebar.test.tsx       |  14 +-
 .../outline-sidebar/OutlineSidebar.test.tsx   |   1 +
 .../section-card/SectionCard.test.tsx         |  42 +++--
 .../status-bar/StatusBar.test.tsx             |   2 +-
 6 files changed, 126 insertions(+), 106 deletions(-)

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index 6d820f5d9a..85f1277010 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -447,7 +447,7 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onPost(getXBlockBaseApiUrl())
       .reply(200, {
-        locator: 'some',
+        locator: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@vertical1e842129',
       });
     const newUnitButton = await within(subsectionElement).findByRole('button', { name: 'New unit' });
     await act(async () => fireEvent.click(newUnitButton));
@@ -474,7 +474,7 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onPost(postXBlockBaseApiUrl())
       .reply(200, {
-        locator: 'some',
+        locator: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@vertical1e842129',
         parent_locator: 'parent',
       });
 
@@ -512,8 +512,8 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onPost(postXBlockBaseApiUrl())
       .reply(200, {
-        locator: 'some',
-        parent_locator: 'parent',
+        locator: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential45d4d95a',
+        parent_locator: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@chaptersda1',
       });
 
     const addSubsectionFromLibraryButton = within(sectionElement).getByRole('button', {
@@ -548,8 +548,8 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onPost(postXBlockBaseApiUrl())
       .reply(200, {
-        locator: 'some',
-        parent_locator: 'parent',
+        locator: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@chaptersdafdd',
+        courseKey: 'course-v1:UNIX+UX1+2025_T3',
       });
 
     const addSectionFromLibraryButton = await screen.findByRole('button', {
@@ -958,6 +958,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check configure modal for subsection', async () => {
+    const user = userEvent.setup();
     const {
       findAllByTestId,
       findByTestId,
@@ -999,14 +1000,14 @@ describe('<CourseOutline />', () => {
     subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
     subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
     subsection.hideAfterDue = expectedRequestData.metadata.hide_after_due;
-    section.childInfo.children[0] = subsection;
     axiosMock
-      .onGet(getXBlockApiUrl(section.id))
-      .reply(200, section);
+      .onGet(getXBlockApiUrl(subsection.id))
+      .reply(200, subsection);
+    section.childInfo.children[0] = subsection;
 
-    fireEvent.click(subsectionDropdownButton);
+    await user.click(subsectionDropdownButton);
     const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
-    fireEvent.click(configureBtn);
+    await user.click(configureBtn);
 
     // update fields
     let configureModal = await findByTestId('configure-modal');
@@ -1026,27 +1027,27 @@ describe('<CourseOutline />', () => {
 
     // visibility tab
     const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
-    fireEvent.click(visibilityTab);
+    await user.click(visibilityTab);
     const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(visibilityRadioButtons[1]);
+    await user.click(visibilityRadioButtons[1]);
 
     let advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     let radioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(radioButtons[1]);
+    await user.click(radioButtons[1]);
     let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
     let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
     fireEvent.change(hours, { target: { value: '54:30' } });
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
-    await act(async () => fireEvent.click(saveButton));
+    await user.click(saveButton);
 
     // verify request
     expect(axiosMock.history.post.length).toBe(3);
     expect(axiosMock.history.post[2].data).toBe(JSON.stringify(expectedRequestData));
 
     // reopen modal and check values
-    await act(async () => fireEvent.click(subsectionDropdownButton));
-    await act(async () => fireEvent.click(configureBtn));
+    await user.click(subsectionDropdownButton);
+    await user.click(configureBtn);
 
     configureModal = await findByTestId('configure-modal');
     releaseDateStack = await within(configureModal).findByTestId('release-date-stack');
@@ -1063,7 +1064,7 @@ describe('<CourseOutline />', () => {
     expect(graderTypeDropdown).toHaveValue(expectedRequestData.graderType);
 
     advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     radioButtons = await within(configureModal).findAllByRole('radio');
     expect(radioButtons[0]).toHaveProperty('checked', false);
     expect(radioButtons[1]).toHaveProperty('checked', true);
@@ -1073,6 +1074,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check prereq and proctoring settings in configure modal for subsection', async () => {
+    const user = userEvent.setup();
     const {
       findAllByTestId,
       findByTestId,
@@ -1120,13 +1122,10 @@ describe('<CourseOutline />', () => {
     subsection.prereqMinScore = expectedRequestData.prereqMinScore;
     subsection.prereqMinCompletion = expectedRequestData.prereqMinCompletion;
     section.childInfo.children[0] = subsection;
-    axiosMock
-      .onGet(getXBlockApiUrl(section.id))
-      .reply(200, section);
 
-    fireEvent.click(subsectionDropdownButton);
+    await user.click(subsectionDropdownButton);
     const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
-    fireEvent.click(configureBtn);
+    await user.click(configureBtn);
 
     // update fields
     let configureModal = await findByTestId('configure-modal');
@@ -1137,13 +1136,13 @@ describe('<CourseOutline />', () => {
 
     // visibility tab
     const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
-    fireEvent.click(visibilityTab);
+    await user.click(visibilityTab);
     const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(visibilityRadioButtons[2]);
+    await user.click(visibilityRadioButtons[2]);
 
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     let radioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(radioButtons[2]);
+    await user.click(radioButtons[2]);
     let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
     let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
     fireEvent.change(hours, { target: { value: '00:30' } });
@@ -1165,7 +1164,7 @@ describe('<CourseOutline />', () => {
     let prereqCheckbox = await within(configureModal).findByLabelText(
       configureModalMessages.prereqCheckboxLabel.defaultMessage,
     );
-    fireEvent.click(prereqCheckbox);
+    await user.click(prereqCheckbox);
 
     // fill some rules for proctored exams
     let examsRulesInput = await within(configureModal).findByLabelText(
@@ -1173,22 +1172,25 @@ describe('<CourseOutline />', () => {
     );
     fireEvent.change(examsRulesInput, { target: { value: expectedRequestData.metadata.exam_review_rules } });
 
+    axiosMock
+      .onGet(getXBlockApiUrl(subsection.id))
+      .reply(200, subsection);
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
-    await act(async () => fireEvent.click(saveButton));
+    await user.click(saveButton);
 
     // verify request
     expect(axiosMock.history.post.length).toBe(3);
     expect(axiosMock.history.post[2].data).toBe(JSON.stringify(expectedRequestData));
 
     // reopen modal and check values
-    await act(async () => fireEvent.click(subsectionDropdownButton));
-    await act(async () => fireEvent.click(configureBtn));
+    await user.click(subsectionDropdownButton);
+    await user.click(configureBtn);
 
     configureModal = await findByTestId('configure-modal');
     advancedTab = await within(configureModal).findByRole('tab', {
       name: configureModalMessages.advancedTabTitle.defaultMessage,
     });
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     radioButtons = await within(configureModal).findAllByRole('radio');
     expect(radioButtons[0]).toHaveProperty('checked', false);
     expect(radioButtons[1]).toHaveProperty('checked', false);
@@ -1218,6 +1220,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check practice proctoring settings in configure modal', async () => {
+    const user = userEvent.setup();
     const {
       findAllByTestId,
       findByTestId,
@@ -1260,13 +1263,10 @@ describe('<CourseOutline />', () => {
     subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
     subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
     section.childInfo.children[0] = subsection;
-    axiosMock
-      .onGet(getXBlockApiUrl(section.id))
-      .reply(200, section);
 
-    fireEvent.click(subsectionDropdownButton);
+    await user.click(subsectionDropdownButton);
     const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
-    fireEvent.click(configureBtn);
+    await user.click(configureBtn);
 
     // update fields
     let configureModal = await findByTestId('configure-modal');
@@ -1276,14 +1276,14 @@ describe('<CourseOutline />', () => {
     );
     // visibility tab
     const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
-    fireEvent.click(visibilityTab);
+    await user.click(visibilityTab);
     const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(visibilityRadioButtons[4]);
+    await user.click(visibilityRadioButtons[4]);
 
     // advancedTab
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     let radioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(radioButtons[3]);
+    await user.click(radioButtons[3]);
     let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
     let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
     fireEvent.change(hours, { target: { value: '00:30' } });
@@ -1293,20 +1293,23 @@ describe('<CourseOutline />', () => {
       configureModalMessages.reviewRulesLabel.defaultMessage,
     )).not.toBeInTheDocument();
 
+    axiosMock
+      .onGet(getXBlockApiUrl(subsection.id))
+      .reply(200, subsection);
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
-    await act(async () => fireEvent.click(saveButton));
+    await user.click(saveButton);
 
     // verify request
     expect(axiosMock.history.post.length).toBe(3);
     expect(axiosMock.history.post[2].data).toBe(JSON.stringify(expectedRequestData));
 
     // reopen modal and check values
-    await act(async () => fireEvent.click(subsectionDropdownButton));
-    await act(async () => fireEvent.click(configureBtn));
+    await user.click(subsectionDropdownButton);
+    await user.click(configureBtn);
 
     configureModal = await findByTestId('configure-modal');
     advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     radioButtons = await within(configureModal).findAllByRole('radio');
     expect(radioButtons[0]).toHaveProperty('checked', false);
     expect(radioButtons[1]).toHaveProperty('checked', false);
@@ -1318,6 +1321,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check onboarding proctoring settings in configure modal', async () => {
+    const user = userEvent.setup();
     const {
       findAllByTestId,
       findByTestId,
@@ -1360,30 +1364,27 @@ describe('<CourseOutline />', () => {
     subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
     subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
     section.childInfo.children[1] = subsection;
-    axiosMock
-      .onGet(getXBlockApiUrl(section.id))
-      .reply(200, section);
 
-    fireEvent.click(subsectionDropdownButton);
+    await user.click(subsectionDropdownButton);
     const configureBtn = await within(secondSubsection).findByTestId('subsection-card-header__menu-configure-button');
-    fireEvent.click(configureBtn);
+    await user.click(configureBtn);
 
     // update fields
     let configureModal = await findByTestId('configure-modal');
     // visibility tab
     const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
-    fireEvent.click(visibilityTab);
+    await user.click(visibilityTab);
     const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(visibilityRadioButtons[5]);
+    await user.click(visibilityRadioButtons[5]);
 
     // advancedTab
     let advancedTab = await within(configureModal).findByRole(
       'tab',
       { name: configureModalMessages.advancedTabTitle.defaultMessage },
     );
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     let radioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(radioButtons[3]);
+    await user.click(radioButtons[3]);
     let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
     let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
     fireEvent.change(hours, { target: { value: '00:30' } });
@@ -1393,20 +1394,23 @@ describe('<CourseOutline />', () => {
       configureModalMessages.reviewRulesLabel.defaultMessage,
     )).not.toBeInTheDocument();
 
+    axiosMock
+      .onGet(getXBlockApiUrl(subsection.id))
+      .reply(200, subsection);
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
-    await act(async () => fireEvent.click(saveButton));
+    await user.click(saveButton);
 
     // verify request
     expect(axiosMock.history.post.length).toBe(3);
     expect(axiosMock.history.post[2].data).toBe(JSON.stringify(expectedRequestData));
 
     // reopen modal and check values
-    await act(async () => fireEvent.click(subsectionDropdownButton));
-    await act(async () => fireEvent.click(configureBtn));
+    await user.click(subsectionDropdownButton);
+    await user.click(configureBtn);
 
     configureModal = await findByTestId('configure-modal');
     advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     radioButtons = await within(configureModal).findAllByRole('radio');
     expect(radioButtons[0]).toHaveProperty('checked', false);
     expect(radioButtons[1]).toHaveProperty('checked', false);
@@ -1418,6 +1422,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check no special exam setting in configure modal', async () => {
+    const user = userEvent.setup();
     const {
       findAllByTestId,
       findByTestId,
@@ -1459,13 +1464,10 @@ describe('<CourseOutline />', () => {
     subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
     subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
     section.childInfo.children[0] = subsection;
-    axiosMock
-      .onGet(getXBlockApiUrl(section.id))
-      .reply(200, section);
 
-    fireEvent.click(subsectionDropdownButton);
+    await user.click(subsectionDropdownButton);
     const configureBtn = await within(subsectionElement).findByTestId('subsection-card-header__menu-configure-button');
-    fireEvent.click(configureBtn);
+    await user.click(configureBtn);
 
     // update fields
     let configureModal = await findByTestId('configure-modal');
@@ -1475,9 +1477,9 @@ describe('<CourseOutline />', () => {
       'tab',
       { name: configureModalMessages.advancedTabTitle.defaultMessage },
     );
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     let radioButtons = await within(configureModal).findAllByRole('radio');
-    fireEvent.click(radioButtons[0]);
+    await user.click(radioButtons[0]);
 
     // time box should not be visible
     expect(within(configureModal).queryByLabelText(
@@ -1489,20 +1491,23 @@ describe('<CourseOutline />', () => {
       configureModalMessages.reviewRulesLabel.defaultMessage,
     )).not.toBeInTheDocument();
 
+    axiosMock
+      .onGet(getXBlockApiUrl(subsection.id))
+      .reply(200, subsection);
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
-    await act(async () => fireEvent.click(saveButton));
+    await user.click(saveButton);
 
     // verify request
     expect(axiosMock.history.post.length).toBe(3);
     expect(axiosMock.history.post[2].data).toBe(JSON.stringify(expectedRequestData));
 
     // reopen modal and check values
-    await act(async () => fireEvent.click(subsectionDropdownButton));
-    await act(async () => fireEvent.click(configureBtn));
+    await user.click(subsectionDropdownButton);
+    await user.click(configureBtn);
 
     configureModal = await findByTestId('configure-modal');
     advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
-    fireEvent.click(advancedTab);
+    await user.click(advancedTab);
     radioButtons = await within(configureModal).findAllByRole('radio');
     expect(radioButtons[0]).toHaveProperty('checked', true);
     expect(radioButtons[1]).toHaveProperty('checked', false);
@@ -1511,6 +1516,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check configure modal for unit', async () => {
+    const user = userEvent.setup();
     const { findAllByTestId, findByTestId } = renderComponent();
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
     const [subsection] = section.childInfo.children;
@@ -1570,37 +1576,37 @@ describe('<CourseOutline />', () => {
     subsection.childInfo.children[0] = unit;
     section.childInfo.children[0] = subsection;
 
-    axiosMock
-      .onGet(getXBlockApiUrl(section.id))
-      .reply(200, section);
-
-    fireEvent.click(unitDropdownButton);
+    await user.click(unitDropdownButton);
     const configureBtn = await within(firstUnit).findByTestId('unit-card-header__menu-configure-button');
-    fireEvent.click(configureBtn);
+    await user.click(configureBtn);
 
     let configureModal = await findByTestId('configure-modal');
     expect(await within(configureModal).findByText(
       configureModalMessages.unitVisibility.defaultMessage,
     )).toBeInTheDocument();
     let visibilityCheckbox = await within(configureModal).findByTestId('unit-visibility-checkbox');
-    await act(async () => fireEvent.click(visibilityCheckbox));
+    await user.click(visibilityCheckbox);
     let discussionCheckbox = await within(configureModal).findByLabelText(
       configureModalMessages.discussionEnabledCheckbox.defaultMessage,
     );
     expect(discussionCheckbox).toBeChecked();
-    await act(async () => fireEvent.click(discussionCheckbox));
+    await user.click(discussionCheckbox);
 
     let groupeType = await within(configureModal).findByTestId('group-type-select');
     fireEvent.change(groupeType, { target: { value: '0' } });
 
     let checkboxes = await within(await within(configureModal).findByTestId('group-checkboxes')).findAllByRole('checkbox');
-    fireEvent.click(checkboxes[1]);
+    await user.click(checkboxes[1]);
+    axiosMock
+      .onGet(getXBlockApiUrl(unit.id))
+      .reply(200, unit);
+
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
-    await act(async () => fireEvent.click(saveButton));
+    await user.click(saveButton);
 
     // reopen modal and check values
-    await act(async () => fireEvent.click(unitDropdownButton));
-    await act(async () => fireEvent.click(configureBtn));
+    await user.click(unitDropdownButton);
+    await user.click(configureBtn);
 
     configureModal = await findByTestId('configure-modal');
     visibilityCheckbox = await within(configureModal).findByTestId('unit-visibility-checkbox');
diff --git a/src/course-outline/OutlineAddChildButtons.test.tsx b/src/course-outline/OutlineAddChildButtons.test.tsx
index ec004b7a81..02c658b8b6 100644
--- a/src/course-outline/OutlineAddChildButtons.test.tsx
+++ b/src/course-outline/OutlineAddChildButtons.test.tsx
@@ -15,6 +15,7 @@ jest.mock('react-redux', () => ({
 const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
 const handleAddAndOpenUnit = { mutateAsync: jest.fn() };
+const handleAddUnit = { mutateAsync: jest.fn() };
 const courseUsageKey = 'some/usage/key';
 const setCurrentSelection = jest.fn();
 jest.mock('@src/CourseAuthoringContext', () => ({
@@ -25,6 +26,7 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     handleAddSection,
     handleAddSubsection,
     handleAddAndOpenUnit,
+    handleAddUnit,
     setCurrentSelection,
   }),
 }));
@@ -37,6 +39,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
     ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     startCurrentFlow,
     currentFlow,
+    isCurrentFlowOn: !!currentFlow,
   }),
 }));
 
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index fc6349ecad..90927e1fa0 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -153,19 +153,19 @@ describe('AddSidebar component', () => {
       type: 'chapter',
       parentLocator: 'course-usage-key',
       displayName: 'Section',
-    });
+    }, { onSuccess: expect.anything() });
     await user.click(subsection);
     expect(handleAddSubsection.mutateAsync).toHaveBeenCalledWith({
       type: 'sequential',
       parentLocator: lastSection.id,
       displayName: 'Subsection',
-    });
+    }, { onSuccess: expect.anything() });
     await user.click(unit);
-    expect(handleAddUnit.mutateAsync).toHaveBeenCalledWith({
+    expect(handleAddAndOpenUnit.mutateAsync).toHaveBeenCalledWith({
       type: 'vertical',
       parentLocator: lastSubsection.id,
       displayName: 'Unit',
-    });
+    }, { onSettled: expect.anything() });
   });
 
   it('calls appropriate handlers on existing button click', async () => {
@@ -181,12 +181,12 @@ describe('AddSidebar component', () => {
     const addBtns = await screen.findAllByRole('button', { name: 'Add' });
     // first one is unit as per mock
     await user.click(addBtns[0]);
-    expect(handleAddAndOpenUnit.mutateAsync).toHaveBeenCalledWith({
+    expect(handleAddUnit.mutateAsync).toHaveBeenCalledWith({
       type: 'library_v2',
       category: 'vertical',
       parentLocator: lastSubsection.id,
       libraryContentKey: searchResult.results[0].hits[0].usage_key,
-    });
+    }, { onSettled: expect.anything() });
     // second one is subsection as per mock
     await user.click(addBtns[1]);
     expect(handleAddSubsection.mutateAsync).toHaveBeenCalledWith({
@@ -217,6 +217,8 @@ describe('AddSidebar component', () => {
         grandParentLocator: category === 'unit' ? firstSection.id : undefined,
       };
       renderComponent();
+      // Check existing tab content
+      await user.click(await screen.findByRole('tab', { name: 'Add Existing' }));
       // Check existing tab content is rendered by default
       await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
       expect(fetchMock).toHaveLastFetched((_url, req) => {
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
index 8ab935f9c9..c3d18ef982 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
@@ -14,6 +14,7 @@ import OutlineSidebar from './OutlineSidebar';
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   useCourseDetails: jest.fn().mockReturnValue({ isPending: false, data: { title: 'Test Course' } }),
   useCreateCourseBlock: jest.fn(),
+  useCourseItemData: jest.fn().mockReturnValue({ data: {} }),
 }));
 
 const courseId = '123';
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index d8c4feb433..ffe2859f9e 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -5,6 +5,7 @@ import {
 import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
 import userEvent from '@testing-library/user-event';
+import { getXBlockApiUrl } from '@src/course-outline/data/api';
 import SectionCard from './SectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
 import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
@@ -51,9 +52,7 @@ const subsection = {
   isHeaderVisible: true,
   releasedToStudents: true,
   childInfo: {
-    children: [{
-      id: unit.id,
-    }],
+    children: [unit],
   } as any, // 'as any' because we are omitting a lot of fields from 'childInfo'
 } satisfies Partial<XBlock> as XBlock;
 
@@ -73,14 +72,7 @@ const section = {
   },
   isHeaderVisible: true,
   childInfo: {
-    children: [{
-      id: subsection.id,
-      childInfo: {
-        children: [{
-          id: unit.id,
-        }],
-      },
-    }],
+    children: [subsection],
   } as any, // 'as any' because we are omitting a lot of fields from 'childInfo'
   upstreamInfo: {
     readyToSync: true,
@@ -121,10 +113,15 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     extraWrapper: OutlineSidebarContext.OutlineSidebarProvider,
   },
 );
+let axiosMock;
 
 describe('<SectionCard />', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
   });
 
   it('render SectionCard component correctly', () => {
@@ -138,7 +135,8 @@ describe('<SectionCard />', () => {
     expect(card).not.toHaveClass('outline-card-selected');
   });
 
-  it('render SectionCard component in selected state', () => {
+  it('render SectionCard component in selected state', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
@@ -148,16 +146,15 @@ describe('<SectionCard />', () => {
     expect(screen.getByTestId('section-card-header')).toBeInTheDocument();
 
     // The card is not selected
-    const card = screen.getByTestId('section-card');
-    expect(card).not.toHaveClass('outline-card-selected');
+    expect((await screen.findByTestId('section-card'))).not.toHaveClass('outline-card-selected');
 
     // Get the <Row> that contains the card and click it to select the card
     const el = container.querySelector('div.row.mx-0') as HTMLInputElement;
     expect(el).not.toBeNull();
-    fireEvent.click(el!);
+    await user.click(el!);
 
     // The card is selected
-    expect(card).toHaveClass('outline-card-selected');
+    expect(await screen.findByTestId('section-card')).toHaveClass('outline-card-selected');
   });
 
   it('expands/collapses the card when the expand button is clicked', () => {
@@ -184,6 +181,17 @@ describe('<SectionCard />', () => {
   });
 
   it('hides add new, duplicate & delete option based on childAddable, duplicable & deletable action flag', async () => {
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, {
+        ...section,
+        actions: {
+          draggable: true,
+          childAddable: false,
+          deletable: false,
+          duplicable: false,
+        },
+      });
     renderComponent({
       section: {
         ...section,
diff --git a/src/course-outline/status-bar/StatusBar.test.tsx b/src/course-outline/status-bar/StatusBar.test.tsx
index 8857de48bb..25d1fb3604 100644
--- a/src/course-outline/status-bar/StatusBar.test.tsx
+++ b/src/course-outline/status-bar/StatusBar.test.tsx
@@ -32,7 +32,7 @@ jest.mock('@src/course-libraries/data/apiHooks', () => ({
 let mockHasChanges = false;
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   useCourseDetails: () => ({
-    data: [{ hasChanges: mockHasChanges }],
+    data: { hasChanges: mockHasChanges },
     isLoading: false,
   }),
 }));

From 796e460f33fd7161653c3e27131c850492ff51fd Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 2 Feb 2026 19:37:20 +0530
Subject: [PATCH 34/60] test: add tests

---
 .../outline-sidebar/AddSidebar.test.tsx       |  42 ++++
 .../outline-sidebar/AddSidebar.tsx            |   4 +
 .../outline-sidebar/InfoSidebar.test.tsx      | 134 +++++++++++
 .../LibraryReferenceCard.test.tsx             | 215 ++++++++++++++++++
 .../outline-sidebar/LibraryReferenceCard.tsx  |   9 +-
 .../outline-sidebar/SectionInfoSidebar.tsx    |  53 +----
 .../outline-sidebar/SubsectionInfoSidebar.tsx |  53 +----
 .../outline-sidebar/UnitInfoSidebar.tsx       |  54 +----
 .../outline-sidebar/sharedComponents.tsx      |  57 +++++
 src/generic/sidebar/SidebarSection.tsx        |   4 +-
 src/generic/sidebar/SidebarTitle.tsx          |   4 +-
 src/generic/sidebar/messages.ts               |   5 +
 12 files changed, 484 insertions(+), 150 deletions(-)
 create mode 100644 src/course-outline/outline-sidebar/InfoSidebar.test.tsx
 create mode 100644 src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx
 create mode 100644 src/course-outline/outline-sidebar/sharedComponents.tsx

diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index 90927e1fa0..a2e723fa09 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -19,6 +19,7 @@ import {
 import fetchMock from 'fetch-mock-jest';
 import type { ContainerType } from '@src/generic/key-utils';
 import { AddSidebar } from './AddSidebar';
+import { XBlock } from '@src/data/types';
 
 const handleAddSection = { mutateAsync: jest.fn() };
 const handleAddSubsection = { mutateAsync: jest.fn() };
@@ -60,11 +61,19 @@ jest.mock('@src/studio-home/hooks', () => ({
 }));
 
 let currentFlow: OutlineFlow | null = null;
+let isCurrentFlowOn = false;
+let currentItemData: Partial<XBlock> | null;
+let clearSelection = jest.fn();
+let stopCurrentFlow = jest.fn();
 jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
   ...jest.requireActual('../outline-sidebar/OutlineSidebarContext'),
   useOutlineSidebarContext: () => ({
     ...jest.requireActual('../outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     currentFlow,
+    isCurrentFlowOn,
+    currentItemData,
+    clearSelection,
+    stopCurrentFlow,
   }),
 }));
 
@@ -251,4 +260,37 @@ describe('AddSidebar component', () => {
       }
     });
   });
+
+  it('shows alert when container cannot be added', async () => {
+    const user = userEvent.setup();
+    currentItemData = {
+      displayName: 'Test container',
+      category: 'chapter',
+      actions: {
+        childAddable: false,
+        deletable: true,
+        draggable: true,
+        duplicable: true,
+      }
+    }
+    renderComponent();
+
+    // render existing tab as well
+    await user.click(await screen.findByRole('tab', { name: 'Add Existing' }));
+    // One in new tab and one in existing tab
+    expect((await screen.findAllByText(
+      `${currentItemData.displayName} is a library section. Content cannot be added to Library referenced sections.`
+    )).length).toEqual(2);
+  });
+
+  it('back button is rendered and works', async () => {
+    const user = userEvent.setup();
+    isCurrentFlowOn = true;
+    renderComponent();
+
+    const back = await screen.findByRole('button', { name: 'Back' });
+    await user.click(back);
+    expect(clearSelection).toHaveBeenCalled();
+    expect(stopCurrentFlow).toHaveBeenCalled();
+  });
 });
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index f0b5cad846..dbbfcb3fdc 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -72,6 +72,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
       displayName: COURSE_BLOCK_NAMES.chapter.name,
     }, {
       onSuccess: (data: { locator: string; }) => {
+        // istanbul ignore next
         if (onSuccess) {
           onSuccess(data);
         } else {
@@ -88,6 +89,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
       displayName: COURSE_BLOCK_NAMES.sequential.name,
     }, {
       onSuccess: (data: { locator: string; }) => {
+        // istanbul ignore next
         if (onSuccess) {
           onSuccess(data);
         } else {
@@ -104,6 +106,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
       displayName: COURSE_BLOCK_NAMES.vertical.name,
     }, {
       onSettled: () => {
+        // istanbul ignore next
         if (onSettled) {
           onSettled();
         } else {
@@ -286,6 +289,7 @@ const ShowLibraryContent = () => {
             libraryContentKey: usageKey,
           }, {
             onSettled: () => {
+              // istanbul ignore next
               queryClient.invalidateQueries({
                 queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
               });
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/InfoSidebar.test.tsx
new file mode 100644
index 0000000000..ad369941c5
--- /dev/null
+++ b/src/course-outline/outline-sidebar/InfoSidebar.test.tsx
@@ -0,0 +1,134 @@
+import { InfoSidebar } from './InfoSidebar'
+import { initializeMocks, render, screen } from '@src/testUtils'
+import { SelectionState } from '@src/data/types';
+import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { getXBlockApiUrl } from '@src/course-outline/data/api';
+import userEvent from '@testing-library/user-event';
+
+let selectedContainerState: SelectionState | undefined = undefined;
+jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
+  ...jest.requireActual('../outline-sidebar/OutlineSidebarContext'),
+  useOutlineSidebarContext: () => ({
+    ...jest.requireActual('../outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
+    selectedContainerState,
+  }),
+}));
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  useCourseDetails: () => ({
+    data: { title: 'Course name' },
+    isLoading: false,
+  }),
+}));
+
+const openPublishModal = jest.fn();
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    setCurrentSelection: jest.fn(),
+    openPublishModal,
+    getUnitUrl: jest.fn(),
+  }),
+}));
+
+jest.mock('@src/search-manager', () => ({
+  useGetBlockTypes: () => ({ data: [] }),
+}));
+
+const renderComponent = () => render(<InfoSidebar />, { extraWrapper: OutlineSidebarProvider});
+let axiosMock;
+
+describe('InfoSidebar component', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+  });
+
+  it('renders InfoSidebar with course info if selectedContainerState is undefined', async () => {
+    renderComponent();
+    expect(await screen.findByText('Course name')).toBeInTheDocument();
+  });
+
+  it('renders InfoSidebar with section info', async () => {
+    const user = userEvent.setup();
+    selectedContainerState = {
+      currentId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123'
+    }
+    const data = {
+      id: selectedContainerState.currentId,
+      displayName: 'section name',
+      category: 'chapter',
+      hasChanges: true,
+    }
+    axiosMock
+      .onGet(getXBlockApiUrl(selectedContainerState.currentId))
+      .reply(200, data);
+    renderComponent();
+    expect(await screen.findByText('section name')).toBeInTheDocument();
+    expect(await screen.findByText('Section Content Summary')).toBeInTheDocument();
+    const btn = await screen.findByRole('button', { name: 'Publish Changes (Draft)' });
+    expect(btn).toBeInTheDocument();
+    await user.click(btn);
+    expect(openPublishModal).toHaveBeenCalledWith({
+      value: data,
+      sectionId: data.id,
+    });
+  });
+
+  it('renders InfoSidebar with subsection info', async () => {
+    const user = userEvent.setup();
+    selectedContainerState = {
+      currentId: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@123',
+      sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123'
+    }
+    const data = {
+      id: selectedContainerState.currentId,
+      displayName: 'subsection name',
+      category: 'sequential',
+      hasChanges: true,
+    }
+    axiosMock
+      .onGet(getXBlockApiUrl(selectedContainerState.currentId))
+      .reply(200, data);
+    renderComponent();
+    expect(await screen.findByText('subsection name')).toBeInTheDocument();
+    expect(await screen.findByText('Subsection Content Summary')).toBeInTheDocument();
+    const btn = await screen.findByRole('button', { name: 'Publish Changes (Draft)' });
+    expect(btn).toBeInTheDocument();
+    await user.click(btn);
+    expect(openPublishModal).toHaveBeenCalledWith({
+      value: data,
+      sectionId: selectedContainerState.sectionId,
+    });
+  });
+
+  it('renders InfoSidebar with unit info', async () => {
+    const user = userEvent.setup();
+    selectedContainerState = {
+      currentId: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@123',
+      subsectionId: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@123',
+      sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123'
+    }
+    const data = {
+      id: selectedContainerState.currentId,
+      displayName: 'unit name',
+      category: 'vertical',
+      hasChanges: true,
+    }
+    axiosMock
+      .onGet(getXBlockApiUrl(selectedContainerState.currentId))
+      .reply(200, data);
+    renderComponent();
+    expect(await screen.findByText('unit name')).toBeInTheDocument();
+    expect(await screen.findByText('Unit Content Summary')).toBeInTheDocument();
+    const btn = await screen.findByRole('button', { name: 'Publish Changes (Draft)' });
+    expect(btn).toBeInTheDocument();
+    await user.click(btn);
+    expect(openPublishModal).toHaveBeenCalledWith({
+      value: data,
+      subsectionId: selectedContainerState.subsectionId,
+      sectionId: selectedContainerState.sectionId,
+    });
+  });
+});
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx
new file mode 100644
index 0000000000..a71c863c88
--- /dev/null
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx
@@ -0,0 +1,215 @@
+import { getXBlockApiUrl } from '@src/course-outline/data/api';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import { userEvent } from '@testing-library/user-event';
+import { LibraryReferenceCard } from './LibraryReferenceCard';
+
+let axiosMock;
+let upstreamData = {
+  id: 'lct:UNIX:CIT1:subsection:99d7e14e2d6f4ab7989dc0d948f917df',
+  name: 'upstream subsection',
+}
+let sectionData = {
+  id: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@asafd',
+  displayName: 'downstream section',
+  upstreamInfo: {
+    upstreamRef: 'lct:UNIX:CIT1:section:d12323',
+    upstreamName: 'upstream section',
+    downstreamKey: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@asafd',
+    versionAvailable: 2,
+    versionDeclined: null,
+    readyToSync: false,
+    topLevelParentKey: null,
+    downstreamCustomized: [],
+  }
+}
+let itemData = {
+  id: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential45d4d95a',
+  displayName: 'downstream subsection',
+  upstreamInfo: {
+    upstreamRef: upstreamData.id,
+    upstreamName: upstreamData.name,
+    downstreamKey: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential45d4d95a',
+    versionAvailable: 2,
+    versionDeclined: null,
+    readyToSync: false,
+    topLevelParentKey: null,
+    downstreamCustomized: [],
+  }
+}
+
+const mockUseOutlineSidebarContext = jest.fn().mockReturnValue({
+  selectedContainerState: { currentId: itemData.id, sectionId: sectionData.id },
+  openContainerInfoSidebar: jest.fn(),
+});
+const mockUseCourseAuthoringContext = jest.fn().mockReturnValue({
+  openUnlinkModal: jest.fn(),
+  courseId: 'course1',
+});
+
+jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
+  useOutlineSidebarContext: () => mockUseOutlineSidebarContext(),
+}));
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => mockUseCourseAuthoringContext(),
+}));
+const mockOpenSyncModal = jest.fn();
+jest.mock('@src/hooks', () => ({
+  useToggleWithValue: () => [false, {}, mockOpenSyncModal, jest.fn()],
+}));
+
+describe('LibraryReferenceCard', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    axiosMock
+      .onGet(getXBlockApiUrl(sectionData.id))
+      .reply(200, sectionData);
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, itemData);
+  });
+
+  it('renders the LibraryReferenceCard normally', async () => {
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(/Library Reference/)).toBeInTheDocument();
+  });
+
+  it('renders the LibraryReferenceCard error message', async () => {
+    const user = userEvent.setup();
+    const data = {
+      ...itemData,
+      upstreamInfo: {
+        ...itemData.upstreamInfo,
+        errorMessage: 'some error',
+      }
+    };
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, data);
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(
+      `The link between ${itemData.displayName} and the library version has been broken. To edit or make changes, unlink component.`
+    )).toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: 'Unlink from library' }));
+    expect(mockUseCourseAuthoringContext().openUnlinkModal).toHaveBeenCalledWith({
+      value: data,
+      sectionId: sectionData.id,
+    });
+  });
+
+  it('renders the LibraryReferenceCard ready to sync', async () => {
+    const user = userEvent.setup();
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, {
+        ...itemData,
+        upstreamInfo: {
+          ...itemData.upstreamInfo,
+          readyToSync: true,
+        }
+      });
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(
+      `${itemData.displayName} has available updates`
+    )).toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: 'Review Updates' }));
+    expect(mockOpenSyncModal).toHaveBeenCalled();
+  });
+
+  it('renders the LibraryReferenceCard customized text', async () => {
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, {
+        ...itemData,
+        upstreamInfo: {
+          ...itemData.upstreamInfo,
+          downstreamCustomized: ['displayName'],
+        }
+      });
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(
+      `${itemData.displayName} has been modified in this course.`
+    )).toBeInTheDocument();
+  });
+
+  it('renders the LibraryReferenceCard with top level error message', async () => {
+    const user = userEvent.setup();
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, {
+        ...itemData,
+        upstreamInfo: {
+          ...itemData.upstreamInfo,
+          topLevelParentKey: sectionData.upstreamInfo.downstreamKey,
+          errorMessage: 'some error',
+        }
+      });
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(
+      `${itemData.displayName} was reused as part of a section which has a broken link. To recieve library updates to this component, unlink the broken link.`
+    )).toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: 'Unlink section' }));
+    // should call unlink with parent section data
+    expect(mockUseCourseAuthoringContext().openUnlinkModal).toHaveBeenCalledWith({
+      value: sectionData,
+      sectionId: sectionData.id,
+    });
+  });
+
+  it('renders the LibraryReferenceCard with top level ready to sync', async () => {
+    const user = userEvent.setup();
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, {
+        ...itemData,
+        upstreamInfo: {
+          ...itemData.upstreamInfo,
+          topLevelParentKey: sectionData.upstreamInfo.downstreamKey,
+        }
+      });
+    const parentData = {
+      ...sectionData,
+      upstreamInfo: {
+        ...sectionData.upstreamInfo,
+        readyToSync: true,
+      }
+    }
+    axiosMock
+      .onGet(getXBlockApiUrl(sectionData.id))
+      .reply(200, parentData);
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(
+      `${itemData.displayName} was reused as part of a section which has updates available.`
+    )).toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: 'Review Updates' }));
+    expect(mockOpenSyncModal).toHaveBeenCalledWith(parentData);
+  });
+
+  it('renders the LibraryReferenceCard with top level go to parent option', async () => {
+    const user = userEvent.setup();
+    axiosMock
+      .onGet(getXBlockApiUrl(itemData.id))
+      .reply(200, {
+        ...itemData,
+        upstreamInfo: {
+          ...itemData.upstreamInfo,
+          topLevelParentKey: sectionData.upstreamInfo.downstreamKey,
+        }
+      });
+    render(<LibraryReferenceCard itemId={itemData.id} />);
+    expect(await screen.findByText(
+      `${itemData.displayName} was reused as part of a section.`
+    )).toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: 'View section' }));
+    expect(mockUseOutlineSidebarContext().openContainerInfoSidebar).toHaveBeenCalledWith(
+      sectionData.id,
+      undefined,
+      sectionData.id
+    );
+  });
+});
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 8655d043af..925431cd6a 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -25,12 +25,12 @@ interface SubProps {
 
 const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: SubProps) => {
   const { upstreamInfo } = blockData;
-  const { selectedContainerState } = useOutlineSidebarContext();
-  const { openContainerInfoSidebar } = useOutlineSidebarContext();
+  const { selectedContainerState, openContainerInfoSidebar } = useOutlineSidebarContext();
   const { openUnlinkModal } = useCourseAuthoringContext();
   const { data: parentData, isPending } = useCourseItemData(upstreamInfo?.topLevelParentKey);
 
   const handleUnlinkClick = () => {
+    // istanbul ignore if
     if (!selectedContainerState?.sectionId || !parentData) {
       return;
     }
@@ -38,6 +38,7 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
   };
 
   const handleSyncClick = () => {
+    // istanbul ignore if
     if (!parentData) {
       return;
     }
@@ -45,7 +46,7 @@ const HasTopParentTextAndButton = ({ blockData, displayName, openSyncModal }: Su
   };
 
   const handleGoToParent = () => {
-    // istanbul ignore: to satisfy checker
+    // istanbul ignore if
     if (!upstreamInfo?.topLevelParentKey) {
       return null;
     }
@@ -127,6 +128,7 @@ const TopLevelTextAndButton = ({ blockData, displayName, openSyncModal }: SubPro
   };
 
   const handleUnlinkClick = () => {
+    // istanbul ignore if
     if (!selectedContainerState?.sectionId) {
       return;
     }
@@ -203,6 +205,7 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
     };
   }, [syncModalData]);
 
+  // istanbul ignore next
   const handleOnPostChangeSync = useCallback(() => {
     if (selectedContainerState?.sectionId) {
       dispatch(fetchCourseSectionQuery([selectedContainerState.sectionId]));
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index 71e0edd583..cdb5f1cd9b 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -1,66 +1,23 @@
 import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Tab, Tabs, useToggle } from '@openedx/paragon';
-import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+import { Tab, Tabs } from '@openedx/paragon';
 
-import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
-import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
-import { useGetBlockTypes } from '@src/search-manager';
+import { getItemIcon } from '@src/generic/block-type-utils';
 
-import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+import { SidebarTitle } from '@src/generic/sidebar';
 
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import messages from './messages';
-import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
+import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
 
 interface Props {
   sectionId: string;
 }
 
-const SectionInfoSidebar = ({ sectionId }: Props) => {
-  const intl = useIntl();
-  const { data: componentData } = useGetBlockTypes(
-    [`breadcrumbs.usage_key = "${sectionId}"`],
-  );
-
-  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
-
-  return (
-    <>
-      <LibraryReferenceCard itemId={sectionId} />
-      <SidebarContent>
-        <SidebarSection
-          title={intl.formatMessage(messages.sectionContentSummaryText)}
-          icon={SchoolOutline}
-        >
-          {componentData && <ComponentCountSnippet componentData={componentData} />}
-        </SidebarSection>
-        <SidebarSection
-          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
-          icon={Tag}
-          actions={[
-            {
-              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
-              onClick: openManageTagsDrawer,
-            },
-          ]}
-        >
-          <ContentTagsSnippet contentId={sectionId} />
-        </SidebarSection>
-      </SidebarContent>
-      <ContentTagsDrawerSheet
-        id={sectionId}
-        onClose={closeManageTagsDrawer}
-        showSheet={isManageTagsDrawerOpen}
-      />
-    </>
-  );
-};
-
 export const SectionSidebar = ({ sectionId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
@@ -98,7 +55,7 @@ export const SectionSidebar = ({ sectionId }: Props) => {
         mountOnEnter
       >
         <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
-          <SectionInfoSidebar sectionId={sectionId} />
+          <InfoSection itemId={sectionId} />
         </Tab>
         <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
           <div>Settings</div>
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index e6c35a10bd..2f100dcc37 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -1,66 +1,23 @@
 import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Tab, Tabs, useToggle } from '@openedx/paragon';
-import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+import { Tab, Tabs } from '@openedx/paragon';
 
-import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
-import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
-import { useGetBlockTypes } from '@src/search-manager';
+import { getItemIcon } from '@src/generic/block-type-utils';
 
-import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+import { SidebarTitle } from '@src/generic/sidebar';
 
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import { LibraryReferenceCard } from './LibraryReferenceCard';
 import { PublishButon } from './PublishButon';
 import messages from './messages';
+import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
 
 interface Props {
   subsectionId: string;
 }
 
-const SubsectionInfoSidebar = ({ subsectionId }: Props) => {
-  const intl = useIntl();
-  const { data: componentData } = useGetBlockTypes(
-    [`breadcrumbs.usage_key = "${subsectionId}"`],
-  );
-
-  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
-
-  return (
-    <>
-      <LibraryReferenceCard itemId={subsectionId} />
-      <SidebarContent>
-        <SidebarSection
-          title={intl.formatMessage(messages.subsectionContentSummaryText)}
-          icon={SchoolOutline}
-        >
-          {componentData && <ComponentCountSnippet componentData={componentData} />}
-        </SidebarSection>
-        <SidebarSection
-          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
-          icon={Tag}
-          actions={[
-            {
-              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
-              onClick: openManageTagsDrawer,
-            },
-          ]}
-        >
-          <ContentTagsSnippet contentId={subsectionId} />
-        </SidebarSection>
-      </SidebarContent>
-      <ContentTagsDrawerSheet
-        id={subsectionId}
-        onClose={closeManageTagsDrawer}
-        showSheet={isManageTagsDrawerOpen}
-      />
-    </>
-  );
-};
-
 export const SubsectionSidebar = ({ subsectionId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
@@ -99,7 +56,7 @@ export const SubsectionSidebar = ({ subsectionId }: Props) => {
         mountOnEnter
       >
         <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
-          <SubsectionInfoSidebar subsectionId={subsectionId} />
+          <InfoSection itemId={subsectionId} />
         </Tab>
         <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
           <div>Settings</div>
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
index 6cf8c9822b..0b8b453c70 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
@@ -1,17 +1,15 @@
 import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Button, Stack, Tab, Tabs, useToggle,
+  Button, Stack, Tab, Tabs,
 } from '@openedx/paragon';
 import {
-  OpenInFull, SchoolOutline, Tag,
+  OpenInFull,
 } from '@openedx/paragon/icons';
 
-import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
-import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
-import { useGetBlockTypes } from '@src/search-manager';
+import { getItemIcon } from '@src/generic/block-type-utils';
 
-import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+import { SidebarTitle } from '@src/generic/sidebar';
 
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
@@ -21,53 +19,13 @@ import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 import { Link } from 'react-router-dom';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import { PublishButon } from './PublishButon';
-import { LibraryReferenceCard } from './LibraryReferenceCard';
 import messages from './messages';
+import { InfoSection } from './sharedComponents';
 
 interface Props {
   unitId: string;
 }
 
-const UnitInfoSidebar = ({ unitId }: Props) => {
-  const intl = useIntl();
-  const { data: componentData } = useGetBlockTypes(
-    [`breadcrumbs.usage_key = "${unitId}"`],
-  );
-
-  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
-
-  return (
-    <>
-      <LibraryReferenceCard itemId={unitId} />
-      <SidebarContent>
-        <SidebarSection
-          title={intl.formatMessage(messages.unitContentSummaryText)}
-          icon={SchoolOutline}
-        >
-          {componentData && <ComponentCountSnippet componentData={componentData} />}
-        </SidebarSection>
-        <SidebarSection
-          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
-          icon={Tag}
-          actions={[
-            {
-              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
-              onClick: openManageTagsDrawer,
-            },
-          ]}
-        >
-          <ContentTagsSnippet contentId={unitId} />
-        </SidebarSection>
-      </SidebarContent>
-      <ContentTagsDrawerSheet
-        id={unitId}
-        onClose={closeManageTagsDrawer}
-        showSheet={isManageTagsDrawerOpen}
-      />
-    </>
-  );
-};
-
 export const UnitSidebar = ({ unitId }: Props) => {
   const intl = useIntl();
   const [tab, setTab] = useState<'preview' | 'info' | 'settings'>('info');
@@ -137,7 +95,7 @@ export const UnitSidebar = ({ unitId }: Props) => {
           </IframeProvider>
         </Tab>
         <Tab eventKey="info" title={intl.formatMessage(messages.infoTabText)}>
-          <UnitInfoSidebar unitId={unitId} />
+          <InfoSection itemId={unitId} />
         </Tab>
         <Tab eventKey="settings" title={intl.formatMessage(messages.settingsTabText)}>
           <div>Settings</div>
diff --git a/src/course-outline/outline-sidebar/sharedComponents.tsx b/src/course-outline/outline-sidebar/sharedComponents.tsx
new file mode 100644
index 0000000000..a2b36588da
--- /dev/null
+++ b/src/course-outline/outline-sidebar/sharedComponents.tsx
@@ -0,0 +1,57 @@
+import { useIntl } from "@edx/frontend-platform/i18n";
+import { useToggle } from "@openedx/paragon";
+import { SchoolOutline, Tag } from "@openedx/paragon/icons";
+import { ContentTagsDrawerSheet, ContentTagsSnippet } from "@src/content-tags-drawer";
+import { useCourseItemData } from "@src/course-outline/data/apiHooks";
+import { LibraryReferenceCard } from "@src/course-outline/outline-sidebar/LibraryReferenceCard";
+import { ComponentCountSnippet, getItemIcon } from "@src/generic/block-type-utils";
+import { normalizeContainerType } from "@src/generic/key-utils";
+import { SidebarContent, SidebarSection } from "@src/generic/sidebar";
+import { useGetBlockTypes } from "@src/search-manager";
+import messages from './messages';
+
+interface Props {
+  itemId: string;
+}
+
+export const InfoSection = ({ itemId }: Props) => {
+  const intl = useIntl();
+  const { data: itemData } = useCourseItemData(itemId);
+  const { data: componentData } = useGetBlockTypes(
+    [`breadcrumbs.usage_key = "${itemId}"`],
+  );
+  const category = normalizeContainerType(itemData?.category || '');
+
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
+  return (
+    <>
+      <LibraryReferenceCard itemId={itemId} />
+      <SidebarContent>
+        <SidebarSection
+          title={intl.formatMessage(messages[`${category}ContentSummaryText`])}
+          icon={getItemIcon(itemData?.category || SchoolOutline)}
+        >
+          {componentData && <ComponentCountSnippet componentData={componentData} />}
+        </SidebarSection>
+        <SidebarSection
+          title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
+          icon={Tag}
+          actions={[
+            {
+              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+              onClick: openManageTagsDrawer,
+            },
+          ]}
+        >
+          <ContentTagsSnippet contentId={itemId} />
+        </SidebarSection>
+      </SidebarContent>
+      <ContentTagsDrawerSheet
+        id={itemId}
+        onClose={closeManageTagsDrawer}
+        showSheet={isManageTagsDrawerOpen}
+      />
+    </>
+  );
+};
diff --git a/src/generic/sidebar/SidebarSection.tsx b/src/generic/sidebar/SidebarSection.tsx
index 7f407f7449..d37b8a9253 100644
--- a/src/generic/sidebar/SidebarSection.tsx
+++ b/src/generic/sidebar/SidebarSection.tsx
@@ -48,9 +48,9 @@ export const SidebarSection = ({
     <Stack direction="horizontal" gap={2}>
       {icon && <Icon src={icon} className="mr-1 text-primary" size="sm" />}
       {title && (
-      <h3 className="h5 font-weight-bold text-primary mb-0">
+      <h5 className="font-weight-bold text-primary mb-0 mt-1">
         {title}
-      </h3>
+      </h5>
       )}
       {actions && (
         <Dropdown className="ml-auto">
diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx
index c13abfd848..1ff5df366d 100644
--- a/src/generic/sidebar/SidebarTitle.tsx
+++ b/src/generic/sidebar/SidebarTitle.tsx
@@ -1,5 +1,7 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, IconButton, Stack } from '@openedx/paragon';
 import { ArrowBack } from '@openedx/paragon/icons';
+import messages from './messages';
 
 interface SidebarTitleProps {
   /** Title of the section */
@@ -27,7 +29,7 @@ export const SidebarTitle = ({
     {onBackBtnClick && (
       <IconButton
         onClick={onBackBtnClick}
-        alt=""
+        alt={useIntl().formatMessage(messages.backBtnText)}
         src={ArrowBack}
         size="inline"
       />
diff --git a/src/generic/sidebar/messages.ts b/src/generic/sidebar/messages.ts
index 05657c30a4..869e12d509 100644
--- a/src/generic/sidebar/messages.ts
+++ b/src/generic/sidebar/messages.ts
@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'Toggle',
     description: 'Toggle button alt',
   },
+  backBtnText: {
+    id: 'course-authoring.sidebar.back.btn.alt-text',
+    defaultMessage: 'Back',
+    description: 'Alternate text of Back button in sidebar title',
+  },
 });
 
 export default messages;

From 45dedab4acced0ac53264a4d1986e3b1405a30e8 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 2 Feb 2026 20:03:55 +0530
Subject: [PATCH 35/60] refactor: add sidebar tests

---
 .../outline-sidebar/AddSidebar.test.tsx       | 64 +++++++++++--------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index a2e723fa09..923a712af8 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -20,11 +20,10 @@ import fetchMock from 'fetch-mock-jest';
 import type { ContainerType } from '@src/generic/key-utils';
 import { AddSidebar } from './AddSidebar';
 import { XBlock } from '@src/data/types';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { snakeCaseKeys } from '@src/editors/utils';
+import { getXBlockBaseApiUrl } from '@src/course-outline/data/api';
 
-const handleAddSection = { mutateAsync: jest.fn() };
-const handleAddSubsection = { mutateAsync: jest.fn() };
-const handleAddUnit = { mutateAsync: jest.fn() };
-const handleAddAndOpenUnit = { mutateAsync: jest.fn() };
 mockContentSearchConfig.applyMock();
 mockContentLibrary.applyMock();
 mockGetCollectionMetadata.applyMock();
@@ -35,14 +34,12 @@ mockGetContainerMetadata.applyMock();
 const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
 const setCurrentSelection = jest.fn();
 jest.mock('@src/CourseAuthoringContext', () => ({
+  ...jest.requireActual('@src/CourseAuthoringContext'),
   useCourseAuthoringContext: () => ({
+    ...jest.requireActual('@src/CourseAuthoringContext').useCourseAuthoringContext(),
     courseId: 5,
-    courseUsageKey: 'course-usage-key',
+    courseUsageKey: 'block-v1:UNIX+UX1+2025_T3+type@course+block@course',
     courseDetails: { name: 'Test course' },
-    handleAddSection,
-    handleAddSubsection,
-    handleAddUnit,
-    handleAddAndOpenUnit,
     setCurrentSelection,
   }),
 }));
@@ -77,7 +74,15 @@ jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
   }),
 }));
 
-const renderComponent = () => render(<AddSidebar />, { extraWrapper: OutlineSidebarProvider });
+const renderComponent = () => render(<AddSidebar />, {
+  extraWrapper: ({children}) => (
+    <CourseAuthoringProvider courseId={"some-course"}>
+      <OutlineSidebarProvider>
+        {children}
+      </OutlineSidebarProvider>
+    </CourseAuthoringProvider>
+  ),
+});
 const searchResult = {
   ...mockResult,
   results: [
@@ -90,10 +95,12 @@ const searchResult = {
     },
   ],
 };
+let axiosMock;
 
 describe('AddSidebar component', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
     // The Meilisearch client-side API uses fetch, not Axios.
     fetchMock.mockReset();
     fetchMock.post(searchEndpoint, (_url, req) => {
@@ -151,6 +158,8 @@ describe('AddSidebar component', () => {
     const sectionList = courseOutlineIndexMock.courseStructure.childInfo.children;
     const lastSection = sectionList[3];
     const lastSubsection = lastSection.childInfo.children[0];
+    axiosMock.onPost(getXBlockBaseApiUrl())
+      .reply(200, { locator: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential45d4d95a' });
     renderComponent();
 
     // Validate handler for adding section, subsection and unit
@@ -158,23 +167,26 @@ describe('AddSidebar component', () => {
     const subsection = await screen.findByRole('button', { name: 'Subsection' });
     const unit = await screen.findByRole('button', { name: 'Unit' });
     await user.click(section);
-    expect(handleAddSection.mutateAsync).toHaveBeenCalledWith({
+    expect(axiosMock.history.post[0].data).toEqual(JSON.stringify(snakeCaseKeys({
       type: 'chapter',
-      parentLocator: 'course-usage-key',
+      category: 'chapter',
+      parentLocator: 'block-v1:UNIX+UX1+2025_T3+type@course+block@course',
       displayName: 'Section',
-    }, { onSuccess: expect.anything() });
+    })));
     await user.click(subsection);
-    expect(handleAddSubsection.mutateAsync).toHaveBeenCalledWith({
+    expect(axiosMock.history.post[1].data).toEqual(JSON.stringify(snakeCaseKeys({
       type: 'sequential',
+      category: 'sequential',
       parentLocator: lastSection.id,
       displayName: 'Subsection',
-    }, { onSuccess: expect.anything() });
+    })));
     await user.click(unit);
-    expect(handleAddAndOpenUnit.mutateAsync).toHaveBeenCalledWith({
+    expect(axiosMock.history.post[2].data).toEqual(JSON.stringify(snakeCaseKeys({
       type: 'vertical',
+      category: 'vertical',
       parentLocator: lastSubsection.id,
       displayName: 'Unit',
-    }, { onSettled: expect.anything() });
+    })));
   });
 
   it('calls appropriate handlers on existing button click', async () => {
@@ -182,6 +194,8 @@ describe('AddSidebar component', () => {
     const sectionList = courseOutlineIndexMock.courseStructure.childInfo.children;
     const lastSection = sectionList[3];
     const lastSubsection = lastSection.childInfo.children[0];
+    axiosMock.onPost(getXBlockBaseApiUrl())
+      .reply(200, { locator: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential45d4d95a' });
     renderComponent();
     // Check existing tab content
     await user.click(await screen.findByRole('tab', { name: 'Add Existing' }));
@@ -190,28 +204,28 @@ describe('AddSidebar component', () => {
     const addBtns = await screen.findAllByRole('button', { name: 'Add' });
     // first one is unit as per mock
     await user.click(addBtns[0]);
-    expect(handleAddUnit.mutateAsync).toHaveBeenCalledWith({
+    expect(axiosMock.history.post[0].data).toEqual(JSON.stringify(snakeCaseKeys({
       type: 'library_v2',
       category: 'vertical',
       parentLocator: lastSubsection.id,
       libraryContentKey: searchResult.results[0].hits[0].usage_key,
-    }, { onSettled: expect.anything() });
+    })));
     // second one is subsection as per mock
     await user.click(addBtns[1]);
-    expect(handleAddSubsection.mutateAsync).toHaveBeenCalledWith({
+    expect(axiosMock.history.post[1].data).toEqual(JSON.stringify(snakeCaseKeys({
       type: 'library_v2',
       category: 'sequential',
       parentLocator: lastSection.id,
       libraryContentKey: searchResult.results[0].hits[1].usage_key,
-    });
+    })));
     // third one is section as per mock
     await user.click(addBtns[2]);
-    expect(handleAddSection.mutateAsync).toHaveBeenCalledWith({
+    expect(axiosMock.history.post[2].data).toEqual(JSON.stringify(snakeCaseKeys({
       type: 'library_v2',
       category: 'chapter',
-      parentLocator: 'course-usage-key',
+      parentLocator: 'block-v1:UNIX+UX1+2025_T3+type@course+block@course',
       libraryContentKey: searchResult.results[0].hits[2].usage_key,
-    });
+    })));
   });
 
   ['section', 'subsection', 'unit'].forEach((category) => {

From 922d40a77ee337946dc3a6f6162e886a53ffdea9 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 2 Feb 2026 20:06:15 +0530
Subject: [PATCH 36/60] fix: lint issues

---
 .../outline-sidebar/AddSidebar.test.tsx       | 16 +++----
 .../outline-sidebar/InfoSidebar.test.tsx      | 26 +++++------
 .../LibraryReferenceCard.test.tsx             | 46 +++++++++----------
 .../outline-sidebar/SectionInfoSidebar.tsx    |  2 +-
 .../outline-sidebar/SubsectionInfoSidebar.tsx |  2 +-
 .../outline-sidebar/sharedComponents.tsx      | 20 ++++----
 src/generic/sidebar/SidebarTitle.tsx          | 31 +++++++------
 7 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index 923a712af8..f2487815b8 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -18,11 +18,11 @@ import {
 } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import fetchMock from 'fetch-mock-jest';
 import type { ContainerType } from '@src/generic/key-utils';
-import { AddSidebar } from './AddSidebar';
 import { XBlock } from '@src/data/types';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { snakeCaseKeys } from '@src/editors/utils';
 import { getXBlockBaseApiUrl } from '@src/course-outline/data/api';
+import { AddSidebar } from './AddSidebar';
 
 mockContentSearchConfig.applyMock();
 mockContentLibrary.applyMock();
@@ -60,8 +60,8 @@ jest.mock('@src/studio-home/hooks', () => ({
 let currentFlow: OutlineFlow | null = null;
 let isCurrentFlowOn = false;
 let currentItemData: Partial<XBlock> | null;
-let clearSelection = jest.fn();
-let stopCurrentFlow = jest.fn();
+const clearSelection = jest.fn();
+const stopCurrentFlow = jest.fn();
 jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
   ...jest.requireActual('../outline-sidebar/OutlineSidebarContext'),
   useOutlineSidebarContext: () => ({
@@ -75,8 +75,8 @@ jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
 }));
 
 const renderComponent = () => render(<AddSidebar />, {
-  extraWrapper: ({children}) => (
-    <CourseAuthoringProvider courseId={"some-course"}>
+  extraWrapper: ({ children }) => (
+    <CourseAuthoringProvider courseId="some-course">
       <OutlineSidebarProvider>
         {children}
       </OutlineSidebarProvider>
@@ -285,15 +285,15 @@ describe('AddSidebar component', () => {
         deletable: true,
         draggable: true,
         duplicable: true,
-      }
-    }
+      },
+    };
     renderComponent();
 
     // render existing tab as well
     await user.click(await screen.findByRole('tab', { name: 'Add Existing' }));
     // One in new tab and one in existing tab
     expect((await screen.findAllByText(
-      `${currentItemData.displayName} is a library section. Content cannot be added to Library referenced sections.`
+      `${currentItemData.displayName} is a library section. Content cannot be added to Library referenced sections.`,
     )).length).toEqual(2);
   });
 
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/InfoSidebar.test.tsx
index ad369941c5..75de7fcbc8 100644
--- a/src/course-outline/outline-sidebar/InfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/InfoSidebar.test.tsx
@@ -1,11 +1,11 @@
-import { InfoSidebar } from './InfoSidebar'
-import { initializeMocks, render, screen } from '@src/testUtils'
+import { initializeMocks, render, screen } from '@src/testUtils';
 import { SelectionState } from '@src/data/types';
 import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { getXBlockApiUrl } from '@src/course-outline/data/api';
 import userEvent from '@testing-library/user-event';
+import { InfoSidebar } from './InfoSidebar';
 
-let selectedContainerState: SelectionState | undefined = undefined;
+let selectedContainerState: SelectionState | undefined;
 jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
   ...jest.requireActual('../outline-sidebar/OutlineSidebarContext'),
   useOutlineSidebarContext: () => ({
@@ -36,7 +36,7 @@ jest.mock('@src/search-manager', () => ({
   useGetBlockTypes: () => ({ data: [] }),
 }));
 
-const renderComponent = () => render(<InfoSidebar />, { extraWrapper: OutlineSidebarProvider});
+const renderComponent = () => render(<InfoSidebar />, { extraWrapper: OutlineSidebarProvider });
 let axiosMock;
 
 describe('InfoSidebar component', () => {
@@ -53,14 +53,14 @@ describe('InfoSidebar component', () => {
   it('renders InfoSidebar with section info', async () => {
     const user = userEvent.setup();
     selectedContainerState = {
-      currentId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123'
-    }
+      currentId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123',
+    };
     const data = {
       id: selectedContainerState.currentId,
       displayName: 'section name',
       category: 'chapter',
       hasChanges: true,
-    }
+    };
     axiosMock
       .onGet(getXBlockApiUrl(selectedContainerState.currentId))
       .reply(200, data);
@@ -80,14 +80,14 @@ describe('InfoSidebar component', () => {
     const user = userEvent.setup();
     selectedContainerState = {
       currentId: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@123',
-      sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123'
-    }
+      sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123',
+    };
     const data = {
       id: selectedContainerState.currentId,
       displayName: 'subsection name',
       category: 'sequential',
       hasChanges: true,
-    }
+    };
     axiosMock
       .onGet(getXBlockApiUrl(selectedContainerState.currentId))
       .reply(200, data);
@@ -108,14 +108,14 @@ describe('InfoSidebar component', () => {
     selectedContainerState = {
       currentId: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@123',
       subsectionId: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@123',
-      sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123'
-    }
+      sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@123',
+    };
     const data = {
       id: selectedContainerState.currentId,
       displayName: 'unit name',
       category: 'vertical',
       hasChanges: true,
-    }
+    };
     axiosMock
       .onGet(getXBlockApiUrl(selectedContainerState.currentId))
       .reply(200, data);
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx
index a71c863c88..01720903ca 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.test.tsx
@@ -4,11 +4,11 @@ import { userEvent } from '@testing-library/user-event';
 import { LibraryReferenceCard } from './LibraryReferenceCard';
 
 let axiosMock;
-let upstreamData = {
+const upstreamData = {
   id: 'lct:UNIX:CIT1:subsection:99d7e14e2d6f4ab7989dc0d948f917df',
   name: 'upstream subsection',
-}
-let sectionData = {
+};
+const sectionData = {
   id: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@asafd',
   displayName: 'downstream section',
   upstreamInfo: {
@@ -20,9 +20,9 @@ let sectionData = {
     readyToSync: false,
     topLevelParentKey: null,
     downstreamCustomized: [],
-  }
-}
-let itemData = {
+  },
+};
+const itemData = {
   id: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential45d4d95a',
   displayName: 'downstream subsection',
   upstreamInfo: {
@@ -34,8 +34,8 @@ let itemData = {
     readyToSync: false,
     topLevelParentKey: null,
     downstreamCustomized: [],
-  }
-}
+  },
+};
 
 const mockUseOutlineSidebarContext = jest.fn().mockReturnValue({
   selectedContainerState: { currentId: itemData.id, sectionId: sectionData.id },
@@ -81,14 +81,14 @@ describe('LibraryReferenceCard', () => {
       upstreamInfo: {
         ...itemData.upstreamInfo,
         errorMessage: 'some error',
-      }
+      },
     };
     axiosMock
       .onGet(getXBlockApiUrl(itemData.id))
       .reply(200, data);
     render(<LibraryReferenceCard itemId={itemData.id} />);
     expect(await screen.findByText(
-      `The link between ${itemData.displayName} and the library version has been broken. To edit or make changes, unlink component.`
+      `The link between ${itemData.displayName} and the library version has been broken. To edit or make changes, unlink component.`,
     )).toBeInTheDocument();
 
     await user.click(await screen.findByRole('button', { name: 'Unlink from library' }));
@@ -107,11 +107,11 @@ describe('LibraryReferenceCard', () => {
         upstreamInfo: {
           ...itemData.upstreamInfo,
           readyToSync: true,
-        }
+        },
       });
     render(<LibraryReferenceCard itemId={itemData.id} />);
     expect(await screen.findByText(
-      `${itemData.displayName} has available updates`
+      `${itemData.displayName} has available updates`,
     )).toBeInTheDocument();
 
     await user.click(await screen.findByRole('button', { name: 'Review Updates' }));
@@ -126,11 +126,11 @@ describe('LibraryReferenceCard', () => {
         upstreamInfo: {
           ...itemData.upstreamInfo,
           downstreamCustomized: ['displayName'],
-        }
+        },
       });
     render(<LibraryReferenceCard itemId={itemData.id} />);
     expect(await screen.findByText(
-      `${itemData.displayName} has been modified in this course.`
+      `${itemData.displayName} has been modified in this course.`,
     )).toBeInTheDocument();
   });
 
@@ -144,11 +144,11 @@ describe('LibraryReferenceCard', () => {
           ...itemData.upstreamInfo,
           topLevelParentKey: sectionData.upstreamInfo.downstreamKey,
           errorMessage: 'some error',
-        }
+        },
       });
     render(<LibraryReferenceCard itemId={itemData.id} />);
     expect(await screen.findByText(
-      `${itemData.displayName} was reused as part of a section which has a broken link. To recieve library updates to this component, unlink the broken link.`
+      `${itemData.displayName} was reused as part of a section which has a broken link. To recieve library updates to this component, unlink the broken link.`,
     )).toBeInTheDocument();
 
     await user.click(await screen.findByRole('button', { name: 'Unlink section' }));
@@ -168,21 +168,21 @@ describe('LibraryReferenceCard', () => {
         upstreamInfo: {
           ...itemData.upstreamInfo,
           topLevelParentKey: sectionData.upstreamInfo.downstreamKey,
-        }
+        },
       });
     const parentData = {
       ...sectionData,
       upstreamInfo: {
         ...sectionData.upstreamInfo,
         readyToSync: true,
-      }
-    }
+      },
+    };
     axiosMock
       .onGet(getXBlockApiUrl(sectionData.id))
       .reply(200, parentData);
     render(<LibraryReferenceCard itemId={itemData.id} />);
     expect(await screen.findByText(
-      `${itemData.displayName} was reused as part of a section which has updates available.`
+      `${itemData.displayName} was reused as part of a section which has updates available.`,
     )).toBeInTheDocument();
 
     await user.click(await screen.findByRole('button', { name: 'Review Updates' }));
@@ -198,18 +198,18 @@ describe('LibraryReferenceCard', () => {
         upstreamInfo: {
           ...itemData.upstreamInfo,
           topLevelParentKey: sectionData.upstreamInfo.downstreamKey,
-        }
+        },
       });
     render(<LibraryReferenceCard itemId={itemData.id} />);
     expect(await screen.findByText(
-      `${itemData.displayName} was reused as part of a section.`
+      `${itemData.displayName} was reused as part of a section.`,
     )).toBeInTheDocument();
 
     await user.click(await screen.findByRole('button', { name: 'View section' }));
     expect(mockUseOutlineSidebarContext().openContainerInfoSidebar).toHaveBeenCalledWith(
       sectionData.id,
       undefined,
-      sectionData.id
+      sectionData.id,
     );
   });
 });
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
index cdb5f1cd9b..331e9224c1 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
@@ -10,9 +10,9 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
 import messages from './messages';
 import { PublishButon } from './PublishButon';
-import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
 
 interface Props {
   sectionId: string;
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
index 2f100dcc37..945c9ab4ee 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
@@ -10,9 +10,9 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
 import { PublishButon } from './PublishButon';
 import messages from './messages';
-import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
 
 interface Props {
   subsectionId: string;
diff --git a/src/course-outline/outline-sidebar/sharedComponents.tsx b/src/course-outline/outline-sidebar/sharedComponents.tsx
index a2b36588da..cc204ddac5 100644
--- a/src/course-outline/outline-sidebar/sharedComponents.tsx
+++ b/src/course-outline/outline-sidebar/sharedComponents.tsx
@@ -1,13 +1,13 @@
-import { useIntl } from "@edx/frontend-platform/i18n";
-import { useToggle } from "@openedx/paragon";
-import { SchoolOutline, Tag } from "@openedx/paragon/icons";
-import { ContentTagsDrawerSheet, ContentTagsSnippet } from "@src/content-tags-drawer";
-import { useCourseItemData } from "@src/course-outline/data/apiHooks";
-import { LibraryReferenceCard } from "@src/course-outline/outline-sidebar/LibraryReferenceCard";
-import { ComponentCountSnippet, getItemIcon } from "@src/generic/block-type-utils";
-import { normalizeContainerType } from "@src/generic/key-utils";
-import { SidebarContent, SidebarSection } from "@src/generic/sidebar";
-import { useGetBlockTypes } from "@src/search-manager";
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useToggle } from '@openedx/paragon';
+import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { LibraryReferenceCard } from '@src/course-outline/outline-sidebar/LibraryReferenceCard';
+import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
+import { normalizeContainerType } from '@src/generic/key-utils';
+import { SidebarContent, SidebarSection } from '@src/generic/sidebar';
+import { useGetBlockTypes } from '@src/search-manager';
 import messages from './messages';
 
 interface Props {
diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx
index 1ff5df366d..a565e31eb9 100644
--- a/src/generic/sidebar/SidebarTitle.tsx
+++ b/src/generic/sidebar/SidebarTitle.tsx
@@ -24,17 +24,20 @@ export const SidebarTitle = ({
   title,
   icon,
   onBackBtnClick,
-}: SidebarTitleProps) => (
-  <Stack direction="horizontal" gap={2} className="mb-3">
-    {onBackBtnClick && (
-      <IconButton
-        onClick={onBackBtnClick}
-        alt={useIntl().formatMessage(messages.backBtnText)}
-        src={ArrowBack}
-        size="inline"
-      />
-    )}
-    <Icon src={icon} className="mr-2 text-primary" />
-    <h2 className="text-primary h3 mb-0">{title}</h2>
-  </Stack>
-);
+}: SidebarTitleProps) => {
+  const intl = useIntl();
+  return (
+    <Stack direction="horizontal" gap={2} className="mb-3">
+      {onBackBtnClick && (
+        <IconButton
+          onClick={onBackBtnClick}
+          alt={intl.formatMessage(messages.backBtnText)}
+          src={ArrowBack}
+          size="inline"
+        />
+      )}
+      <Icon src={icon} className="mr-2 text-primary" />
+      <h2 className="text-primary h3 mb-0">{title}</h2>
+    </Stack>
+  );
+};

From cddfe7cb5592786e934d2a90572f7c86a72de0e8 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 2 Feb 2026 20:23:03 +0530
Subject: [PATCH 37/60] fix: test

---
 src/course-outline/CourseOutline.test.tsx                    | 5 +++--
 .../outline-sidebar/OutlineAlignSidebar.test.tsx             | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index 85f1277010..5dde5e783e 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -70,7 +70,7 @@ const courseId = '123';
 const getContainerKey = jest.fn().mockReturnValue('lct:org:lib:unit:1');
 const getContainerType = jest.fn().mockReturnValue('unit');
 const clearSelection = jest.fn();
-let selectedContainerId: string;
+let selectedContainerId: string | undefined;
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
@@ -78,7 +78,7 @@ jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
   useOutlineSidebarContext: () => ({
     ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     clearSelection,
-    selectedContainerState: { currentId: selectedContainerId },
+    selectedContainerState: (() => (selectedContainerId ? { currentId: selectedContainerId } : undefined))(),
   }),
 }));
 
@@ -162,6 +162,7 @@ const renderComponent = () => render(
 describe('<CourseOutline />', () => {
   beforeEach(async () => {
     const mocks = initializeMocks();
+    selectedContainerId = undefined;
 
     jest.mocked(useLocation).mockReturnValue({
       pathname: mockPathname,
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
index 3188294d96..5339021682 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { initializeMocks, render, screen } from '@src/testUtils';
 
 import * as CourseAuthoringContext from '@src/CourseAuthoringContext';
 import * as CourseDetailsApi from '@src/data/apiHooks';
@@ -16,6 +16,7 @@ jest.mock('@src/content-tags-drawer', () => ({
 
 describe('OutlineAlignSidebar', () => {
   beforeEach(() => {
+    initializeMocks();
     jest
       .spyOn(CourseAuthoringContext, 'useCourseAuthoringContext')
       .mockReturnValue({

From 5b90b1634b4a7320d96442dcb2204e07099ebf7e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 3 Feb 2026 11:03:12 +0530
Subject: [PATCH 38/60] fix: coverage

---
 src/course-outline/data/slice.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/course-outline/data/slice.ts b/src/course-outline/data/slice.ts
index 412346bd26..aef6d508bc 100644
--- a/src/course-outline/data/slice.ts
+++ b/src/course-outline/data/slice.ts
@@ -171,6 +171,7 @@ const slice = createSlice({
       });
     },
     addUnit: (state: CourseOutlineState, { payload }) => {
+      // istanbul ignore next
       state.sectionsList = state.sectionsList.map((section) => {
         section.childInfo.children = section.childInfo.children.map((subsection) => {
           if (subsection.id !== payload.parentLocator) {

From e2db9d561bf6ed2f2d49f7e4fc6ae1f48ea1d6f0 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 3 Feb 2026 12:41:35 +0530
Subject: [PATCH 39/60] fix: coverage

---
 src/course-outline/card-header/CardHeader.tsx |  2 +
 src/course-outline/hooks.jsx                  |  4 +-
 .../outline-sidebar/AddSidebar.test.tsx       | 79 ++++++++++++++++++-
 .../outline-sidebar/AddSidebar.tsx            |  5 +-
 .../outline-sidebar/OutlineAlignSidebar.tsx   |  1 +
 .../section-card/SectionCard.tsx              |  1 +
 .../subsection-card/SubsectionCard.tsx        |  1 +
 src/course-outline/unit-card/UnitCard.tsx     |  1 +
 8 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 7f6acec7e8..cb17ada62d 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -159,6 +159,7 @@ const CardHeader = ({
   );
 
   useEscapeClick({
+    // istanbul ignore next
     onEscape: () => {
       setTitleValue(title);
       closeForm();
@@ -211,6 +212,7 @@ const CardHeader = ({
               aria-label={intl.formatMessage(messages.editFieldAriaLabel)}
               onBlur={handleEditSubmit}
               onKeyDown={(e) => {
+                // istanbul ignore if
                 if (e.key === 'Enter') {
                   handleEditSubmit();
                 } else if (e.key === ' ') {
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 7ce72260cb..fb4716cd51 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -172,6 +172,7 @@ const useCourseOutline = ({ courseId }) => {
     await unlinkDownstream(currentUnlinkModalData.value.id, {
       onSuccess: () => {
         closeUnlinkModal();
+        // istanbul ignore next
         // refresh child block data
         currentUnlinkModalData.value.childInfo.children.forEach((block) => {
           queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(block.id) });
@@ -203,7 +204,8 @@ const useCourseOutline = ({ courseId }) => {
         dispatch(configureCourseUnitQuery(currentSelection?.currentId, currentSelection?.sectionId, ...arg));
         break;
       default:
-        return;
+        // istanbul ignore next
+        throw new Error('Unsupported block type');
     }
     handleConfigureModalClose();
   };
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
index f2487815b8..3dbc44ffc5 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -22,6 +22,7 @@ import { XBlock } from '@src/data/types';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { snakeCaseKeys } from '@src/editors/utils';
 import { getXBlockBaseApiUrl } from '@src/course-outline/data/api';
+import MockAdapter from 'axios-mock-adapter/types';
 import { AddSidebar } from './AddSidebar';
 
 mockContentSearchConfig.applyMock();
@@ -44,9 +45,10 @@ jest.mock('@src/CourseAuthoringContext', () => ({
   }),
 }));
 
+let outlineChildren = courseOutlineIndexMock.courseStructure.childInfo.children;
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useSelector: jest.fn().mockReturnValue(courseOutlineIndexMock.courseStructure.childInfo.children),
+  useSelector: () => outlineChildren,
 }));
 
 jest.mock('@src/studio-home/hooks', () => ({
@@ -95,9 +97,9 @@ const searchResult = {
     },
   ],
 };
-let axiosMock;
+let axiosMock: MockAdapter;
 
-describe('AddSidebar component', () => {
+describe('AddSidebar', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
     axiosMock = mocks.axiosMock;
@@ -116,6 +118,7 @@ describe('AddSidebar component', () => {
       newMockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
       return newMockResult;
     });
+    outlineChildren = courseOutlineIndexMock.courseStructure.childInfo.children;
   });
 
   it('renders the AddSidebar component without any errors', async () => {
@@ -189,6 +192,76 @@ describe('AddSidebar component', () => {
     })));
   });
 
+  it('creates parent section if required', async () => {
+    const user = userEvent.setup();
+    // the course is empty
+    outlineChildren = [];
+    const sectionId = 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@chapter123';
+    axiosMock.onPost(getXBlockBaseApiUrl())
+      .reply(200, { locator: sectionId });
+    renderComponent();
+
+    const subsection = await screen.findByRole('button', { name: 'Subsection' });
+    await user.click(subsection);
+    // should add a section first
+    expect(axiosMock.history.post[0].data).toEqual(JSON.stringify(snakeCaseKeys({
+      type: 'chapter',
+      category: 'chapter',
+      parentLocator: 'block-v1:UNIX+UX1+2025_T3+type@course+block@course',
+      displayName: 'Section',
+    })));
+    // then subsection
+    expect(axiosMock.history.post[1].data).toEqual(JSON.stringify(snakeCaseKeys({
+      type: 'sequential',
+      category: 'sequential',
+      parentLocator: sectionId,
+      displayName: 'Subsection',
+    })));
+  });
+
+  it('creates parent section and subsection if required', async () => {
+    const user = userEvent.setup();
+    // the course is empty
+    outlineChildren = [];
+    const sectionId = 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@chapter123';
+    const subsectionId = 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@sequential234';
+    const unitId = 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@vertical2133';
+    const sectionBody = snakeCaseKeys({
+      type: 'chapter',
+      category: 'chapter',
+      parentLocator: 'block-v1:UNIX+UX1+2025_T3+type@course+block@course',
+      displayName: 'Section',
+    });
+    const subsectionBody = snakeCaseKeys({
+      type: 'sequential',
+      category: 'sequential',
+      parentLocator: sectionId,
+      displayName: 'Subsection',
+    });
+    const unitBody = snakeCaseKeys({
+      type: 'vertical',
+      category: 'vertical',
+      parentLocator: subsectionId,
+      displayName: 'Unit',
+    });
+    axiosMock.onPost(getXBlockBaseApiUrl(), sectionBody)
+      .reply(200, { locator: sectionId });
+    axiosMock.onPost(getXBlockBaseApiUrl(), subsectionBody)
+      .reply(200, { locator: subsectionId });
+    axiosMock.onPost(getXBlockBaseApiUrl(), unitBody)
+      .reply(200, { locator: unitId });
+    renderComponent();
+
+    const unit = await screen.findByRole('button', { name: 'Unit' });
+    await user.click(unit);
+    // should add a section first
+    expect(axiosMock.history.post[0].data).toEqual(JSON.stringify(sectionBody));
+    // then subsection
+    expect(axiosMock.history.post[1].data).toEqual(JSON.stringify(subsectionBody));
+    // then unit
+    expect(axiosMock.history.post[2].data).toEqual(JSON.stringify(unitBody));
+  });
+
   it('calls appropriate handlers on existing button click', async () => {
     const user = userEvent.setup();
     const sectionList = courseOutlineIndexMock.courseStructure.childInfo.children;
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index dbbfcb3fdc..a23ac4d06d 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -332,7 +332,10 @@ const ShowLibraryContent = () => {
     <MultiLibraryProvider>
       <ComponentPicker
         showOnlyPublished
-        extraFilter={[`block_type IN ["${allowedBlocks.join('","')}"]`]}
+        extraFilter={[
+          `block_type IN ["${allowedBlocks.join('","')}"]`,
+          'type = "library_container"',
+        ]}
         visibleTabs={[ContentType.home]}
         FiltersComponent={SidebarFilters}
         onComponentSelected={onComponentSelected}
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index cb53536cbd..3c3fdc123f 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -22,6 +22,7 @@ export const OutlineAlignSidebar = () => {
 
   const { data: contentData } = useContentData(sidebarContentId);
 
+  // istanbul ignore next
   const handleBack = () => {
     clearSelection();
     setCurrentSelection(undefined);
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 9762fa12e6..b5a9b013ed 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -109,6 +109,7 @@ const SectionCard = ({
   /**
   Temporary measure to keep the react-query state updated with redux state  */
   useEffect(() => {
+    // istanbul ignore if
     if (moment(initialData.editedOnRaw).isAfter(moment(section.editedOnRaw))) {
       queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
     }
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index e5d0b642f6..0574a37830 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -144,6 +144,7 @@ const SubsectionCard = ({
   /**
   Temporary measure to keep the react-query state updated with redux state  */
   useEffect(() => {
+    // istanbul ignore if
     if (moment(initialData.editedOnRaw).isAfter(moment(subsection.editedOnRaw))) {
       queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
     }
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 6098fe8f84..d9960aaa62 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -192,6 +192,7 @@ const UnitCard = ({
   /**
   Temporary measure to keep the react-query state updated with redux state  */
   useEffect(() => {
+    // istanbul ignore if
     if (moment(initialData.editedOnRaw).isAfter(moment(unit.editedOnRaw))) {
       queryClient.setQueryData(courseOutlineQueryKeys.courseItemId(initialData.id), initialData);
     }

From 1e942dc664fb02b03036c3339cb006b63e00e13c Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 3 Feb 2026 12:58:28 +0530
Subject: [PATCH 40/60] fix: lint issues

---
 src/course-outline/card-header/CardHeader.tsx     |  4 ++--
 src/course-outline/outline-sidebar/AddSidebar.tsx | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index cb17ada62d..1c39deb712 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -168,9 +168,9 @@ const CardHeader = ({
   });
 
   const editMutation = useUpdateCourseBlockName(courseId);
-  const handleEditSubmit = useCallback(async () => {
+  const handleEditSubmit = useCallback(() => {
     if (title !== titleValue) {
-      await editMutation.mutateAsync({
+      editMutation.mutate({
         itemId: cardId,
         displayName: titleValue,
       }, {
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index a23ac4d06d..6c25670ec6 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -65,8 +65,8 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
   let sectionParentId = lastEditableSection?.id;
   let subsectionParentId = lastEditableSubsection?.data?.id;
 
-  const addSection = async (onSuccess?: (data: { locator: string; }) => void) => {
-    await handleAddSection.mutateAsync({
+  const addSection = (onSuccess?: (data: { locator: string; }) => void) => {
+    handleAddSection.mutate({
       type: ContainerType.Chapter,
       parentLocator: courseUsageKey,
       displayName: COURSE_BLOCK_NAMES.chapter.name,
@@ -82,8 +82,8 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     });
   };
 
-  const addSubsection = async (sectionId: string, onSuccess?: (data: { locator: string; }) => void) => {
-    await handleAddSubsection.mutateAsync({
+  const addSubsection = (sectionId: string, onSuccess?: (data: { locator: string; }) => void) => {
+    handleAddSubsection.mutate({
       type: ContainerType.Sequential,
       parentLocator: sectionId,
       displayName: COURSE_BLOCK_NAMES.sequential.name,
@@ -99,8 +99,8 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     });
   };
 
-  const addUnit = async (subsectionId: string, sectionId?: string, onSettled?: () => void) => {
-    await handleAddAndOpenUnit.mutateAsync({
+  const addUnit = (subsectionId: string, sectionId?: string, onSettled?: () => void) => {
+    handleAddAndOpenUnit.mutate({
       type: ContainerType.Vertical,
       parentLocator: subsectionId,
       displayName: COURSE_BLOCK_NAMES.vertical.name,

From 46e694ea3ed0a13d93681e3433dc17eeca153659 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 3 Feb 2026 14:39:33 +0530
Subject: [PATCH 41/60] fix: coverage

---
 src/CourseAuthoringContext.tsx                  | 2 ++
 src/course-outline/card-header/CardHeader.tsx   | 3 ++-
 src/course-outline/data/slice.ts                | 1 +
 src/course-outline/section-card/SectionCard.tsx | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index e5bf3fb8cf..f14c7faf4f 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -146,7 +146,9 @@ export const CourseAuthoringProvider = ({
   const addUnitToCourse = async (locator: string, parentLocator: string) => {
     try {
       const data = await getCourseItem(locator);
+      // istanbul ignore next
       data.shouldScroll = true;
+      // istanbul ignore next
       // Page should scroll to newly added subsection.
       dispatch(addUnit({ parentLocator, data }));
     } catch {
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 1c39deb712..172482f5ad 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -159,9 +159,10 @@ const CardHeader = ({
   );
 
   useEscapeClick({
-    // istanbul ignore next
     onEscape: () => {
+      // istanbul ignore next
       setTitleValue(title);
+      // istanbul ignore next
       closeForm();
     },
     dependency: [title],
diff --git a/src/course-outline/data/slice.ts b/src/course-outline/data/slice.ts
index aef6d508bc..ca0ac92fdd 100644
--- a/src/course-outline/data/slice.ts
+++ b/src/course-outline/data/slice.ts
@@ -170,6 +170,7 @@ const slice = createSlice({
         return section;
       });
     },
+    // istanbul ignore next
     addUnit: (state: CourseOutlineState, { payload }) => {
       // istanbul ignore next
       state.sectionsList = state.sectionsList.map((section) => {
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index b5a9b013ed..ba24ca300e 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -272,6 +272,7 @@ const SectionCard = ({
                 status={sectionStatus}
                 hasChanges={hasChanges}
                 onClickMenuButton={handleClickMenuButton}
+                // istanbul ignore next
                 onClickPublish={() => openPublishModal({ value: section, sectionId: section.id })}
                 onClickConfigure={onOpenConfigureModal}
                 onClickDelete={onOpenDeleteModal}

From 581ec20dc6e7e4c86c5e8d8d7d4f8696bbb8222a Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 3 Feb 2026 14:52:14 +0530
Subject: [PATCH 42/60] fix: flaky test

---
 src/course-unit/CourseUnit.test.jsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
index 5e1edd70f8..8dd56ea400 100644
--- a/src/course-unit/CourseUnit.test.jsx
+++ b/src/course-unit/CourseUnit.test.jsx
@@ -582,12 +582,11 @@ describe('<CourseUnit />', () => {
     } = courseSectionVerticalMock;
 
     const viewLiveButton = await screen.findByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage });
-
     await user.click(viewLiveButton);
     expect(window.open).toHaveBeenCalled();
     expect(window.open).toHaveBeenCalledWith(publishedPreviewLink, '_blank');
 
-    const previewButton = screen.getByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage });
+    const previewButton = await screen.findByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage });
     await user.click(previewButton);
     expect(window.open).toHaveBeenCalled();
     expect(window.open).toHaveBeenCalledWith(draftPreviewLink, '_blank');
@@ -664,16 +663,14 @@ describe('<CourseUnit />', () => {
     axiosMock
       .onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
       .reply(500, {});
-    const { getByRole } = render(<RootWrapper />);
-
-    await waitFor(async () => {
-      const videoButton = getByRole('button', {
-        name: new RegExp(`${addComponentMessages.buttonText.defaultMessage} Video`, 'i'),
-      });
+    render(<RootWrapper />);
 
-      await user.click(videoButton);
-      expect(mockedUsedNavigate).not.toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
+    const videoButton = await screen.findByRole('button', {
+      name: new RegExp(`${addComponentMessages.buttonText.defaultMessage} Video`, 'i'),
     });
+
+    await user.click(videoButton);
+    expect(mockedUsedNavigate).not.toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
   });
 
   it('handle creating Problem xblock and showing editor modal', async () => {
@@ -683,9 +680,7 @@ describe('<CourseUnit />', () => {
       .reply(200, courseCreateXblockMock);
     render(<RootWrapper />);
 
-    await waitFor(async () => {
-      await user.click(screen.getByRole('button', { name: legacySidebarMessages.actionButtonPublishTitle.defaultMessage }));
-    });
+    await user.click(await screen.findByRole('button', { name: legacySidebarMessages.actionButtonPublishTitle.defaultMessage }));
 
     axiosMock
       .onPost(getXBlockBaseApiUrl(blockId), {

From 54dd13472236ae17fec43392ade3f0da114edb83 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 3 Feb 2026 15:29:48 +0530
Subject: [PATCH 43/60] fix: coverage

---
 src/course-outline/card-header/CardHeader.tsx         | 7 ++-----
 src/course-outline/section-card/SectionCard.tsx       | 6 ++++--
 src/course-outline/subsection-card/SubsectionCard.tsx | 5 ++++-
 src/course-outline/unit-card/UnitCard.tsx             | 2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 172482f5ad..90b3979999 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -159,10 +159,8 @@ const CardHeader = ({
   );
 
   useEscapeClick({
-    onEscape: () => {
-      // istanbul ignore next
+    onEscape: /* istanbul ignore next */ () => {
       setTitleValue(title);
-      // istanbul ignore next
       closeForm();
     },
     dependency: [title],
@@ -212,8 +210,7 @@ const CardHeader = ({
               onChange={(e) => setTitleValue(e.target.value)}
               aria-label={intl.formatMessage(messages.editFieldAriaLabel)}
               onBlur={handleEditSubmit}
-              onKeyDown={(e) => {
-                // istanbul ignore if
+              onKeyDown={/* istanbul ignore next */ (e) => {
                 if (e.key === 'Enter') {
                   handleEditSubmit();
                 } else if (e.key === ' ') {
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index ba24ca300e..9673ec4f98 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -272,8 +272,10 @@ const SectionCard = ({
                 status={sectionStatus}
                 hasChanges={hasChanges}
                 onClickMenuButton={handleClickMenuButton}
-                // istanbul ignore next
-                onClickPublish={() => openPublishModal({ value: section, sectionId: section.id })}
+                onClickPublish={/* istanbul ignore next */ () => openPublishModal({
+                  value: section,
+                  sectionId: section.id,
+                })}
                 onClickConfigure={onOpenConfigureModal}
                 onClickDelete={onOpenDeleteModal}
                 onClickUnlink={() => openUnlinkModal({ value: section, sectionId: section.id })}
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 0574a37830..3df7f949e1 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -280,7 +280,10 @@ const SubsectionCard = ({
                 onClickMenuButton={handleClickMenuButton}
                 onClickPublish={() => openPublishModal({ value: subsection, sectionId: section.id })}
                 onClickDelete={onOpenDeleteModal}
-                onClickUnlink={() => openUnlinkModal({ value: subsection, sectionId: section.id })}
+                onClickUnlink={/* istanbul ignore next */ () => openUnlinkModal({
+                  value: subsection,
+                  sectionId: section.id,
+                })}
                 onClickMoveUp={handleSubsectionMoveUp}
                 onClickMoveDown={handleSubsectionMoveDown}
                 onClickConfigure={onOpenConfigureModal}
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index d9960aaa62..1ba5331f72 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -259,7 +259,7 @@ const UnitCard = ({
             })}
             onClickConfigure={onOpenConfigureModal}
             onClickDelete={onOpenDeleteModal}
-            onClickUnlink={() => openUnlinkModal({
+            onClickUnlink={/* istanbul ignore next */ () => openUnlinkModal({
               value: unit,
               sectionId: section.id,
               subsectionId: subsection.id,

From bc81321018df0eee5f199926fe66e546a86c183d Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 12:20:12 +0530
Subject: [PATCH 44/60] refactor: close title edit form only after update is
 complete

---
 src/course-outline/card-header/CardHeader.tsx | 12 ++++++------
 src/course-outline/data/api.ts                |  2 --
 src/course-outline/data/apiHooks.ts           |  8 ++++----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 90b3979999..90565e1154 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -173,18 +173,19 @@ const CardHeader = ({
         itemId: cardId,
         displayName: titleValue,
       }, {
-        onSuccess: () => {
-          closeForm();
-          queryClient.invalidateQueries({
+        onSuccess: async () => {
+          await queryClient.invalidateQueries({
             queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
           });
-          queryClient.invalidateQueries({
+          await queryClient.invalidateQueries({
             queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.subsectionId),
           });
         },
+        onSettled: () => closeForm(),
       });
+    } else {
+      closeForm();
     }
-    closeForm();
   }, [title, titleValue, cardId, editMutation]);
 
   return (
@@ -233,7 +234,6 @@ const CardHeader = ({
               tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
               iconAs={EditIcon}
               onClick={onEditClick}
-              // @ts-ignore
               disabled={editMutation.isPending}
             />
           </Stack>
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index 6f57b9aaf4..8dc5489ebf 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -202,8 +202,6 @@ export async function updateCourseSectionHighlights(
 
 /**
  * Publish course item
- * @param {string} itemId
- * @returns {Promise<Object>}
  */
 export async function publishCourseItem(itemId: string): Promise<CourseItemUpdateResult> {
   const { data } = await getAuthenticatedHttpClient()
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index a2cf7b37c6..aa5767d427 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -73,10 +73,10 @@ export const useUpdateCourseBlockName = (courseId: string) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: editItemDisplayName,
-    onSettled: async (_data, _err, variables) => {
-      queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
+    onSuccess: async (_data, variables) => {
+      await queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
+      await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
+      await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
     },
   });
 };

From 4f8c4aac31b6f8a042502fac715da220734ed8b0 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 15:33:17 +0530
Subject: [PATCH 45/60] chore: apply review suggestions

---
 src/CourseAuthoringContext.tsx                |  7 +------
 src/course-outline/card-header/CardHeader.tsx |  3 ++-
 .../outline-sidebar/AddSidebar.tsx            | 19 +++----------------
 .../outline-sidebar/LibraryReferenceCard.tsx  |  2 +-
 .../outline-sidebar/OutlineAlignSidebar.tsx   |  7 +------
 .../outline-sidebar/OutlineSidebarContext.tsx |  7 +++----
 6 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index f14c7faf4f..bdf3a68b3f 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -3,7 +3,7 @@ import {
   createContext, useContext, useMemo, useState,
 } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { courseOutlineQueryKeys, useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
+import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { getCourseItem } from '@src/course-outline/data/api';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -13,7 +13,6 @@ import { useNavigate } from 'react-router';
 import { getOutlineIndexData } from '@src/course-outline/data/selectors';
 import { useToggleWithValue } from '@src/hooks';
 import { SelectionState, XBlock } from '@src/data/types';
-import { useQueryClient } from '@tanstack/react-query';
 import { CourseDetailsData } from './data/api';
 import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { RequestStatus, RequestStatusType } from './data/constants';
@@ -94,7 +93,6 @@ export const CourseAuthoringProvider = ({
   * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.
   */
   const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
-  const queryClient = useQueryClient();
 
   const getUnitUrl = (locator: string) => {
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
@@ -108,9 +106,6 @@ export const CourseAuthoringProvider = ({
    * Open the unit page for a given locator.
    */
   const openUnitPage = async (locator: string) => {
-    queryClient.invalidateQueries({
-      queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
-    });
     const url = getUnitUrl(locator);
     if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
       // instanbul ignore next
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 90565e1154..42ce79253f 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -111,7 +111,8 @@ const CardHeader = ({
 
   const openManageTagsDrawer = useCallback(() => {
     const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
-    if (showNewSidebar) {
+    const showAlignSidebar = getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true';
+    if (showNewSidebar && showAlignSidebar) {
       setCurrentPageKey('align');
       onClickMenuButton();
     } else {
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 6c25670ec6..58595146bd 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -99,19 +99,14 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     });
   };
 
-  const addUnit = (subsectionId: string, sectionId?: string, onSettled?: () => void) => {
+  const addUnit = (subsectionId: string, sectionId?: string) => {
     handleAddAndOpenUnit.mutate({
       type: ContainerType.Vertical,
       parentLocator: subsectionId,
       displayName: COURSE_BLOCK_NAMES.vertical.name,
     }, {
       onSettled: () => {
-        // istanbul ignore next
-        if (onSettled) {
-          onSettled();
-        } else {
-          queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionId) });
-        }
+        queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionId) });
       },
     });
   };
@@ -164,15 +159,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     lastEditableSubsection,
   ]);
 
-  const disabled = useMemo(() => (
-    handleAddSection.isPending
-    || handleAddSubsection.isPending
-    || handleAddAndOpenUnit.isPending
-  ), [
-    handleAddSection,
-    handleAddSubsection,
-    handleAddAndOpenUnit,
-  ]);
+  const disabled = handleAddSection.isPending || handleAddSubsection.isPending || handleAddAndOpenUnit.isPending;
 
   return (
     <Button
diff --git a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
index 925431cd6a..7eb1c21a22 100644
--- a/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
+++ b/src/course-outline/outline-sidebar/LibraryReferenceCard.tsx
@@ -200,7 +200,7 @@ export const LibraryReferenceCard = ({ itemId }: Props) => {
       upstreamBlockId: syncModalData.upstreamInfo.upstreamRef,
       upstreamBlockVersionSynced: syncModalData.upstreamInfo.versionSynced,
       isReadyToSyncIndividually: syncModalData.upstreamInfo.isReadyToSyncIndividually,
-      isContainer: syncModalData.category === 'vertical' || syncModalData.category === 'sequential' || syncModalData.category === 'chapter',
+      isContainer: ['vertical', 'sequential', 'chapter'].includes(syncModalData.category),
       blockType: normalizeContainerType(syncModalData.category),
     };
   }, [syncModalData]);
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index 3c3fdc123f..acf10b88f1 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -3,7 +3,6 @@ import { ContentTagsDrawer } from '@src/content-tags-drawer';
 import { useContentData } from '@src/content-tags-drawer/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { SidebarTitle } from '@src/generic/sidebar';
-import { useMemo } from 'react';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 export const OutlineAlignSidebar = () => {
@@ -14,11 +13,7 @@ export const OutlineAlignSidebar = () => {
   } = useCourseAuthoringContext();
   const { selectedContainerState, clearSelection } = useOutlineSidebarContext();
 
-  const sidebarContentId = useMemo(() => currentSelection?.currentId || selectedContainerState?.currentId || courseId, [
-    currentSelection,
-    selectedContainerState,
-    courseId,
-  ]);
+  const sidebarContentId = currentSelection?.currentId || selectedContainerState?.currentId || courseId;
 
   const { data: contentData } = useContentData(sidebarContentId);
 
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index c094eddd21..e7e75bcd5a 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -14,7 +14,7 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { useSelector } from 'react-redux';
 import { getSectionsList } from '@src/course-outline/data/selectors';
-import { findLastIndex } from 'lodash';
+import { findLast, findLastIndex } from 'lodash';
 import { ContainerType } from '@src/generic/key-utils';
 import { isOutlineNewDesignEnabled } from '../utils';
 
@@ -41,7 +41,7 @@ interface OutlineSidebarContextData {
   /** Stores last section that allows adding subsections inside it. */
   lastEditableSection?: XBlock;
   /** Stores last subsection that allows adding units inside it and its parent sectionId */
-  lastEditableSubsection?: { data: XBlock, sectionId?: string };
+  lastEditableSubsection?: { data?: XBlock, sectionId?: string };
   /** XBlock data of selectedContainerState.currentId */
   currentItemData?: XBlock;
 }
@@ -49,8 +49,7 @@ interface OutlineSidebarContextData {
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
 
 const getLastEditableItem = (blockList: Array<XBlock>) => {
-  const lastIndex = findLastIndex(blockList, (item) => item.actions.childAddable);
-  return blockList[lastIndex];
+  return findLast(blockList, (item) => item.actions.childAddable);
 };
 
 const getLastEditableSubsection = (

From 081a65295fb0e91cdb077c1653c0ea0765463293 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 15:33:38 +0530
Subject: [PATCH 46/60] fix: outline sidebar page provider env variable check

---
 src/course-outline/CourseOutline.tsx                 |  1 +
 .../outline-sidebar/OutlineSidebarContext.tsx        |  9 ++++++---
 .../outline-sidebar/OutlineSidebarPagesContext.tsx   | 12 +++++-------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 6708c5d6d7..cbac323405 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -64,6 +64,7 @@ import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { StatusBar } from './status-bar/StatusBar';
 import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 import { isOutlineNewDesignEnabled } from './utils';
+import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 
 const CourseOutline = () => {
   const intl = useIntl();
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index e7e75bcd5a..1750497b6d 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -17,6 +17,7 @@ import { getSectionsList } from '@src/course-outline/data/selectors';
 import { findLast, findLastIndex } from 'lodash';
 import { ContainerType } from '@src/generic/key-utils';
 import { isOutlineNewDesignEnabled } from '../utils';
+import { OutlineSidebarPagesProvider } from './OutlineSidebarPagesContext';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlow = {
@@ -216,9 +217,11 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   );
 
   return (
-    <OutlineSidebarContext.Provider value={context}>
-      {children}
-    </OutlineSidebarContext.Provider>
+    <OutlineSidebarPagesProvider>
+      <OutlineSidebarContext.Provider value={context}>
+        {children}
+      </OutlineSidebarContext.Provider>
+    </OutlineSidebarPagesProvider>
   );
 };
 
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
index e3fe73e578..2383040604 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
@@ -19,7 +19,7 @@ export type OutlineSidebarPages = {
   align?: SidebarPage;
 };
 
-const getOutlineSidebarPages = () => ({
+export const getOutlineSidebarPages = () => ({
   info: {
     component: InfoSidebar,
     icon: Info,
@@ -55,23 +55,21 @@ const getOutlineSidebarPages = () => ({
  * export function CourseOutlineSidebarWrapper(
  *   { component, pluginProps }: { component: React.ReactNode, pluginProps: CourseOutlineAspectsPageProps },
  * ) {
- *  const sidebarPages = useOutlineSidebarPagesContext();
  *
  *  const AnalyticsPage = React.useCallback(() => <CourseOutlineAspectsPage {...pluginProps} />, [pluginProps]);
  *
- *  const overridedPages = useMemo(() => ({
- *    ...sidebarPages,
+ *  const additionalPages = useMemo(() => ({
  *    analytics: {
  *      component: AnalyticsPage,
  *      icon: AutoGraph,
  *      title: messages.analyticsLabel,
  *    },
- *  }), [sidebarPages, AnalyticsPage]);
+ *  }), [AnalyticsPage]);
  *
  *  return (
- *    <OutlineSidebarPagesContext.Provider value={overridedPages}>
+ *    <OutlineSidebarPagesProvider pages={additionalPages}>
  *      {component}
- *    </OutlineSidebarPagesContext.Provider>
+ *    </OutlineSidebarPagesProvider>
  *  );
  *}
  */

From 588c68dea6bc627b954a045f96d300ade7baca39 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 15:39:16 +0530
Subject: [PATCH 47/60] fix: lint issues

---
 src/course-outline/CourseOutline.tsx                          | 2 +-
 src/course-outline/outline-sidebar/OutlineSidebarContext.tsx  | 4 +---
 .../outline-sidebar/OutlineSidebarPagesContext.tsx            | 2 ++
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index cbac323405..7c7209b488 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -37,6 +37,7 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
 import { ContainerType } from '@src/generic/key-utils';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 import {
   getProctoredExamsFlag,
   getTimedExamsFlag,
@@ -64,7 +65,6 @@ import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { StatusBar } from './status-bar/StatusBar';
 import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 import { isOutlineNewDesignEnabled } from './utils';
-import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 
 const CourseOutline = () => {
   const intl = useIntl();
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index 1750497b6d..ffa85840e8 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -49,9 +49,7 @@ interface OutlineSidebarContextData {
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
 
-const getLastEditableItem = (blockList: Array<XBlock>) => {
-  return findLast(blockList, (item) => item.actions.childAddable);
-};
+const getLastEditableItem = (blockList: Array<XBlock>) => findLast(blockList, (item) => item.actions.childAddable);
 
 const getLastEditableSubsection = (
   blockList: Array<XBlock>,
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
index 2383040604..0801be3a68 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
@@ -80,6 +80,8 @@ type OutlineSidebarPagesProviderProps = {
 };
 
 export const OutlineSidebarPagesProvider = ({ children }: OutlineSidebarPagesProviderProps) => {
+  // align page is sometimes not added when getOutlineSidebarPages() is called at the top level.
+  // So if we call it inside the hook, getConfig has updated values and align page is added.
   const sidebarPages = useMemo(getOutlineSidebarPages, []);
 
   return (

From 11afd977359082c0688a37d56160e3e0702abdfa Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 17:52:35 +0530
Subject: [PATCH 48/60] fix: tests

---
 src/course-outline/OutlineAddChildButtons.test.tsx |  8 +++++---
 .../subsection-card/SubsectionCard.test.tsx        | 14 +++++---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/course-outline/OutlineAddChildButtons.test.tsx b/src/course-outline/OutlineAddChildButtons.test.tsx
index 02c658b8b6..2b0ff929f7 100644
--- a/src/course-outline/OutlineAddChildButtons.test.tsx
+++ b/src/course-outline/OutlineAddChildButtons.test.tsx
@@ -7,9 +7,11 @@ import {
 import { OutlineFlow, OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import OutlineAddChildButtons from './OutlineAddChildButtons';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn().mockReturnValue({ librariesV2Enabled: true }),
+jest.mock('@src/studio-home/data/selectors', () => ({
+  ...jest.requireActual('@src/studio-home/data/selectors'),
+  getStudioHomeData: () => ({
+    librariesV2Enabled: true,
+  }),
 }));
 
 const handleAddSection = { mutateAsync: jest.fn() };
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 844a7d4f0d..431ca77453 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -37,9 +37,9 @@ jest.mock('@src/CourseAuthoringContext', () => ({
   }),
 }));
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: () => ({
+jest.mock('@src/studio-home/data/selectors', () => ({
+  ...jest.requireActual('@src/studio-home/data/selectors'),
+  getStudioHomeData: () => ({
     librariesV2Enabled: true,
   }),
 }));
@@ -82,9 +82,7 @@ const subsection: XBlock = {
   isHeaderVisible: true,
   releasedToStudents: true,
   childInfo: {
-    children: [{
-      id: unit.id,
-    }],
+    children: [unit],
   } as any, // 'as any' because we are omitting a lot of fields from 'childInfo'
   upstreamInfo: {
     readyToSync: true,
@@ -106,9 +104,7 @@ const section: XBlock = {
   hasChanges: false,
   highlights: ['highlight 1', 'highlight 2'],
   childInfo: {
-    children: [{
-      id: subsection.id,
-    }],
+    children: [subsection],
   } as any, // 'as any' because we are omitting a lot of fields from 'childInfo'
   actions: {
     draggable: true,

From 11358a2f9fae39e8635cb9d62f1b925c048a8f83 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 17:57:36 +0530
Subject: [PATCH 49/60] fix: cycle import

---
 src/CourseAuthoringRoutes.tsx                            | 1 +
 src/course-outline/CourseOutline.tsx                     | 1 -
 .../outline-sidebar/OutlineSidebar.test.tsx              | 1 +
 .../outline-sidebar/OutlineSidebarContext.tsx            | 9 +++------
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/CourseAuthoringRoutes.tsx b/src/CourseAuthoringRoutes.tsx
index 3a330377bb..3645e3d4be 100644
--- a/src/CourseAuthoringRoutes.tsx
+++ b/src/CourseAuthoringRoutes.tsx
@@ -3,6 +3,7 @@ import {
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { PageWrap } from '@edx/frontend-platform/react';
+import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 import { Textbooks } from './textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 7c7209b488..6708c5d6d7 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -37,7 +37,6 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
 import { ContainerType } from '@src/generic/key-utils';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
-import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 import {
   getProctoredExamsFlag,
   getTimedExamsFlag,
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
index c3d18ef982..c19f6a63f8 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
@@ -9,6 +9,7 @@ import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { OutlineSidebarProvider } from './OutlineSidebarContext';
 import { OutlineSidebarPagesProvider } from './OutlineSidebarPagesContext';
 import OutlineSidebar from './OutlineSidebar';
+import { OutlineSidebarPagesProvider } from './OutlineSidebarPagesContext';
 
 // Mock the useCourseDetails hook
 jest.mock('@src/course-outline/data/apiHooks', () => ({
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index ffa85840e8..993e2e012c 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -17,7 +17,6 @@ import { getSectionsList } from '@src/course-outline/data/selectors';
 import { findLast, findLastIndex } from 'lodash';
 import { ContainerType } from '@src/generic/key-utils';
 import { isOutlineNewDesignEnabled } from '../utils';
-import { OutlineSidebarPagesProvider } from './OutlineSidebarPagesContext';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add' | 'align';
 export type OutlineFlow = {
@@ -215,11 +214,9 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   );
 
   return (
-    <OutlineSidebarPagesProvider>
-      <OutlineSidebarContext.Provider value={context}>
-        {children}
-      </OutlineSidebarContext.Provider>
-    </OutlineSidebarPagesProvider>
+    <OutlineSidebarContext.Provider value={context}>
+      {children}
+    </OutlineSidebarContext.Provider>
   );
 };
 

From 39428b12f997f1bd276addf8faf2ce330280338a Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 4 Feb 2026 19:31:06 +0530
Subject: [PATCH 50/60] fix: tests

---
 src/course-outline/CourseOutline.test.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index 5dde5e783e..c572c1eafc 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -18,7 +18,8 @@ import {
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import { userEvent } from '@testing-library/user-event';
-import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { OutlineSidebarProvider } from './outline-sidebar/OutlineSidebarContext';
+import { OutlineSidebarPagesProvider } from './outline-sidebar/OutlineSidebarPagesContext';
 import {
   getCourseBestPracticesApiUrl,
   getCourseLaunchApiUrl,

From 08b3f41aba341652870e93e29bb87d4747f5994c Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 5 Feb 2026 14:53:29 +0530
Subject: [PATCH 51/60] refactor: remove pages props from page context

---
 .../outline-sidebar/OutlineSidebarPagesContext.tsx    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
index 0801be3a68..f45b60f51e 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
@@ -57,20 +57,21 @@ export const getOutlineSidebarPages = () => ({
  * ) {
  *
  *  const AnalyticsPage = React.useCallback(() => <CourseOutlineAspectsPage {...pluginProps} />, [pluginProps]);
+ *  const sidebarPages = useOutlineSidebarPagesContext();
  *
- *  const additionalPages = useMemo(() => ({
+ *  const overridedPages = useMemo(() => ({
+ *    ...sidebarPages,
  *    analytics: {
  *      component: AnalyticsPage,
  *      icon: AutoGraph,
  *      title: messages.analyticsLabel,
  *    },
- *  }), [AnalyticsPage]);
+ *  }), [sidebarPages, AnalyticsPage]);
  *
  *  return (
- *    <OutlineSidebarPagesProvider pages={additionalPages}>
+ *    <OutlineSidebarPagesContext.Provider value={overridedPages}>
  *      {component}
- *    </OutlineSidebarPagesProvider>
- *  );
+ *    </OutlineSidebarPagesContext.Provider>
  *}
  */
 export const OutlineSidebarPagesContext = createContext<OutlineSidebarPages | undefined>(undefined);

From 49fae1c8440a015be9dec33872549880ddbc9fce Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 6 Feb 2026 12:15:22 +0530
Subject: [PATCH 52/60] fix: rebase conflicts

---
 src/CourseAuthoringRoutes.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/CourseAuthoringRoutes.tsx b/src/CourseAuthoringRoutes.tsx
index 3645e3d4be..3a330377bb 100644
--- a/src/CourseAuthoringRoutes.tsx
+++ b/src/CourseAuthoringRoutes.tsx
@@ -3,7 +3,6 @@ import {
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { PageWrap } from '@edx/frontend-platform/react';
-import { OutlineSidebarPagesProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarPagesContext';
 import { Textbooks } from './textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';

From f8a6255801e97ca2fe9a6625084e7ce076c50b4b Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 6 Feb 2026 13:04:00 +0530
Subject: [PATCH 53/60] refactor: centralize course outline data invalidation

---
 src/course-outline/CourseOutline.test.tsx     |  1 -
 src/course-outline/card-header/CardHeader.tsx | 14 +----
 src/course-outline/data/api.ts                | 24 ++++----
 src/course-outline/data/apiHooks.ts           | 60 +++++++++++++++----
 src/course-outline/hooks.jsx                  | 43 +++++--------
 .../outline-sidebar/AddSidebar.tsx            | 18 +-----
 .../outline-sidebar/OutlineSidebar.test.tsx   |  1 -
 .../publish-modal/PublishModal.tsx            | 12 ++--
 8 files changed, 90 insertions(+), 83 deletions(-)

diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index c572c1eafc..db0c5bb547 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -48,7 +48,6 @@ import {
 } from './__mocks__';
 import { COURSE_BLOCK_NAMES, VIDEO_SHARING_OPTIONS } from './constants';
 import CourseOutline from './CourseOutline';
-import { OutlineSidebarPagesProvider } from './outline-sidebar/OutlineSidebarPagesContext';
 
 import messages from './messages';
 import headerMessages from './header-navigations/messages';
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 42ce79253f..0d7027237f 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -25,9 +25,8 @@ import { ContentTagsDrawerSheet } from '@src/content-tags-drawer';
 import TagCount from '@src/generic/tag-count';
 import { useEscapeClick } from '@src/hooks';
 import { XBlockActions } from '@src/data/types';
-import { courseOutlineQueryKeys, useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
+import { useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { useQueryClient } from '@tanstack/react-query';
 import { ITEM_BADGE_STATUS } from '../constants';
 import { scrollToElement } from '../utils';
 import CardStatus from './CardStatus';
@@ -107,7 +106,6 @@ const CardHeader = ({
   const cardHeaderRef = useRef(null);
   const [isLegacyManageTagsDrawerOpen, openLegacyTagsDrawer, closeLegacyTagsDrawer] = useToggle(false);
   const { setCurrentPageKey } = useOutlineSidebarContext();
-  const queryClient = useQueryClient();
 
   const openManageTagsDrawer = useCallback(() => {
     const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
@@ -173,15 +171,9 @@ const CardHeader = ({
       editMutation.mutate({
         itemId: cardId,
         displayName: titleValue,
+        subsectionId: currentSelection?.subsectionId,
+        sectionId: currentSelection?.sectionId,
       }, {
-        onSuccess: async () => {
-          await queryClient.invalidateQueries({
-            queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.sectionId),
-          });
-          await queryClient.invalidateQueries({
-            queryKey: courseOutlineQueryKeys.courseItemId(currentSelection?.subsectionId),
-          });
-        },
         onSettled: () => closeForm(),
       });
     } else {
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index 8dc5489ebf..b543f56a4a 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -376,6 +376,18 @@ export async function duplicateCourseItem(itemId: string, parentId: string): Pro
   return data;
 }
 
+export type CreateCourseXBlockType = {
+  type: string,
+  /** The category of the XBlock. Defaults to the type if not provided. */
+  category?: string,
+  parentLocator: string,
+  displayName?: string,
+  boilerplate?: string,
+  stagedContent?: string,
+  /** component key from library if being imported. */
+  libraryContentKey?: string,
+};
+
 /**
  * Creates a new course XBlock. Can be used to create any type of block
  * and also import a content from library.
@@ -388,17 +400,7 @@ export async function createCourseXblock({
   boilerplate,
   stagedContent,
   libraryContentKey,
-}: {
-  type: string,
-  /** The category of the XBlock. Defaults to the type if not provided. */
-  category?: string,
-  parentLocator: string,
-  displayName?: string,
-  boilerplate?: string,
-  stagedContent?: string,
-  /** component key from library if being imported. */
-  libraryContentKey?: string,
-}) {
+}: CreateCourseXBlockType) {
   const body = {
     type,
     boilerplate,
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index aa5767d427..f323f6a8be 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -1,11 +1,19 @@
 import { containerComparisonQueryKeys } from '@src/container-comparison/data/apiHooks';
 import type { XBlock } from '@src/data/types';
 import { getCourseKey } from '@src/generic/key-utils';
+import { handleResponseErrors } from '@src/generic/saving-error-alert';
 import {
+  QueryClient,
   skipToken, useMutation, useQuery, useQueryClient,
 } from '@tanstack/react-query';
 import {
-  createCourseXblock, deleteCourseItem, editItemDisplayName, getCourseDetails, getCourseItem, publishCourseItem,
+  createCourseXblock,
+  type CreateCourseXBlockType,
+  deleteCourseItem,
+  editItemDisplayName,
+  getCourseDetails,
+  getCourseItem,
+  publishCourseItem,
 } from './api';
 
 export const courseOutlineQueryKeys = {
@@ -33,6 +41,27 @@ export const courseOutlineQueryKeys = {
   ],
 };
 
+type ParentIds = {
+  /** This id will be used to invalidate data of parent subsection */
+  subsectionId?: string;
+  /** This id will be used to invalidate data of parent section */
+  sectionId?: string;
+};
+
+/**
+ * Invalidate parent Subsection and Section data.
+ */
+const invalidateParentQueries = async (queryClient: QueryClient, variables: ParentIds) => {
+  if (variables.subsectionId) {
+    await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.subsectionId) });
+  }
+  if (variables.sectionId) {
+    await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.sectionId) });
+  }
+};
+
+type CreateCourseXBlockMutationProps = CreateCourseXBlockType & ParentIds;
+
 /**
  * Hook to create an XBLOCK in a course .
  * The `locator` is the ID of the parent block where this new XBLOCK should be created.
@@ -43,13 +72,14 @@ export const useCreateCourseBlock = (
 ) => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: createCourseXblock,
+    mutationFn: (variables: CreateCourseXBlockMutationProps) => createCourseXblock(variables),
     onSettled: async (data: { locator: string; }, _err, variables) => {
       await callback?.(data.locator, variables.parentLocator);
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.parentLocator) });
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(data.locator)),
       });
+      invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
     },
   });
 };
@@ -72,11 +102,15 @@ export const useCourseDetails = (courseId?: string, enabled: boolean = true) =>
 export const useUpdateCourseBlockName = (courseId: string) => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: editItemDisplayName,
+    mutationFn: (variables:{
+      itemId: string;
+      displayName: string;
+    } & ParentIds) => editItemDisplayName({ itemId: variables.itemId, displayName: variables.displayName }),
     onSuccess: async (_data, variables) => {
       await queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
       await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
       await queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
+      await invalidateParentQueries(queryClient, variables);
     },
   });
 };
@@ -84,10 +118,13 @@ export const useUpdateCourseBlockName = (courseId: string) => {
 export const usePublishCourseItem = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: publishCourseItem,
-    onSettled: async (_data, _err, itemId) => {
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(itemId) });
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(itemId)) });
+    mutationFn: (variables:{
+      itemId: string;
+    } & ParentIds) => publishCourseItem(variables.itemId),
+    onSettled: (_data, _err, variables) => {
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(variables.itemId) });
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
+      invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
     },
   });
 };
@@ -95,9 +132,12 @@ export const usePublishCourseItem = () => {
 export const useDeleteCourseItem = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: deleteCourseItem,
-    onSettled: async (_data, _err, itemId) => {
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(itemId)) });
+    mutationFn: (variables:{
+      itemId: string;
+    } & ParentIds) => deleteCourseItem(variables.itemId),
+    onSettled: (_data, _err, variables) => {
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
+      invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
     },
   });
 };
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index fb4716cd51..c2eeb29d10 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -221,7 +221,7 @@ const useCourseOutline = ({ courseId }) => {
     switch (category) {
       case COURSE_BLOCK_NAMES.chapter.id:
         await deleteMutation.mutateAsync(
-          currentSelection.currentId,
+          { itemId: currentSelection.currentId },
           {
             onSettled: () => dispatch(deleteSection({ itemId: currentSelection.currentId })),
           },
@@ -229,39 +229,28 @@ const useCourseOutline = ({ courseId }) => {
         break;
       case COURSE_BLOCK_NAMES.sequential.id:
         await deleteMutation.mutateAsync(
-          currentSelection.currentId,
+          { itemId: currentSelection.currentId, sectionId: currentSelection.sectionId },
           {
-            onSettled: () => {
-              dispatch(deleteSubsection({
-                itemId: currentSelection.currentId,
-                sectionId: currentSelection.sectionId,
-              }));
-              // invalidate parent section data
-              queryClient.invalidateQueries({
-                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
-              });
-            },
+            onSettled: () => dispatch(deleteSubsection({
+              itemId: currentSelection.currentId,
+              sectionId: currentSelection.sectionId,
+            })),
           },
         );
         break;
       case COURSE_BLOCK_NAMES.vertical.id:
         await deleteMutation.mutateAsync(
-          currentSelection.currentId,
           {
-            onSettled: () => {
-              dispatch(deleteUnit({
-                itemId: currentSelection.currentId,
-                subsectionId: currentSelection.subsectionId,
-                sectionId: currentSelection.sectionId,
-              }));
-              // invalidate parent subsection and section data
-              queryClient.invalidateQueries({
-                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.subsectionId),
-              });
-              queryClient.invalidateQueries({
-                queryKey: courseOutlineQueryKeys.courseItemId(currentSelection.sectionId),
-              });
-            },
+            itemId: currentSelection.currentId,
+            subsectionId: currentSelection.subsectionId,
+            sectionId: currentSelection.sectionId,
+          },
+          {
+            onSettled: () => dispatch(deleteUnit({
+              itemId: currentSelection.currentId,
+              subsectionId: currentSelection.subsectionId,
+              sectionId: currentSelection.sectionId,
+            })),
           },
         );
         break;
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
index 58595146bd..a84cc17d14 100644
--- a/src/course-outline/outline-sidebar/AddSidebar.tsx
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -21,8 +21,7 @@ import { ComponentPicker } from '@src/library-authoring';
 import { MultiLibraryProvider } from '@src/library-authoring/common/context/MultiLibraryContext';
 import { COURSE_BLOCK_NAMES } from '@src/constants';
 import AlertMessage from '@src/generic/alert-message';
-import { useQueryClient } from '@tanstack/react-query';
-import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import messages from './messages';
 
@@ -61,7 +60,6 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
     lastEditableSubsection,
     openContainerInfoSidebar,
   } = useOutlineSidebarContext();
-  const queryClient = useQueryClient();
   let sectionParentId = lastEditableSection?.id;
   let subsectionParentId = lastEditableSubsection?.data?.id;
 
@@ -104,10 +102,7 @@ const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
       type: ContainerType.Vertical,
       parentLocator: subsectionId,
       displayName: COURSE_BLOCK_NAMES.vertical.name,
-    }, {
-      onSettled: () => {
-        queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(sectionId) });
-      },
+      sectionId,
     });
   };
 
@@ -237,7 +232,6 @@ const ShowLibraryContent = () => {
     selectedContainerState,
     currentItemData,
   } = useOutlineSidebarContext();
-  const queryClient = useQueryClient();
 
   let sectionParentId = lastEditableSection?.id;
   let subsectionParentId = lastEditableSubsection?.data?.id;
@@ -274,13 +268,7 @@ const ShowLibraryContent = () => {
             category: ContainerType.Vertical,
             parentLocator: subsectionParentId,
             libraryContentKey: usageKey,
-          }, {
-            onSettled: () => {
-              // istanbul ignore next
-              queryClient.invalidateQueries({
-                queryKey: courseOutlineQueryKeys.courseItemId(sectionParentId),
-              });
-            },
+            sectionId: sectionParentId,
           });
         }
         break;
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
index c19f6a63f8..c3d18ef982 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
@@ -9,7 +9,6 @@ import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { OutlineSidebarProvider } from './OutlineSidebarContext';
 import { OutlineSidebarPagesProvider } from './OutlineSidebarPagesContext';
 import OutlineSidebar from './OutlineSidebar';
-import { OutlineSidebarPagesProvider } from './OutlineSidebarPagesContext';
 
 // Mock the useCourseDetails hook
 jest.mock('@src/course-outline/data/apiHooks', () => ({
diff --git a/src/course-outline/publish-modal/PublishModal.tsx b/src/course-outline/publish-modal/PublishModal.tsx
index dd91e3dbc5..d17c1d219e 100644
--- a/src/course-outline/publish-modal/PublishModal.tsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -39,19 +39,17 @@ const PublishModal = () => {
 
   const onPublishSubmit = async () => {
     if (id) {
-      await publishMutation.mutateAsync(id, {
+      await publishMutation.mutateAsync({
+        itemId: id,
+        subsectionId: currentPublishModalData?.subsectionId,
+        sectionId: currentPublishModalData?.sectionId,
+      }, {
         onSettled: () => {
           closePublishModal();
           // Update query client to refresh the data of all children blocks
           childrenIds.forEach((blockId) => {
             queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
           });
-          queryClient.invalidateQueries({
-            queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.sectionId),
-          });
-          queryClient.invalidateQueries({
-            queryKey: courseOutlineQueryKeys.courseItemId(currentPublishModalData?.subsectionId),
-          });
         },
       });
     }

From d5d18e1dbaf7cde7a0e22f4f299f4417228f6fa8 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 6 Feb 2026 15:18:42 +0530
Subject: [PATCH 54/60] refactor: fix accessibility

---
 src/CourseAuthoringContext.tsx         | 13 +++++--------
 src/generic/sidebar/SidebarSection.tsx |  4 ++--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index bdf3a68b3f..62567ed5d2 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -115,10 +115,9 @@ export const CourseAuthoringProvider = ({
     }
   };
 
-  const addSectionToCourse = async (locator: string) => {
+  const addSectionToCourse = /* istanbul ignore next */ async (locator: string) => {
     try {
       const data = await getCourseItem(locator);
-      // instanbul ignore next
       // Page should scroll to newly added section.
       data.shouldScroll = true;
       dispatch(addSection(data));
@@ -127,24 +126,22 @@ export const CourseAuthoringProvider = ({
     }
   };
 
-  const addSubsectionToCourse = async (locator: string, parentLocator: string) => {
+  const addSubsectionToCourse = /* istanbul ignore next */ async (locator: string, parentLocator: string) => {
     try {
       const data = await getCourseItem(locator);
-      data.shouldScroll = true;
       // Page should scroll to newly added subsection.
+      data.shouldScroll = true;
       dispatch(addSubsection({ parentLocator, data }));
     } catch {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
     }
   };
 
-  const addUnitToCourse = async (locator: string, parentLocator: string) => {
+  const addUnitToCourse = /* istanbul ignore next */ async (locator: string, parentLocator: string) => {
     try {
       const data = await getCourseItem(locator);
-      // istanbul ignore next
-      data.shouldScroll = true;
-      // istanbul ignore next
       // Page should scroll to newly added subsection.
+      data.shouldScroll = true;
       dispatch(addUnit({ parentLocator, data }));
     } catch {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
diff --git a/src/generic/sidebar/SidebarSection.tsx b/src/generic/sidebar/SidebarSection.tsx
index d37b8a9253..1e7c1833b1 100644
--- a/src/generic/sidebar/SidebarSection.tsx
+++ b/src/generic/sidebar/SidebarSection.tsx
@@ -48,9 +48,9 @@ export const SidebarSection = ({
     <Stack direction="horizontal" gap={2}>
       {icon && <Icon src={icon} className="mr-1 text-primary" size="sm" />}
       {title && (
-      <h5 className="font-weight-bold text-primary mb-0 mt-1">
+      <h3 className="h5 font-weight-bold text-primary mb-0 mt-1">
         {title}
-      </h5>
+      </h3>
       )}
       {actions && (
         <Dropdown className="ml-auto">

From ce7cb79a8654c21f13aad29b4e0a0a3d55210baa Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 6 Feb 2026 15:32:35 +0530
Subject: [PATCH 55/60] refactor: move sidebar info section related files in a
 folder

---
 .../outline-sidebar/OutlineSidebarPagesContext.tsx            | 2 +-
 .../outline-sidebar/{ => info-sidebar}/CourseInfoSidebar.tsx  | 4 ++--
 .../outline-sidebar/{ => info-sidebar}/InfoSidebar.test.tsx   | 0
 .../outline-sidebar/{ => info-sidebar}/InfoSidebar.tsx        | 2 +-
 .../outline-sidebar/{ => info-sidebar}/PublishButon.tsx       | 2 +-
 .../outline-sidebar/{ => info-sidebar}/SectionInfoSidebar.tsx | 4 ++--
 .../{ => info-sidebar}/SubsectionInfoSidebar.tsx              | 4 ++--
 .../outline-sidebar/{ => info-sidebar}/UnitInfoSidebar.tsx    | 4 ++--
 .../outline-sidebar/{ => info-sidebar}/sharedComponents.tsx   | 2 +-
 src/course-outline/section-card/SectionCard.test.tsx          | 2 +-
 src/course-outline/subsection-card/SubsectionCard.test.tsx    | 2 +-
 src/course-outline/unit-card/UnitCard.test.tsx                | 2 +-
 12 files changed, 15 insertions(+), 15 deletions(-)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/CourseInfoSidebar.tsx (94%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/InfoSidebar.test.tsx (100%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/InfoSidebar.tsx (93%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/PublishButon.tsx (93%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/SectionInfoSidebar.tsx (94%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/SubsectionInfoSidebar.tsx (94%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/UnitInfoSidebar.tsx (96%)
 rename src/course-outline/outline-sidebar/{ => info-sidebar}/sharedComponents.tsx (98%)

diff --git a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
index f45b60f51e..97eebd89b9 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarPagesContext.tsx
@@ -9,7 +9,7 @@ import type { SidebarPage } from '@src/generic/sidebar';
 import { AddSidebar } from './AddSidebar';
 import { OutlineAlignSidebar } from './OutlineAlignSidebar';
 import OutlineHelpSidebar from './OutlineHelpSidebar';
-import { InfoSidebar } from './InfoSidebar';
+import { InfoSidebar } from './info-sidebar/InfoSidebar';
 import messages from './messages';
 
 export type OutlineSidebarPages = {
diff --git a/src/course-outline/outline-sidebar/CourseInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
similarity index 94%
rename from src/course-outline/outline-sidebar/CourseInfoSidebar.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
index ee42c29a9b..e02afd49c3 100644
--- a/src/course-outline/outline-sidebar/CourseInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
@@ -8,9 +8,9 @@ import { useGetBlockTypes } from '@src/search-manager';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
-import { useCourseDetails } from '../data/apiHooks';
 
-import messages from './messages';
+import { useCourseDetails } from '@src/course-outline/data/apiHooks';
+import messages from '../messages';
 
 export const CourseInfoSidebar = () => {
   const intl = useIntl();
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
similarity index 100%
rename from src/course-outline/outline-sidebar/InfoSidebar.test.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
diff --git a/src/course-outline/outline-sidebar/InfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.tsx
similarity index 93%
rename from src/course-outline/outline-sidebar/InfoSidebar.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.tsx
index 4008e4b1f4..faf8f1193a 100644
--- a/src/course-outline/outline-sidebar/InfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.tsx
@@ -1,5 +1,5 @@
 import { ContainerType, getBlockType } from '@src/generic/key-utils';
-import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import { useOutlineSidebarContext } from '../OutlineSidebarContext';
 import { CourseInfoSidebar } from './CourseInfoSidebar';
 import { SectionSidebar } from './SectionInfoSidebar';
 import { SubsectionSidebar } from './SubsectionInfoSidebar';
diff --git a/src/course-outline/outline-sidebar/PublishButon.tsx b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
similarity index 93%
rename from src/course-outline/outline-sidebar/PublishButon.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
index 0288192c94..c932a577d1 100644
--- a/src/course-outline/outline-sidebar/PublishButon.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
-import messages from './messages';
+import messages from '../messages';
 
 interface Props {
   onClick: () => void;
diff --git a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
similarity index 94%
rename from src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
index 331e9224c1..bee6713d8f 100644
--- a/src/course-outline/outline-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
@@ -10,8 +10,8 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
-import messages from './messages';
+import { InfoSection } from './sharedComponents';
+import messages from '../messages';
 import { PublishButon } from './PublishButon';
 
 interface Props {
diff --git a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
similarity index 94%
rename from src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
index 945c9ab4ee..859e435257 100644
--- a/src/course-outline/outline-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
@@ -10,9 +10,9 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import { InfoSection } from '@src/course-outline/outline-sidebar/sharedComponents';
+import { InfoSection } from './sharedComponents';
 import { PublishButon } from './PublishButon';
-import messages from './messages';
+import messages from '../messages';
 
 interface Props {
   subsectionId: string;
diff --git a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
similarity index 96%
rename from src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
index 0b8b453c70..7a9cfd88bc 100644
--- a/src/course-outline/outline-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
@@ -17,9 +17,9 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import XBlockContainerIframe from '@src/course-unit/xblock-container-iframe';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 import { Link } from 'react-router-dom';
-import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import { useOutlineSidebarContext } from '../OutlineSidebarContext';
 import { PublishButon } from './PublishButon';
-import messages from './messages';
+import messages from '../messages';
 import { InfoSection } from './sharedComponents';
 
 interface Props {
diff --git a/src/course-outline/outline-sidebar/sharedComponents.tsx b/src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx
similarity index 98%
rename from src/course-outline/outline-sidebar/sharedComponents.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx
index cc204ddac5..d35417bcbb 100644
--- a/src/course-outline/outline-sidebar/sharedComponents.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx
@@ -8,7 +8,7 @@ import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-util
 import { normalizeContainerType } from '@src/generic/key-utils';
 import { SidebarContent, SidebarSection } from '@src/generic/sidebar';
 import { useGetBlockTypes } from '@src/search-manager';
-import messages from './messages';
+import messages from '../messages';
 
 interface Props {
   itemId: string;
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index ffe2859f9e..dc35405e86 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -6,9 +6,9 @@ import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
 import userEvent from '@testing-library/user-event';
 import { getXBlockApiUrl } from '@src/course-outline/data/api';
+import { CourseInfoSidebar } from '@src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar';
 import SectionCard from './SectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
-import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index 431ca77453..aa624d94e0 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -6,10 +6,10 @@ import {
 import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
 import userEvent from '@testing-library/user-event';
+import { CourseInfoSidebar } from '@src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar';
 import cardHeaderMessages from '../card-header/messages';
 import SubsectionCard from './SubsectionCard';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
-import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
 const containerKey = 'lct:org:lib:unit:1';
 const handleOnAddUnitFromLibrary = { mutateAsync: jest.fn(), isPending: false };
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
index ea4239796b..f820a8ba3b 100644
--- a/src/course-outline/unit-card/UnitCard.test.tsx
+++ b/src/course-outline/unit-card/UnitCard.test.tsx
@@ -6,10 +6,10 @@ import {
 import { XBlock } from '@src/data/types';
 import { Info } from '@openedx/paragon/icons';
 import userEvent from '@testing-library/user-event';
+import { CourseInfoSidebar } from '@src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar';
 import UnitCard from './UnitCard';
 import cardMessages from '../card-header/messages';
 import * as OutlineSidebarContext from '../outline-sidebar/OutlineSidebarContext';
-import { CourseInfoSidebar } from '../outline-sidebar/CourseInfoSidebar';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();

From 242c914afb4168a3f94dcc52dc62d67ea2a09c23 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 6 Feb 2026 15:36:46 +0530
Subject: [PATCH 56/60] chore: add comment

---
 src/course-outline/data/slice.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/course-outline/data/slice.ts b/src/course-outline/data/slice.ts
index ca0ac92fdd..9b23f65a01 100644
--- a/src/course-outline/data/slice.ts
+++ b/src/course-outline/data/slice.ts
@@ -170,9 +170,11 @@ const slice = createSlice({
         return section;
       });
     },
-    // istanbul ignore next
-    addUnit: (state: CourseOutlineState, { payload }) => {
-      // istanbul ignore next
+    // FIXME: This is a temporary measure to add unit using redux even while we are
+    // actively trying to get rid of it.
+    // To remove this and other add functions, we need to migrate course outline data
+    // to a react-query and perform optimistic updates to add/remove content.
+    addUnit: /* istanbul ignore next */ (state: CourseOutlineState, { payload }) => {
       state.sectionsList = state.sectionsList.map((section) => {
         section.childInfo.children = section.childInfo.children.map((subsection) => {
           if (subsection.id !== payload.parentLocator) {

From a6a3e0a2d6ad9a4f1177ab5d54f31f870f73829b Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 6 Feb 2026 15:48:09 +0530
Subject: [PATCH 57/60] fix: failing test

---
 .../outline-sidebar/info-sidebar/InfoSidebar.test.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
index 75de7fcbc8..a8a1d415b8 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
@@ -6,10 +6,10 @@ import userEvent from '@testing-library/user-event';
 import { InfoSidebar } from './InfoSidebar';
 
 let selectedContainerState: SelectionState | undefined;
-jest.mock('../outline-sidebar/OutlineSidebarContext', () => ({
-  ...jest.requireActual('../outline-sidebar/OutlineSidebarContext'),
+jest.mock('@src/course-outline/outline-sidebar/OutlineSidebarContext', () => ({
+  ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext'),
   useOutlineSidebarContext: () => ({
-    ...jest.requireActual('../outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
+    ...jest.requireActual('@src/course-outline/outline-sidebar/OutlineSidebarContext').useOutlineSidebarContext(),
     selectedContainerState,
   }),
 }));

From 12b25699188650b5b01877760a187031bcfa8871 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 9 Feb 2026 12:27:14 +0530
Subject: [PATCH 58/60] fix: xblock unit typing and unlink sync issue

---
 src/CourseAuthoringContext.tsx                |  4 +--
 src/course-outline/data/api.ts                |  7 +----
 src/course-outline/data/apiHooks.ts           |  4 +--
 src/course-outline/hooks.jsx                  |  2 +-
 .../publish-modal/PublishModal.tsx            | 30 +++++++++++--------
 src/course-outline/unit-card/UnitCard.tsx     |  6 ++--
 .../xblock-status/XBlockStatus.tsx            |  4 +--
 src/data/types.ts                             |  2 ++
 8 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index 62567ed5d2..776626bc03 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -12,13 +12,13 @@ import {
 import { useNavigate } from 'react-router';
 import { getOutlineIndexData } from '@src/course-outline/data/selectors';
 import { useToggleWithValue } from '@src/hooks';
-import { SelectionState, XBlock } from '@src/data/types';
+import { SelectionState, type UnitXBlock, type XBlock } from '@src/data/types';
 import { CourseDetailsData } from './data/api';
 import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { RequestStatus, RequestStatusType } from './data/constants';
 
 type ModalState = {
-  value: XBlock;
+  value: XBlock | UnitXBlock;
   subsectionId?: string;
   sectionId?: string;
 };
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index b543f56a4a..f162c55a8d 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -170,10 +170,8 @@ export async function restartIndexingOnCourse(reindexLink: string): Promise<obje
 
 /**
  * Get course Xblock
- * @param {string} itemId
- * @returns {Promise<XBlock>}
  */
-export async function getCourseItem(itemId: string): Promise<XBlock> {
+export async function getCourseItem<T = XBlock>(itemId: string): Promise<T> {
   const { data } = await getAuthenticatedHttpClient()
     .get(getXBlockApiUrl(itemId));
   return camelCaseObject(data);
@@ -362,9 +360,6 @@ export async function deleteCourseItem(itemId: string): Promise<object> {
 
 /**
  * Duplicate course section
- * @param {string} itemId
- * @param {string} parentId
- * @returns {Promise<XBlock>}
  */
 export async function duplicateCourseItem(itemId: string, parentId: string): Promise<XBlock> {
   const { data } = await getAuthenticatedHttpClient()
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index f323f6a8be..0b934e52c1 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -84,11 +84,11 @@ export const useCreateCourseBlock = (
   });
 };
 
-export const useCourseItemData = (itemId?: string, initialData?: XBlock, enabled: boolean = true) => (
+export const useCourseItemData = <T = XBlock>(itemId?: string, initialData?: T, enabled: boolean = true) => (
   useQuery({
     initialData,
     queryKey: courseOutlineQueryKeys.courseItemId(itemId),
-    queryFn: enabled && itemId ? () => getCourseItem(itemId!) : skipToken,
+    queryFn: enabled && itemId ? () => getCourseItem<T>(itemId!) : skipToken,
   })
 );
 
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index c2eeb29d10..4bc70ec752 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -174,7 +174,7 @@ const useCourseOutline = ({ courseId }) => {
         closeUnlinkModal();
         // istanbul ignore next
         // refresh child block data
-        currentUnlinkModalData.value.childInfo.children.forEach((block) => {
+        currentUnlinkModalData.value.childInfo?.children.forEach((block) => {
           queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(block.id) });
           block.childInfo?.children.forEach(({ id: blockId }) => {
             queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
diff --git a/src/course-outline/publish-modal/PublishModal.tsx b/src/course-outline/publish-modal/PublishModal.tsx
index d17c1d219e..7412824710 100644
--- a/src/course-outline/publish-modal/PublishModal.tsx
+++ b/src/course-outline/publish-modal/PublishModal.tsx
@@ -7,7 +7,7 @@ import {
 } from '@openedx/paragon';
 
 import { courseOutlineQueryKeys, usePublishCourseItem } from '@src/course-outline/data/apiHooks';
-import { XBlock } from '@src/data/types';
+import type { UnitXBlock, XBlock } from '@src/data/types';
 import LoadingButton from '@src/generic/loading-button';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useQueryClient } from '@tanstack/react-query';
@@ -18,19 +18,25 @@ const PublishModal = () => {
   const intl = useIntl();
   const { isPublishModalOpen, currentPublishModalData, closePublishModal } = useCourseAuthoringContext();
   const {
-    id, displayName, childInfo, category,
+    id, displayName, category,
   } = currentPublishModalData?.value || {};
   const categoryName = COURSE_BLOCK_NAMES[category || '']?.name.toLowerCase();
-  const children: XBlock[] = childInfo?.children || [];
+  const childInfo = (currentPublishModalData?.value && 'childInfo' in currentPublishModalData.value)
+    ? currentPublishModalData?.value.childInfo
+    : undefined;
+  const children: Array<XBlock | UnitXBlock> | undefined = childInfo?.children;
   const publishMutation = usePublishCourseItem();
   const queryClient = useQueryClient();
 
-  const childrenIds = useMemo(() => children.reduce((
+  const childrenIds = useMemo(() => children?.reduce((
     result: string[],
-    current: XBlock,
+    current: XBlock | UnitXBlock,
   ): string[] => {
-    const grandChildren = current.childInfo?.children.filter((child) => child.hasChanges) || [];
-    const temp = [...result, ...grandChildren.map((child) => child.id)];
+    let temp = [...result];
+    if ('childInfo' in current) {
+      const grandChildren = current.childInfo.children.filter((child) => child.hasChanges);
+      temp = [...temp, ...grandChildren.map((child) => child.id)];
+    }
     if (current.hasChanges) {
       temp.push(current.id);
     }
@@ -47,7 +53,7 @@ const PublishModal = () => {
         onSettled: () => {
           closePublishModal();
           // Update query client to refresh the data of all children blocks
-          childrenIds.forEach((blockId) => {
+          childrenIds?.forEach((blockId) => {
             queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(blockId) });
           });
         },
@@ -74,11 +80,11 @@ const PublishModal = () => {
         <p className="small">
           {intl.formatMessage(messages.description, { category: categoryName })}
         </p>
-        {children.filter(child => child.hasChanges).map((child) => {
-          let grandChildren = child.childInfo?.children || [];
-          grandChildren = grandChildren.filter(grandChild => grandChild.hasChanges);
+        {children?.filter(child => child.hasChanges).map((child) => {
+          let grandChildren = 'childInfo' in child ? child.childInfo?.children : undefined;
+          grandChildren = grandChildren?.filter(grandChild => grandChild.hasChanges);
 
-          return grandChildren.length ? (
+          return grandChildren?.length ? (
             <React.Fragment key={child.id}>
               <span className="small text-gray-400">{child.displayName}</span>
               {grandChildren.map((grandChild) => (
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 1ba5331f72..f185ae6f7d 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -22,14 +22,14 @@ import { useClipboard } from '@src/generic/clipboard';
 import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
-import type { XBlock } from '@src/data/types';
+import type { UnitXBlock, XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { courseOutlineQueryKeys, useCourseItemData } from '@src/course-outline/data/apiHooks';
 import moment from 'moment';
 import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 
 interface UnitCardProps {
-  unit: XBlock;
+  unit: UnitXBlock;
   subsection: XBlock;
   section: XBlock;
   onOpenConfigureModal: () => void;
@@ -78,7 +78,7 @@ const UnitCard = ({
     initialSubsectionData.id,
     initialSubsectionData,
   );
-  const { data: unit = initialData } = useCourseItemData(initialData.id, initialData);
+  const { data: unit = initialData } = useCourseItemData<UnitXBlock>(initialData.id, initialData);
   const isScrolledToElement = locatorId === unit.id;
 
   const {
diff --git a/src/course-outline/xblock-status/XBlockStatus.tsx b/src/course-outline/xblock-status/XBlockStatus.tsx
index 1f30f49ce2..20ecd82c2a 100644
--- a/src/course-outline/xblock-status/XBlockStatus.tsx
+++ b/src/course-outline/xblock-status/XBlockStatus.tsx
@@ -1,5 +1,5 @@
 import { ShowAnswerTypesKeys } from '@src/editors/data/constants/problem';
-import { XBlock } from '@src/data/types';
+import type { UnitXBlock, XBlock } from '@src/data/types';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import ReleaseStatus from './ReleaseStatus';
 import GradingPolicyAlert from './GradingPolicyAlert';
@@ -11,7 +11,7 @@ import NeverShowAssessmentResultMessage from './NeverShowAssessmentResultMessage
 interface XBlockStatusProps {
   isSelfPaced: boolean;
   isCustomRelativeDatesActive: boolean,
-  blockData: XBlock,
+  blockData: XBlock | UnitXBlock,
 }
 
 const XBlockStatus = ({
diff --git a/src/data/types.ts b/src/data/types.ts
index 8adfc16997..d92bb63a8e 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -127,6 +127,8 @@ export interface XBlock {
   upstreamInfo?: UpstreamInfo;
 }
 
+export type UnitXBlock = Omit<XBlock, 'childInfo'>;
+
 interface OutlineError {
   data?: string;
   type: string;

From 22a4e07b721cb4e72599659512c5f045c6b2648f Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 9 Feb 2026 12:29:56 +0530
Subject: [PATCH 59/60] refactor: rename sharedComponents -> InfoSection

---
 .../info-sidebar/{sharedComponents.tsx => InfoSection.tsx}      | 0
 .../outline-sidebar/info-sidebar/SectionInfoSidebar.tsx         | 2 +-
 .../outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx      | 2 +-
 .../outline-sidebar/info-sidebar/UnitInfoSidebar.tsx            | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/course-outline/outline-sidebar/info-sidebar/{sharedComponents.tsx => InfoSection.tsx} (100%)

diff --git a/src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx
similarity index 100%
rename from src/course-outline/outline-sidebar/info-sidebar/sharedComponents.tsx
rename to src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx
diff --git a/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
index bee6713d8f..c1666d496d 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx
@@ -10,7 +10,7 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import { InfoSection } from './sharedComponents';
+import { InfoSection } from './InfoSection';
 import messages from '../messages';
 import { PublishButon } from './PublishButon';
 
diff --git a/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
index 859e435257..5fe2f57bea 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx
@@ -10,7 +10,7 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
-import { InfoSection } from './sharedComponents';
+import { InfoSection } from './InfoSection';
 import { PublishButon } from './PublishButon';
 import messages from '../messages';
 
diff --git a/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
index 7a9cfd88bc..203981aa62 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx
@@ -20,7 +20,7 @@ import { Link } from 'react-router-dom';
 import { useOutlineSidebarContext } from '../OutlineSidebarContext';
 import { PublishButon } from './PublishButon';
 import messages from '../messages';
-import { InfoSection } from './sharedComponents';
+import { InfoSection } from './InfoSection';
 
 interface Props {
   unitId: string;

From 399212f511217f38d22881bb13779c5154301122 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 9 Feb 2026 12:56:15 +0530
Subject: [PATCH 60/60] fix: coverage

---
 .../OutlineAlignSidebar.test.tsx              | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
index 5339021682..904b0cf6e9 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
@@ -55,4 +55,25 @@ describe('OutlineAlignSidebar', () => {
       'drawer-mock-block-v1:test+course+run+type@sequential+block@seq1-component',
     );
   });
+
+  it('renders ContentTagsDrawer with the course name', async () => {
+    jest
+      .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
+      .mockReturnValue({
+        selectedContainerState: undefined,
+      } as any);
+    jest
+      .spyOn(CourseDetailsApi, 'useCourseDetails')
+      .mockReturnValue({
+        data: { courseDisplayNameWithDefault: 'Test Course' },
+      } as any);
+    jest
+      .spyOn(ContentDataApi, 'useContentData')
+      .mockReturnValue({
+        data: { courseDisplayNameWithDefault: 'Test Course' },
+      } as any);
+    render(<OutlineAlignSidebar />);
+
+    expect(await screen.findByText('Test Course')).toBeInTheDocument();
+  });
 });