Address review feedback on group ordering and add tests

- Move groupOrder prop from RenderSelectPromptOptions and RenderAutocompleteOptions to their respective base prompt props interfaces
- Simplify SelectInput sorting logic to use single function instead of array with both function and 'group'
- Fix group order extraction to use original templates before filtering to preserve intended order
- Add comprehensive tests for groupOrder extraction and UI sorting functionality
- Remove unused outputDebug imports and debug logging statements

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: jenstanicak

packages/app/src/cli/prompts/generate/extension.ts

@@ -6,7 +6,6 @@ import {renderAutocompletePrompt, renderSelectPrompt, renderTextPrompt} from '@s
 import {AbortError} from '@shopify/cli-kit/node/error'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {slugify} from '@shopify/cli-kit/common/string'
-import {outputDebug} from '@shopify/cli-kit/node/output'
 
 export interface GenerateExtensionPromptOptions {
   name?: string

packages/app/src/cli/utilities/developer-platform-client/app-management-client.test.ts

@@ -206,6 +206,34 @@ describe('templateSpecifications', () => {
     expect(gotLabels).toEqual(expectedAllowedTemplates.map((template) => template.name))
   })
 
+  test('extracts groupOrder correctly from template order', async () => {
+    // Given
+    const orgApp = testOrganizationApp()
+    const templates: GatedExtensionTemplate[] = [
+      {...templateWithoutRules, group: 'GroupA'},
+      {...allowedTemplate, group: 'GroupB'},
+      {...templateWithoutRules, identifier: 'template3', group: 'GroupA'}, // Same group as first
+      {...allowedTemplate, identifier: 'template4', group: 'GroupC'},
+    ]
+    const mockedFetch = vi.fn().mockResolvedValueOnce(Response.json(templates))
+    vi.mocked(fetch).mockImplementation(mockedFetch)
+    const mockedFetchFlagsResponse: OrganizationBetaFlagsQuerySchema = {
+      organization: {
+        id: encodedGidFromOrganizationId(orgApp.organizationId),
+        flag_allowedFlag: true,
+      },
+    }
+    vi.mocked(businessPlatformOrganizationsRequest).mockResolvedValueOnce(mockedFetchFlagsResponse)
+
+    // When
+    const client = new AppManagementClient()
+    client.businessPlatformToken = () => Promise.resolve('business-platform-token')
+    const {groupOrder} = await client.templateSpecifications(orgApp)
+
+    // Then
+    expect(groupOrder).toEqual(['GroupA', 'GroupB', 'GroupC'])
+  })
+
   test('fails with an error message when fetching the specifications list fails', async () => {
     // Given
     vi.mocked(fetch).mockRejectedValueOnce(new Error('Failed to fetch'))

packages/app/src/cli/utilities/developer-platform-client/app-management-client.ts

@@ -473,10 +473,10 @@ export class AppManagementClient implements DeveloperPlatformClient {
       )
     ).map((template) => ({...template, sortPriority: counter++}))
 
-    // Extract group order from the original template order
+    // Extract group order from the original template order (before filtering)
     const groupOrder: string[] = []
-    for (const template of filteredTemplates) {
-      if (!groupOrder.includes(template.group)) {
+    for (const template of templates) {
+      if (template.group && !groupOrder.includes(template.group)) {
         groupOrder.push(template.group)
       }
     }

packages/cli-kit/src/private/node/ui/components/SelectInput.test.tsx

@@ -230,6 +230,41 @@ describe('SelectInput', async () => {
     expect(onChange).toHaveBeenLastCalledWith(items[2])
   })
 
+  test.skipIf(runningOnWindows)('respects groupOrder for custom group ordering', async () => {
+    const onChange = vi.fn()
+
+    const items = [
+      {label: 'first', value: 'first', group: 'GroupA'},
+      {label: 'second', value: 'second', group: 'GroupA'},
+      {label: 'third', value: 'third', group: 'GroupB'},
+      {label: 'fourth', value: 'fourth', group: 'GroupB'},
+      {label: 'fifth', value: 'fifth', group: 'GroupC'},
+      {label: 'sixth', value: 'sixth', group: 'GroupC'},
+    ]
+
+    // Custom order: GroupC first, then GroupB, then GroupA
+    const groupOrder = ['GroupC', 'GroupB', 'GroupA']
+
+    const renderInstance = render(<SelectInput items={items} onChange={onChange} groupOrder={groupOrder} />)
+
+    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   [1mGroupC[22m
+         [36m>[39m  [36mfifth[39m
+            sixth
+
+         [1mGroupB[22m
+            third
+            fourth
+
+         [1mGroupA[22m
+            first
+            second
+
+         [2mPress ↑↓ arrows to select, enter to confirm.[22m"
+    `)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
   test('allows disabling shortcuts', async () => {
     const onChange = vi.fn()
     const items = [

packages/cli-kit/src/private/node/ui/components/SelectInput.tsx

@@ -163,14 +163,11 @@ function SelectInputInner<T>(
   }
 
   const hasAnyGroup = rawItems.some((item) => typeof item.group !== 'undefined')
-  const items = sortBy(rawItems, [
-    (item) => {
-      if (!groupOrder || !item.group) return Number.MAX_SAFE_INTEGER
-      const index = groupOrder.indexOf(item.group)
-      return index === -1 ? Number.MAX_SAFE_INTEGER : index
-    },
-    'group',
-  ])
+  const items = sortBy(rawItems, (item) => {
+    if (!groupOrder || !item.group) return Number.MAX_SAFE_INTEGER
+    const index = groupOrder.indexOf(item.group)
+    return index === -1 ? Number.MAX_SAFE_INTEGER : index
+  })
   const itemsHaveKeys = items.some((item) => typeof item.key !== 'undefined' && item.key.length > 0)
 
   if (itemsHaveKeys) validateKeys(items)

packages/cli-kit/src/public/node/ui.tsx

@@ -242,7 +242,6 @@ export function renderFatalError(error: Fatal, {renderOptions}: RenderFatalError
 export interface RenderSelectPromptOptions<T> extends Omit<SelectPromptProps<T>, 'onSubmit'> {
   isConfirmationPrompt?: boolean
   renderOptions?: RenderOptions
-  groupOrder?: string[]
 }
 
 /**
@@ -366,7 +365,6 @@ export async function renderConfirmationPrompt({
 export interface RenderAutocompleteOptions<T>
   extends PartialBy<Omit<AutocompletePromptProps<T>, 'onSubmit'>, 'search'> {
   renderOptions?: RenderOptions
-  groupOrder?: string[]
 }
 
 /**