Patch the app manifest with the development URLs, add tests

isaacroldan · isaacroldan · commit 5d1a2ca71f6f · 2025-01-28T16:01:00.000+01:00
diff --git a/packages/app/src/cli/models/app/app.test-data.ts b/packages/app/src/cli/models/app/app.test-data.ts
@@ -71,6 +71,8 @@ import {
 } from '../../api/graphql/partners/generated/update-draft.js'
 import {SchemaDefinitionByTargetQueryVariables} from '../../api/graphql/functions/generated/schema-definition-by-target.js'
 import {SchemaDefinitionByApiTypeQueryVariables} from '../../api/graphql/functions/generated/schema-definition-by-api-type.js'
+import {AppHomeSpecIdentifier} from '../extensions/specifications/app_config_app_home.js'
+import {AppProxySpecIdentifier} from '../extensions/specifications/app_config_app_proxy.js'
 import {vi} from 'vitest'
 import {joinPath} from '@shopify/cli-kit/node/path'
 
@@ -120,6 +122,7 @@ export function testApp(app: Partial<AppInterface> = {}, schemaType: 'current' |
     configSchema: (app.configSchema ?? AppConfigurationSchema) as any,
     remoteFlags: app.remoteFlags ?? [],
     hiddenConfig: app.hiddenConfig ?? {},
+    devApplicationURLs: app.devApplicationURLs,
   })
 
   if (app.updateDependencies) {
@@ -340,6 +343,55 @@ export async function testAppAccessConfigExtension(
   return extension
 }
 
+export async function testAppHomeConfigExtension(): Promise<ExtensionInstance> {
+  const configuration = {
+    name: 'App Home',
+    type: 'app_home',
+    handle: 'app-home',
+    application_url: 'https://example.com',
+    embedded: true,
+    metafields: [],
+  }
+
+  const allSpecs = await loadLocalExtensionsSpecifications()
+  const specification = allSpecs.find((spec) => spec.identifier === AppHomeSpecIdentifier)!
+
+  const extension = new ExtensionInstance({
+    configuration,
+    configurationPath: '',
+    directory: './',
+    specification,
+  })
+
+  return extension
+}
+
+export async function testAppProxyConfigExtension(): Promise<ExtensionInstance> {
+  const configuration = {
+    name: 'App Proxy',
+    type: 'app_proxy',
+    handle: 'app-proxy',
+    metafields: [],
+    app_proxy: {
+      url: 'https://example.com',
+      subpath: 'apps',
+      prefix: 'apps',
+    },
+  }
+
+  const allSpecs = await loadLocalExtensionsSpecifications()
+  const specification = allSpecs.find((spec) => spec.identifier === AppProxySpecIdentifier)!
+
+  const extension = new ExtensionInstance({
+    configuration,
+    configurationPath: '',
+    directory: './',
+    specification,
+  })
+
+  return extension
+}
+
 export async function testPaymentExtensions(directory = './my-extension'): Promise<ExtensionInstance> {
   const configuration = {
     name: 'Payment Extension Name',
diff --git a/packages/app/src/cli/models/app/app.test.ts b/packages/app/src/cli/models/app/app.test.ts
@@ -18,11 +18,14 @@ import {
   testWebhookExtensions,
   testEditorExtensionCollection,
   testAppAccessConfigExtension,
+  testAppHomeConfigExtension,
+  testAppProxyConfigExtension,
 } from './app.test-data.js'
 import {ExtensionInstance} from '../extensions/extension-instance.js'
 import {FunctionConfigType} from '../extensions/specifications/function.js'
 import {WebhooksConfig} from '../extensions/specifications/types/app_config_webhook.js'
 import {EditorExtensionCollectionType} from '../extensions/specifications/editor_extension_collection.js'
+import {ApplicationURLs} from '../../services/dev/urls.js'
 import {describe, expect, test} from 'vitest'
 import {inTemporaryDirectory, mkdir, writeFile} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
@@ -470,6 +473,163 @@ describe('allExtensions', () => {
   })
 })
 
+describe('patchManifestWithDevURLs', () => {
+  test('patches the manifest with the development URLs', () => {
+    const app = testApp({})
+
+    const manifest = app.manifest()
+    expect(manifest).toContain(app.devApplicationURLs?.applicationUrl)
+  })
+})
+
+describe('manifest', () => {
+  test('generates a manifest with basic app information and modules', async () => {
+    // Given
+    const appAccessModule = await testAppAccessConfigExtension()
+
+    const app = await testApp({
+      name: 'my-app',
+      allExtensions: [appAccessModule],
+      configuration: {
+        ...DEFAULT_CONFIG,
+        client_id: 'test-client-id',
+      },
+    })
+
+    // When
+    const manifest = await app.manifest()
+
+    // Then
+    expect(manifest).toEqual({
+      name: 'my-app',
+      handle: '',
+      modules: [
+        {
+          type: 'app_access_external',
+          handle: 'app-access',
+          uid: appAccessModule.uid,
+          assets: appAccessModule.uid,
+          target: appAccessModule.contextValue,
+          config: expect.objectContaining({
+            redirect_url_allowlist: ['https://example.com/auth/callback'],
+          }),
+        },
+      ],
+    })
+  })
+
+  test('patches the manifest with development URLs when available', async () => {
+    // Given
+    const appHome = await testAppHomeConfigExtension()
+    const appAccess = await testAppAccessConfigExtension()
+    const appProxy = await testAppProxyConfigExtension()
+
+    const devApplicationURLs: ApplicationURLs = {
+      applicationUrl: 'https://new-url.io',
+      redirectUrlWhitelist: ['https://new-url.io/auth/callback'],
+      appProxy: {
+        proxyUrl: 'https://new-proxy-url.io',
+        proxySubPath: '/updated-path',
+        proxySubPathPrefix: 'updated-prefix',
+      },
+    }
+
+    const app = await testApp({
+      name: 'my-app',
+      allExtensions: [appHome, appProxy, appAccess],
+      configuration: {
+        ...DEFAULT_CONFIG,
+        client_id: 'test-client-id',
+      },
+      devApplicationURLs,
+    })
+
+    // When
+    const manifest = await app.manifest()
+
+    // Then
+    expect(manifest).toEqual({
+      name: 'my-app',
+      handle: '',
+      modules: [
+        {
+          type: 'app_home_external',
+          handle: 'app-home',
+          uid: appHome.uid,
+          assets: appHome.uid,
+          target: appHome.contextValue,
+          config: expect.objectContaining({
+            app_url: 'https://new-url.io',
+          }),
+        },
+        {
+          type: 'app_proxy_external',
+          handle: 'app-proxy',
+          uid: appProxy.uid,
+          assets: appProxy.uid,
+          target: appProxy.contextValue,
+          config: expect.objectContaining({
+            url: 'https://new-proxy-url.io',
+            subpath: '/updated-path',
+            prefix: 'updated-prefix',
+          }),
+        },
+        {
+          type: 'app_access_external',
+          handle: 'app-access',
+          uid: appAccess.uid,
+          assets: appAccess.uid,
+          target: appAccess.contextValue,
+          config: expect.objectContaining({
+            redirect_url_allowlist: ['https://new-url.io/auth/callback'],
+          }),
+        },
+      ],
+    })
+  })
+
+  test('does not patch URLs when devApplicationURLs is not available', async () => {
+    // Given
+    const appHome = await testUIExtension({
+      type: 'app_home',
+      configuration: {
+        name: 'App Home',
+        type: 'app_home',
+        handle: 'app-home',
+      },
+    })
+
+    const app = await testApp({
+      name: 'my-app',
+      allExtensions: [appHome],
+      configuration: {
+        ...DEFAULT_CONFIG,
+        client_id: 'test-client-id',
+      },
+      devApplicationURLs: undefined,
+    })
+
+    // When
+    const manifest = await app.manifest()
+
+    // Then
+    expect(manifest).toEqual({
+      name: 'my-app',
+      handle: '',
+      modules: [
+        {
+          type: 'app_home',
+          handle: 'app-home',
+          uid: appHome.uid,
+          assets: appHome.uid,
+          target: appHome.contextValue,
+          config: {},
+        },
+      ],
+    })
+  })
+})
+
 function createPackageJson(tmpDir: string, type: string, version: string) {
   const packagePath = joinPath(tmpDir, 'node_modules', '@shopify', type, 'package.json')
   const packageJson = {name: 'name', version}
diff --git a/packages/app/src/cli/models/app/app.ts b/packages/app/src/cli/models/app/app.ts
@@ -9,9 +9,12 @@ import {AppConfigurationUsedByCli} from '../extensions/specifications/types/app_
 import {EditorExtensionCollectionType} from '../extensions/specifications/editor_extension_collection.js'
 import {UIExtensionSchema} from '../extensions/specifications/ui_extension.js'
 import {CreateAppOptions, Flag} from '../../utilities/developer-platform-client.js'
-import {AppAccessSpecIdentifier} from '../extensions/specifications/app_config_app_access.js'
+import appAccessSpec, {AppAccessSpecIdentifier} from '../extensions/specifications/app_config_app_access.js'
 import {WebhookSubscriptionSchema} from '../extensions/specifications/app_config_webhook_schemas/webhook_subscription_schema.js'
 import {configurationFileNames} from '../../constants.js'
+import {ApplicationURLs} from '../../services/dev/urls.js'
+import appHomeSpec from '../extensions/specifications/app_config_app_home.js'
+import appProxySpec from '../extensions/specifications/app_config_app_proxy.js'
 import {ZodObjectOf, zod} from '@shopify/cli-kit/node/schema'
 import {DotEnvFile} from '@shopify/cli-kit/node/dot-env'
 import {getDependencies, PackageManager, readAndParsePackageJson} from '@shopify/cli-kit/node/node-package-manager'
@@ -272,6 +275,7 @@ export interface AppInterface<
   errors?: AppErrors
   hiddenConfig: AppHiddenConfig
   includeConfigOnDeploy: boolean | undefined
+  devApplicationURLs?: ApplicationURLs
   updateDependencies: () => Promise<void>
   extensionsForType: (spec: {identifier: string; externalIdentifier: string}) => ExtensionInstance[]
   updateExtensionUUIDS: (uuids: {[key: string]: string}) => void
@@ -307,6 +311,7 @@ type AppConstructor<
   specifications: ExtensionSpecification[]
   remoteFlags?: Flag[]
   hiddenConfig: AppHiddenConfig
+  devApplicationURLs?: ApplicationURLs
 }
 
 export class App<
@@ -329,6 +334,7 @@ export class App<
   remoteFlags: Flag[]
   realExtensions: ExtensionInstance[]
   hiddenConfig: AppHiddenConfig
+  devApplicationURLs?: ApplicationURLs
 
   constructor({
     name,
@@ -345,6 +351,7 @@ export class App<
     configSchema,
     remoteFlags,
     hiddenConfig,
+    devApplicationURLs,
   }: AppConstructor<TConfig, TModuleSpec>) {
     this.name = name
     this.directory = directory
@@ -360,6 +367,7 @@ export class App<
     this.configSchema = configSchema ?? AppSchema
     this.remoteFlags = remoteFlags ?? []
     this.hiddenConfig = hiddenConfig
+    this.devApplicationURLs = devApplicationURLs
   }
 
   get allExtensions() {
@@ -396,10 +404,11 @@ export class App<
       }),
     )
     const realModules = getArrayRejectingUndefined(modules)
+    const patchedModules = this.patchManifestWithDevURLs(realModules)
     return {
       name: this.name,
       handle: '',
-      modules: realModules,
+      modules: patchedModules,
     }
   }
 
@@ -482,6 +491,37 @@ export class App<
     if (this.appManagementApiEnabled) return true
     return this.configuration.build?.include_config_on_deploy
   }
+
+  /**
+   * Patches the manifest with the development URLs.
+   * @param modules - All App modules
+   * @returns All app moduels with patches applied.
+   */
+  private patchManifestWithDevURLs(modules: {type: string; config: JsonMapType}[]) {
+    if (!this.devApplicationURLs) return modules
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const appHome: any = modules.find((module) => module.type === appHomeSpec.externalIdentifier)
+    if (appHome) {
+      appHome.config.app_url = this.devApplicationURLs.applicationUrl
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const appProxy: any = modules.find((module) => module.type === appProxySpec.externalIdentifier)
+    if (appProxy && this.devApplicationURLs?.appProxy) {
+      appProxy.config.url = this.devApplicationURLs.appProxy.proxyUrl
+      appProxy.config.subpath = this.devApplicationURLs.appProxy.proxySubPath
+      appProxy.config.prefix = this.devApplicationURLs.appProxy.proxySubPathPrefix
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const appAccess: any = modules.find((module) => module.type === appAccessSpec.externalIdentifier)
+    if (appAccess) {
+      appAccess.config.redirect_url_allowlist = this.devApplicationURLs.redirectUrlWhitelist
+    }
+
+    return modules
+  }
 }
 
 export function validateFunctionExtensionsWithUiHandle(
diff --git a/packages/app/src/cli/models/app/loader.ts b/packages/app/src/cli/models/app/loader.ts
@@ -373,6 +373,7 @@ class AppLoader<TConfig extends AppConfiguration, TModuleSpec extends ExtensionS
       configSchema,
       remoteFlags: this.remoteFlags,
       hiddenConfig,
+      devApplicationURLs: this.previousApp?.devApplicationURLs,
     })
 
     // Show CLI notifications that are targetted for when your app has specific extension types
diff --git a/packages/app/src/cli/services/dev.ts b/packages/app/src/cli/services/dev.ts
