Support admin_link extensions in the Dev Server

Author: vividviolet

packages/app/src/cli/models/extensions/specification.ts

@@ -295,6 +295,7 @@ export function createContractBasedModuleSpecification<TConfiguration extends Ba
     | 'clientSteps'
     | 'experience'
     | 'transformRemoteToLocal'
+    | 'getOutputRelativePath'
   >,
 ) {
   return createExtensionSpecification({
@@ -305,6 +306,7 @@ export function createContractBasedModuleSpecification<TConfiguration extends Ba
     buildConfig: spec.buildConfig ?? {mode: 'none'},
     clientSteps: spec.clientSteps,
     uidStrategy: spec.uidStrategy,
+    getOutputRelativePath: spec.getOutputRelativePath,
     transformRemoteToLocal: spec.transformRemoteToLocal,
     deployConfig: async (config, directory) => {
       let parsedConfig = configWithoutFirstClassFields(config)

packages/app/src/cli/models/extensions/specifications/admin_link.test.ts

@@ -32,10 +32,18 @@ describe('admin_link', async () => {
     })
   })
 
-  test('has localization in appModuleFeatures', async () => {
+  test('has localization and ui_preview in appModuleFeatures', async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const extension = await getTestAdminLink(tmpDir)
       expect(extension.specification.appModuleFeatures()).toContain('localization')
+      expect(extension.specification.appModuleFeatures()).toContain('ui_preview')
+    })
+  })
+
+  test('is previewable', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const extension = await getTestAdminLink(tmpDir)
+      expect(extension.isPreviewable).toBe(true)
     })
   })
 
@@ -49,11 +57,11 @@ describe('admin_link', async () => {
       const steps = clientSteps[0]!.steps
       expect(steps).toHaveLength(1)
       expect(steps[0]).toMatchObject({
-        id: 'copy-admin-link-assets',
-        name: 'Copy Admin Link Assets',
+        id: 'include-admin-link-assets',
+        name: 'Include Admin Link Assets',
         type: 'include_assets',
         config: {
-          generateManifest: true,
+          generatesAssetsManifest: true,
           inclusions: [
             {type: 'configKey', key: 'targeting[].tools'},
             {type: 'configKey', key: 'targeting[].instructions'},

packages/app/src/cli/models/extensions/specifications/admin_link.ts

@@ -19,29 +19,31 @@ const adminLinkSpec = createContractBasedModuleSpecification({
             inclusions: [
               {
                 type: 'configKey',
-                anchor: 'extensions[].targeting[]',
+                anchor: 'targeting[]',
                 groupBy: 'target',
-                key: 'extensions[].targeting[].tools',
+                key: 'targeting[].tools',
               },
               {
                 type: 'configKey',
-                anchor: 'extensions[].targeting[]',
+                anchor: 'targeting[]',
                 groupBy: 'target',
-                key: 'extensions[].targeting[].instructions',
+                key: 'targeting[].instructions',
               },
               {
                 type: 'configKey',
-                anchor: 'extensions[].targeting[]',
+                anchor: 'targeting[]',
                 groupBy: 'target',
-                key: 'extensions[].targeting[].intents[].schema',
+                key: 'targeting[].intents[].schema',
               },
             ],
           },
         },
       ],
     },
   ],
-  appModuleFeatures: () => ['localization'],
+  // This needs to be a file path so the extension directory can be resolved to the correct path
+  getOutputRelativePath: () => 'shopify.extension.toml',
+  appModuleFeatures: () => ['localization', 'ui_preview'],
 })
 
 export default adminLinkSpec

packages/app/src/cli/services/dev/extension/payload.test.ts

@@ -1,4 +1,3 @@
-import {UIExtensionPayload} from './payload/models.js'
 import {getUIExtensionPayload} from './payload.js'
 import {ExtensionsPayloadStoreOptions} from './payload/store.js'
 import {testUIExtension} from '../../../models/app/app.test-data.js'
@@ -244,6 +243,45 @@ describe('getUIExtensionPayload', () => {
     })
   })
 
+  test('reads from targeting when extension_points is not set', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const uiExtension = await testUIExtension({
+        directory: tmpDir,
+        configuration: {
+          name: 'test-admin-link',
+          type: 'admin_link',
+          targeting: [{target: 'admin.app.link', url: '/editor', tools: './tools.json'}],
+        } as any,
+        devUUID: 'devUUID',
+      })
+
+      await setupBuildOutput(
+        uiExtension,
+        tmpDir,
+        {'admin.app.link': {tools: 'tools.json'}},
+        {'tools.json': '{"tools": []}'},
+      )
+
+      const got = await getUIExtensionPayload(uiExtension, tmpDir, {
+        ...createMockOptions(tmpDir, [uiExtension]),
+        currentDevelopmentPayload: {hidden: true, status: 'success'},
+      })
+
+      expect(got.extensionPoints).toMatchObject([
+        {
+          target: 'admin.app.link',
+          assets: {
+            tools: {
+              name: 'tools',
+              url: 'http://tunnel-url.com/extensions/devUUID/assets/tools.json',
+              lastUpdated: expect.any(Number),
+            },
+          },
+        },
+      ])
+    })
+  })
+
   test('returns the right payload for post-purchase extensions', async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const outputPath = joinPath(tmpDir, 'test-post-purchase-extension.js')

packages/app/src/cli/services/dev/extension/payload.ts

@@ -104,7 +104,8 @@ export async function getUIExtensionPayload(
 }
 
 async function getExtensionPoints(extension: ExtensionInstance, url: string, buildDirectory: string) {
-  let extensionPoints = extension.configuration.extension_points as DevNewExtensionPointSchema[]
+  const config = extension.configuration as Record<string, unknown>
+  let extensionPoints = (config.extension_points ?? config.targeting) as DevNewExtensionPointSchema[]
 
   if (extension.type === 'checkout_post_purchase') {
     // Mock target for post-purchase in order to get the right extension point redirect url