feat(graphiql): complete GraphiQL section and app integration

[amcaplan]

WHY are these changes introduced?

This PR brings together all the components from previous PRs into a complete, functional GraphiQL section with responsive layout. This is the seventh PR in the 8-PR migration stack.

Context: All the building blocks are now in place (editor, components, hooks, types, validation). This PR integrates everything into a cohesive user interface that:

• Monitors server health in real-time
• Allows API version switching
• Shows connection status and store information
• Provides the full GraphiQL editing experience
• Adapts to different screen sizes with responsive design

WHAT is this pull request doing?

This PR creates the main GraphiQLSection component that integrates all previous components into a complete application with responsive layout.

Key Changes:

1. GraphiQLSection Component (src/sections/GraphiQL/): Main container that orchestrates all GraphiQL functionality.

Component Structure:

┌─────────────────────────────────────────────┐
│ Error Banner (sticky, shown when disconnected) │
├─────────────────────────────────────────────┤
│ Header (responsive grid layout)             │
│ ┌───────────────┬─────────────────────────┐ │
│ │ Left Section  │ Right Section          │ │
│ │ - Status Badge│ - Scopes Note          │ │
│ │ - API Version │                        │ │
│ │ - Link Pills  │                        │ │
│ └───────────────┴─────────────────────────┘ │
├─────────────────────────────────────────────┤
│ GraphiQL Editor (full height)               │
│ - Query tabs                                │
│ - Monaco syntax highlighting                │
│ - Docs explorer                             │
│ - Results panel                             │
└─────────────────────────────────────────────┘

2. Configuration Management:

function getConfig(): GraphiQLConfig {
  const fallbackConfig = {
    baseUrl: import.meta.env.VITE_GRAPHIQL_BASE_URL ?? 'http://localhost:3457',
    apiVersion: '2024-10',
    apiVersions: ['2024-01', '2024-04', '2024-07', '2024-10', 'unstable'],
    appName: 'Development App',
    appUrl: 'http://localhost:3000',
    storeFqdn: 'test-store.myshopify.com',
  }
  
  // SECURITY: Validate window.__GRAPHIQL_CONFIG__ before use
  if (window.__GRAPHIQL_CONFIG__) {
    return validateConfig(window.__GRAPHIQL_CONFIG__, fallbackConfig)
  }
  
  return fallbackConfig
}

• Gets config from window.__GRAPHIQL_CONFIG__ (injected by server)
• Falls back to env vars or defaults for development
• Security: Uses validateConfig to prevent XSS attacks
• Memoized to avoid re-computation on every render

3. State Management:

• selectedVersion - Current API version (local state)
• status - Server health and app info (from useServerStatus hook)
• Config is immutable after initial load

4. Responsive Layout (GraphiQL.module.scss):

• Uses CSS Grid for flexible layout
• 127 lines of responsive styling

Breakpoints:

• < 650px: Very narrow screens - minimal link text
• < 1150px: Narrow screens - reduced link width
• < 1550px: Medium screens - hide section labels
• ≥ 1081px: Wide screens - two-column header layout

Responsive Behavior:

// Single column on narrow screens
.Header {
  grid-template-columns: 1fr;
}

// Two-column layout on wide screens (≥1081px)
@media (min-width: 1081px) {
  .Header {
    grid-template-columns: 7fr 5fr;  // Left heavy
  }
  .RightSection {
    justify-self: end;  // Right-align scopes note
  }
}

// Hide labels on medium screens (≤1550px)
@media (max-width: 1550px) {
  .top-bar-section-title {  // "Status:", "API version:", etc.
    display: none;
  }
}

5. Component Integration: All components work together seamlessly:

• StatusBadge shows real-time connection status
• ErrorBanner appears when server disconnects (sticky positioning)
• ApiVersionSelector triggers re-fetch when version changes
• LinkPills show store/app links from server status
• GraphiQLEditor receives config and selected version
• useServerStatus provides live server/app state

6. App.tsx Update:

// Before: Minimal placeholder
export function App() {
  return <div>App Placeholder</div>
}

// After: Complete GraphiQL application
export function App() {
  return <GraphiQLSection />
}

Testing:

• 219 lines of integration tests
• Tests component rendering
• Tests responsive behavior
• Tests state management
• Tests error scenarios
• All 89 tests pass across the entire package

Files Added/Modified:

• src/sections/GraphiQL/GraphiQL.tsx - Main section component (92 lines)
• src/sections/GraphiQL/GraphiQL.module.scss - Responsive styles (127 lines)
• src/sections/GraphiQL/GraphiQL.test.tsx - Integration tests (219 lines)
• src/sections/GraphiQL/index.ts - Barrel export
• src/App.tsx - Updated to use GraphiQLSection

Dependencies

Builds on ALL previous PRs:

• PR #6578 - Package foundation
• PR #6579 - Types, constants, validation
• PR #6580 - StatusBadge, ErrorBanner, LinkPills
• PR #6581 - ApiVersionSelector
• PR #6582 - GraphiQLEditor
• PR #6583 - useServerStatus, usePolling

Result: Complete, functional graphiql-console package! ✅

How to test your changes?

# Run all tests (89 tests)
pnpm --filter @shopify/graphiql-console test

# Type check
pnpm --filter @shopify/graphiql-console tsc --noEmit

# Build the package
pnpm --filter @shopify/graphiql-console build

# Dev mode (requires server running at baseUrl)
pnpm --filter @shopify/graphiql-console dev

Manual Testing - Development Mode:

1. Start the package in dev mode:

   cd packages/graphiql-console
   pnpm dev
   

2. Open http://localhost:5173
3. You should see:
   • Status badge (may show "Disconnected" if no server)
   • API version selector
   • GraphiQL editor with welcome tab
   • Responsive layout that adapts as you resize the browser

Manual Testing - With Server:

1. Start the CLI dev server: dev server
2. The server should inject config via window.__GRAPHIQL_CONFIG__
3. You should see:
   • ✅ "Running" status
   • Store and app link pills
   • Working GraphQL queries
   • Real-time server health monitoring

Responsive Testing:

• Resize browser to different widths
• Verify labels hide at 1550px
• Verify two-column layout at 1081px
• Verify link text truncates at narrow widths

Measuring impact

• [x] n/a - this is the integration layer bringing all components together

Checklist

• [x] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [x] I've considered possible documentation changes

[amcaplan]

[!WARNING] This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite. Learn more

• #6585
• #6584 👈 (View in Graphite)
• #6583
• #6582
• #6581
• #6580
• #6579
• #6578
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	79.38%	13748/17320
🟡	Branches	73.29%	6729/9181
🟡	Functions	79.4%	3549/4470
🟡	Lines	79.74%	12979/16277

Test suite run success

3447 tests passing in 1401 suites.

Report generated by 🧪jest coverage report action from 0de0e5bf703afe20b11e42c8325d27af8f6dbf0a