v6: Restyle @graphiql/plugin-history (#4295)

## Summary

- Migrate `@graphiql/plugin-history` CSS to OKLCH tokens.
- New row layout: status dot, mono query name, variables snippet below,
action buttons on the right.
- Replace the bespoke header div with `PanelHeader`; subtitle carries
the ⌥-click hint.
- Storybook stories: `Empty`, `FewRows`, `ManyRows`, `Mixed`, and
individual item variants.

## Test plan

- [x] Open the History panel; confirm the header reads "History" with
the subtitle.
- [x] Run a query; verify the row appears with a green status dot, mono
query name, and a variable snippet if variables were provided.
- [x] Click a history row; confirm the query loads into the editor.
- [ ] ⌥-click a row (diff behavior) and confirm it still works.
- [x] Click "Clear"; confirm rows are removed and the button shows
"Cleared" briefly.
- [x] Open Storybook under "Plugins/History"; verify all stories render
correctly.

Refs: #4219

Author: trevor-scheer

.changeset/restyle-history.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-history': patch
+---
+
+Restyle to the v6 design. New row layout with status dot, mono name label, and inline variables snippet. Uses `PanelHeader` for the panel chrome.

packages/graphiql-plugin-history/src/components.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   Tooltip,
   UnStyledButton,
+  PanelHeader,
 } from '@graphiql/react';
 import { useHistory, useHistoryActions } from './context';
 
@@ -64,24 +65,28 @@ export const History: FC = () => {
   const hasFavorites = Boolean(favorites.length);
   const hasItems = Boolean(items.length);
 
+  const clearButton =
+    clearStatus || hasItems ? (
+      <Button
+        type="button"
+        state={clearStatus || undefined}
+        disabled={!items.length}
+        onClick={handleClearStatus}
+      >
+        {{
+          success: 'Cleared',
+          error: 'Failed to Clear',
+        }[clearStatus!] || 'Clear'}
+      </Button>
+    ) : undefined;
+
   return (
     <section aria-label="History" className="graphiql-history">
-      <div className="graphiql-history-header">
-        History
-        {(clearStatus || hasItems) && (
-          <Button
-            type="button"
-            state={clearStatus || undefined}
-            disabled={!items.length}
-            onClick={handleClearStatus}
-          >
-            {{
-              success: 'Cleared',
-              error: 'Failed to Clear',
-            }[clearStatus!] || 'Clear'}
-          </Button>
-        )}
-      </div>
+      <PanelHeader
+        title="History"
+        subtitle="Last 20 runs."
+        actions={clearButton}
+      />
 
       {hasFavorites && (
         <ul className="graphiql-history-items">
@@ -166,6 +171,10 @@ export const HistoryItem: FC<QueryHistoryItemProps> = props => {
     toggleFavorite(props.item);
   };
 
+  const variablesSnippet = props.item.variables
+    ? formatVariables(props.item.variables)
+    : null;
+
   return (
     <li className={cn('graphiql-history-item', isEditable && 'editable')}>
       {isEditable ? (
@@ -193,54 +202,71 @@ export const HistoryItem: FC<QueryHistoryItemProps> = props => {
         </>
       ) : (
         <>
-          <Tooltip label="Set active">
-            <UnStyledButton
-              type="button"
-              className="graphiql-history-item-label"
-              onClick={handleHistoryItemClick}
-              aria-label="Set active"
-            >
-              {displayName}
-            </UnStyledButton>
-          </Tooltip>
-          <Tooltip label="Edit label">
-            <UnStyledButton
-              type="button"
-              className="graphiql-history-item-action"
-              onClick={handleEditLabel}
-              aria-label="Edit label"
-            >
-              <PenIcon aria-hidden="true" />
-            </UnStyledButton>
-          </Tooltip>
-          <Tooltip
-            label={props.item.favorite ? 'Remove favorite' : 'Add favorite'}
-          >
-            <UnStyledButton
-              type="button"
-              className="graphiql-history-item-action"
-              onClick={handleToggleFavorite}
-              aria-label={
-                props.item.favorite ? 'Remove favorite' : 'Add favorite'
-              }
+          <div className="graphiql-history-item-inner">
+            <div className="graphiql-history-item-row">
+              <span
+                className="graphiql-history-item-status"
+                aria-hidden="true"
+              />
+              <Tooltip label="Set active">
+                <UnStyledButton
+                  type="button"
+                  className="graphiql-history-item-label"
+                  onClick={handleHistoryItemClick}
+                  aria-label="Set active"
+                >
+                  {displayName}
+                </UnStyledButton>
+              </Tooltip>
+            </div>
+            {variablesSnippet && (
+              <div className="graphiql-history-item-meta">
+                <span className="graphiql-history-item-variables">
+                  {variablesSnippet}
+                </span>
+              </div>
+            )}
+          </div>
+          <div className="graphiql-history-item-actions">
+            <Tooltip label="Edit label">
+              <UnStyledButton
+                type="button"
+                className="graphiql-history-item-action"
+                onClick={handleEditLabel}
+                aria-label="Edit label"
+              >
+                <PenIcon aria-hidden="true" />
+              </UnStyledButton>
+            </Tooltip>
+            <Tooltip
+              label={props.item.favorite ? 'Remove favorite' : 'Add favorite'}
             >
-              {props.item.favorite ? (
-                <StarFilledIcon aria-hidden="true" />
-              ) : (
-                <StarIcon aria-hidden="true" />
-              )}
-            </UnStyledButton>
-          </Tooltip>
-          <Tooltip label="Delete from history">
-            <UnStyledButton
-              type="button"
-              className="graphiql-history-item-action"
-              onClick={handleDeleteItemFromHistory}
-              aria-label="Delete from history"
-            >
-              <TrashIcon aria-hidden="true" />
-            </UnStyledButton>
-          </Tooltip>
+              <UnStyledButton
+                type="button"
+                className="graphiql-history-item-action"
+                onClick={handleToggleFavorite}
+                aria-label={
+                  props.item.favorite ? 'Remove favorite' : 'Add favorite'
+                }
+              >
+                {props.item.favorite ? (
+                  <StarFilledIcon aria-hidden="true" />
+                ) : (
+                  <StarIcon aria-hidden="true" />
+                )}
+              </UnStyledButton>
+            </Tooltip>
+            <Tooltip label="Delete from history">
+              <UnStyledButton
+                type="button"
+                className="graphiql-history-item-action"
+                onClick={handleDeleteItemFromHistory}
+                aria-label="Delete from history"
+              >
+                <TrashIcon aria-hidden="true" />
+              </UnStyledButton>
+            </Tooltip>
+          </div>
         </>
       )}
     </li>
@@ -256,3 +282,19 @@ export function formatQuery(query?: string) {
     .replaceAll('}', ' } ')
     .replaceAll(/[\s]{2,}/g, ' ');
 }
+
+export function formatVariables(variables: string) {
+  try {
+    const parsed = JSON.parse(variables) as Record<string, unknown>;
+    const entries = Object.entries(parsed);
+    if (!entries.length) {
+      return null;
+    }
+    return entries
+      .slice(0, 3)
+      .map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
+      .join(', ');
+  } catch {
+    return variables.slice(0, 60);
+  }
+}