Merge pull request #4256 from Shopify/add-domain-to-stores-list

Show domain for stores list (app management client only)

packages/app/src/cli/prompts/dev.test.ts

@@ -135,12 +135,13 @@ describe('selectApp', () => {
 })
 
 describe('selectStore', () => {
+  const defaultShowDomainOnPrompt = false
   test('returns undefined if store list is empty', async () => {
     // Given
     const stores: OrganizationStore[] = []
 
     // When
-    const got = await selectStorePrompt(stores)
+    const got = await selectStorePrompt(stores, defaultShowDomainOnPrompt)
 
     // Then
     expect(got).toEqual(undefined)
@@ -153,7 +154,7 @@ describe('selectStore', () => {
     const outputMock = mockAndCaptureOutput()
 
     // When
-    const got = await selectStorePrompt(stores)
+    const got = await selectStorePrompt(stores, defaultShowDomainOnPrompt)
 
     // Then
     expect(got).toEqual(STORE1)
@@ -167,7 +168,7 @@ describe('selectStore', () => {
     vi.mocked(renderAutocompletePrompt).mockResolvedValue('2')
 
     // When
-    const got = await selectStorePrompt(stores)
+    const got = await selectStorePrompt(stores, defaultShowDomainOnPrompt)
 
     // Then
     expect(got).toEqual(STORE2)
@@ -179,6 +180,25 @@ describe('selectStore', () => {
       ],
     })
   })
+
+  test('renders stores list with domain if showDomainOnPrompt is true ', async () => {
+    // Given
+    const stores: OrganizationStore[] = [STORE1, STORE2]
+    vi.mocked(renderAutocompletePrompt).mockResolvedValue('2')
+
+    // When
+    const got = await selectStorePrompt(stores, true)
+
+    // Then
+    expect(got).toEqual(STORE2)
+    expect(renderAutocompletePrompt).toHaveBeenCalledWith({
+      message: 'Which store would you like to use to view your project?',
+      choices: [
+        {label: 'store1 (domain1)', value: '1'},
+        {label: 'store2 (domain2)', value: '2'},
+      ],
+    })
+  })
 })
 
 describe('appName', () => {

packages/app/src/cli/prompts/dev.ts

@@ -57,13 +57,23 @@ export async function selectAppPrompt(
   return currentAppChoices.find((app) => app.apiKey === apiKey)!
 }
 
-export async function selectStorePrompt(stores: OrganizationStore[]): Promise<OrganizationStore | undefined> {
+export async function selectStorePrompt(
+  stores: OrganizationStore[],
+  showDomainOnPrompt: boolean,
+): Promise<OrganizationStore | undefined> {
   if (stores.length === 0) return undefined
   if (stores.length === 1) {
     outputCompleted(`Using your default dev store, ${stores[0]!.shopName}, to preview your project.`)
     return stores[0]
   }
-  const storeList = stores.map((store) => ({label: store.shopName, value: store.shopId}))
+
+  const storeList = stores.map((store) => {
+    let label = store.shopName
+    if (showDomainOnPrompt && store.shopDomain) {
+      label = `${store.shopName} (${store.shopDomain})`
+    }
+    return {label, value: store.shopId}
+  })
 
   const id = await renderAutocompletePrompt({
     message: 'Which store would you like to use to view your project?',

packages/app/src/cli/services/dev/select-store.test.ts

@@ -6,6 +6,7 @@ import {
   confirmConversionToTransferDisabledStorePrompt,
 } from '../../prompts/dev.js'
 import {testDeveloperPlatformClient} from '../../models/app/app.test-data.js'
+import {ClientName} from '../../utilities/developer-platform-client.js'
 import {beforeEach, describe, expect, vi, test} from 'vitest'
 import {isSpinEnvironment} from '@shopify/cli-kit/node/context/spin'
 import {firstPartyDev} from '@shopify/cli-kit/node/context/local'
@@ -47,6 +48,8 @@ const STORE3: OrganizationStore = {
   convertableToPartnerTest: false,
 }
 
+const defaultShowDomainOnPrompt = false
+
 beforeEach(() => {
   vi.mocked(isSpinEnvironment).mockReturnValue(false)
 })
@@ -61,7 +64,20 @@ describe('selectStore', async () => {
 
     // Then
     expect(got).toEqual(STORE1)
-    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2])
+    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2], defaultShowDomainOnPrompt)
+  })
+
+  test('selectStorePrompt is called with showDomainOnPrompt = true if clientName is app-management', async () => {
+    // Given
+    vi.mocked(selectStorePrompt).mockResolvedValueOnce(STORE1)
+    const developerPlatformClient = testDeveloperPlatformClient({clientName: ClientName.AppManagement})
+
+    // When
+    const got = await selectStore([STORE1, STORE2], ORG1, developerPlatformClient)
+
+    // Then
+    expect(got).toEqual(STORE1)
+    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2], true)
   })
 
   test('prompts user to convert store to non-transferable if selection is invalid', async () => {
@@ -74,7 +90,7 @@ describe('selectStore', async () => {
 
     // Then
     expect(got).toEqual(STORE2)
-    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2])
+    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2], defaultShowDomainOnPrompt)
     expect(confirmConversionToTransferDisabledStorePrompt).toHaveBeenCalled()
   })
 
@@ -89,7 +105,7 @@ describe('selectStore', async () => {
 
     // Then
     expect(got).toEqual(STORE1)
-    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2])
+    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2], defaultShowDomainOnPrompt)
     expect(confirmConversionToTransferDisabledStorePrompt).toHaveBeenCalled()
   })
 
@@ -106,7 +122,7 @@ describe('selectStore', async () => {
     // Then
     expect(got).toEqual(STORE2)
     expect(developerPlatformClient.convertToTransferDisabledStore).not.toHaveBeenCalled()
-    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2])
+    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2], defaultShowDomainOnPrompt)
   })
 
   test('throws if store is non convertible', async () => {
@@ -130,7 +146,7 @@ describe('selectStore', async () => {
 
     // Then
     await expect(got).rejects.toThrowError()
-    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2])
+    expect(selectStorePrompt).toHaveBeenCalledWith([STORE1, STORE2], defaultShowDomainOnPrompt)
   })
 
   test('prompts user to create & reload, fetches 10 times and tries again if reload is true', async () => {

packages/app/src/cli/services/dev/select-store.ts

@@ -8,7 +8,7 @@ import {
   ConvertDevToTransferDisabledSchema,
   ConvertDevToTransferDisabledStoreVariables,
 } from '../../api/graphql/convert_dev_to_transfer_disabled_store.js'
-import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
+import {ClientName, DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
 import {sleep} from '@shopify/cli-kit/node/system'
 import {renderTasks} from '@shopify/cli-kit/node/ui'
 import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
@@ -39,9 +39,10 @@ export async function selectStore(
   org: Organization,
   developerPlatformClient: DeveloperPlatformClient,
 ): Promise<OrganizationStore> {
+  const showDomainOnPrompt = developerPlatformClient.clientName === ClientName.AppManagement
   // If no stores, guide the developer through creating one
   // Then, with a store selected, make sure its transfer-disabled, prompting to convert if needed
-  let store = await selectStorePrompt(stores)
+  let store = await selectStorePrompt(stores, showDomainOnPrompt)
   if (!store) {
     outputInfo(`\n${await CreateStoreLink(org.id)}`)
     await sleep(5)
@@ -63,7 +64,7 @@ export async function selectStore(
   )
   while (!storeIsValid) {
     // eslint-disable-next-line no-await-in-loop
-    store = await selectStorePrompt(stores)
+    store = await selectStorePrompt(stores, showDomainOnPrompt)
     if (!store) {
       throw new CancelExecution()
     }

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

@@ -58,6 +58,11 @@ import {DevSessionDeleteMutation} from '../api/graphql/app-dev/generated/dev-ses
 import {FunctionUploadUrlGenerateResponse} from '@shopify/cli-kit/node/api/partners'
 import {isTruthy} from '@shopify/cli-kit/node/context/utilities'
 
+export enum ClientName {
+  AppManagement = 'app-management',
+  Partners = 'partners',
+}
+
 export type Paginateable<T> = T & {
   hasMorePages: boolean
 }

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

@@ -48,6 +48,7 @@ import {
   AppVersionIdentifiers,
   DevSessionOptions,
   filterDisabledFlags,
+  ClientName,
 } from '../developer-platform-client.js'
 import {PartnersSession} from '../../services/context/partner-account-info.js'
 import {
@@ -145,7 +146,7 @@ export interface GatedExtensionTemplate extends ExtensionTemplate {
 }
 
 export class AppManagementClient implements DeveloperPlatformClient {
-  public clientName = 'app-management'
+  public clientName = ClientName.AppManagement
   public webUiName = 'Developer Dashboard'
   public requiresOrganization = true
   public supportsAtomicDeployments = true

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

@@ -13,6 +13,7 @@ import {
   Paginateable,
   DevSessionOptions,
   filterDisabledFlags,
+  ClientName,
 } from '../developer-platform-client.js'
 import {fetchCurrentAccountInformation, PartnersSession} from '../../../cli/services/context/partner-account-info.js'
 import {
@@ -209,7 +210,7 @@ interface OrgAndAppsResponse {
 }
 
 export class PartnersClient implements DeveloperPlatformClient {
-  public clientName = 'partners'
+  public clientName = ClientName.Partners
   public webUiName = 'Partner Dashboard'
   public supportsAtomicDeployments = false
   public requiresOrganization = false