Skip to content

v6: History -click opens a diff against the current query#4317

Draft
trevor-scheer wants to merge 6 commits into
graphiql-6from
trevor/history-alt-click-diff
Draft

v6: History -click opens a diff against the current query#4317
trevor-scheer wants to merge 6 commits into
graphiql-6from
trevor/history-alt-click-diff

Conversation

@trevor-scheer
Copy link
Copy Markdown
Contributor

Summary

  • Hold (or Alt on non-Mac) and click a history row to open a side-by-side Monaco diff of the current query against the row's query.
  • Apply loads the row into the editors (matching the existing plain-click behavior). Cancel or ESC dismisses with no changes.
  • New OperationDiffEditor component and diffOverlay slice in @graphiql/react are generic: any caller can prime them to render a diff in the operation editor area.
  • History panel subtitle updated to advertise the gesture.

Test plan

  • Run a query so a history row exists. Edit the query.
  • -click the row. Verify the side-by-side diff appears with "Compare with " in the header.
  • Click Apply. Editor swaps to the row's query.
  • Repeat the setup, -click again, then Cancel (or ESC). Editor stays as you left it.

Refs: #4219

Generic state for rendering a read-only Monaco diff in place of the
operation editor. Consumers populate `modifiedQuery`, `label`, and an
`onApply` callback; the editor area swaps in a diff component when the
overlay is set.
Renders a read-only Monaco side-by-side diff with a header strip and
`Apply` / `Cancel` affordances when the editor store's `diffOverlay`
is set. ESC dismisses. Models are reused across opens to avoid disposal
churn.
When `diffOverlay` is set, the operation editor is hidden via the
`hidden` class and `OperationDiffEditor` renders as a sibling. Keeping
the operation editor mounted preserves its Monaco model so `Apply` can
write back via `queryEditor.setValue()` without remount churn.
Holding the Option/Alt key while clicking a row no longer loads it into
the editors; it primes the editor store's `diffOverlay` with the row's
query and an `onApply` that does the load when accepted. Plain clicks
keep today's behavior. Subtitle updated to advertise the gesture.
Two specs: alt-click opens the diff overlay and `Apply` dismisses it;
alt-click opens it and `Cancel` dismisses it.
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 20, 2026

🦋 Changeset detected

Latest commit: 6d749a5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@graphiql/react Patch
@graphiql/plugin-history Patch
graphiql Patch
@graphiql/plugin-code-exporter Patch
@graphiql/plugin-doc-explorer Patch
@graphiql/plugin-explorer Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant