Show workflow state transitions in the History list (#30)

Workflow rows now read like Volto: 'Publish (Private → Published)',
using the backend-translated state titles. Unlike Volto, no literal
'undefined' is shown when no previous state is known (e.g. creation);
those entries read 'Create (Private)'. This is an interim display until
the final action-label wording from the design is decided.

Author: mliebischer

packages/cmsui/components/History/HistoryView.test.tsx

@@ -240,6 +240,28 @@ describe('HistoryView', () => {
     expect(screen.getAllByRole('row')).toHaveLength(1);
   });
 
+  it('shows the workflow state transition like Volto', () => {
+    const entries = [
+      versionedEntry({ version: 2 }),
+      workflowEntry(),
+      workflowEntry({
+        action: null,
+        transition_title: 'Create',
+        review_state: 'private',
+        state_title: 'Private',
+        time: '2026-06-10T10:00:00+00:00',
+      }),
+    ] as GetHistoryResponse;
+    render(<HistoryView content={content} history={entries} />);
+
+    // transition with a known previous state
+    expect(
+      screen.getByText('Publish (Private → Published)'),
+    ).toBeInTheDocument();
+    // creation: no previous state, no Volto-style literal "undefined"
+    expect(screen.getByText('Create (Private)')).toBeInTheDocument();
+  });
+
   it('survives entries with an unparsable time', () => {
     render(
       <HistoryView

packages/cmsui/components/History/HistoryView.tsx

@@ -83,6 +83,37 @@ export function formatRelativeTime(iso: string, locale: string): string {
   return iso;
 }
 
+// Interim Volto-parity label for workflow rows: "Publish (Private → Published)",
+// or just "(Private)" when no previous state is known (e.g. creation) — unlike
+// Volto, which renders a literal "undefined" in that case. Uses the
+// backend-translated state titles, so it stays neutral on the final wording
+// ("Published from Private", Figma) that is still an open question in #30.
+export function workflowStateSuffix(
+  entry: HistoryEntry,
+  prevStateTitle: string | undefined,
+): string {
+  if (!('state_title' in entry) || !entry.state_title) return '';
+  const from = entry.action && prevStateTitle ? `${prevStateTitle} → ` : '';
+  return ` (${from}${entry.state_title})`;
+}
+
+// Walks the (newest-first) entries and returns, per index, the workflow state
+// title that was active BEFORE that entry (Volto's prev_state_title).
+export function deriveWorkflowPrevStates(
+  history: GetHistoryResponse,
+): (string | undefined)[] {
+  const prev: (string | undefined)[] = new Array(history.length);
+  let title: string | undefined;
+  for (let i = history.length - 1; i >= 0; i -= 1) {
+    const entry = history[i];
+    if ('state_title' in entry && entry.state_title) {
+      prev[i] = title;
+      title = entry.state_title;
+    }
+  }
+  return prev;
+}
+
 interface HistoryViewProps {
   content: Content;
   history: GetHistoryResponse;
@@ -141,6 +172,8 @@ export default function HistoryView({ content, history }: HistoryViewProps) {
   // revision. The current revision cannot be reverted to itself.
   const currentVersion = history.find((entry) => 'version' in entry)?.version;
 
+  const workflowPrevStates = deriveWorkflowPrevStates(history);
+
   // Breadcrumbs from the content's @components.breadcrumbs, mirroring the
   // inline Quanta breadcrumb of @plone/contents (ContentsTable) for a
   // consistent look. The root item carries the HomeIcon.
@@ -206,7 +239,7 @@ export default function HistoryView({ content, history }: HistoryViewProps) {
             </Column>
           </TableHeader>
           <TableBody>
-            {history.map((entry) => {
+            {history.map((entry, index) => {
               const versioned = 'version' in entry;
               const isCurrent = versioned && entry.version === currentVersion;
               // Stable row identity: after a revert the loader prepends a new
@@ -228,6 +261,7 @@ export default function HistoryView({ content, history }: HistoryViewProps) {
                         `}
                       />
                       {entry.transition_title}
+                      {workflowStateSuffix(entry, workflowPrevStates[index])}
                     </span>
                   </Cell>
                   <Cell>{entry.actor?.fullname}</Cell>