feat: History log for Components

Author: ChrisChV

src/library-authoring/component-info/ComponentDetails.test.tsx

@@ -10,7 +10,10 @@ import { mockFetchIndexDocuments, mockContentSearchConfig } from '@src/search-ma
 import {
   mockContentLibrary,
   mockGetEntityLinks,
+  mockLibraryBlockDraftHistory,
   mockLibraryBlockMetadata,
+  mockLibraryBlockPublishHistory,
+  mockLibraryBlockPublishHistoryEntries,
   mockXBlockAssets,
   mockXBlockOLX,
 } from '../data/api.mocks';
@@ -21,6 +24,9 @@ import ComponentDetails from './ComponentDetails';
 mockContentSearchConfig.applyMock();
 mockContentLibrary.applyMock();
 mockLibraryBlockMetadata.applyMock();
+mockLibraryBlockDraftHistory.applyMock();
+mockLibraryBlockPublishHistory.applyMock();
+mockLibraryBlockPublishHistoryEntries.applyMock();
 mockXBlockAssets.applyMock();
 mockXBlockOLX.applyMock();
 mockGetEntityLinks.applyMock();
@@ -96,11 +102,7 @@ describe('<ComponentDetails />', () => {
 
   it('should render the component history', async () => {
     render(mockLibraryBlockMetadata.usageKeyPublished);
-    // Show created date
-    expect(await screen.findByText('June 20, 2024')).toBeInTheDocument();
-    // Show modified date
-    expect(await screen.findByText('June 21, 2024')).toBeInTheDocument();
-    // Show last published date
-    expect(await screen.findByText('June 22, 2024')).toBeInTheDocument();
+    // Show created group (no draft or publish history for this usage key)
+    expect(await screen.findByText(/Author created this component/i)).toBeInTheDocument();
   });
 });

src/library-authoring/component-info/ComponentDetails.tsx

@@ -1,14 +1,14 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Stack } from '@openedx/paragon';
 
-import AlertError from '../../generic/alert-error';
-import Loading from '../../generic/Loading';
+import AlertError from '@src/generic/alert-error';
+import Loading from '@src/generic/Loading';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { useLibraryBlockMetadata } from '../data/apiHooks';
-import HistoryWidget from '../generic/history-widget';
 import { ComponentAdvancedInfo } from './ComponentAdvancedInfo';
 import { ComponentUsage } from './ComponentUsage';
 import messages from './messages';
+import { HistoryComponentLog } from '../generic/history-log/HistoryLog';
 
 const ComponentDetails = () => {
   const { sidebarItemInfo } = useSidebarContext();
@@ -48,7 +48,10 @@ const ComponentDetails = () => {
         <h3 className="h5">
           <FormattedMessage {...messages.detailsTabHistoryTitle} />
         </h3>
-        <HistoryWidget {...componentMetadata} />
+        <HistoryComponentLog
+          componentId={usageKey}
+          displayName={componentMetadata.displayName}
+        />
       </>
       <ComponentAdvancedInfo />
     </Stack>

src/library-authoring/data/api.mocks.ts

@@ -258,6 +258,7 @@ mockCreateLibraryBlock.newHtmlData = {
   publishedBy: null, // or e.g. 'test_author',
   lastDraftCreated: '2024-07-22T21:37:49Z',
   lastDraftCreatedBy: null,
+  createdBy: null,
   created: '2024-07-22T21:37:49Z',
   modified: '2024-07-22T21:37:49Z',
   tagsCount: 0,
@@ -273,6 +274,7 @@ mockCreateLibraryBlock.newProblemData = {
   publishedBy: null, // or e.g. 'test_author',
   lastDraftCreated: '2024-07-22T21:37:49Z',
   lastDraftCreatedBy: null,
+  createdBy: null,
   created: '2024-07-22T21:37:49Z',
   modified: '2024-07-22T21:37:49Z',
   tagsCount: 0,
@@ -288,6 +290,7 @@ mockCreateLibraryBlock.newVideoData = {
   publishedBy: null, // or e.g. 'test_author',
   lastDraftCreated: '2024-07-22T21:37:49Z',
   lastDraftCreatedBy: null,
+  createdBy: null,
   created: '2024-07-22T21:37:49Z',
   modified: '2024-07-22T21:37:49Z',
   tagsCount: 0,
@@ -459,6 +462,7 @@ mockLibraryBlockMetadata.dataNeverPublished = {
   lastDraftCreated: null,
   lastDraftCreatedBy: null,
   hasUnpublishedChanges: true,
+  createdBy: null,
   created: '2024-06-20T13:54:21Z',
   modified: '2024-06-21T13:54:21Z',
   tagsCount: 0,
@@ -478,6 +482,7 @@ mockLibraryBlockMetadata.dataPublished = {
   created: '2024-06-20T13:54:21Z',
   modified: '2024-06-21T13:54:21Z',
   tagsCount: 0,
+  createdBy: null,
   collections: [],
 } satisfies api.LibraryBlockMetadata;
 mockLibraryBlockMetadata.usageKeyPublishDisabled = 'lb:Axim:TEST2-disabled:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
@@ -504,6 +509,7 @@ mockLibraryBlockMetadata.dataWithCollections = {
   lastDraftCreated: null,
   lastDraftCreatedBy: '2024-06-20T20:00:00Z',
   hasUnpublishedChanges: false,
+  createdBy: null,
   created: '2024-06-20T13:54:21Z',
   modified: '2024-06-21T13:54:21Z',
   tagsCount: 0,
@@ -521,6 +527,7 @@ mockLibraryBlockMetadata.dataPublishedWithChanges = {
   lastDraftCreated: null,
   lastDraftCreatedBy: '2024-06-20T20:00:00Z',
   hasUnpublishedChanges: true,
+  createdBy: null,
   created: '2024-06-20T13:54:21Z',
   modified: '2024-06-23T13:54:21Z',
   tagsCount: 0,
@@ -741,6 +748,7 @@ mockGetContainerChildren.childTemplate = {
   publishedBy: null,
   lastDraftCreated: null,
   lastDraftCreatedBy: null,
+  createdBy: null,
   hasUnpublishedChanges: false,
   created: null,
   modified: null,
@@ -1229,6 +1237,136 @@ mockGetCourseImports.applyMock = () =>
     'getCourseImports',
   ).mockImplementation(mockGetCourseImports);
 
+/**
+ * Mock for `getLibraryBlockDraftHistory()`
+ *
+ * Use `mockLibraryBlockDraftHistory.applyMock()` to apply it to the whole test suite.
+ */
+export async function mockLibraryBlockDraftHistory(usageKey: string): Promise<api.LibraryHistoryEntry[]> {
+  const thisMock = mockLibraryBlockDraftHistory;
+  switch (usageKey) {
+    case thisMock.usageKey: return thisMock.data;
+    case thisMock.usageKeyEmpty: return [];
+    default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
+  }
+}
+mockLibraryBlockDraftHistory.usageKey = 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1';
+mockLibraryBlockDraftHistory.usageKeyEmpty = 'lb:Axim:TEST2:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
+const mockContributor = (username: string): api.LibraryPublishContributor => ({
+  username,
+  profileImageUrls: {
+    full: 'icon/mock/path',
+    large: 'icon/mock/path',
+    medium: 'icon/mock/path',
+    small: 'icon/mock/path',
+  },
+});
+
+mockLibraryBlockDraftHistory.data = [
+  {
+    changedBy: mockContributor('test_user_1'),
+    changedAt: '2026-03-16T11:00:00Z',
+    title: 'Electron Arcs',
+    action: 'edited',
+    blockType: 'html',
+  },
+  {
+    changedBy: mockContributor('test_user_2'),
+    changedAt: '2026-03-13T10:00:00Z',
+    title: 'More on Quarks',
+    action: 'renamed',
+    blockType: 'html',
+  },
+] satisfies api.LibraryHistoryEntry[];
+mockLibraryBlockDraftHistory.applyMock = () => jest.spyOn(api, 'getLibraryBlockDraftHistory').mockImplementation(mockLibraryBlockDraftHistory);
+
+/**
+ * Mock for `getLibraryBlockPublishHistory()`
+ *
+ * Use `mockLibraryBlockPublishHistory.applyMock()` to apply it to the whole test suite.
+ */
+export async function mockLibraryBlockPublishHistory(usageKey: string): Promise<api.LibraryPublishHistoryGroup[]> {
+  const thisMock = mockLibraryBlockPublishHistory;
+  switch (usageKey) {
+    case thisMock.usageKeyWithGroups: return thisMock.data;
+    case thisMock.usageKeyEmpty: return [];
+    default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
+  }
+}
+mockLibraryBlockPublishHistory.usageKeyWithGroups = 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1';
+mockLibraryBlockPublishHistory.usageKeyEmpty = 'lb:Axim:TEST2:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
+mockLibraryBlockPublishHistory.data = [
+  {
+    publishLogUuid: 'abc-123',
+    title: 'Protons',
+    blockType: 'html',
+    publishedBy: 'author',
+    publishedAt: '2026-03-14T10:00:00Z',
+    contributors: ['test_user_1', 'test_user_2', 'test_user_3', 'test_user_4', 'test_user_5'].map(mockContributor),
+    contributorsCount: 5,
+  },
+] satisfies api.LibraryPublishHistoryGroup[];
+mockLibraryBlockPublishHistory.applyMock = () => jest.spyOn(api, 'getLibraryBlockPublishHistory').mockImplementation(mockLibraryBlockPublishHistory);
+
+/**
+ * Mock for `getLibraryBlockPublishHistoryEntries()`
+ *
+ * Use `mockLibraryBlockPublishHistoryEntries.applyMock()` to apply it to the whole test suite.
+ */
+export async function mockLibraryBlockPublishHistoryEntries(
+  _usageKey: string,
+  _publishGroupId: string,
+): Promise<api.LibraryHistoryEntry[]> {
+  return mockLibraryBlockPublishHistoryEntries.data;
+}
+mockLibraryBlockPublishHistoryEntries.data = [
+  {
+    changedBy: mockContributor('test_user'),
+    changedAt: '2026-03-10T09:00:00Z',
+    title: 'Protons',
+    action: 'edited',
+    blockType: 'html',
+  },
+] satisfies api.LibraryHistoryEntry[];
+mockLibraryBlockPublishHistoryEntries.applyMock = () => jest.spyOn(
+  api,
+  'getLibraryBlockPublishHistoryEntries',
+).mockImplementation(mockLibraryBlockPublishHistoryEntries);
+
+/**
+ * Mock for `getLibraryBlockCreationEntry()`
+ *
+ * Use `mockLibraryBlockCreationEntry.applyMock()` to apply it to the whole test suite.
+ */
+export async function mockLibraryBlockCreationEntry(usageKey: string): Promise<api.LibraryHistoryEntry> {
+  const thisMock = mockLibraryBlockCreationEntry;
+  switch (usageKey) {
+    case thisMock.usageKeyThatNeverLoads:
+      return new Promise<any>(() => {});
+    case thisMock.usageKey: return thisMock.data;
+    case thisMock.usageKeyEmpty: return thisMock.dataEmpty;
+    default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
+  }
+}
+mockLibraryBlockCreationEntry.usageKeyThatNeverLoads = 'lb:Axim:infiniteLoading:html:123';
+mockLibraryBlockCreationEntry.usageKey = 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1';
+mockLibraryBlockCreationEntry.usageKeyEmpty = 'lb:Axim:TEST2:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
+mockLibraryBlockCreationEntry.data = {
+  changedBy: mockContributor('author'),
+  changedAt: '2024-01-01T00:00:00Z',
+  title: 'Introduction to Testing 1',
+  blockType: 'html',
+  action: 'created',
+} satisfies api.LibraryHistoryEntry;
+mockLibraryBlockCreationEntry.dataEmpty = {
+  changedBy: mockContributor('Author'),
+  changedAt: '2024-01-01T00:00:00Z',
+  title: 'Introduction to Testing 2',
+  blockType: 'html',
+  action: 'created',
+} satisfies api.LibraryHistoryEntry;
+mockLibraryBlockCreationEntry.applyMock = () => jest.spyOn(api, 'getLibraryBlockCreationEntry').mockImplementation(mockLibraryBlockCreationEntry);
+
 export const mockGetMigrationInfo = {
   applyMock: () =>
     jest.spyOn(api, 'getMigrationInfo').mockResolvedValue(

src/library-authoring/data/api.ts

@@ -55,6 +55,26 @@ export const getLibraryBlockCollectionsUrl = (usageKey: string) =>
  */
 export const getLibraryBlockHierarchyUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}hierarchy/`;
 
+/**
+ * Get the URL for the component draft history.
+ */
+export const getLibraryBlockDraftHistoryUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}draft_history/`;
+
+/**
+ * Get the URL for the component publish history.
+ */
+export const getLibraryBlockPublishHistoryUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}publish_history/`;
+
+/**
+ * Get the URL for the entries of a publish group.
+ */
+export const getLibraryBlockPublishHistoryEntriesUrl = (usageKey: string, publishGroupId: string) => `${getLibraryBlockMetadataUrl(usageKey)}publish_history/${publishGroupId}/entries/`
+
+/**
+ * Get the URL for the creation entry of a component.
+ */
+export const getLibraryBlockCreationEntryUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}creation_entry/`;
+
 /**
  * Get the URL for content library list API.
  */
@@ -332,6 +352,7 @@ export interface LibraryBlockMetadata {
   lastDraftCreatedBy: string | null;
   hasUnpublishedChanges: boolean;
   created: string | null;
+  createdBy: string | null;
   modified: string | null;
   tagsCount: number;
   collections: CollectionMetadata[];
@@ -932,3 +953,63 @@ export async function getModulestoreMigrationBlocksInfo(
   const { data } = await client.get(getModulestoreMigratedBlocksInfoUrl(), { params });
   return camelCaseObject(data);
 }
+
+export interface LibraryPublishHistoryGroup {
+  publishLogUuid: string;
+  title: string;
+  publishedBy: string;
+  publishedAt: string;
+  blockType: string;
+  contributors: LibraryPublishContributor[];
+  contributorsCount: number;
+}
+
+export interface LibraryPublishContributor {
+  profileImageUrls: {
+    full: string;
+    large: string;
+    medium: string;
+    small: string;
+  };
+  username: string;
+}
+
+export interface LibraryHistoryEntry {
+  changedBy: LibraryPublishContributor;
+  changedAt: string;
+  title: string;
+  blockType: string;
+  action: 'edited' | 'renamed' | 'created';
+}
+
+/**
+ * Get the publish history for a library block.
+ */
+export async function getLibraryBlockPublishHistory(usageKey: string): Promise<LibraryPublishHistoryGroup[]> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockPublishHistoryUrl(usageKey));
+  return camelCaseObject(data);
+}
+
+/**
+ * Get the entries for a publish history group of a library block.
+ */
+export async function getLibraryBlockPublishHistoryEntries(usageKey: string, publishGroupId: string): Promise<LibraryHistoryEntry[]> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockPublishHistoryEntriesUrl(usageKey, publishGroupId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Get the draft history for a library block.
+ */
+export async function getLibraryBlockDraftHistory(usageKey: string): Promise<LibraryHistoryEntry[]> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockDraftHistoryUrl(usageKey));
+  return camelCaseObject(data);
+}
+
+/**
+ * Get the creation entry for a library block.
+ */
+export async function getLibraryBlockCreationEntry(usageKey: string): Promise<LibraryHistoryEntry> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockCreationEntryUrl(usageKey));
+  return camelCaseObject(data);
+}