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 feat(graphiql): add graphiql-console package foundation #6578 (package foundation with Polaris dependencies)
• PR feat(graphiql): add shared types, constants, and validation #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

• n/a - these are foundational UI components

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• 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

• feat(graphiql): integrate console with app server #6585
• feat(graphiql): complete GraphiQL section and app integration #6584
• feat(graphiql): add data fetching hooks #6583
• feat(graphiql): add GraphiQL editor with Monaco integration #6582
• feat(graphiql): add API version selector component #6581
• feat(graphiql): add base UI components #6580 👈 (View in Graphite)
• feat(graphiql): add shared types, constants, and validation #6579
• feat(graphiql): add graphiql-console package foundation #6578
• main

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

[github-actions]

Coverage report

St.❔	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 cb351dd

[github-actions]

This PR seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.