[stable] Fix automatic matching for extensions with localized names

.changeset/polite-masks-hide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Fix bug in extension matching when using localized names

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

@@ -291,7 +291,7 @@ describe('automaticMatchmaking: some local of the same type, only one remote', (
   })
 })
 
-describe('automaticMatchmaking: some local of the same type, a remote with same type but different name', () => {
+describe('automaticMatchmaking: some local of the same type, a remote with same type but a remote name that doesnt match a local handle', () => {
   test('prompts for manual matching', async () => {
     // When
     const got = await automaticMatchmaking([EXTENSION_A, EXTENSION_A_2], [REGISTRATION_A_3], {}, 'uuid')

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

@@ -18,16 +18,16 @@ export interface MatchResult {
 }
 
 /**
- * Filter function to match a local and a remote source by type and name
+ * Filter function to match a local and a remote source by type and handle
  */
 const sameTypeAndName = (local: LocalSource, remote: RemoteSource) => {
-  return remote.type === local.graphQLType && slugify(remote.title) === slugify(local.configuration.name)
+  return remote.type === local.graphQLType && slugify(remote.title) === slugify(local.handle)
 }
 
 /**
- * Automatically match local and remote sources if they have the same type and name
+ * Automatically match local and remote sources if they have the same type and handle
  *
- * If multiple local or remote sources have the same type and name, they can't be matched automatically
+ * If multiple local or remote sources have the same type and handle, they can't be matched automatically
  */
 function matchByNameAndType(
   local: LocalSource[],
@@ -36,6 +36,7 @@ function matchByNameAndType(
 ): {matched: IdentifiersExtensions; pending: {local: LocalSource[]; remote: RemoteSource[]}} {
   const uniqueLocal = uniqBy(local, (elem) => [elem.graphQLType, elem.handle])
   const uniqueRemote = uniqBy(remote, (elem) => [elem.type, elem.title])
+
   const validMatches: IdentifiersExtensions = {}
 
   uniqueLocal.forEach((localSource) => {

packages/app/src/cli/services/context/identifiers.ts

@@ -35,7 +35,6 @@ export interface LocalSource {
   graphQLType: string
   type: string
   handle: string
-  configuration: {name: string}
 }
 
 export type MatchingError = 'pending-remote' | 'invalid-environment' | 'user-cancelled'

packages/app/src/cli/services/dev/migrate-to-ui-extension.test.ts

@@ -115,7 +115,7 @@ describe('getExtensionsToMigrate()', () => {
       // Given
       const localExtension = getLocalExtension({
         type: 'ui_extension',
-        configuration: {name: 'a-different-extension'},
+        handle: 'a-different-extension',
       })
       const remoteExtension = getRemoteExtension({type: 'CHECKOUT_UI_EXTENSION', title: 'does-not-match', uuid: '5678'})
 

packages/app/src/cli/services/dev/migrate-to-ui-extension.ts

@@ -23,7 +23,7 @@ export function getUIExtensionsToMigrate(
     if (localSource.type === 'ui_extension') {
       const remoteSource = remoteSources.find((source) => {
         const matchesId = source.uuid === ids[localSource.localIdentifier]
-        const matchesTitle = slugify(source.title) === slugify(localSource.configuration.name)
+        const matchesTitle = slugify(source.title) === slugify(localSource.handle)
 
         return matchesId || matchesTitle
       })