RestCodeSamples: swap FormControl and Select to Primer Brand (#63651)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: V-halfaro

src/rest/components/RestCodeSamples.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, FormEvent } from 'react'
-import { FormControl, IconButton, Select, SegmentedControl } from '@primer/react'
+import { IconButton, SegmentedControl } from '@primer/react'
+import { FormControl, Select } from '@primer/react-brand'
 import { CheckIcon, CopyIcon, InfoIcon } from '@primer/octicons-react'
 import { announce } from '@primer/live-region-element'
 import Cookies from '@/frame/components/lib/cookies'
@@ -137,7 +138,7 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
       </h4>
       {!isSingleExample && (
         <div className="pb-5 pt-2">
-          <FormControl id="example-type-picker">
+          <FormControl>
             <FormControl.Label visuallyHidden>Select the example type</FormControl.Label>
             <Select onChange={handleExampleSelection}>
               {exampleSelectOptions.map((option) => (

src/rest/tests/rendering.ts

@@ -134,6 +134,26 @@ describe('REST references docs', () => {
     expect(optionTexts).toEqual(['Example (text/plain)', 'Rendering markdown (text/x-markdown)'])
   })
 
+  test('example selectors have unique ids and matching labels', async () => {
+    // Three secrets operations each have multiple request examples.
+    const $ = await getDOM('/en/rest/actions/secrets')
+
+    const selects = $('select')
+    expect(selects.length).toBeGreaterThanOrEqual(3)
+
+    const ids = selects.map((i, select) => $(select).attr('id')).get()
+    expect(ids).toHaveLength(selects.length)
+    expect(new Set(ids).size).toBe(ids.length)
+
+    for (const id of ids) {
+      const label = $(`label[for="${id}"]`)
+      expect(label.length).toBe(1)
+      expect(label.text().trim()).toBe('Select the example type')
+    }
+
+    expect($('#example-type-picker').length).toBe(0)
+  })
+
   // All five /rest/meta permissionless operations support every fine-grained token type,
   // so noFineGrainedAccess is false and the RestAuth null guard never fires.
   test('RestAuth component hides auth section for permissionless endpoints', async () => {