Match by both type and externalType

Author: isaacroldan

packages/app/src/cli/services/context/id-matching.test.ts

@@ -59,6 +59,14 @@ const REGISTRATION_D: RemoteSource = {
   type: 'web_pixel_extension',
 }
 
+// Same as REGISTRATION_D but with a different type using external_identifier
+const REGISTRATION_D_WITH_EXTERNAL_ID: RemoteSource = {
+  uuid: 'UUID_D',
+  id: 'D',
+  title: 'EXTENSION_D',
+  type: 'web_pixel_extension_external',
+}
+
 const REGISTRATION_FUNCTION_A: RemoteSource = {
   uuid: 'FUNCTION_UUID_A',
   id: 'FUNCTION_A',
@@ -575,6 +583,28 @@ describe('automaticMatchmaking: more remote of different types than local', () =
   })
 })
 
+describe('automaticMatchmaking: same name but different remote type (but still matches)', () => {
+  test('matches automatically', async () => {
+    // When
+    const got = await automaticMatchmaking(
+      [EXTENSION_D],
+      [REGISTRATION_D_WITH_EXTERNAL_ID],
+      {},
+      testDeveloperPlatformClient(),
+    )
+
+    // Then
+    const expected = {
+      identifiers: {'extension-d': 'UUID_D'},
+      toConfirm: [],
+      toCreate: [],
+      toManualMatch: {local: [], remote: []},
+    }
+
+    expect(got).toEqual(expected)
+  })
+})
+
 describe('automaticMatchmaking: some sources have uuid, others can be matched', () => {
   test('matches automatically', async () => {
     // When

packages/app/src/cli/services/context/id-matching.ts

@@ -1,6 +1,7 @@
 import {RemoteSource, LocalSource} from './identifiers.js'
 import {IdentifiersExtensions} from '../../models/app/identifiers.js'
 import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
+import {ExtensionInstance} from '../../models/extensions/extension-instance.js'
 import {groupBy, partition} from '@shopify/cli-kit/common/collection'
 import {uniqBy, difference} from '@shopify/cli-kit/common/array'
 import {pickBy} from '@shopify/cli-kit/common/object'
@@ -24,9 +25,14 @@ interface MatchResult {
  * Filter function to match a local and a remote source by type and handle
  */
 const sameTypeAndName = (local: LocalSource, remote: RemoteSource) => {
-  return (
-    remote.type.toLowerCase() === local.graphQLType.toLowerCase() && slugify(remote.title) === slugify(local.handle)
-  )
+  const isSameType =
+    remote.type.toLowerCase() === local.graphQLType.toLowerCase() ||
+    remote.type.toLowerCase() === (local as ExtensionInstance).externalType.toLowerCase() ||
+    remote.type.toLowerCase() === (local as ExtensionInstance).type.toLowerCase()
+
+  // In this case, remote.title represents the remote handle.
+  // This needs to be cleaned up in the future in the `AppModuleVersion` transformation
+  return isSameType && slugify(remote.title) === slugify(local.handle)
 }
 
 /**