Merge pull request #4331 from Shopify/fix-4320

Update the theme selector to no longer match partial theme names

.changeset/four-carpets-kiss.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Update the theme selector to no longer match partial theme names by default; use the '*' character to enable partial matching

packages/theme/src/cli/services/list.test.ts

@@ -54,7 +54,7 @@ describe('list', () => {
       {id: 5, name: 'Theme 5', role: 'development'},
     ] as Theme[])
 
-    await list(session, {role: 'live', name: 'eMe 3', json: false})
+    await list(session, {role: 'live', name: '*eMe 3*', json: false})
 
     expect(renderTable).toBeCalledWith({
       rows: [{id: '#3', name: 'Theme 3', role: '[live]'}],

packages/theme/src/cli/utilities/theme-selector/filter.test.ts

@@ -59,10 +59,38 @@ describe('filterThemes', () => {
     expect(filtered[0]!.name).toBe('theme (7)')
   })
 
-  test('filters by theme (partial name with different case)', async () => {
+  test('filters by theme (partial name matching the middle of the name)', async () => {
     // Given
     const filter = new Filter({
-      theme: 'eMe (7',
+      theme: '*eMe (7*',
+    })
+
+    // When
+    const filtered = filterThemes(store, themes, filter)
+
+    // Then
+    expect(filtered).toHaveLength(1)
+    expect(filtered[0]!.name).toBe('theme (7)')
+  })
+
+  test('filters by theme (partial name matching the beginning of the name)', async () => {
+    // Given
+    const filter = new Filter({
+      theme: 'theme (7*',
+    })
+
+    // When
+    const filtered = filterThemes(store, themes, filter)
+
+    // Then
+    expect(filtered).toHaveLength(1)
+    expect(filtered[0]!.name).toBe('theme (7)')
+  })
+
+  test('filters by theme (partial name matching the end of the name)', async () => {
+    // Given
+    const filter = new Filter({
+      theme: '*me (7)',
     })
 
     // When

packages/theme/src/cli/utilities/theme-selector/filter.ts

@@ -13,7 +13,7 @@ function filterByRole(store: string, themes: Theme[], filter: Filter) {
     return
   }
 
-  const error = `The ${store} store doesn't have a theme with the "${role}" role`
+  const error = `No themes on the store ${store} match the role "${role}"`
 
   return filterArray(themes, (theme) => {
     return theme.role === role
@@ -24,10 +24,18 @@ function filterByTheme(store: string, themes: Theme[], filter: Filter) {
   const identifiers = filter.themeIdentifiers
 
   return identifiers.flatMap((identifier) => {
-    const error = `The ${store} store doesn't have a theme with the "${identifier}" ID or name`
+    const error = `No themes on the store ${store} match the ID or name "${identifier}"`
 
     return filterArray(themes, (theme) => {
-      return `${theme.id}` === identifier || theme.name.toLowerCase().includes(identifier.toLowerCase())
+      if (`${theme.id}` === identifier) {
+        return true
+      }
+
+      if (theme.name.toLowerCase() === identifier.toLowerCase()) {
+        return true
+      }
+
+      return isPartialMatch(theme.name.toLowerCase(), identifier.toLowerCase())
     }).orThrow(error)
   })
 }
@@ -89,3 +97,21 @@ export class Filter {
     })
   }
 }
+
+function isPartialMatch(themeName: string, identifier: string): boolean {
+  const trimmedIdentifier = identifier.replace(/(^\*)|(\*$)/g, '')
+
+  if (identifier.startsWith('*') && identifier.endsWith('*')) {
+    return themeName.includes(trimmedIdentifier)
+  }
+
+  if (identifier.startsWith('*')) {
+    return themeName.endsWith(trimmedIdentifier)
+  }
+
+  if (identifier.endsWith('*')) {
+    return themeName.startsWith(trimmedIdentifier)
+  }
+
+  return false
+}