Add ability to set theme name on push

Author: graygilmore

.changeset/puny-plants-allow.md

@@ -0,0 +1,7 @@
+---
+'@shopify/cli-kit': minor
+'@shopify/theme': minor
+'@shopify/cli': minor
+---
+
+Add ability to set theme name on push

packages/cli-kit/src/public/node/themes/theme-manager.test.ts

@@ -92,6 +92,28 @@ describe('ThemeManager', () => {
       expect(result).toEqual(mockTheme)
       expect(manager.getStoredThemeId()).toBe('123')
     })
+
+    test('always creates a new theme when name is provided', async () => {
+      // Given
+      manager.setThemeId('123')
+      const customTheme = {...mockTheme, name: 'Custom name'}
+      vi.mocked(themeCreate).mockResolvedValue(customTheme)
+
+      // When
+      const result = await manager.findOrCreate('Custom name')
+
+      // Then
+      expect(fetchTheme).not.toHaveBeenCalled()
+      expect(themeCreate).toHaveBeenCalledWith(
+        {
+          name: 'Custom name',
+          role: DEVELOPMENT_THEME_ROLE,
+        },
+        session,
+      )
+      expect(result).toEqual(customTheme)
+      expect(manager.getStoredThemeId()).toBe('123')
+    })
   })
 
   describe('fetch', () => {

packages/cli-kit/src/public/node/themes/theme-manager.ts

@@ -13,10 +13,10 @@ export abstract class ThemeManager {
 
   constructor(protected adminSession: AdminSession) {}
 
-  async findOrCreate(): Promise<Theme> {
-    let theme = await this.fetch()
+  async findOrCreate(name?: string): Promise<Theme> {
+    let theme = name ? undefined : await this.fetch()
     if (!theme) {
-      theme = await this.create()
+      theme = await this.create(undefined, name)
     }
     return theme
   }

packages/cli/README.md

@@ -2330,6 +2330,7 @@ FLAGS
   -u, --unpublished             Create a new unpublished theme and push to it.
   -x, --ignore=<value>...       Skip uploading the specified files (Multiple flags allowed). Wrap the value in double
                                 quotes if you're using wildcards.
+      --name=<value>            The name for the theme. Will always create a new theme.
       --no-color                Disable color output.
       --password=<value>        Password generated from the Theme Access app.
       --path=<value>            The path where you want to run the command. Defaults to the current working directory.

packages/cli/oclif.manifest.json

@@ -6527,6 +6527,14 @@
           "name": "live",
           "type": "boolean"
         },
+        "name": {
+          "description": "The name for the theme. Will always create a new theme.",
+          "env": "SHOPIFY_FLAG_NAME",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "name",
+          "type": "option"
+        },
         "no-color": {
           "allowNo": false,
           "description": "Disable color output.",

packages/theme/src/cli/commands/theme/push.ts

@@ -97,6 +97,11 @@ export default class Push extends ThemeCommand {
       description: 'Require theme check to pass without errors before pushing. Warnings are allowed.',
       env: 'SHOPIFY_FLAG_STRICT_PUSH',
     }),
+    name: Flags.string({
+      description: 'The name for the theme. Will always create a new theme.',
+      env: 'SHOPIFY_FLAG_NAME',
+      exclusive: ['theme'],
+    }),
     environment: themeFlags.environment,
   }
 

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

@@ -258,6 +258,21 @@ describe('createOrSelectTheme', async () => {
     expect(setDevelopmentTheme).not.toHaveBeenCalled()
   })
 
+  test('creates unpublished theme when name flag is provided', async () => {
+    // Given
+    vi.mocked(themeCreate).mockResolvedValue(buildTheme({id: 2, name: 'Custom name', role: UNPUBLISHED_THEME_ROLE}))
+    vi.mocked(fetchTheme).mockResolvedValue(undefined)
+
+    const flags: PushFlags = {name: 'Custom name'}
+
+    // When
+    const theme = await createOrSelectTheme(adminSession, flags)
+
+    // Then
+    expect(theme).toMatchObject({name: 'Custom name'})
+    expect(setDevelopmentTheme).not.toHaveBeenCalled()
+  })
+
   test('creates development theme when development flag is provided', async () => {
     // Given
     vi.mocked(themeCreate).mockResolvedValue(buildTheme({id: 1, name: 'Theme', role: DEVELOPMENT_THEME_ROLE}))
@@ -272,6 +287,20 @@ describe('createOrSelectTheme', async () => {
     expect(setDevelopmentTheme).toHaveBeenCalled()
   })
 
+  test('creates development theme when development and name flags are provided', async () => {
+    // Given
+    vi.mocked(themeCreate).mockResolvedValue(buildTheme({id: 1, name: 'Custom name', role: DEVELOPMENT_THEME_ROLE}))
+    vi.mocked(fetchTheme).mockResolvedValue(undefined)
+    const flags: PushFlags = {development: true, name: 'Custom name'}
+
+    // When
+    const theme = await createOrSelectTheme(adminSession, flags)
+
+    // Then
+    expect(theme).toMatchObject({role: DEVELOPMENT_THEME_ROLE, name: 'Custom name'})
+    expect(setDevelopmentTheme).toHaveBeenCalled()
+  })
+
   test('creates development theme when development and unpublished flags are provided', async () => {
     // Given
     vi.mocked(themeCreate).mockResolvedValue(buildTheme({id: 1, name: 'Theme', role: DEVELOPMENT_THEME_ROLE}))

packages/theme/src/cli/services/push.ts

@@ -108,6 +108,9 @@ export interface PushFlags {
 
   /** The environment to push the theme to. */
   environment?: string[]
+
+  /** The name of the theme. Will always create a new theme. */
+  name?: string
 }
 
 /**
@@ -366,13 +369,13 @@ export async function createOrSelectTheme(
   flags: PushFlags,
   multiEnvironment?: boolean,
 ): Promise<Theme | undefined> {
-  const {live, development, unpublished, theme, environment} = flags
+  const {live, development, unpublished, theme, environment, name} = flags
 
   if (development) {
     const themeManager = new DevelopmentThemeManager(session)
-    return themeManager.findOrCreate()
-  } else if (unpublished) {
-    const themeName = theme ?? (await promptThemeName('Name of the new theme'))
+    return themeManager.findOrCreate(name)
+  } else if (unpublished ?? name) {
+    const themeName = name ?? theme ?? (await promptThemeName('Name of the new theme'))
     return themeCreate(
       {
         name: themeName,