From 1d27341ffb1207f9eed00a1799e3ced9bb6e8189 Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Wed, 16 Oct 2024 22:40:15 -0700
Subject: [PATCH 1/5] feat: view for comparing published version of library
 block to previous

---
 src/index.jsx                                 |  8 +++-
 .../LibraryBlock/LibraryBlock.tsx             |  7 +++-
 .../CompareChangesWidget.tsx                  | 37 +++++++++++++++++++
 src/library-authoring/index.tsx               |  1 +
 .../PreviewChangesEmbed.tsx                   | 33 +++++++++++++++++
 5 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/library-authoring/component-comparison/CompareChangesWidget.tsx
 create mode 100644 src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx

diff --git a/src/index.jsx b/src/index.jsx
index 29d0a9ac5e..933e67f401 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -16,7 +16,12 @@ import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import { logError } from '@edx/frontend-platform/logging';
 import messages from './i18n';
 
-import { ComponentPicker, CreateLibrary, LibraryLayout } from './library-authoring';
+import {
+  ComponentPicker,
+  CreateLibrary,
+  LibraryLayout,
+  PreviewChangesEmbed,
+} from './library-authoring';
 import initializeStore from './store';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
@@ -56,6 +61,7 @@ const App = () => {
         <Route path="/library/create" element={<CreateLibrary />} />
         <Route path="/library/:libraryId/*" element={<LibraryLayout />} />
         <Route path="/component-picker" element={<ComponentPicker />} />
+        <Route path="/legacy/preview-changes/:usageKey" element={<PreviewChangesEmbed />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (
diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index dd49206123..efdfd5b56a 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -7,6 +7,7 @@ import messages from './messages';
 interface LibraryBlockProps {
   onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
   usageKey: string;
+  version?: 'published' | 'draft' | number;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -17,7 +18,7 @@ interface LibraryBlockProps {
  * cannot access things like the user's cookies, nor can it make GET/POST
  * requests as the user. However, it is allowed to call any XBlock handlers.
  */
-const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
+const LibraryBlock = ({ onBlockNotification, usageKey, version }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(600);
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
@@ -62,6 +63,8 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
     };
   }, []);
 
+  const queryStr = version ? `?version=${version}` : '';
+
   return (
     <div style={{
       height: `${iFrameHeight}px`,
@@ -74,7 +77,7 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
       <iframe
         ref={iframeRef}
         title={intl.formatMessage(messages.iframeTitle)}
-        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
+        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/${queryStr}`}
         data-testid="block-preview"
         style={{
           width: '100%',
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
new file mode 100644
index 0000000000..dd6b46790e
--- /dev/null
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -0,0 +1,37 @@
+import { Tab, Tabs } from '@openedx/paragon';
+import { Helmet } from 'react-helmet';
+import { useSearchParams } from 'react-router-dom';
+
+import { LibraryBlock } from '../LibraryBlock';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+
+interface Props {
+  usageKey: string;
+}
+
+const CompareChangesWidget = ({ usageKey }: Props) => {
+  const { data: metadata } = useLibraryBlockMetadata(usageKey);
+
+  const [queryString] = useSearchParams();
+  const oldVersion = parseInt(queryString.get('old') ?? '', 10) || 'draft';
+
+  return (
+    <div>
+      <Helmet><title>Compare Changes | {metadata?.displayName ?? ''} | {process.env.SITE_NAME}</title></Helmet>
+      <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle">
+        <Tab eventKey="old" title="Old version">
+          <div className="p-2 bg-white">
+            <LibraryBlock usageKey={usageKey} version={oldVersion} />
+          </div>
+        </Tab>
+        <Tab eventKey="new" title="New version">
+          <div className="p-2 bg-white">
+            <LibraryBlock usageKey={usageKey} version="published" />
+          </div>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+
+export default CompareChangesWidget;
diff --git a/src/library-authoring/index.tsx b/src/library-authoring/index.tsx
index 5318ffbe37..91100f0906 100644
--- a/src/library-authoring/index.tsx
+++ b/src/library-authoring/index.tsx
@@ -2,3 +2,4 @@ export { default as LibraryLayout } from './LibraryLayout';
 export { ComponentPicker } from './component-picker';
 export { CreateLibrary } from './create-library';
 export { libraryAuthoringQueryKeys, useContentLibraryV2List } from './data/apiHooks';
+export { default as PreviewChangesEmbed } from './legacy-integration/PreviewChangesEmbed';
diff --git a/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx b/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
new file mode 100644
index 0000000000..00bd80c476
--- /dev/null
+++ b/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
@@ -0,0 +1,33 @@
+import { useParams } from 'react-router-dom';
+
+import { LibraryProvider } from '../common/context';
+import { getLibraryId } from '../../generic/key-utils';
+import CompareChangesWidget from '../component-comparison/CompareChangesWidget';
+
+/**
+ * This view is only used to support the legacy UI.
+ * On the legacy unit page, when a v2 library block has been used in a course
+ * AND an updated version of that block is available, this view is rendered in
+ * an iframe in a modal, and allows the author to preview the changes before
+ * accepting them (before syncing the course version with the latest library
+ * version).
+ *
+ * The inner <CompareChangesWidget> will be used by this MFE as well, on the
+ * new MFE unit page.
+ */
+const PreviewChangesEmbed = () => {
+  const { usageKey } = useParams();
+  if (usageKey === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Error: route is missing usageKey.');
+  }
+  const libraryId = getLibraryId(usageKey);
+
+  return (
+    <LibraryProvider libraryId={libraryId}>
+      <CompareChangesWidget usageKey={usageKey} />
+    </LibraryProvider>
+  );
+};
+
+export default PreviewChangesEmbed;

From 52356f717b3d16e3fc1195422c62431fdce57faf Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 17 Oct 2024 17:34:09 -0700
Subject: [PATCH 2/5] refactor: shuffle things around properly and fix i18n

---
 .../CompareChangesWidget.tsx                  | 30 +++++++++++--------
 .../component-comparison/messages.ts          | 22 ++++++++++++++
 .../PreviewChangesEmbed.tsx                   | 15 ++++++++--
 3 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 src/library-authoring/component-comparison/messages.ts

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index dd6b46790e..3889c83f2d 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -1,32 +1,38 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
-import { Helmet } from 'react-helmet';
-import { useSearchParams } from 'react-router-dom';
 
 import { LibraryBlock } from '../LibraryBlock';
-import { useLibraryBlockMetadata } from '../data/apiHooks';
+
+import messages from './messages';
 
 interface Props {
   usageKey: string;
+  oldVersion?: number | 'draft' | 'published';
+  newVersion?: number | 'draft' | 'published';
 }
 
-const CompareChangesWidget = ({ usageKey }: Props) => {
-  const { data: metadata } = useLibraryBlockMetadata(usageKey);
-
-  const [queryString] = useSearchParams();
-  const oldVersion = parseInt(queryString.get('old') ?? '', 10) || 'draft';
+/**
+ * A widget with tabs that can be used to show the old version and the new
+ * version of a component (XBlock), so users can switch back and forth to spot
+ * the differences.
+ *
+ * In the future, it would be better to have a way of highlighting the changes
+ * or showing a diff.
+ */
+const CompareChangesWidget = ({ usageKey, oldVersion = 'published', newVersion = 'draft' }: Props) => {
+  const intl = useIntl();
 
   return (
     <div>
-      <Helmet><title>Compare Changes | {metadata?.displayName ?? ''} | {process.env.SITE_NAME}</title></Helmet>
       <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle">
-        <Tab eventKey="old" title="Old version">
+        <Tab eventKey="old" title={intl.formatMessage(messages.oldVersionTitle)}>
           <div className="p-2 bg-white">
             <LibraryBlock usageKey={usageKey} version={oldVersion} />
           </div>
         </Tab>
-        <Tab eventKey="new" title="New version">
+        <Tab eventKey="new" title={intl.formatMessage(messages.newVersionTitle)}>
           <div className="p-2 bg-white">
-            <LibraryBlock usageKey={usageKey} version="published" />
+            <LibraryBlock usageKey={usageKey} version={newVersion} />
           </div>
         </Tab>
       </Tabs>
diff --git a/src/library-authoring/component-comparison/messages.ts b/src/library-authoring/component-comparison/messages.ts
new file mode 100644
index 0000000000..89275918ad
--- /dev/null
+++ b/src/library-authoring/component-comparison/messages.ts
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  oldVersionTitle: {
+    id: 'course-authoring.library-authoring.component-comparison.oldVersion',
+    defaultMessage: 'Old version',
+    description: 'Title shown for old version when comparing changes',
+  },
+  newVersionTitle: {
+    id: 'course-authoring.library-authoring.component-comparison.newVersion',
+    defaultMessage: 'New version',
+    description: 'Title shown for new version when comparing changes',
+  },
+  iframeTitlePrefix: {
+    // This is only used in the "PreviewChangesEmbed" iframe for the legacy UI
+    id: 'course-authoring.library-authoring.component-comparison.iframeTitlePrefix',
+    defaultMessage: 'Compare Changes',
+    description: 'Title used for the compare changes dialog',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx b/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
index 00bd80c476..648ca83d64 100644
--- a/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
+++ b/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
@@ -1,8 +1,12 @@
-import { useParams } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { LibraryProvider } from '../common/context';
 import { getLibraryId } from '../../generic/key-utils';
 import CompareChangesWidget from '../component-comparison/CompareChangesWidget';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+import messages from '../component-comparison/messages';
 
 /**
  * This view is only used to support the legacy UI.
@@ -16,16 +20,23 @@ import CompareChangesWidget from '../component-comparison/CompareChangesWidget';
  * new MFE unit page.
  */
 const PreviewChangesEmbed = () => {
+  const intl = useIntl();
   const { usageKey } = useParams();
   if (usageKey === undefined) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
     throw new Error('Error: route is missing usageKey.');
   }
+  const [queryString] = useSearchParams();
+  const oldVersion = parseInt(queryString.get('old') ?? '', 10) || 'published';
   const libraryId = getLibraryId(usageKey);
+  const { data: metadata } = useLibraryBlockMetadata(usageKey);
 
   return (
     <LibraryProvider libraryId={libraryId}>
-      <CompareChangesWidget usageKey={usageKey} />
+      {/* It's not necessary since this will usually be in an <iframe>,
+          but it's good practice to set a title for any top level page */}
+      <Helmet><title>{intl.formatMessage(messages.iframeTitlePrefix)} | {metadata?.displayName ?? ''} | {process.env.SITE_NAME}</title></Helmet>
+      <CompareChangesWidget usageKey={usageKey} oldVersion={oldVersion} newVersion="published" />
     </LibraryProvider>
   );
 };

From 2175fd9bfb7cf9de76d92cef3d7547bb4212bae0 Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 17 Oct 2024 17:44:08 -0700
Subject: [PATCH 3/5] refactor: drive by fix: remove unneeded code

---
 src/library-authoring/library-info/LibraryInfoHeader.test.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/library-authoring/library-info/LibraryInfoHeader.test.tsx b/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
index 00e743afd2..855d68f441 100644
--- a/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
+++ b/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
@@ -30,10 +30,6 @@ describe('<LibraryInfoHeader />', () => {
     mockShowToast = mocks.mockShowToast;
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render Library info Header', async () => {
     render();
 

From fde91997e119b4166b7a6ab7d9010b2a14d4e9e0 Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 17 Oct 2024 17:57:51 -0700
Subject: [PATCH 4/5] test: add tests

---
 .../CompareChangesWidget.test.tsx             | 77 +++++++++++++++++++
 .../PreviewChangesEmbed.test.tsx              | 53 +++++++++++++
 2 files changed, 130 insertions(+)
 create mode 100644 src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
 create mode 100644 src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx

diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
new file mode 100644
index 0000000000..ef508eacd9
--- /dev/null
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
@@ -0,0 +1,77 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+  within,
+} from '../../testUtils';
+
+import CompareChangesWidget from './CompareChangesWidget';
+
+const usageKey = 'lb:org:lib:type:id';
+
+describe('<CompareChangesWidget />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('can compare published (old) and draft (new) versions by default', async () => {
+    render(<CompareChangesWidget usageKey={usageKey} />);
+
+    // By default we see the new version:
+    const newTab = screen.getByRole('tab', { name: 'New version' });
+    expect(newTab).toBeInTheDocument();
+    expect(newTab).toHaveClass('active');
+
+    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newIframe = within(newTabPanel).getByTitle('Preview');
+    expect(newIframe).toBeVisible();
+    expect(newIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=draft`,
+    );
+
+    // Now switch to the "old version" tab:
+    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    fireEvent.click(oldTab);
+
+    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    expect(oldTabPanel).toBeVisible();
+    const oldIframe = within(oldTabPanel).getByTitle('Preview');
+    expect(oldIframe).toBeVisible();
+    expect(oldIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+  });
+
+  it('can compare a specific old and published (new) version', async () => {
+    render(<CompareChangesWidget usageKey={usageKey} oldVersion={7} newVersion="published" />);
+
+    // By default we see the new version:
+    const newTab = screen.getByRole('tab', { name: 'New version' });
+    expect(newTab).toBeInTheDocument();
+    expect(newTab).toHaveClass('active');
+
+    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newIframe = within(newTabPanel).getByTitle('Preview');
+    expect(newIframe).toBeVisible();
+    expect(newIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+
+    // Now switch to the "old version" tab:
+    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    fireEvent.click(oldTab);
+
+    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    expect(oldTabPanel).toBeVisible();
+    const oldIframe = within(oldTabPanel).getByTitle('Preview');
+    expect(oldIframe).toBeVisible();
+    expect(oldIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=7`,
+    );
+  });
+});
diff --git a/src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx b/src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx
new file mode 100644
index 0000000000..bd1e143f2b
--- /dev/null
+++ b/src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx
@@ -0,0 +1,53 @@
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+  within,
+} from '../../testUtils';
+
+import PreviewChangesEmbed from './PreviewChangesEmbed';
+
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+const usageKey = mockLibraryBlockMetadata.usageKeyWithCollections;
+
+describe('<CompareChangesWidget />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('can compare published (old) and draft (new) versions by default', async () => {
+    render(<PreviewChangesEmbed />, {
+      path: '/legacy/preview-changes/:usageKey',
+      routerProps: { initialEntries: [`/legacy/preview-changes/${usageKey}/?old=13`] },
+    });
+
+    // By default we see the new version (the published version):
+    const newTab = screen.getByRole('tab', { name: 'New version' });
+    expect(newTab).toBeInTheDocument();
+    expect(newTab).toHaveClass('active');
+
+    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newIframe = within(newTabPanel).getByTitle('Preview');
+    expect(newIframe).toBeVisible();
+    expect(newIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+
+    // Now switch to the "old version" tab:
+    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    fireEvent.click(oldTab);
+
+    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    expect(oldTabPanel).toBeVisible();
+    const oldIframe = within(oldTabPanel).getByTitle('Preview');
+    expect(oldIframe).toBeVisible();
+    expect(oldIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=13`,
+    );
+  });
+});

From f15a12e10db9f292f355ee7bc6c74284908cfcbd Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Fri, 18 Oct 2024 10:15:02 -0700
Subject: [PATCH 5/5] refactor: Define 'VersionSpec' as an explicit type

---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx       | 8 ++++----
 src/library-authoring/LibraryBlock/index.ts               | 3 +--
 .../component-comparison/CompareChangesWidget.tsx         | 6 +++---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index efdfd5b56a..b76e2b1aea 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -4,10 +4,12 @@ import { getConfig } from '@edx/frontend-platform';
 
 import messages from './messages';
 
+export type VersionSpec = 'published' | 'draft' | number;
+
 interface LibraryBlockProps {
   onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
   usageKey: string;
-  version?: 'published' | 'draft' | number;
+  version?: VersionSpec;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -18,7 +20,7 @@ interface LibraryBlockProps {
  * cannot access things like the user's cookies, nor can it make GET/POST
  * requests as the user. However, it is allowed to call any XBlock handlers.
  */
-const LibraryBlock = ({ onBlockNotification, usageKey, version }: LibraryBlockProps) => {
+export const LibraryBlock = ({ onBlockNotification, usageKey, version }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(600);
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
@@ -92,5 +94,3 @@ const LibraryBlock = ({ onBlockNotification, usageKey, version }: LibraryBlockPr
     </div>
   );
 };
-
-export default LibraryBlock;
diff --git a/src/library-authoring/LibraryBlock/index.ts b/src/library-authoring/LibraryBlock/index.ts
index a6bb1665df..74638b8bc1 100644
--- a/src/library-authoring/LibraryBlock/index.ts
+++ b/src/library-authoring/LibraryBlock/index.ts
@@ -1,2 +1 @@
-/* eslint-disable-next-line import/prefer-default-export */
-export { default as LibraryBlock } from './LibraryBlock';
+export { LibraryBlock, type VersionSpec } from './LibraryBlock';
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 3889c83f2d..4a6e253033 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -1,14 +1,14 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
 
-import { LibraryBlock } from '../LibraryBlock';
+import { LibraryBlock, type VersionSpec } from '../LibraryBlock';
 
 import messages from './messages';
 
 interface Props {
   usageKey: string;
-  oldVersion?: number | 'draft' | 'published';
-  newVersion?: number | 'draft' | 'published';
+  oldVersion?: VersionSpec;
+  newVersion?: VersionSpec;
 }
 
 /**