feat(graphiql): add API version selector component

[amcaplan]

WHY are these changes introduced?

This PR builds on the previous UI components by adding the API version selector, which allows users to switch between different Shopify Admin API versions. This is the fourth PR in the 8-PR migration stack.

Context: The GraphiQL console needs to support querying different versions of the Shopify Admin API (e.g., 2024-10, 2025-01, unstable). The current template-based implementation uses vanilla JavaScript event listeners and manual DOM manipulation to handle version changes. By creating a declarative React component, we can:

• Use React's state management instead of manual DOM updates
• Integrate seamlessly with the GraphiQL editor
• Make version changes easier to test and track
• Provide a consistent UI with other Polaris components

WHAT is this pull request doing?

This PR adds a single, focused component for API version selection using Shopify Polaris's Select component.

Key Changes:

ApiVersionSelector Component (src/components/ApiVersionSelector/):

• Dropdown selector built on Polaris Select component
• Accepts list of available versions as props
• Controlled component pattern with value and onChange
• Hidden label for accessibility ("API version")
• Replaces: Vanilla JS event listener (addEventListener('change')) and manual DOM manipulation

Props Interface:

interface ApiVersionSelectorProps {
  versions: string[]      // e.g., ['2024-10', '2025-01', 'unstable']
  value: string          // Currently selected version
  onChange: (version: string) => void  // Callback when user selects new version
}

Usage Example:

<ApiVersionSelector
  versions={['2024-10', '2025-01', 'unstable']}
  value={currentVersion}
  onChange={(newVersion) => {
    // Update GraphiQL schema and re-fetch introspection
    setCurrentVersion(newVersion)
  }}
/>

Testing:

• 94 lines of comprehensive tests
• Tests rendering with different version lists
• Tests selection change callbacks
• Tests accessibility features

Files Added:

• src/components/ApiVersionSelector/ApiVersionSelector.tsx - Component implementation
• src/components/ApiVersionSelector/ApiVersionSelector.test.tsx - 94 lines of tests
• src/components/ApiVersionSelector/index.ts - Barrel export

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 (type definitions)
• PR feat(graphiql): add base UI components #6580 (base UI component patterns)

How to test your changes?

# Run component tests
pnpm --filter @shopify/graphiql-console test ApiVersionSelector.test.tsx

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

# All 94 lines of tests should pass, covering:
# - Rendering with version list
# - Version selection and onChange callbacks
# - Accessibility (hidden label)

Manual Testing:
You can test the component in the App by simulating version changes:

import {ApiVersionSelector} from './components/ApiVersionSelector'
import {useState} from 'react'

const [version, setVersion] = useState('2024-10')

<ApiVersionSelector
  versions={['2024-10', '2025-01', 'unstable']}
  value={version}
  onChange={setVersion}
/>

Measuring impact

• n/a - this is a foundational UI component

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 👈 (View in Graphite)
• feat(graphiql): add base UI components #6580
• 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%	13670/17231
🟡	Branches	73.24%	6696/9143
🟡	Functions	79.45%	3525/4437
🟡	Lines	79.69%	12911/16201

Test suite run success

3407 tests passing in 1393 suites.

Report generated by 🧪jest coverage report action from ecb6ff8