Add CMSUI History route scaffold (#30)

Register an @@history route in cmsui that lists content revisions via the
plone.restapi @history endpoint and supports reverting to a previous
version. Add a History toolbar button in publicui linking to the route,
plus en/de/it locale strings and towncrier news fragments.

Author: mliebischer

packages/cmsui/config/routes.ts

@@ -49,6 +49,17 @@ export default function install(config: ConfigType) {
           },
         ],
       },
+      {
+        type: 'prefix',
+        path: '@@history',
+        children: [
+          {
+            type: 'route',
+            path: '*',
+            file: '@plone/cmsui/routes/history.tsx',
+          },
+        ],
+      },
       {
         type: 'prefix',
         path: 'controlpanel',

packages/cmsui/locales/de/common.json

@@ -71,6 +71,10 @@
       "signInTo": "Bei {{site}} anmelden",
       "forgotPassword": "Passwort vergessen? <a>Neues Passwort anfordern</a>",
       "returnToHome": "Zur Startseite zurückkehren"
+    },
+    "history": {
+      "label": "Verlauf",
+      "revert": "Zurücksetzen"
     }
   }
 }

packages/cmsui/locales/en/common.json

@@ -119,6 +119,10 @@
       "signInTo": "Sign in to {{site}}",
       "forgotPassword": "Forgot password? Request a <a>new password</a>",
       "returnToHome": "Return to home page"
+    },
+    "history": {
+      "label": "History",
+      "revert": "Revert"
     }
   }
 }

packages/cmsui/locales/it/common.json

@@ -109,6 +109,10 @@
       "signInTo": "Accedi a {{site}}",
       "forgotPassword": "Password dimenticata? <a>Richiedi una nuova password</a>",
       "returnToHome": "Torna alla home page"
+    },
+    "history": {
+      "label": "Cronologia",
+      "revert": "Ripristina"
     }
   }
 }

packages/cmsui/news/30.feature

@@ -0,0 +1 @@
+Added a History route (`@@history`) that lists content revisions and supports reverting to a previous version.

packages/cmsui/routes/history.tsx

@@ -0,0 +1,78 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
+import {
+  data,
+  RouterContextProvider,
+  useFetcher,
+  useLoaderData,
+} from 'react-router';
+import { requireAuthCookie } from '@plone/react-router';
+import {
+  ploneClientContext,
+  ploneContentContext,
+} from '@plone/aurora/app/middleware.server';
+import { flattenToAppURL } from '@plone/helpers';
+import { useTranslation } from 'react-i18next';
+import type { GetHistoryResponse } from '@plone/types';
+
+export async function loader({
+  request,
+  context,
+}: LoaderFunctionArgs<RouterContextProvider>) {
+  await requireAuthCookie(request);
+
+  const cli = context.get(ploneClientContext);
+  const content = context.get(ploneContentContext);
+  const contentPath = content?.['@id'] ?? '/';
+
+  const { data: history } = await cli.getHistory({ path: contentPath });
+
+  return data(flattenToAppURL({ content, history }));
+}
+
+export async function action({
+  request,
+  context,
+}: ActionFunctionArgs<RouterContextProvider>) {
+  await requireAuthCookie(request);
+
+  const cli = context.get(ploneClientContext);
+  const content = context.get(ploneContentContext);
+  const contentPath = content?.['@id'] ?? '/';
+
+  const formData = await request.formData();
+  const version = Number(formData.get('version'));
+
+  await cli.revertHistory({ path: contentPath, data: { version } });
+
+  return data({ ok: true });
+}
+
+export default function History() {
+  const { content, history } = useLoaderData<typeof loader>();
+  const { t } = useTranslation();
+  const fetcher = useFetcher();
+
+  // TODO: replace this list with the quanta Table component and format the
+  // timestamp with @internationalized/date. See Volto's History.jsx for the
+  // full UX (version comparison/diff, state transitions).
+  return (
+    <main>
+      <h1>{t('cmsui.history.label')}</h1>
+      <p>{content['@id']}</p>
+      <ul>
+        {(history as GetHistoryResponse).map((entry, index) => (
+          <li key={index}>
+            <b>{entry.actor?.fullname}</b> {entry.transition_title} {entry.time}
+            {entry.comments ? <em> ({entry.comments})</em> : null}
+            {'version' in entry && entry.may_revert ? (
+              <fetcher.Form method="post" style={{ display: 'inline' }}>
+                <input type="hidden" name="version" value={entry.version} />
+                <button type="submit">{t('cmsui.history.revert')}</button>
+              </fetcher.Form>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

packages/publicui/news/30.feature

@@ -0,0 +1 @@
+Added a History button to the toolbar linking to the `@@history` route.

packages/publicui/routes/index.tsx

@@ -25,7 +25,7 @@ import {
 import i18next from '@plone/aurora/app/i18next.server';
 import { ploneContentContext } from '@plone/aurora/app/middleware.server';
 import type { RootLoader } from '@plone/aurora/app/root';
-import { FolderIcon } from '@plone/components/Icons';
+import { FolderIcon, HistoryIcon } from '@plone/components/Icons';
 import Pencil from '@plone/components/icons/pencil.svg?react';
 import SlotRenderer from '@plone/layout/slots/SlotRenderer';
 import Toolbar from '@plone/layout/components/Toolbar/Toolbar';
@@ -150,6 +150,20 @@ export default function Index() {
                 <FolderIcon />
               </Link>
             </Plug>
+            <Plug
+              pluggable="toolbar-top"
+              id="button-history"
+              // @ts-expect-error this is currently typed as never[]
+              dependencies={[location.pathname]}
+            >
+              <Link
+                className="secondary"
+                aria-label="History"
+                href={`/@@history${location.pathname.replace(/^\/$/, '')}`}
+              >
+                <HistoryIcon />
+              </Link>
+            </Plug>
             {showToolbar && <Toolbar />}
             <div id="main">
               <div className={clsx(styles.app, 'app-slot')}>