Migrate content viewer to React by dominickendrick · Pull Request #200 · guardian/flexible-restorer

dominickendrick · 2026-09-09T13:59:44Z

Note

This PR contains code generated by AI using Claude Opus 4.8. This was all reviewed by developers

What does this change?

This is the next step of the AngularJS → React migration described in rfc/react-frontend-migration.md. It migrates the snapshot content viewer (the article furniture, the sliding HTML/JSON body and the Restore / Copy / Export / toggle actions bar) to React, following the incremental bridge pattern established for the search form and sidebar. The rest of the AngularJS app keeps running unchanged.

The still-Angular SnapshotListCtrl remains authoritative for the active selection; the new React viewer loads the initial snapshot itself and then follows the existing snapshot-list:* mediator events, so keyboard navigation and the HTML/JSON toggle stay in sync across the Angular ↔ React boundary.

Migrated components

ContentViewer — replaces the snapshot-content block of restore-list.html and SnapshotContentCtrl, composed of:
- ContentActions — the Restore / Copy JSON / Export (Git & Zip) / Show JSON-Text toggle bar, using Stand Button/LinkButton.
- ContentFurniture — the headline / standfirst / trailText summary.
- ContentPanels — the 200%-wide sliding track holding the HTML and JSON columns.
- article/* (ArticleBody, ArticleElementView, ListElementView, TimelineElementView, RawHtml) — renders the parsed article body.
Adds a useSnapshotContent hook that ports SnapshotContentCtrl's behaviour: initial (index 0) load, following snapshot-list:load-content, HTML/JSON toggle round-tripped through the mediator, the fade-in on content change, restore-permission check, and copy-to-clipboard.
Adds a typed snapshotContent model (parseSnapshotContent) plus unit tests, replacing SnapshotModel.js.
Adds a fetchSnapshot API layer, replacing the legacy SnapshotService / SnapshotModels.

Clipboard

Copy JSON now prefers the async Clipboard API (navigator.clipboard.writeText) in secure contexts, falling back to the legacy hidden-textarea + execCommand("copy") for insecure contexts.

React ↔ Angular bridge

Registers the <snapshot-content-viewer> directive via react2angular (components/index.js) and swaps it into restore-list.html in place of the Angular content block.

Styling

Ports snapshot-content.scss, scrollable.scss and the content-viewer parts of text.scss to Emotion (css), and adds shared styles/palette.ts / styles/icons.ts. Removes the now-unused SCSS imports from index.scss.

Removals

Deletes SnapshotContentCtrl.js, SnapshotModel.js, SnapshotModels.js and SnapshotCollectionService.js (and removes them from the controllers/models/services/collections indexes).
Drops the now-unused SnapshotService dependency from SnapshotListCtrl.

Tooling / build

Adds html-react-parser (article HTML → React) and @types/jest.
Widens the Jest testMatch to include .ts/.tsx and runs bddgen before npm run test.

Local dev / e2e

npm run dev:local now streams container logs to the terminal and surfaces logs/application.log on the host (via a new mountLogs option in startLocalStack), with the log mount kept out of the parallel e2e suite.
Updates the Copy JSON e2e steps to grant clipboard permissions and assert against the real clipboard.

How has this change been tested?

The existing Playwright/BDD end-to-end suite (npm run test) exercises snapshot content, the HTML/JSON toggle, Copy JSON, export links and the restore flow, all of which now run against the migrated React viewer.
Unit tests for the new snapshotContent model (npm run test:unit).
Manually via npm run dev:local:
- Open a content id's versions and confirm the viewer renders furniture and article body, matching the previous layout.
- Toggle Show JSON / Show TEXT and confirm the sliding animation and Copy JSON (including the "Copied!" label) behave as before.
- Confirm the Restore action (when permitted) opens the modal and that keyboard navigation in the sidebar keeps the content in sync.

How can we measure success?

No regression in the existing e2e suite, and no change to the user-facing behaviour of the content viewer.
Continues the incremental migration pattern (React components bridged into AngularJS), leaving fewer Angular controllers/services to migrate in subsequent PRs.

github-actions · 2026-09-09T14:02:31Z

Deploy build 726 of `editorial-tools:flexible:restorer2` to CODE

All deployment options

From guardian/actions-riff-raff.

dominickendrick · 2026-09-10T09:18:43Z

+// LinkButton renders an <a> (content-box) while Button renders a <button>
+// (border-box), so the shared explicit height makes links taller. Force
+// border-box to match the buttons.
+const linkButtonBoxSizing = css({


We should push this change back to Stand.

Yeah, I can't see that they ship a CSS reset but it definitely applies here!

jonathonherbert

Code looks fine, a few minor comments. I'll leave them here before testing manually.

jonathonherbert · 2026-09-14T14:43:25Z

+    // write succeeds and can be read back in the assertion below.
+    await page
+        .context()
+        .grantPermissions(["clipboard-read", "clipboard-write"]);


jonathonherbert · 2026-09-14T14:50:25Z

+ * Render a snapshot's article body from its flattened list of elements,
+ * replacing the single `getHTMLContent` HTML string the legacy model produced.
+ */
+const ArticleBody: FunctionComponent<ArticleBodyProps> = ({ elements }) => {


Ooh, do we have alignment on whether a single export at the bottom of the file, or inline exports export const ArticleBody, is preferable? Tools' usage of these styles vary. My e2e infra code almost exclusively uses inline exports. Don't have a super strong opinion on style, but it'd be nice to have consistency

Yeah, I feel like inline exports are clearer to read when scanning the code. Updated in 3b6f529

jonathonherbert · 2026-09-14T14:53:48Z

+// LinkButton renders an <a> (content-box) while Button renders a <button>
+// (border-box), so the shared explicit height makes links taller. Force
+// border-box to match the buttons.
+const linkButtonBoxSizing = css({


Yeah, I can't see that they ship a CSS reset but it definitely applies here!

jonathonherbert · 2026-09-14T14:56:06Z

+};
+
+// Prefer the async Clipboard API (the modern, standard approach), falling back
+// to a hidden textarea + `execCommand` for non-secure contexts where


This fallback shouldn't be necessary AFAICS — writeText has been around for a very long time

Remove in 3b153c4

jonathonherbert · 2026-09-14T15:00:52Z

+	};
+};
+
+type RawListItem = {


It's brutal that we're defining types here, rather than integrating them from the writer upstream (which could I guess derive a great deal from flexible-model?), but I get that we have to start somewhere — wonder how we might share type information here, and who owns it 🤔

jonathonherbert · 2026-09-14T15:03:39Z

+
+/** Subscribe to the request to show the rendered HTML view. */
+const subscribeDisplayHtml = (callback: () => void): (() => void) => {
+	const handler = (): void => callback();


Wonder why an intermediate handler is necessary here, mediator.subscribe(CHANNELS.displayHtml, callback); is identical other than the this context IIUC. Not blocking, as we expect this code to go

Remove in 71faad0

jonathonherbert · 2026-09-14T15:05:49Z

(Can't wait to tear out the event bus 😅)

jonathonherbert · 2026-09-14T15:23:25Z

UI looks good! Two things I noticed: flicker when loading new snapshots (snapshots already loaded do not exhibit)

Super minor: content view loads when no snapshots are present

Hide the content panel immediately when the selected version changes and render furniture/panels only after content is available, eliminating visual jank for both mouse and keyboard navigation.

…s supported in all modern browsers our editors use

dominickendrick · 2026-09-16T16:10:36Z

UI looks good! Two things I noticed: flicker when loading new snapshots (snapshots already loaded do not exhibit)

Super minor: content view loads when no snapshots are present

These were fixed in bf9f544 great spot !!

dominickendrick added the feature Departmental tracking: work on a new feature label Sep 9, 2026

dominickendrick commented Sep 10, 2026

View reviewed changes

Comment thread public/javascripts/app/components/content-viewer/article/RawHtml.tsx

dominickendrick commented Sep 10, 2026

View reviewed changes

Comment thread public/javascripts/app/components/content-viewer/ContentFurniture.tsx

dominickendrick commented Sep 10, 2026

View reviewed changes

Comment thread public/javascripts/app/components/content-viewer/article/ArticleElementView.tsx

dominickendrick marked this pull request as ready for review September 10, 2026 15:20

jonathonherbert reviewed Sep 14, 2026

View reviewed changes

dominickendrick self-assigned this Sep 15, 2026

Base automatically changed from dk-wsy-migrate-modal to main September 15, 2026 11:30

dominickendrick force-pushed the dk-wsy-migrate-content branch 2 times, most recently from 050302b to 5f7d3d3 Compare September 15, 2026 16:37

waisingyiu and others added 2 commits September 15, 2026 17:39

Migrate content viewer to React

d1f6f7e

Improve logging

c5573f5

dominickendrick force-pushed the dk-wsy-migrate-content branch from 5f7d3d3 to c5573f5 Compare September 15, 2026 16:39

dominickendrick added 2 commits September 16, 2026 14:05

Add rich text fixture

fec238e

Prevent empty content labels from rendering while a snapshot is loading.

bf9f544

Hide the content panel immediately when the selected version changes and render furniture/panels only after content is available, eliminating visual jank for both mouse and keyboard navigation.

dominickendrick force-pushed the dk-wsy-migrate-content branch from c2531e2 to bf9f544 Compare September 16, 2026 15:24

dominickendrick added 2 commits September 16, 2026 16:04

Move to inline exports

3b6f529

Remove copy to clipboard fallback as navigator.clipboard?.writeText i…

3b153c4

…s supported in all modern browsers our editors use

Remove unused handler reference

71faad0

Uh oh!

Conversation

dominickendrick commented Sep 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

How has this change been tested?

How can we measure success?

Uh oh!

github-actions Bot commented Sep 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jonathonherbert left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonathonherbert commented Sep 14, 2026

Uh oh!

jonathonherbert commented Sep 14, 2026

Uh oh!

dominickendrick commented Sep 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dominickendrick commented Sep 9, 2026 •

edited

Loading

github-actions Bot commented Sep 9, 2026 •

edited

Loading

jonathonherbert left a comment •

edited

Loading