refactor: split container publish history groups by creation time

Author: ChrisChV

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

@@ -249,4 +249,62 @@ describe('<HistoryContainerLog />', () => {
     renderContainerComponent(mockLibraryContainerDraftHistory.containerKey);
     expect(await findByDeepTextContent(/author created.*Introduction to Testing Unit 1/i)).toBeInTheDocument();
   });
+
+  it('renders publish groups after container creation before the created entry', async () => {
+    // Default mock: publishedAt '2026-03-14' is after createdAt '2024-01-01'
+    renderContainerComponent(mockLibraryContainerDraftHistory.containerKey);
+    const publishGroup = await findByDeepTextContent(/container_author published.*Intro Unit/i);
+    const createdEntry = await findByDeepTextContent(/author created.*Introduction to Testing Unit 1/i);
+    expect(publishGroup.compareDocumentPosition(createdEntry)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  });
+
+  it('renders publish groups before container creation after the created entry', async () => {
+    const originalData = mockLibraryContainerPublishHistory.data;
+    mockLibraryContainerPublishHistory.data = [
+      {
+        ...originalData[0],
+        publishedAt: '2023-01-01T00:00:00Z', // before createdAt '2024-01-01'
+      },
+    ];
+    renderContainerComponent(mockLibraryContainerDraftHistory.containerKey);
+    const createdEntry = await findByDeepTextContent(/author created.*Introduction to Testing Unit 1/i);
+    expect(await screen.findByText(/2 authors contributed/i)).toBeInTheDocument();
+    // The publish group contributors should still appear
+    const contributorsText = screen.getByText(/2 authors contributed/i);
+    expect(createdEntry.compareDocumentPosition(contributorsText)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    mockLibraryContainerPublishHistory.data = originalData;
+  });
+
+  it('renders both pre-creation and post-creation publish groups in correct order', async () => {
+    const originalData = mockLibraryContainerPublishHistory.data;
+    mockLibraryContainerPublishHistory.data = [
+      {
+        ...originalData[0],
+        publishLogUuid: 'after-uuid',
+        publishedAt: '2026-01-01T00:00:00Z', // after createdAt '2024-01-01'
+        directPublishedEntities: [
+          { ...originalData[0].directPublishedEntities[0], entityKey: 'key-after', title: 'After Unit' },
+        ],
+        contributors: [],
+      },
+      {
+        ...originalData[0],
+        publishLogUuid: 'before-uuid',
+        publishedAt: '2023-01-01T00:00:00Z', // before createdAt '2024-01-01'
+        directPublishedEntities: [
+          { ...originalData[0].directPublishedEntities[0], entityKey: 'key-before', title: 'Before Unit' },
+        ],
+        contributors: [],
+      },
+    ];
+    renderContainerComponent(mockLibraryContainerDraftHistory.containerKey);
+    const afterGroup = await findByDeepTextContent(/container_author published.*After Unit/i);
+    const createdEntry = await findByDeepTextContent(/author created.*Introduction to Testing Unit 1/i);
+    // After-creation group comes before the created entry
+    expect(afterGroup.compareDocumentPosition(createdEntry)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    // Before-creation group title is hidden (hideLogVert=true, no contributors), so only the vert line renders
+    // Verify the after-group is visible but before-group title is not
+    expect(screen.queryByText(/container_author published.*Before Unit/i)).not.toBeInTheDocument();
+    mockLibraryContainerPublishHistory.data = originalData;
+  });
 });

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

@@ -10,6 +10,8 @@ import {
   useLibraryContainerPublishHistory,
 } from '@src/library-authoring/data/apiHooks';
 import { HistoryCreatedLogGroup, HistoryDraftLogGroup, HistoryPublishLogGroup } from './HistoryLogGroup';
+import { useMemo } from 'react';
+import { LibraryPublishHistoryGroup } from '@src/library-authoring/data/api';
 
 export const HistoryComponentLog = ({ componentId }: { componentId: string; }) => {
   const {
@@ -87,10 +89,45 @@ export const HistoryContainerLog = ({ containerId }: { containerId: string; }) =
     isPending: isPendingContainer,
   } = useContainer(containerId);
 
+  const creationTime = creationEntry?.changedAt;
+
+  const {
+    groupsAfterCreation,
+    groupsBeforeCreation,
+  } = useMemo(() => {
+    return {
+      groupsAfterCreation: publishHistoryGroups?.filter(
+        (group) => !creationTime || group.publishedAt >= creationTime,
+      ) ?? [],
+      groupsBeforeCreation: publishHistoryGroups?.filter(
+        (group) => creationTime && group.publishedAt < creationTime,
+      ) ?? [],
+    };
+  }, [publishHistoryGroups, creationTime]);
+
   if (isPendingDraftHistory || isPendingContainer || isPendingPublishHistoryGroups || isPendingCreationEntry) {
     return <LoadingSpinner />;
   }
 
+  const hasBeforeCreationGroups = groupsBeforeCreation.length > 0;
+
+  const renderPublishGroups = (
+    groups: LibraryPublishHistoryGroup[],
+    isBeforeGroup: boolean,
+  ) =>
+    groups.map((publishGroup, index, arr) => {
+      const isLast = index === arr.length - 1;
+      return (
+        <div key={`${publishGroup.publishLogUuid}-${publishGroup.directPublishedEntities[0].entityKey}`}>
+          <HistoryPublishLogGroup
+            {...publishGroup}
+            itemId={publishGroup.scopeEntityKey || containerId}
+            hideLogVert={isLast && isBeforeGroup}
+          />
+        </div>
+      );
+    });
+
   return (
     <div className="history-log">
       {draftHistory && draftHistory.length !== 0 && (
@@ -99,24 +136,17 @@ export const HistoryContainerLog = ({ containerId }: { containerId: string; }) =
           entries={draftHistory}
         />
       )}
-      {publishHistoryGroups && publishHistoryGroups.length !== 0 && (
-        publishHistoryGroups.map((publishGroup) => (
-          <div key={`${publishGroup.publishLogUuid}-${publishGroup.directPublishedEntities[0].entityKey}`}>
-            <HistoryPublishLogGroup
-              {...publishGroup}
-              itemId={publishGroup.scopeEntityKey || containerId}
-            />
-          </div>
-        ))
-      )}
+      {renderPublishGroups(groupsAfterCreation, false)}
       {creationEntry && (
         <HistoryCreatedLogGroup
           user={creationEntry.contributor?.username}
           displayName={creationEntry.title}
           itemType={creationEntry.itemType}
           createdAt={creationEntry.changedAt}
+          showLogVert={hasBeforeCreationGroups}
         />
       )}
+      {hasBeforeCreationGroups && renderPublishGroups(groupsBeforeCreation, true)}
     </div>
   );
 };

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

@@ -25,6 +25,7 @@ export interface HistoryCreatedLogGroupProps {
   displayName: string;
   itemType: string;
   createdAt: string;
+  showLogVert?: boolean;
 }
 
 export interface HistoryDraftLogGroupProps {
@@ -34,10 +35,12 @@ export interface HistoryDraftLogGroupProps {
 
 export interface HistoryLogGroupEntriesProps {
   entries: LibraryHistoryEntry[];
+  hideLastLogVert?: boolean;
 }
 
 export interface HistoryPublishLogGroupProps extends LibraryPublishHistoryGroup {
   itemId: string;
+  hideLogVert?: boolean;
 }
 
 interface ContributorAvatarProps {
@@ -102,6 +105,7 @@ const HistoryLogGroupTitle = ({
 
 const HistoryLogGroupEntries = ({
   entries,
+  hideLastLogVert,
 }: HistoryLogGroupEntriesProps) => {
   const intl = useIntl();
 
@@ -121,7 +125,8 @@ const HistoryLogGroupEntries = ({
   return (
     <Stack gap={0}>
       <div className="history-log-vert" />
-      {entries.map((entry) => {
+      {entries.map((entry, index, arr) => {
+        const isLast = index === arr.length - 1;
         const entryMessage = getEntryMessage(entry);
 
         return (
@@ -149,7 +154,7 @@ const HistoryLogGroupEntries = ({
                 </span>
               </Stack>
             </Stack>
-            <div className="history-log-vert" />
+            {!isLast && !hideLastLogVert && <div className="history-log-vert" />}
           </div>
         );
       })}
@@ -162,6 +167,7 @@ export const HistoryCreatedLogGroup = ({
   displayName,
   itemType,
   createdAt,
+  showLogVert,
 }: HistoryCreatedLogGroupProps) => {
   const intl = useIntl();
 
@@ -176,6 +182,7 @@ export const HistoryCreatedLogGroup = ({
         dateMessage={moment(createdAt).fromNow()}
         disableCollapsible
       />
+      {showLogVert && <div className="history-log-vert" />}
     </div>
   );
 };
@@ -247,6 +254,7 @@ export const HistoryPublishLogGroup = ({
   publishedBy,
   publishedAt,
   contributors,
+  hideLogVert,
 }: HistoryPublishLogGroupProps) => {
   const intl = useIntl();
   const [isOpenCollapsible, openCollapsible, closeCollapsible] = useToggle(false);
@@ -298,21 +306,36 @@ export const HistoryPublishLogGroup = ({
         ) :
         (
           <>
-            <HistoryLogGroupTitle titleMessage={titleMessage} dateMessage={dateMessage} disableCollapsible />
+            {!hideLogVert && (
+              <HistoryLogGroupTitle titleMessage={titleMessage} dateMessage={dateMessage} disableCollapsible />
+            )}
             <div className="history-log-vert" />
           </>
         )}
       {hasContributors && (
         <Stack direction="horizontal">
-          <div
-            className={classNames(
-              'history-log-vert',
-              {
-                'history-log-vert-long': !isOpenCollapsible,
-              },
+          {!hideLogVert && (
+            <div
+              className={classNames(
+                'history-log-vert',
+                {
+                  'history-log-vert-long': !isOpenCollapsible,
+                },
+              )}
+            />
+          )}
+          {!isOpenCollapsible &&
+            (
+              <div
+                className={classNames(
+                  {
+                    'ml-4 pl-1': hideLogVert,
+                  },
+                )}
+              >
+                <ContributorsAvatars contributors={contributors} />
+              </div>
             )}
-          />
-          {!isOpenCollapsible && <ContributorsAvatars contributors={contributors} />}
         </Stack>
       )}
     </div>