feat(graphiql): add base UI components

[amcaplan]

WHY are these changes introduced?

This PR builds on PRs #6578 and #6579 by adding the foundational UI components that will be used throughout the GraphiQL console. This is the third PR in the 8-PR migration stack.

Context: The current template-based GraphiQL implementation manipulates the DOM directly and uses CSS toggling to show/hide status indicators. By creating reusable React components using Shopify Polaris, we can:

• Replace manual DOM manipulation with declarative React components
• Ensure consistent styling and behavior across the UI
• Make components easier to test and maintain
• Use Shopify's design system for a cohesive look and feel

WHAT is this pull request doing?

This PR adds three essential UI components that handle status display, error messaging, and navigation links.

Key Changes:

1. StatusBadge Component (src/components/StatusBadge/):

• Displays current server and app connection status
• Three states with priority order: Disconnected (critical) > App uninstalled (warning) > Running (success)
• Uses Polaris Badge with appropriate tones and icons
• Replaces: 3 pre-rendered badges toggled via CSS classes in the old implementation

Visual States:

🔴 Disconnected    (serverIsLive = false)
⚠️  App uninstalled (serverIsLive = true, appIsInstalled = false)  
✅ Running         (both true)

2. ErrorBanner Component (src/components/ErrorBanner/):

• Shows critical error banner when server disconnects
• Instructs user to restart dev CLI command
• Uses Polaris Banner with critical tone
• Replaces: Manual CSS class toggling to show/hide error message

3. LinkPills Component (src/components/LinkPills/):

• Displays clickable links to store admin and app preview
• Only renders when all required data is available (storeFqdn, appName, appUrl)
• Uses Polaris Badge + Link with info tone and link icon
• Replaces: Direct innerHTML manipulation in the old implementation

All Components Include:

• TypeScript interfaces for props
• Comprehensive test coverage (173 total test lines)
• SCSS modules for custom styling
• Clean barrel exports via index.ts

Files Added:

• src/components/StatusBadge/ - Status display component (58 test lines)
• src/components/ErrorBanner/ - Error messaging component (42 test lines)
• src/components/LinkPills/ - Navigation links component (73 test lines)

Dependencies

Builds on:

• PR #6578 (package foundation with Polaris dependencies)
• PR #6579 (types for ServerStatus interface)

How to test your changes?

# Run all component tests
pnpm --filter @shopify/graphiql-console test src/components

# Run specific component tests
pnpm --filter @shopify/graphiql-console test StatusBadge.test.tsx
pnpm --filter @shopify/graphiql-console test ErrorBanner.test.tsx
pnpm --filter @shopify/graphiql-console test LinkPills.test.tsx

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

# All 173 lines of tests should pass

Manual Testing: You can test the components in isolation by importing them into the App component:

import {StatusBadge} from './components/StatusBadge'
import {ErrorBanner} from './components/ErrorBanner'
import {LinkPills} from './components/LinkPills'

// Test different states
<StatusBadge status={{serverIsLive: true, appIsInstalled: true, ...}} />
<ErrorBanner isVisible={true} />
<LinkPills status={{storeFqdn: 'test.myshopify.com', ...}} />

Measuring impact

• [x] n/a - these are foundational UI components

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
• #6583
• #6582
• #6581
• #6580 👈 (View in Graphite)
• #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.33%	13668/17229
🟡	Branches	73.24%	6696/9143
🟡	Functions	79.44%	3523/4435
🟡	Lines	79.69%	12909/16199

Test suite run success

3399 tests passing in 1391 suites.

Report generated by 🧪jest coverage report action from cb351dd1d71d13a869c796b795dbe6764a2e9f8e