From 682898b5f8f59f9533f6af379be964355ac6c34a Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 7 Apr 2026 15:21:42 +0530
Subject: [PATCH 01/13] feat(history-log): View previous change state

Include the option to view a previous change state from history entries.
---
 .../LibraryBlock/LibraryBlock.tsx             |  5 ++
 .../CompareChangesWidget.tsx                  | 34 ++++++------
 src/library-authoring/data/api.ts             |  2 +
 .../HistoryCompareChangesModal.tsx            | 52 +++++++++++++++++++
 .../generic/history-log/HistoryLog.tsx        |  1 +
 .../generic/history-log/HistoryLogGroup.tsx   |  4 +-
 .../history-log/HistoryLogGroupEntries.tsx    | 35 ++++++++++++-
 .../generic/history-log/messages.ts           | 15 ++++++
 8 files changed, 130 insertions(+), 18 deletions(-)
 create mode 100644 src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 3bc6a85ec8..2515616183 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -50,6 +50,11 @@ export const LibraryBlock = ({
 
   const intl = useIntl();
   const params = new URLSearchParams();
+
+  if (version === 0) {
+    return null;
+  }
+
   if (version) {
     params.set('version', version.toString());
   }
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index e7dd66eb15..743afb2e02 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -45,24 +45,26 @@ const CompareChangesWidget = ({
   return (
     <div className="bg-white p-2">
       <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle" mountOnEnter>
-        <Tab eventKey="old" title={oldTabMessage}>
-          <div className="p-2 bg-white">
-            {oldTitle && hasLocalChanges && (
-              <div className="h3 mt-3.5">
-                {oldTitle}
+        {oldVersion !== 0 &&
+          <Tab eventKey="old" title={oldTabMessage}>
+            <div className="p-2 bg-white">
+              {oldTitle && hasLocalChanges && (
+                <div className="h3 mt-3.5">
+                  {oldTitle}
+                </div>
+              )}
+              <div style={hasLocalChanges ? { marginLeft: '-35px', marginTop: '-8px' } : {}}>
+                <IframeProvider>
+                  <LibraryBlock
+                    usageKey={oldUsageKey || usageKey}
+                    version={oldVersion}
+                    minHeight="50vh"
+                  />
+                </IframeProvider>
               </div>
-            )}
-            <div style={hasLocalChanges ? { marginLeft: '-35px', marginTop: '-8px' } : {}}>
-              <IframeProvider>
-                <LibraryBlock
-                  usageKey={oldUsageKey || usageKey}
-                  version={oldVersion}
-                  minHeight="50vh"
-                />
-              </IframeProvider>
             </div>
-          </div>
-        </Tab>
+          </Tab>
+        }
         <Tab eventKey="new" title={newTabMessage}>
           <div className="p-2 bg-white">
             <IframeProvider>
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 1f560ce892..ea28bb91c7 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -1016,6 +1016,8 @@ export interface LibraryHistoryEntry {
   title: string;
   itemType: string;
   action: 'edited' | 'renamed' | 'created';
+  oldVersion?: number;
+  newVersion?: number;
 }
 
 /**
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
new file mode 100644
index 0000000000..c6c5a7ec85
--- /dev/null
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -0,0 +1,52 @@
+import { ModalDialog } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import CompareChangesWidget from '@src/library-authoring/component-comparison/CompareChangesWidget';
+import { type VersionSpec } from '@src/library-authoring/LibraryBlock';
+
+import messages from './messages';
+
+interface HistoryCompareChangesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  usageKey: string;
+  oldTitle?: string;
+  oldVersion?: VersionSpec;
+  newVersion?: VersionSpec;
+}
+
+const HistoryCompareChangesModal = ({
+  isOpen,
+  onClose,
+  usageKey,
+  oldTitle,
+  oldVersion,
+  newVersion = 'published',
+}: HistoryCompareChangesModalProps) => {
+  const intl = useIntl();
+  const title = intl.formatMessage(messages.previewChangesTitle, { title: oldTitle });
+
+  return (
+    <ModalDialog
+      isOpen={isOpen}
+      onClose={onClose}
+      size="xl"
+      title={title}
+      isOverflowVisible={false}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>{title}</ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <CompareChangesWidget
+          usageKey={usageKey}
+          oldTitle={oldTitle}
+          oldVersion={oldVersion}
+          newVersion={newVersion}
+        />
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
+
+export default HistoryCompareChangesModal;
diff --git a/src/library-authoring/generic/history-log/HistoryLog.tsx b/src/library-authoring/generic/history-log/HistoryLog.tsx
index 8007559e24..1c001e6bc0 100644
--- a/src/library-authoring/generic/history-log/HistoryLog.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLog.tsx
@@ -49,6 +49,7 @@ export const HistoryComponentLog = ({ componentId }: { componentId: string; }) =
     <div className="history-log">
       {draftHistory && draftHistory.length !== 0 && (
         <HistoryDraftLogGroup
+          itemId={componentId}
           displayName={componentMetadata?.displayName || ''}
           entries={draftHistory}
         />
diff --git a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
index 033b151ffd..6b9687baaa 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
@@ -30,6 +30,7 @@ export interface HistoryCreatedLogGroupProps {
 }
 
 export interface HistoryDraftLogGroupProps {
+  itemId: string;
   displayName: string;
   entries: LibraryHistoryEntry[];
 }
@@ -97,6 +98,7 @@ export const HistoryCreatedLogGroup = ({
 };
 
 export const HistoryDraftLogGroup = ({
+  itemId,
   displayName,
   entries,
 }: HistoryDraftLogGroupProps) => {
@@ -123,7 +125,7 @@ export const HistoryDraftLogGroup = ({
           />
         </Collapsible.Trigger>
         <Collapsible.Body>
-          <HistoryLogGroupEntries entries={entries} />
+          <HistoryLogGroupEntries itemId={itemId} entries={entries} />
         </Collapsible.Body>
       </Collapsible.Advanced>
       <div className="history-log-vert" />
diff --git a/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx b/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
index 05eb175bb6..805021eaa4 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
@@ -1,19 +1,25 @@
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { LibraryHistoryEntry } from '@src/library-authoring/data/api';
 import messages from './messages';
-import { Icon, Stack } from '@openedx/paragon';
+import { Dropdown, Icon, IconButton, Stack } from '@openedx/paragon';
 import { ContributorAvatar } from './ContributorAvatars';
 import { getItemIcon } from '@src/generic/block-type-utils';
 import moment from 'moment';
+import { MoreVert } from '@openedx/paragon/icons';
+import { useToggleWithValue } from '@src/hooks';
+import HistoryCompareChangesModal from '@src/library-authoring/generic/history-log/HistoryCompareChangesModal';
 
 export interface HistoryLogGroupEntriesProps {
+  itemId: string;
   entries: LibraryHistoryEntry[];
 }
 
 export const HistoryLogGroupEntries = ({
+  itemId,
   entries,
 }: HistoryLogGroupEntriesProps) => {
   const intl = useIntl();
+  const [isChangeModalOpen, changeModalData, openChangeModal, closeChangeModal] = useToggleWithValue<LibraryHistoryEntry>();
 
   const getEntryMessage = (entry: LibraryHistoryEntry) => {
     switch (entry.action) {
@@ -29,6 +35,7 @@ export const HistoryLogGroupEntries = ({
   };
 
   return (
+    <>
     <Stack gap={0}>
       <div className="history-log-vert" />
       {entries.map((entry, index, arr) => {
@@ -59,11 +66,37 @@ export const HistoryLogGroupEntries = ({
                   {moment(entry.changedAt).fromNow()}
                 </span>
               </Stack>
+              <Dropdown>
+                <Dropdown.Toggle
+                  id="dropdown-toggle-with-iconbutton"
+                  as={IconButton}
+                  src={MoreVert}
+                  iconAs={Icon}
+                  variant="primary"
+                  aria-label={intl.formatMessage(messages.moreActions)}
+                />
+                <Dropdown.Menu>
+                  <Dropdown.Item onClick={() => openChangeModal(entry)}>
+                    {intl.formatMessage(messages.showThisVersion)}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
             </Stack>
             {!isLast && <div className="history-log-vert" />}
           </div>
         );
       })}
     </Stack>
+    {isChangeModalOpen && changeModalData && (
+      <HistoryCompareChangesModal
+        isOpen={isChangeModalOpen}
+        onClose={closeChangeModal}
+        usageKey={itemId}
+        oldTitle={changeModalData.title}
+        oldVersion={changeModalData.oldVersion}
+        newVersion={changeModalData.newVersion || 'published'}
+      />
+    )}
+  </>
   );
 };
diff --git a/src/library-authoring/generic/history-log/messages.ts b/src/library-authoring/generic/history-log/messages.ts
index 6fbdc8514c..38a5841698 100644
--- a/src/library-authoring/generic/history-log/messages.ts
+++ b/src/library-authoring/generic/history-log/messages.ts
@@ -56,6 +56,21 @@ const messages = defineMessages({
     defaultMessage: '{count} {count, plural, one {author} other {authors}} contributed',
     description: 'Contributors count in a publish history group',
   },
+  previewChangesTitle: {
+    id: 'course-authoring.library-authoring.history.preview-changes.title',
+    defaultMessage: 'Preview changes: {title}',
+    description: 'Title for the modal that previews changes for a history entry.',
+  },
+  moreActions: {
+    id: 'course-authoring.library-authoring.history.more-actions',
+    defaultMessage: 'More actions',
+    description: 'Dropdown label for history log actions.',
+  },
+  showThisVersion: {
+    id: 'course-authoring.library-authoring.history.show-this-version',
+    defaultMessage: 'Show this version',
+    description: 'Action to open the version comparison modal for a history entry.',
+  },
 });
 
 export default messages;

From b47454fe54e94663416141c351d3c6d8f6511548 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 7 Apr 2026 17:17:49 +0530
Subject: [PATCH 02/13] feat: side by side view

---
 .../CompareChangesWidget.tsx                  | 99 ++++++++++++-------
 .../HistoryCompareChangesModal.tsx            |  6 ++
 2 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 743afb2e02..9fe143d941 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -1,5 +1,6 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Tab, Tabs } from '@openedx/paragon';
+import { Card, Stack, Tab, Tabs } from '@openedx/paragon';
+import classNames from 'classnames';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 
 import { LibraryBlock, type VersionSpec } from '../LibraryBlock';
@@ -14,6 +15,8 @@ interface Props {
   showNewTitle?: boolean;
   hasLocalChanges?: boolean;
   oldUsageKey?: string;
+  sideBySide?: boolean;
+  showTitle?: boolean;
 }
 
 /**
@@ -32,6 +35,8 @@ const CompareChangesWidget = ({
   showNewTitle = false,
   oldUsageKey,
   hasLocalChanges = false,
+  sideBySide = false,
+  showTitle = false,
 }: Props) => {
   const intl = useIntl();
 
@@ -42,42 +47,66 @@ const CompareChangesWidget = ({
     ? intl.formatMessage(messages.publishedLibraryContentTitle)
     : intl.formatMessage(messages.newVersionTitle);
 
+  const oldBlock = oldVersion !== 0 && (
+    <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
+      <Card.Body className="p-4 bg-white">
+        {sideBySide && (
+          <h3 className="w-100 text-center mb-4">
+            {oldTabMessage}
+          </h3>
+        )}
+        {oldTitle && hasLocalChanges && (
+          <div className="h3 mt-3.5">
+            {oldTitle}
+          </div>
+        )}
+        <div style={hasLocalChanges ? { marginLeft: '-35px', marginTop: '-8px' } : {}}>
+          <IframeProvider>
+            <LibraryBlock
+              usageKey={oldUsageKey || usageKey}
+              version={oldVersion}
+              minHeight="50vh"
+              showTitle={showTitle}
+            />
+          </IframeProvider>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+
+  const newBlock = (
+    <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
+      <Card.Body className="p-4 bg-white">
+        {sideBySide && (
+          <h3 className="w-100 text-center mb-4">
+            {newTabMessage}
+          </h3>
+        )}
+        <IframeProvider>
+          <LibraryBlock
+            usageKey={usageKey}
+            version={newVersion}
+            showTitle={showNewTitle || showTitle}
+            minHeight="50vh"
+          />
+        </IframeProvider>
+      </Card.Body>
+    </Card>
+  );
+
   return (
     <div className="bg-white p-2">
-      <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle" mountOnEnter>
-        {oldVersion !== 0 &&
-          <Tab eventKey="old" title={oldTabMessage}>
-            <div className="p-2 bg-white">
-              {oldTitle && hasLocalChanges && (
-                <div className="h3 mt-3.5">
-                  {oldTitle}
-                </div>
-              )}
-              <div style={hasLocalChanges ? { marginLeft: '-35px', marginTop: '-8px' } : {}}>
-                <IframeProvider>
-                  <LibraryBlock
-                    usageKey={oldUsageKey || usageKey}
-                    version={oldVersion}
-                    minHeight="50vh"
-                  />
-                </IframeProvider>
-              </div>
-            </div>
-          </Tab>
-        }
-        <Tab eventKey="new" title={newTabMessage}>
-          <div className="p-2 bg-white">
-            <IframeProvider>
-              <LibraryBlock
-                usageKey={usageKey}
-                version={newVersion}
-                showTitle={showNewTitle}
-                minHeight="50vh"
-              />
-            </IframeProvider>
-          </div>
-        </Tab>
-      </Tabs>
+      {sideBySide ? (
+        <Stack direction='horizontal' gap={2}>
+          {oldBlock}
+          {newBlock}
+        </Stack>
+      ) : (
+        <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle" mountOnEnter>
+          {oldBlock && <Tab eventKey="old" title={oldTabMessage}>{oldBlock}</Tab>}
+          <Tab eventKey="new" title={newTabMessage}>{newBlock}</Tab>
+        </Tabs>
+      )}
     </div>
   );
 };
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
index c6c5a7ec85..30c677f0f3 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -5,6 +5,7 @@ import CompareChangesWidget from '@src/library-authoring/component-comparison/Co
 import { type VersionSpec } from '@src/library-authoring/LibraryBlock';
 
 import messages from './messages';
+import classNames from 'classnames';
 
 interface HistoryCompareChangesModalProps {
   isOpen: boolean;
@@ -13,6 +14,7 @@ interface HistoryCompareChangesModalProps {
   oldTitle?: string;
   oldVersion?: VersionSpec;
   newVersion?: VersionSpec;
+  sideBySide?: boolean;
 }
 
 const HistoryCompareChangesModal = ({
@@ -22,6 +24,7 @@ const HistoryCompareChangesModal = ({
   oldTitle,
   oldVersion,
   newVersion = 'published',
+  sideBySide = true,
 }: HistoryCompareChangesModalProps) => {
   const intl = useIntl();
   const title = intl.formatMessage(messages.previewChangesTitle, { title: oldTitle });
@@ -31,6 +34,7 @@ const HistoryCompareChangesModal = ({
       isOpen={isOpen}
       onClose={onClose}
       size="xl"
+      className={classNames({'w-xl-100 mw-xl': sideBySide})}
       title={title}
       isOverflowVisible={false}
     >
@@ -43,6 +47,8 @@ const HistoryCompareChangesModal = ({
           oldTitle={oldTitle}
           oldVersion={oldVersion}
           newVersion={newVersion}
+          sideBySide={sideBySide}
+          showTitle
         />
       </ModalDialog.Body>
     </ModalDialog>

From e7ce51f6ca520e5a756eeaf768152879cb70e3ef Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Tue, 7 Apr 2026 17:38:25 +0530
Subject: [PATCH 03/13] fix: scrolling in compare preview

---
 .../LibraryBlock/LibraryBlock.tsx                  |  4 +++-
 .../component-comparison/CompareChangesWidget.tsx  | 14 +++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 2515616183..eeccb719ed 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -21,6 +21,7 @@ interface LibraryBlockProps {
   minHeight?: string;
   scrollIntoView?: boolean;
   showTitle?: boolean;
+  addHeight?: number;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -40,6 +41,7 @@ export const LibraryBlock = ({
   scrolling = 'no',
   scrollIntoView = false,
   showTitle = false,
+  addHeight = 0,
 }: LibraryBlockProps) => {
   const { iframeRef, setIframeRef } = useIframe();
   const xblockView = view ?? 'student_view';
@@ -97,7 +99,7 @@ export const LibraryBlock = ({
       referrerPolicy="origin"
       style={{
         width: '100%',
-        height: iframeHeight,
+        height: iframeHeight + addHeight,
         pointerEvents: 'auto',
         minHeight,
       }}
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 9fe143d941..d47134289c 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Card, Stack, Tab, Tabs } from '@openedx/paragon';
+import { Card, Scrollable, Stack, Tab, Tabs } from '@openedx/paragon';
 import classNames from 'classnames';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 
@@ -49,7 +49,10 @@ const CompareChangesWidget = ({
 
   const oldBlock = oldVersion !== 0 && (
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
-      <Card.Body className="p-4 bg-white">
+      <Card.Body
+        className="p-4 bg-white overflow-auto"
+        style={{ height: '70vh' }}
+      >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
             {oldTabMessage}
@@ -67,6 +70,7 @@ const CompareChangesWidget = ({
               version={oldVersion}
               minHeight="50vh"
               showTitle={showTitle}
+              addHeight={40}
             />
           </IframeProvider>
         </div>
@@ -76,7 +80,10 @@ const CompareChangesWidget = ({
 
   const newBlock = (
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
-      <Card.Body className="p-4 bg-white">
+      <Card.Body
+        className="p-4 bg-white overflow-auto"
+        style={{ height: '70vh' }}
+      >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
             {newTabMessage}
@@ -88,6 +95,7 @@ const CompareChangesWidget = ({
             version={newVersion}
             showTitle={showNewTitle || showTitle}
             minHeight="50vh"
+            addHeight={40}
           />
         </IframeProvider>
       </Card.Body>

From 54295a5cce8960259617e7bd9562a3acf3be5fe7 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 8 Apr 2026 15:17:41 +0530
Subject: [PATCH 04/13] fix: minor issues

---
 .../component-comparison/CompareChangesWidget.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index d47134289c..af2c1721c9 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Card, Scrollable, Stack, Tab, Tabs } from '@openedx/paragon';
+import { Card, Stack, Tab, Tabs } from '@openedx/paragon';
 import classNames from 'classnames';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 

From b2c045c55799f45aa78acd5df4d00aaa9ded383b Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 8 Apr 2026 15:32:14 +0530
Subject: [PATCH 05/13] test: add tests

---
 .../CompareChangesWidget.test.tsx             | 34 ++++++---
 .../HistoryCompareChangesModal.test.tsx       | 45 ++++++++++++
 .../history-log/HistoryLogGroup.test.tsx      | 71 +++++++++++++++++++
 3 files changed, 142 insertions(+), 8 deletions(-)
 create mode 100644 src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
 create mode 100644 src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
index ef508eacd9..598c382904 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
@@ -19,11 +19,11 @@ describe('<CompareChangesWidget />', () => {
     render(<CompareChangesWidget usageKey={usageKey} />);
 
     // By default we see the new version:
-    const newTab = screen.getByRole('tab', { name: 'New version' });
+    const newTab = await screen.findByRole('tab', { name: 'New version' });
     expect(newTab).toBeInTheDocument();
     expect(newTab).toHaveClass('active');
 
-    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newTabPanel = await screen.findByRole('tabpanel', { name: 'New version' });
     const newIframe = within(newTabPanel).getByTitle('Preview');
     expect(newIframe).toBeVisible();
     expect(newIframe).toHaveAttribute(
@@ -32,10 +32,10 @@ describe('<CompareChangesWidget />', () => {
     );
 
     // Now switch to the "old version" tab:
-    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    const oldTab = await screen.findByRole('tab', { name: 'Old version' });
     fireEvent.click(oldTab);
 
-    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    const oldTabPanel = await screen.findByRole('tabpanel', { name: 'Old version' });
     expect(oldTabPanel).toBeVisible();
     const oldIframe = within(oldTabPanel).getByTitle('Preview');
     expect(oldIframe).toBeVisible();
@@ -49,11 +49,11 @@ describe('<CompareChangesWidget />', () => {
     render(<CompareChangesWidget usageKey={usageKey} oldVersion={7} newVersion="published" />);
 
     // By default we see the new version:
-    const newTab = screen.getByRole('tab', { name: 'New version' });
+    const newTab = await screen.findByRole('tab', { name: 'New version' });
     expect(newTab).toBeInTheDocument();
     expect(newTab).toHaveClass('active');
 
-    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newTabPanel = await screen.findByRole('tabpanel', { name: 'New version' });
     const newIframe = within(newTabPanel).getByTitle('Preview');
     expect(newIframe).toBeVisible();
     expect(newIframe).toHaveAttribute(
@@ -62,10 +62,10 @@ describe('<CompareChangesWidget />', () => {
     );
 
     // Now switch to the "old version" tab:
-    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    const oldTab = await screen.findByRole('tab', { name: 'Old version' });
     fireEvent.click(oldTab);
 
-    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    const oldTabPanel = await screen.findByRole('tabpanel', { name: 'Old version' });
     expect(oldTabPanel).toBeVisible();
     const oldIframe = within(oldTabPanel).getByTitle('Preview');
     expect(oldIframe).toBeVisible();
@@ -74,4 +74,22 @@ describe('<CompareChangesWidget />', () => {
       `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=7`,
     );
   });
+
+  it('renders side-by-side compare mode with both iframes and expected sources', async () => {
+    render(<CompareChangesWidget usageKey={usageKey} oldVersion={7} newVersion="published" sideBySide />);
+
+    expect(await screen.findByText('Old version')).toBeInTheDocument();
+    expect(await screen.findByText('New version')).toBeInTheDocument();
+
+    const iframes = await screen.findAllByTitle('Preview');
+    expect(iframes).toHaveLength(2);
+    expect(iframes[0]).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=7`,
+    );
+    expect(iframes[1]).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+  });
 });
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
new file mode 100644
index 0000000000..158f63d577
--- /dev/null
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen, initializeMocks } from '@src/testUtils';
+
+import HistoryCompareChangesModal from './HistoryCompareChangesModal';
+
+jest.mock('@src/library-authoring/component-comparison/CompareChangesWidget', () => ({
+  __esModule: true,
+  default: jest.fn(({ usageKey, oldTitle, oldVersion, newVersion, sideBySide, showTitle }) => (
+    <div
+      data-testid="compare-changes-widget"
+      data-usage-key={usageKey}
+      data-old-title={oldTitle ?? ''}
+      data-old-version={String(oldVersion ?? '')}
+      data-new-version={String(newVersion ?? '')}
+      data-side-by-side={String(sideBySide)}
+      data-show-title={String(showTitle)}
+    />
+  )),
+}));
+
+describe('<HistoryCompareChangesModal />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders the comparison widget with the selected versions', async () => {
+    render(
+      <HistoryCompareChangesModal
+        isOpen
+        onClose={jest.fn()}
+        usageKey="lb:org:lib:type:id"
+        oldTitle="Electron Arcs"
+        oldVersion={3}
+        newVersion="published"
+      />,
+    );
+
+    expect(await screen.findByText('Preview changes: Electron Arcs')).toBeInTheDocument();
+    expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-usage-key', 'lb:org:lib:type:id');
+    expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-old-title', 'Electron Arcs');
+    expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-old-version', '3');
+    expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-new-version', 'published');
+    expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-side-by-side', 'true');
+    expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-show-title', 'true');
+  });
+});
diff --git a/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx b/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx
new file mode 100644
index 0000000000..586a0b1ce5
--- /dev/null
+++ b/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx
@@ -0,0 +1,71 @@
+import { userEvent } from '@testing-library/user-event';
+import {
+  initializeMocks,
+  render,
+  screen,
+  findByDeepTextContent,
+} from '@src/testUtils';
+
+import {
+  mockLibraryBlockDraftHistory,
+  mockLibraryBlockPublishHistory,
+  mockLibraryBlockPublishHistoryEntries,
+} from '@src/library-authoring/data/api.mocks';
+import { HistoryDraftLogGroup, HistoryPublishLogGroup } from './HistoryLogGroup';
+
+mockLibraryBlockDraftHistory.applyMock();
+mockLibraryBlockPublishHistory.applyMock();
+mockLibraryBlockPublishHistoryEntries.applyMock();
+
+const draftEntries = mockLibraryBlockDraftHistory.data;
+const publishGroup = mockLibraryBlockPublishHistory.data[0];
+
+describe('<HistoryLogGroup />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('opens the compare modal from a draft entry action menu', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <HistoryDraftLogGroup
+        itemId={mockLibraryBlockDraftHistory.usageKey}
+        displayName="Test Component"
+        entries={draftEntries}
+      />,
+    );
+
+    const trigger = await findByDeepTextContent(/Test Component is a draft/i);
+    await user.click(trigger);
+
+    const firstEntry = await findByDeepTextContent(/test_user_1 edited.*Electron Arcs/i);
+    expect(firstEntry).toBeInTheDocument();
+
+    await user.click(await screen.findAllByRole('button', { name: /more actions/i }).then(buttons => buttons[0]));
+    await user.click(await screen.findByText('Show this version'));
+
+    expect(await screen.findByText('Preview changes: Electron Arcs')).toBeInTheDocument();
+  });
+
+  it('shows publish history entries and opens the compare modal after expanding', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <HistoryPublishLogGroup
+        {...publishGroup}
+        itemId={mockLibraryBlockPublishHistory.usageKeyWithGroups}
+      />,
+    );
+
+    const publishTrigger = await findByDeepTextContent(/author published.*Protons/i);
+    await user.click(publishTrigger);
+
+    expect(await findByDeepTextContent(/test_user edited.*Protons/i)).toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: /more actions/i }));
+    await user.click(await screen.findByText('Show this version'));
+
+    expect(await screen.findByText('Preview changes: Protons')).toBeInTheDocument();
+  });
+});

From 50d198771d0ed10c38c1227c78cb58dc1a6867bf Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Wed, 22 Apr 2026 20:15:54 +0530
Subject: [PATCH 06/13] fix: rebase issues

---
 src/library-authoring/generic/history-log/HistoryLogGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
index 6b9687baaa..6c9c6d00e5 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
@@ -186,7 +186,7 @@ export const HistoryPublishLogGroup = ({
                     </div>
                   </>
                 ) :
-                <HistoryLogGroupEntries entries={entries ?? []} />}
+                <HistoryLogGroupEntries entries={entries ?? []} itemId={itemId} />}
             </Collapsible.Body>
           </Collapsible.Advanced>
         ) :

From ed5efc5949b1b468e4daf7528152bda1f0c6b4ef Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 27 Apr 2026 13:00:45 +0530
Subject: [PATCH 07/13] feat: show changes option for non-container blocks

---
 src/generic/key-utils.test.ts                 | 54 +++++++++++++++++++
 src/generic/key-utils.ts                      | 24 +++++++++
 .../HistoryCompareChangesModal.test.tsx       | 16 ++++++
 .../HistoryCompareChangesModal.tsx            |  7 +++
 .../history-log/HistoryLogGroup.test.tsx      | 20 +++++++
 .../generic/history-log/HistoryLogGroup.tsx   |  1 +
 6 files changed, 122 insertions(+)

diff --git a/src/generic/key-utils.test.ts b/src/generic/key-utils.test.ts
index f9e12072a2..c5b2b0b55e 100644
--- a/src/generic/key-utils.test.ts
+++ b/src/generic/key-utils.test.ts
@@ -3,6 +3,8 @@ import {
   ContainerType,
   getBlockType,
   getLibraryId,
+  isContainerType,
+  isContainerUsageKey,
   isLibraryKey,
   isLibraryV1Key,
   normalizeContainerType,
@@ -165,4 +167,56 @@ describe('component utils', () => {
       });
     }
   });
+
+  describe('isContainerType', () => {
+    for (const containerType of [
+      ContainerType.Vertical,
+      ContainerType.Sequential,
+      ContainerType.Chapter,
+      ContainerType.Unit,
+      ContainerType.Subsection,
+      ContainerType.Section,
+    ] as const) {
+      it(`returns true for '${containerType}'`, () => {
+        expect(isContainerType(containerType)).toBe(true);
+      });
+    }
+
+    for (const containerType of ['html', 'problem', '', 'video']) {
+      it(`returns false for '${containerType}'`, () => {
+        expect(isContainerType(containerType)).toBe(false);
+      });
+    }
+  });
+
+  describe('isContainerUsageKey', () => {
+    for (const usageKey of [
+      'lct:org:lib:section:my-section-9284e2',
+      'lct:org:lib:subsection:my-subsection-9284e2',
+      'lct:org:lib:unit:my-unit-9284e2',
+      'block-v1:org+type@chapter+block@1',
+      'block-v1:org+type@sequential+block@1',
+      'block-v1:org+type@vertical+block@1',
+      'block-v1:org+type@section+block@1',
+      'block-v1:org+type@subsection+block@1',
+      'block-v1:org+type@unit+block@1',
+    ]) {
+      it(`returns true for '${usageKey}'`, () => {
+        expect(isContainerUsageKey(usageKey)).toBe(true);
+      });
+    }
+
+    for (const usageKey of [
+      'lb:org:lib:html:id',
+      'block-v1:org+type@problem+block@1',
+      'not a key',
+      '',
+      undefined,
+      null,
+    ]) {
+      it(`returns false for '${usageKey}'`, () => {
+        expect(isContainerUsageKey(usageKey as any)).toBe(false);
+      });
+    }
+  });
 });
diff --git a/src/generic/key-utils.ts b/src/generic/key-utils.ts
index beb8b283f7..b7a75c1028 100644
--- a/src/generic/key-utils.ts
+++ b/src/generic/key-utils.ts
@@ -141,3 +141,27 @@ export function normalizeContainerType(containerType: ContainerType | string) {
       return containerType;
   }
 }
+
+/**
+ * Check whether a block/container type points to a container (section/subsection/unit),
+ * including legacy names (chapter/sequential/vertical).
+ */
+export function isContainerType(containerType: ContainerType | string): boolean {
+  const normalizedType = normalizeContainerType(containerType);
+
+  return [ContainerType.Section, ContainerType.Subsection, ContainerType.Unit].includes(
+    normalizedType as ContainerType,
+  );
+}
+
+/**
+ * Check whether a usage key belongs to a container.
+ */
+export function isContainerUsageKey(usageKey: string | undefined | null): boolean {
+  if (typeof usageKey !== 'string') {
+    return false;
+  }
+
+  const blockType = getBlockType(usageKey, 'empty');
+  return blockType ? isContainerType(blockType) : false;
+}
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
index 158f63d577..c256b78833 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
@@ -42,4 +42,20 @@ describe('<HistoryCompareChangesModal />', () => {
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-side-by-side', 'true');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-show-title', 'true');
   });
+
+  it('renders nothing for container usage keys', () => {
+    render(
+      <HistoryCompareChangesModal
+        isOpen
+        onClose={jest.fn()}
+        usageKey="lct:org:lib:unit:my-unit-9284e2"
+        oldTitle="Intro Unit"
+        oldVersion={3}
+        newVersion="published"
+      />,
+    );
+
+    expect(screen.queryByText('Preview changes: Intro Unit')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('compare-changes-widget')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
index 30c677f0f3..75f144f693 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -3,6 +3,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import CompareChangesWidget from '@src/library-authoring/component-comparison/CompareChangesWidget';
 import { type VersionSpec } from '@src/library-authoring/LibraryBlock';
+import { isContainerUsageKey } from '@src/generic/key-utils';
 
 import messages from './messages';
 import classNames from 'classnames';
@@ -27,6 +28,12 @@ const HistoryCompareChangesModal = ({
   sideBySide = true,
 }: HistoryCompareChangesModalProps) => {
   const intl = useIntl();
+  const shouldShowDiff = !isContainerUsageKey(usageKey);
+
+  if (!shouldShowDiff) {
+    return null;
+  }
+
   const title = intl.formatMessage(messages.previewChangesTitle, { title: oldTitle });
 
   return (
diff --git a/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx b/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx
index 586a0b1ce5..0b9b947b44 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroup.test.tsx
@@ -10,6 +10,7 @@ import {
   mockLibraryBlockDraftHistory,
   mockLibraryBlockPublishHistory,
   mockLibraryBlockPublishHistoryEntries,
+  mockLibraryContainerDraftHistory,
 } from '@src/library-authoring/data/api.mocks';
 import { HistoryDraftLogGroup, HistoryPublishLogGroup } from './HistoryLogGroup';
 
@@ -19,6 +20,7 @@ mockLibraryBlockPublishHistoryEntries.applyMock();
 
 const draftEntries = mockLibraryBlockDraftHistory.data;
 const publishGroup = mockLibraryBlockPublishHistory.data[0];
+const containerDraftEntries = mockLibraryContainerDraftHistory.data;
 
 describe('<HistoryLogGroup />', () => {
   beforeEach(() => {
@@ -68,4 +70,22 @@ describe('<HistoryLogGroup />', () => {
 
     expect(await screen.findByText('Preview changes: Protons')).toBeInTheDocument();
   });
+
+  it('hides entry action dropdown for container item ids', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <HistoryDraftLogGroup
+        itemId={mockLibraryContainerDraftHistory.containerKey}
+        displayName="Intro Unit"
+        entries={containerDraftEntries}
+      />,
+    );
+
+    const trigger = await findByDeepTextContent(/Intro Unit is a draft/i);
+    await user.click(trigger);
+
+    expect(await findByDeepTextContent(/container_user_1 edited.*Intro Unit/i)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /more actions/i })).not.toBeInTheDocument();
+  });
 });
diff --git a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
index 6c9c6d00e5..93ce1ca364 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
@@ -7,6 +7,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useLibraryPublishHistoryEntries } from '@src/library-authoring/data/apiHooks';
 import { LoadingSpinner } from '@src/generic/Loading';
+import { isContainerUsageKey } from '@src/generic/key-utils';
 
 import { LibraryHistoryEntry, LibraryPublishHistoryGroup } from '../../data/api';
 import messages from './messages';

From 69f9ad69237a19a53bd010d6c082765ae5472121 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 27 Apr 2026 13:09:54 +0530
Subject: [PATCH 08/13] fix(history-log): add icon to preview changes modal

---
 .../HistoryCompareChangesModal.test.tsx       |  4 +++-
 .../HistoryCompareChangesModal.tsx            | 24 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
index c256b78833..eb4d16fd43 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
@@ -34,7 +34,9 @@ describe('<HistoryCompareChangesModal />', () => {
       />,
     );
 
-    expect(await screen.findByText('Preview changes: Electron Arcs')).toBeInTheDocument();
+    const modalTitle = await screen.findByText('Preview changes: Electron Arcs');
+    expect(modalTitle).toBeInTheDocument();
+    expect(modalTitle.querySelector('svg')).toBeInTheDocument();
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-usage-key', 'lb:org:lib:type:id');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-old-title', 'Electron Arcs');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-old-version', '3');
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
index 75f144f693..8995133f32 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -1,9 +1,10 @@
-import { ModalDialog } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, ModalDialog, Stack } from '@openedx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import CompareChangesWidget from '@src/library-authoring/component-comparison/CompareChangesWidget';
 import { type VersionSpec } from '@src/library-authoring/LibraryBlock';
-import { isContainerUsageKey } from '@src/generic/key-utils';
+import { getItemIcon } from '@src/generic/block-type-utils';
+import { getBlockType, isContainerUsageKey } from '@src/generic/key-utils';
 
 import messages from './messages';
 import classNames from 'classnames';
@@ -35,6 +36,7 @@ const HistoryCompareChangesModal = ({
   }
 
   const title = intl.formatMessage(messages.previewChangesTitle, { title: oldTitle });
+  const blockType = getBlockType(usageKey, 'empty');
 
   return (
     <ModalDialog
@@ -46,7 +48,21 @@ const HistoryCompareChangesModal = ({
       isOverflowVisible={false}
     >
       <ModalDialog.Header>
-        <ModalDialog.Title>{title}</ModalDialog.Title>
+        <ModalDialog.Title>
+          <Stack direction='horizontal'>
+            <FormattedMessage
+              {...messages.previewChangesTitle}
+              values={{
+                title: (
+                  <>
+                    <Icon size='lg' src={getItemIcon(blockType)} className="mr-1" />
+                    {oldTitle}
+                  </>
+                ),
+              }}
+            />
+          </Stack>
+        </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body>
         <CompareChangesWidget

From d97ff683260db114e7c88017442dd902e4fee52e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 27 Apr 2026 15:03:02 +0530
Subject: [PATCH 09/13] refactor(compare-components): update background style

---
 .../component-comparison/CompareChangesWidget.tsx             | 4 ++--
 .../generic/history-log/HistoryCompareChangesModal.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index af2c1721c9..9c8ba30bb0 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -103,9 +103,9 @@ const CompareChangesWidget = ({
   );
 
   return (
-    <div className="bg-white p-2">
+    <div className="bg-light-300 py-2 px-1">
       {sideBySide ? (
-        <Stack direction='horizontal' gap={2}>
+        <Stack direction='horizontal' gap={3}>
           {oldBlock}
           {newBlock}
         </Stack>
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
index 8995133f32..89ba99be68 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -64,7 +64,7 @@ const HistoryCompareChangesModal = ({
           </Stack>
         </ModalDialog.Title>
       </ModalDialog.Header>
-      <ModalDialog.Body>
+      <ModalDialog.Body className="bg-light-300">
         <CompareChangesWidget
           usageKey={usageKey}
           oldTitle={oldTitle}

From 48ce7fb8aa64c239503a918db579436ce0723e38 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 27 Apr 2026 15:11:55 +0530
Subject: [PATCH 10/13] feat: add footer and fix styles

---
 .../CompareChangesWidget.tsx                  | 12 +++++------
 .../HistoryCompareChangesModal.test.tsx       | 21 +++++++++++++++++++
 .../HistoryCompareChangesModal.tsx            |  9 ++++++--
 .../generic/history-log/messages.ts           |  5 +++++
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 9c8ba30bb0..872ab33808 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -51,7 +51,7 @@ const CompareChangesWidget = ({
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
       <Card.Body
         className="p-4 bg-white overflow-auto"
-        style={{ height: '70vh' }}
+        style={{ height: '60vh' }}
       >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
@@ -68,9 +68,9 @@ const CompareChangesWidget = ({
             <LibraryBlock
               usageKey={oldUsageKey || usageKey}
               version={oldVersion}
-              minHeight="50vh"
+              minHeight="45vh"
               showTitle={showTitle}
-              addHeight={40}
+              addHeight={70}
             />
           </IframeProvider>
         </div>
@@ -82,7 +82,7 @@ const CompareChangesWidget = ({
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
       <Card.Body
         className="p-4 bg-white overflow-auto"
-        style={{ height: '70vh' }}
+        style={{ height: '60vh' }}
       >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
@@ -94,8 +94,8 @@ const CompareChangesWidget = ({
             usageKey={usageKey}
             version={newVersion}
             showTitle={showNewTitle || showTitle}
-            minHeight="50vh"
-            addHeight={40}
+            minHeight="45vh"
+            addHeight={70}
           />
         </IframeProvider>
       </Card.Body>
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
index eb4d16fd43..e63afef23b 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx
@@ -1,3 +1,4 @@
+import { userEvent } from '@testing-library/user-event';
 import { render, screen, initializeMocks } from '@src/testUtils';
 
 import HistoryCompareChangesModal from './HistoryCompareChangesModal';
@@ -43,6 +44,26 @@ describe('<HistoryCompareChangesModal />', () => {
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-new-version', 'published');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-side-by-side', 'true');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-show-title', 'true');
+    expect(screen.getByRole('button', { name: 'Done' })).toBeInTheDocument();
+  });
+
+  it('closes modal when clicking done button', async () => {
+    const onClose = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <HistoryCompareChangesModal
+        isOpen
+        onClose={onClose}
+        usageKey="lb:org:lib:type:id"
+        oldTitle="Electron Arcs"
+        oldVersion={3}
+        newVersion="published"
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Done' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('renders nothing for container usage keys', () => {
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
index 89ba99be68..58270d4272 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -1,4 +1,4 @@
-import { Icon, ModalDialog, Stack } from '@openedx/paragon';
+import { Button, Icon, ModalDialog, Stack } from '@openedx/paragon';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import CompareChangesWidget from '@src/library-authoring/component-comparison/CompareChangesWidget';
@@ -49,7 +49,7 @@ const HistoryCompareChangesModal = ({
     >
       <ModalDialog.Header>
         <ModalDialog.Title>
-          <Stack direction='horizontal'>
+          <Stack direction='horizontal' gap={2}>
             <FormattedMessage
               {...messages.previewChangesTitle}
               values={{
@@ -74,6 +74,11 @@ const HistoryCompareChangesModal = ({
           showTitle
         />
       </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button onClick={onClose}>
+          {intl.formatMessage(messages.doneButton)}
+        </Button>
+      </ModalDialog.Footer>
     </ModalDialog>
   );
 };
diff --git a/src/library-authoring/generic/history-log/messages.ts b/src/library-authoring/generic/history-log/messages.ts
index 38a5841698..1df4616551 100644
--- a/src/library-authoring/generic/history-log/messages.ts
+++ b/src/library-authoring/generic/history-log/messages.ts
@@ -71,6 +71,11 @@ const messages = defineMessages({
     defaultMessage: 'Show this version',
     description: 'Action to open the version comparison modal for a history entry.',
   },
+  doneButton: {
+    id: 'course-authoring.library-authoring.history.done-button',
+    defaultMessage: 'Done',
+    description: 'Button label to close preview changes modal.',
+  },
 });
 
 export default messages;

From 4fc5edd3f65c5c2702db5d86094751478dd56743 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 27 Apr 2026 15:19:50 +0530
Subject: [PATCH 11/13] fix: lint issues

---
 src/generic/key-utils.test.ts                 | 60 ++++++++++---------
 .../LibraryBlock/LibraryBlock.tsx             |  8 +--
 .../CompareChangesWidget.tsx                  | 24 ++++----
 .../HistoryCompareChangesModal.tsx            |  6 +-
 .../generic/history-log/HistoryLog.tsx        |  1 +
 5 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/generic/key-utils.test.ts b/src/generic/key-utils.test.ts
index c5b2b0b55e..db61856458 100644
--- a/src/generic/key-utils.test.ts
+++ b/src/generic/key-utils.test.ts
@@ -169,14 +169,16 @@ describe('component utils', () => {
   });
 
   describe('isContainerType', () => {
-    for (const containerType of [
-      ContainerType.Vertical,
-      ContainerType.Sequential,
-      ContainerType.Chapter,
-      ContainerType.Unit,
-      ContainerType.Subsection,
-      ContainerType.Section,
-    ] as const) {
+    for (
+      const containerType of [
+        ContainerType.Vertical,
+        ContainerType.Sequential,
+        ContainerType.Chapter,
+        ContainerType.Unit,
+        ContainerType.Subsection,
+        ContainerType.Section,
+      ] as const
+    ) {
       it(`returns true for '${containerType}'`, () => {
         expect(isContainerType(containerType)).toBe(true);
       });
@@ -190,30 +192,34 @@ describe('component utils', () => {
   });
 
   describe('isContainerUsageKey', () => {
-    for (const usageKey of [
-      'lct:org:lib:section:my-section-9284e2',
-      'lct:org:lib:subsection:my-subsection-9284e2',
-      'lct:org:lib:unit:my-unit-9284e2',
-      'block-v1:org+type@chapter+block@1',
-      'block-v1:org+type@sequential+block@1',
-      'block-v1:org+type@vertical+block@1',
-      'block-v1:org+type@section+block@1',
-      'block-v1:org+type@subsection+block@1',
-      'block-v1:org+type@unit+block@1',
-    ]) {
+    for (
+      const usageKey of [
+        'lct:org:lib:section:my-section-9284e2',
+        'lct:org:lib:subsection:my-subsection-9284e2',
+        'lct:org:lib:unit:my-unit-9284e2',
+        'block-v1:org+type@chapter+block@1',
+        'block-v1:org+type@sequential+block@1',
+        'block-v1:org+type@vertical+block@1',
+        'block-v1:org+type@section+block@1',
+        'block-v1:org+type@subsection+block@1',
+        'block-v1:org+type@unit+block@1',
+      ]
+    ) {
       it(`returns true for '${usageKey}'`, () => {
         expect(isContainerUsageKey(usageKey)).toBe(true);
       });
     }
 
-    for (const usageKey of [
-      'lb:org:lib:html:id',
-      'block-v1:org+type@problem+block@1',
-      'not a key',
-      '',
-      undefined,
-      null,
-    ]) {
+    for (
+      const usageKey of [
+        'lb:org:lib:html:id',
+        'block-v1:org+type@problem+block@1',
+        'not a key',
+        '',
+        undefined,
+        null,
+      ]
+    ) {
       it(`returns false for '${usageKey}'`, () => {
         expect(isContainerUsageKey(usageKey as any)).toBe(false);
       });
diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index eeccb719ed..9dc971a272 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -53,10 +53,6 @@ export const LibraryBlock = ({
   const intl = useIntl();
   const params = new URLSearchParams();
 
-  if (version === 0) {
-    return null;
-  }
-
   if (version) {
     params.set('version', version.toString());
   }
@@ -86,6 +82,10 @@ export const LibraryBlock = ({
 
   useIframeContent(iframeRef, setIframeRef);
 
+  if (version === 0) {
+    return null;
+  }
+
   return (
     <iframe
       ref={iframeRef}
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 872ab33808..0db9c84b95 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -104,17 +104,19 @@ const CompareChangesWidget = ({
 
   return (
     <div className="bg-light-300 py-2 px-1">
-      {sideBySide ? (
-        <Stack direction='horizontal' gap={3}>
-          {oldBlock}
-          {newBlock}
-        </Stack>
-      ) : (
-        <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle" mountOnEnter>
-          {oldBlock && <Tab eventKey="old" title={oldTabMessage}>{oldBlock}</Tab>}
-          <Tab eventKey="new" title={newTabMessage}>{newBlock}</Tab>
-        </Tabs>
-      )}
+      {sideBySide ?
+        (
+          <Stack direction="horizontal" gap={3}>
+            {oldBlock}
+            {newBlock}
+          </Stack>
+        ) :
+        (
+          <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle" mountOnEnter>
+            {oldBlock && <Tab eventKey="old" title={oldTabMessage}>{oldBlock}</Tab>}
+            <Tab eventKey="new" title={newTabMessage}>{newBlock}</Tab>
+          </Tabs>
+        )}
     </div>
   );
 };
diff --git a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
index 58270d4272..ee7ed919b1 100644
--- a/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
+++ b/src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx
@@ -43,19 +43,19 @@ const HistoryCompareChangesModal = ({
       isOpen={isOpen}
       onClose={onClose}
       size="xl"
-      className={classNames({'w-xl-100 mw-xl': sideBySide})}
+      className={classNames({ 'w-xl-100 mw-xl': sideBySide })}
       title={title}
       isOverflowVisible={false}
     >
       <ModalDialog.Header>
         <ModalDialog.Title>
-          <Stack direction='horizontal' gap={2}>
+          <Stack direction="horizontal" gap={2}>
             <FormattedMessage
               {...messages.previewChangesTitle}
               values={{
                 title: (
                   <>
-                    <Icon size='lg' src={getItemIcon(blockType)} className="mr-1" />
+                    <Icon size="lg" src={getItemIcon(blockType)} className="mr-1" />
                     {oldTitle}
                   </>
                 ),
diff --git a/src/library-authoring/generic/history-log/HistoryLog.tsx b/src/library-authoring/generic/history-log/HistoryLog.tsx
index 1c001e6bc0..230a9c8c92 100644
--- a/src/library-authoring/generic/history-log/HistoryLog.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLog.tsx
@@ -151,6 +151,7 @@ export const HistoryContainerLog = ({ containerId }: { containerId: string; }) =
     <div className="history-log">
       {draftHistory && draftHistory.length !== 0 && (
         <HistoryDraftLogGroup
+          itemId={containerId}
           displayName={container?.displayName ?? ''}
           entries={draftHistory}
         />

From b9e08f8b8c490ab00d23934e082fe5da11c722bf Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 30 Apr 2026 12:43:44 +0530
Subject: [PATCH 12/13] fix(history-log): hide actions for containers

---
 .../generic/history-log/HistoryLogGroup.tsx   |   1 -
 .../history-log/HistoryLogGroupEntries.tsx    | 126 +++++++++---------
 2 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
index 93ce1ca364..6c9c6d00e5 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroup.tsx
@@ -7,7 +7,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useLibraryPublishHistoryEntries } from '@src/library-authoring/data/apiHooks';
 import { LoadingSpinner } from '@src/generic/Loading';
-import { isContainerUsageKey } from '@src/generic/key-utils';
 
 import { LibraryHistoryEntry, LibraryPublishHistoryGroup } from '../../data/api';
 import messages from './messages';
diff --git a/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx b/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
index 805021eaa4..c1885c79c2 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
@@ -4,6 +4,7 @@ import messages from './messages';
 import { Dropdown, Icon, IconButton, Stack } from '@openedx/paragon';
 import { ContributorAvatar } from './ContributorAvatars';
 import { getItemIcon } from '@src/generic/block-type-utils';
+import { isContainerUsageKey } from '@src/generic/key-utils';
 import moment from 'moment';
 import { MoreVert } from '@openedx/paragon/icons';
 import { useToggleWithValue } from '@src/hooks';
@@ -19,7 +20,9 @@ export const HistoryLogGroupEntries = ({
   entries,
 }: HistoryLogGroupEntriesProps) => {
   const intl = useIntl();
-  const [isChangeModalOpen, changeModalData, openChangeModal, closeChangeModal] = useToggleWithValue<LibraryHistoryEntry>();
+  const [isChangeModalOpen, changeModalData, openChangeModal, closeChangeModal] = useToggleWithValue<
+    LibraryHistoryEntry
+  >();
 
   const getEntryMessage = (entry: LibraryHistoryEntry) => {
     switch (entry.action) {
@@ -36,67 +39,70 @@ export const HistoryLogGroupEntries = ({
 
   return (
     <>
-    <Stack gap={0}>
-      <div className="history-log-vert" />
-      {entries.map((entry, index, arr) => {
-        const isLast = index === arr.length - 1;
-        const entryMessage = getEntryMessage(entry);
+      <Stack gap={0}>
+        <div className="history-log-vert" />
+        {entries.map((entry, index, arr) => {
+          const isLast = index === arr.length - 1;
+          const entryMessage = getEntryMessage(entry);
 
-        return (
-          <div key={entry.changedAt}>
-            <Stack direction="horizontal" gap={2} className="ml-1.5">
-              <ContributorAvatar
-                username={entry.contributor?.username || intl.formatMessage(messages.historyEntryDefaultUser)}
-                src={entry.contributor?.profileImageUrls.medium}
-                className="history-log-group-avatar small-avatar"
-                size="sm"
-              />
-              <Stack>
-                <Stack direction="horizontal" gap={1}>
-                  <FormattedMessage
-                    {...entryMessage}
-                    values={{
-                      user: entry.contributor?.username ?? intl.formatMessage(messages.historyEntryDefaultUser),
-                      displayName: <span className="history-log-title text-truncate">{entry.title}</span>,
-                      icon: <Icon src={getItemIcon(entry.itemType)} />,
-                    }}
-                  />
+          return (
+            <div key={entry.changedAt}>
+              <Stack direction="horizontal" gap={2} className="ml-1.5">
+                <ContributorAvatar
+                  username={entry.contributor?.username || intl.formatMessage(messages.historyEntryDefaultUser)}
+                  src={entry.contributor?.profileImageUrls.medium}
+                  className="history-log-group-avatar small-avatar"
+                  size="sm"
+                />
+                <Stack>
+                  <Stack direction="horizontal" gap={1}>
+                    <FormattedMessage
+                      {...entryMessage}
+                      values={{
+                        user: entry.contributor?.username ?? intl.formatMessage(messages.historyEntryDefaultUser),
+                        displayName: <span className="history-log-title text-truncate">{entry.title}</span>,
+                        icon: <Icon src={getItemIcon(entry.itemType)} />,
+                      }}
+                    />
+                  </Stack>
+                  <span className="small text-gray-500">
+                    {moment(entry.changedAt).fromNow()}
+                  </span>
                 </Stack>
-                <span className="small text-gray-500">
-                  {moment(entry.changedAt).fromNow()}
-                </span>
+                {!isContainerUsageKey(itemId) &&
+                  (
+                    <Dropdown>
+                      <Dropdown.Toggle
+                        id="dropdown-toggle-with-iconbutton"
+                        as={IconButton}
+                        src={MoreVert}
+                        iconAs={Icon}
+                        variant="primary"
+                        aria-label={intl.formatMessage(messages.moreActions)}
+                      />
+                      <Dropdown.Menu>
+                        <Dropdown.Item onClick={() => openChangeModal(entry)}>
+                          {intl.formatMessage(messages.showThisVersion)}
+                        </Dropdown.Item>
+                      </Dropdown.Menu>
+                    </Dropdown>
+                  )}
               </Stack>
-              <Dropdown>
-                <Dropdown.Toggle
-                  id="dropdown-toggle-with-iconbutton"
-                  as={IconButton}
-                  src={MoreVert}
-                  iconAs={Icon}
-                  variant="primary"
-                  aria-label={intl.formatMessage(messages.moreActions)}
-                />
-                <Dropdown.Menu>
-                  <Dropdown.Item onClick={() => openChangeModal(entry)}>
-                    {intl.formatMessage(messages.showThisVersion)}
-                  </Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown>
-            </Stack>
-            {!isLast && <div className="history-log-vert" />}
-          </div>
-        );
-      })}
-    </Stack>
-    {isChangeModalOpen && changeModalData && (
-      <HistoryCompareChangesModal
-        isOpen={isChangeModalOpen}
-        onClose={closeChangeModal}
-        usageKey={itemId}
-        oldTitle={changeModalData.title}
-        oldVersion={changeModalData.oldVersion}
-        newVersion={changeModalData.newVersion || 'published'}
-      />
-    )}
-  </>
+              {!isLast && <div className="history-log-vert" />}
+            </div>
+          );
+        })}
+      </Stack>
+      {isChangeModalOpen && changeModalData && (
+        <HistoryCompareChangesModal
+          isOpen={isChangeModalOpen}
+          onClose={closeChangeModal}
+          usageKey={itemId}
+          oldTitle={changeModalData.title}
+          oldVersion={changeModalData.oldVersion}
+          newVersion={changeModalData.newVersion || 'published'}
+        />
+      )}
+    </>
   );
 };

From bf0d7ea89ab54160e9f2d46870ed05878a18322e Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 30 Apr 2026 12:50:04 +0530
Subject: [PATCH 13/13] fix(history-log): make dropdown toggle id unique

---
 .../generic/history-log/HistoryLogGroupEntries.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx b/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
index c1885c79c2..63801d3281 100644
--- a/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
+++ b/src/library-authoring/generic/history-log/HistoryLogGroupEntries.tsx
@@ -73,7 +73,7 @@ export const HistoryLogGroupEntries = ({
                   (
                     <Dropdown>
                       <Dropdown.Toggle
-                        id="dropdown-toggle-with-iconbutton"
+                        id={`dropdown-toggle-${itemId}-${entry.changedAt}-${index}`}
                         as={IconButton}
                         src={MoreVert}
                         iconAs={Icon}