feat: Update the history log to use the create entry

Author: ChrisChV

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

@@ -1292,6 +1292,40 @@ mockLibraryBlockPublishHistoryEntries.applyMock = () => jest.spyOn(
   '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(
     camelCaseObject({

src/library-authoring/data/api.ts

@@ -65,6 +65,11 @@ export const getLibraryBlockPublishHistoryUrl = (usageKey: string) => `${getLibr
  */
 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.
  */
@@ -948,7 +953,7 @@ export interface LibraryHistoryEntry {
   changedAt: string;
   title: string;
   blockType: string;
-  action: 'edited' | 'renamed';
+  action: 'edited' | 'renamed' | 'created';
 }
 
 /**
@@ -972,6 +977,13 @@ export async function getLibraryBlockPublishHistoryEntries(usageKey: string, pub
  */
 export async function getLibraryBlockDraftHistory(usageKey: string): Promise<LibraryHistoryEntry[]> {
   const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockDraftHistoryUrl(usageKey));
-  console.log(data);
+  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);
 }

src/library-authoring/data/apiHooks.ts

@@ -125,6 +125,7 @@ export const xblockQueryKeys = {
   draftHistory: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'draftHistory'],
   publishHistory: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'publishHistory'],
   publishHistoryEntries: (usageKey: string, publishGroupId: string) => [...xblockQueryKeys.xblock(usageKey), 'publishHistory', publishGroupId, 'entries'],
+  creationEntry: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'creationEntry'],
 
   /**
    * Predicate used to invalidate all metadata only (not OLX, fields, assets, etc.).
@@ -1060,6 +1061,16 @@ export const useLibraryBlockPublishHistoryEntries = (
   })
 );
 
+/**
+ * Returns the creation entry for a library block.
+ */
+export const useLibraryBlockCreationEntry = (usageKey: string | undefined) => (
+  useQuery({
+    queryKey: xblockQueryKeys.creationEntry(usageKey!),
+    queryFn: usageKey ? () => api.getLibraryBlockCreationEntry(usageKey) : skipToken,
+  })
+);
+
 /**
  * Returns the migration blocks info of a given library
  */

src/library-authoring/generic/history-log/HistoryLog.test.tsx

@@ -10,14 +10,14 @@ import {
   mockLibraryBlockDraftHistory,
   mockLibraryBlockPublishHistory,
   mockLibraryBlockPublishHistoryEntries,
-  mockLibraryBlockMetadata,
+  mockLibraryBlockCreationEntry,
 } from '../../data/api.mocks';
 import { HistoryComponentLog } from './HistoryLog';
 
 mockLibraryBlockDraftHistory.applyMock();
 mockLibraryBlockPublishHistory.applyMock();
 mockLibraryBlockPublishHistoryEntries.applyMock();
-mockLibraryBlockMetadata.applyMock();
+mockLibraryBlockCreationEntry.applyMock();
 
 const renderComponent = (componentId: string) => render(
   <HistoryComponentLog componentId={componentId} displayName="Test Component" />,
@@ -43,12 +43,12 @@ describe('<HistoryComponentLog />', () => {
   });
 
   it('shows loading spinner while fetching', () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyThatNeverLoads);
+    renderComponent(mockLibraryBlockCreationEntry.usageKeyThatNeverLoads);
     expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
   it('renders draft history group with entries when they exist', async () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    renderComponent(mockLibraryBlockCreationEntry.usageKey);
     const trigger = await findByTextContent(/Test Component is a draft/i);
     expect(trigger).toBeInTheDocument();
     fireEvent.click(trigger);
@@ -57,19 +57,19 @@ describe('<HistoryComponentLog />', () => {
   });
 
   it('does not render draft history group when there are no draft entries', async () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyPublished);
+    renderComponent(mockLibraryBlockCreationEntry.usageKeyEmpty);
     await waitFor(() => expect(screen.queryByRole('status')).not.toBeInTheDocument());
     expect(screen.queryByText('Test Component is a draft')).not.toBeInTheDocument();
   });
 
   it('renders publish history group when one exists', async () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    renderComponent(mockLibraryBlockCreationEntry.usageKey);
     expect(await findByTextContent(/author published.*Protons/i)).toBeInTheDocument();
     expect(await screen.findByText(/5 authors contributed/i)).toBeInTheDocument();
   });
 
   it('loads and shows publish history entries after expanding the publish group', async () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    renderComponent(mockLibraryBlockCreationEntry.usageKey);
     expect(await screen.findByText(/5 authors contributed/i)).toBeInTheDocument();
     const publishTrigger = await findByTextContent(/author published.*Protons/i);
 
@@ -79,13 +79,13 @@ describe('<HistoryComponentLog />', () => {
   });
 
   it('does not render publish history group when list is empty', async () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyPublished);
+    renderComponent(mockLibraryBlockCreationEntry.usageKeyEmpty);
     await waitFor(() => expect(screen.queryByRole('status')).not.toBeInTheDocument());
     expect(screen.queryByText(/published/i)).not.toBeInTheDocument();
   });
 
   it('always renders the created group with fallback user when createdBy is null', async () => {
-    renderComponent(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    renderComponent(mockLibraryBlockCreationEntry.usageKey);
     expect(await findByTextContent(/Author created.*Introduction to Testing 1/i)).toBeInTheDocument();
   });
 });

src/library-authoring/generic/history-log/HistoryLog.tsx

@@ -1,5 +1,9 @@
 import { LoadingSpinner } from "@src/generic/Loading";
-import { useLibraryBlockDraftHistory, useLibraryBlockMetadata, useLibraryBlockPublishHistory } from "@src/library-authoring/data/apiHooks";
+import {
+  useLibraryBlockCreationEntry,
+  useLibraryBlockDraftHistory,
+  useLibraryBlockPublishHistory,
+} from "@src/library-authoring/data/apiHooks";
 import { HistoryCreatedLogGroup, HistoryDraftLogGroup, HistoryPublishLogGroup } from "./HistoryLogGroup";
 
 export interface HistoryComponentLogProps {
@@ -22,11 +26,11 @@ export const HistoryComponentLog = ({
   } = useLibraryBlockPublishHistory(componentId);
 
   const {
-    data: componentData,
-    isPending: isPendingComponentData,
-  } = useLibraryBlockMetadata(componentId);
-  
-  if (isPendingDraftHistory || isPendingComponentData || isPendingPublishHistoryGroups) {
+    data: creationEntry,
+    isPending: isPendingCreationEntry,
+  } = useLibraryBlockCreationEntry(componentId); 
+
+  if (isPendingDraftHistory || isPendingPublishHistoryGroups || isPendingCreationEntry) {
     return <LoadingSpinner />
   }
 
@@ -50,12 +54,14 @@ export const HistoryComponentLog = ({
           )
         })
       )}
-      <HistoryCreatedLogGroup
-        user={componentData?.createdBy}
-        displayName={componentData?.displayName ?? ''}
-        itemType={componentData?.blockType ?? ''}
-        createdAt={componentData?.created ?? ''}
-      />
+      {creationEntry && (
+        <HistoryCreatedLogGroup
+          user={creationEntry.changedBy.username}
+          displayName={creationEntry.title}
+          itemType={creationEntry.blockType}
+          createdAt={creationEntry.changedAt}
+        />
+      )}
     </div>
   );
 };