Merge pull request #6161 from Shopify/jb-multi-env-rename

Allow theme rename command to be called with multiple environments

Author: dejmedus

.changeset/great-dragons-float.md

@@ -0,0 +1,6 @@
+---
+'@shopify/theme': minor
+'@shopify/cli': minor
+---
+
+Allow theme rename command to be run with multiple environments

.changeset/wet-lions-cross.md

@@ -0,0 +1,6 @@
+---
+'@shopify/theme': minor
+'@shopify/cli': minor
+---
+
+Allow commands run with multiple environments to require "one of" a list of flags

packages/cli/oclif.manifest.json

@@ -6762,6 +6762,16 @@
       "hiddenAliases": [
       ],
       "id": "theme:rename",
+      "multiEnvironmentsFlags": [
+        "store",
+        "password",
+        "name",
+        [
+          "live",
+          "development",
+          "theme"
+        ]
+      ],
       "pluginAlias": "@shopify/cli",
       "pluginName": "@shopify/cli",
       "pluginType": "core",

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

@@ -1,11 +1,9 @@
-import ThemeCommand from '../../utilities/theme-command.js'
-import {RenameOptions, renameTheme} from '../../services/rename.js'
-import {ensureThemeStore} from '../../utilities/theme-store.js'
+import ThemeCommand, {RequiredFlags} from '../../utilities/theme-command.js'
 import {themeFlags} from '../../flags.js'
+import {RenameOptions, renameTheme} from '../../services/rename.js'
 import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
-import {ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
-import {promptThemeName} from '@shopify/cli-kit/node/themes/utils'
+import {AdminSession} from '@shopify/cli-kit/node/session'
 
 export default class Rename extends ThemeCommand {
   static summary = 'Renames an existing theme.'
@@ -43,21 +41,9 @@ export default class Rename extends ThemeCommand {
     }),
   }
 
-  public async run(): Promise<void> {
-    const {flags} = await this.parse(Rename)
-    const {password, development, name, theme, live} = flags
-
-    const store = ensureThemeStore(flags)
-    const adminSession = await ensureAuthenticatedThemes(store, password)
-    const newName = name || (await promptThemeName('New name for the theme'))
-
-    const renameOptions: RenameOptions = {
-      newName,
-      development,
-      theme,
-      live,
-    }
+  static multiEnvironmentsFlags: RequiredFlags = ['store', 'password', 'name', ['live', 'development', 'theme']]
 
-    await renameTheme(adminSession, renameOptions)
+  async command(flags: RenameOptions, adminSession: AdminSession) {
+    await renameTheme(flags, adminSession)
   }
 }

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

@@ -23,7 +23,7 @@ const developmentTheme = {
 
 const options: RenameOptions = {
   development: false,
-  newName: 'Renamed Theme',
+  name: 'Renamed Theme',
   live: false,
 }
 
@@ -33,10 +33,10 @@ describe('renameTheme', () => {
     vi.mocked(findOrSelectTheme).mockResolvedValue(developmentTheme)
 
     // When
-    await renameTheme(adminSession, {...options, development: true})
+    await renameTheme({...options, development: true}, adminSession)
 
     // Then
-    expect(themeUpdate).toBeCalledWith(developmentTheme.id, {name: options.newName}, adminSession)
+    expect(themeUpdate).toBeCalledWith(developmentTheme.id, {name: options.name}, adminSession)
     expect(renderSuccess).toBeCalledWith({
       body: ['The theme', "'my development theme'", {subdued: '(#1)'}, 'was renamed to', "'Renamed Theme'"],
     })
@@ -52,10 +52,10 @@ describe('renameTheme', () => {
     vi.mocked(findOrSelectTheme).mockResolvedValue(theme1)
 
     // When
-    await renameTheme(adminSession, {...options, theme: '2'})
+    await renameTheme({...options, theme: '2'}, adminSession)
 
     // Then
-    expect(themeUpdate).toBeCalledWith(theme1.id, {name: options.newName}, adminSession)
+    expect(themeUpdate).toBeCalledWith(theme1.id, {name: options.name}, adminSession)
     expect(renderSuccess).toBeCalledWith({
       body: ['The theme', "'my theme'", {subdued: '(#2)'}, 'was renamed to', "'Renamed Theme'"],
     })
@@ -71,10 +71,10 @@ describe('renameTheme', () => {
     vi.mocked(findOrSelectTheme).mockResolvedValue(theme1)
 
     // When
-    await renameTheme(adminSession, {...options, live: true})
+    await renameTheme({...options, live: true}, adminSession)
 
     // Then
-    expect(themeUpdate).toBeCalledWith(theme1.id, {name: options.newName}, adminSession)
+    expect(themeUpdate).toBeCalledWith(theme1.id, {name: options.name}, adminSession)
     expect(renderSuccess).toBeCalledWith({
       body: ['The theme', "'live theme'", {subdued: '(#2)'}, 'was renamed to', "'Renamed Theme'"],
     })

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

@@ -3,15 +3,19 @@ import {themeComponent} from '../utilities/theme-ui.js'
 import {themeUpdate} from '@shopify/cli-kit/node/themes/api'
 import {AdminSession} from '@shopify/cli-kit/node/session'
 import {renderSuccess} from '@shopify/cli-kit/node/ui'
+import {promptThemeName} from '@shopify/cli-kit/node/themes/utils'
 
 export interface RenameOptions {
-  newName: string
+  name?: string
   development?: boolean
   theme?: string
   live?: boolean
+  environment?: string
 }
 
-export async function renameTheme(adminSession: AdminSession, options: RenameOptions) {
+export async function renameTheme(options: RenameOptions, adminSession: AdminSession) {
+  const newName = options.name || (await promptThemeName('New name for the theme'))
+
   const theme = await findOrSelectTheme(adminSession, {
     header: 'Select a theme to rename',
     filter: {
@@ -20,8 +24,16 @@ export async function renameTheme(adminSession: AdminSession, options: RenameOpt
       live: options.live,
     },
   })
-  await themeUpdate(theme.id, {name: options.newName}, adminSession)
+
+  await themeUpdate(theme.id, {name: newName}, adminSession)
+
   renderSuccess({
-    body: ['The theme', ...themeComponent(theme), 'was renamed to', `'${options.newName}'`],
+    body: [
+      ...(options.environment ? [{subdued: `Environment: ${options.environment}\n\n`}] : []),
+      'The theme',
+      ...themeComponent(theme),
+      'was renamed to',
+      `'${newName}'`,
+    ],
   })
 }

packages/theme/src/cli/utilities/theme-command.test.ts

@@ -1,4 +1,4 @@
-import ThemeCommand from './theme-command.js'
+import ThemeCommand, {RequiredFlags} from './theme-command.js'
 import {ensureThemeStore} from './theme-store.js'
 import {describe, vi, expect, test, beforeEach} from 'vitest'
 import {Config, Flags} from '@oclif/core'
@@ -29,7 +29,7 @@ class TestThemeCommand extends ThemeCommand {
     }),
   }
 
-  static multiEnvironmentsFlags = ['store']
+  static multiEnvironmentsFlags: RequiredFlags = ['store']
 
   commandCalls: {flags: any; session: AdminSession; multiEnvironment?: boolean; context?: any}[] = []
 
@@ -58,6 +58,23 @@ class TestThemeCommandWithForce extends TestThemeCommand {
   }
 }
 
+class TestThemeCommandWithUnionFlags extends TestThemeCommand {
+  static multiEnvironmentsFlags: RequiredFlags = ['store', ['live', 'development', 'theme']]
+
+  static flags = {
+    ...TestThemeCommand.flags,
+    development: Flags.boolean({
+      env: 'SHOPIFY_FLAG_DEVELOPMENT',
+    }),
+    theme: Flags.string({
+      env: 'SHOPIFY_FLAG_THEME_ID',
+    }),
+    live: Flags.boolean({
+      env: 'SHOPIFY_FLAG_LIVE',
+    }),
+  }
+}
+
 describe('ThemeCommand', () => {
   let mockSession: AdminSession
 
@@ -246,6 +263,31 @@ describe('ThemeCommand', () => {
       expect(renderConcurrent).not.toHaveBeenCalled()
     })
 
+    test('should execute commands in environments with all required flags', async () => {
+      // Given
+      vi.mocked(loadEnvironment)
+        .mockResolvedValueOnce({store: 'store1.myshopify.com', theme: 'theme1.myshopify.com'})
+        .mockResolvedValueOnce({store: 'store2.myshopify.com', development: true})
+        .mockResolvedValueOnce({store: 'store3.myshopify.com', live: true})
+
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true)
+      vi.mocked(renderConcurrent).mockResolvedValue(undefined)
+
+      await CommandConfig.load()
+      const command = new TestThemeCommandWithUnionFlags(
+        ['--environment', 'theme', '--environment', 'development', '--environment', 'live'],
+        CommandConfig,
+      )
+
+      // When
+      await command.run()
+
+      // Then
+      const renderConcurrentProcesses = vi.mocked(renderConcurrent).mock.calls[0]?.[0]?.processes
+      expect(renderConcurrentProcesses).toHaveLength(3)
+      expect(renderConcurrentProcesses?.map((process) => process.prefix)).toEqual(['theme', 'development', 'live'])
+    })
+
     test('should not execute commands in environments that are missing required flags', async () => {
       // Given
       vi.mocked(loadEnvironment)
@@ -271,6 +313,31 @@ describe('ThemeCommand', () => {
       expect(renderConcurrentProcesses?.map((process) => process.prefix)).toEqual(['development', 'production'])
     })
 
+    test('should not execute commands in environments that are missing required "one of" flags', async () => {
+      // Given
+      vi.mocked(loadEnvironment)
+        .mockResolvedValueOnce({store: 'store1.myshopify.com', theme: 'theme1.myshopify.com'})
+        .mockResolvedValueOnce({store: 'store2.myshopify.com'})
+        .mockResolvedValueOnce({store: 'store3.myshopify.com', live: true})
+
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true)
+      vi.mocked(renderConcurrent).mockResolvedValue(undefined)
+
+      await CommandConfig.load()
+      const command = new TestThemeCommandWithUnionFlags(
+        ['--environment', 'theme', '--environment', 'missing-theme-live-or-development', '--environment', 'live'],
+        CommandConfig,
+      )
+
+      // When
+      await command.run()
+
+      // Then
+      const renderConcurrentProcesses = vi.mocked(renderConcurrent).mock.calls[0]?.[0]?.processes
+      expect(renderConcurrentProcesses).toHaveLength(2)
+      expect(renderConcurrentProcesses?.map((process) => process.prefix)).toEqual(['theme', 'live'])
+    })
+
     test('commands error gracefully and continue with other environments', async () => {
       // Given
       vi.mocked(loadEnvironment).mockResolvedValue({store: 'store.myshopify.com'})

packages/theme/src/cli/utilities/theme-command.ts

@@ -22,6 +22,21 @@ interface PassThroughFlagsOptions {
   allowedFlags?: string[]
 }
 type EnvironmentName = string
+/**
+ * Flags required to run a command in multiple environments
+ *
+ * If the command does not support multiple environments, set to null
+ *
+ * Otherwise, each element can be:
+ * - string: A required flag
+ * - string[]: Multiple flags where at least one is required,
+ *             ordered by precedence
+ *
+ *  @example
+ * // store, password, and one of: live, development, or theme
+ * ['store', 'password', ['live', 'development', 'theme']]
+ */
+export type RequiredFlags = (string | string[])[] | null
 
 export default abstract class ThemeCommand extends Command {
   passThroughFlags(flags: FlagValues, {allowedFlags}: PassThroughFlagsOptions): string[] {
@@ -58,7 +73,7 @@ export default abstract class ThemeCommand extends Command {
   >(_opts?: Input<TFlags, TGlobalFlags, TArgs>): Promise<void> {
     // Parse command flags using the current command class definitions
     const klass = this.constructor as unknown as Input<TFlags, TGlobalFlags, TArgs> & {
-      multiEnvironmentsFlags: string[] | null
+      multiEnvironmentsFlags: RequiredFlags
       flags: FlagOutput
     }
     const requiredFlags = klass.multiEnvironmentsFlags
@@ -128,7 +143,10 @@ export default abstract class ThemeCommand extends Command {
    * @param requiredFlags - The required flags to check for
    * @returns An object containing valid and invalid environment arrays
    */
-  private async validateEnvironments(environmentMap: Map<EnvironmentName, FlagValues>, requiredFlags: string[]) {
+  private async validateEnvironments(
+    environmentMap: Map<EnvironmentName, FlagValues>,
+    requiredFlags: Exclude<RequiredFlags, null>,
+  ) {
     const valid: {environment: EnvironmentName; flags: FlagValues; session: AdminSession}[] = []
     const invalid: {environment: EnvironmentName; reason: string}[] = []
 
@@ -158,7 +176,7 @@ export default abstract class ThemeCommand extends Command {
    */
   private async showConfirmation(
     commandName: string,
-    requiredFlags: string[],
+    requiredFlags: Exclude<RequiredFlags, null>,
     validationResults: {
       valid: {environment: string; flags: FlagValues}[]
       invalid: {environment: string; reason: string}[]
@@ -176,7 +194,10 @@ export default abstract class ThemeCommand extends Command {
     const environmentDetails = [
       ...validationResults.valid.map(({environment, flags}) => {
         const flagDetails = requiredFlags
-          .map((flag) => (flag.includes('password') ? flag : `${flag}: ${String(flags[flag])}`))
+          .map((flag) => {
+            const usedFlag = Array.isArray(flag) ? flag.find((flag) => flags[flag]) : flag
+            return usedFlag && [usedFlag.includes('password') ? usedFlag : `${usedFlag}: ${flags[usedFlag]}`]
+          })
           .join(', ')
 
         return [environment, {subdued: flagDetails || 'No flags required'}]
@@ -241,8 +262,14 @@ export default abstract class ThemeCommand extends Command {
    * @param environmentName - The name of the environment
    * @returns The missing flags or true if the environment has all required flags
    */
-  private validConfig(environmentFlags: FlagValues, requiredFlags: string[], environmentName: string): string[] | true {
-    const missingFlags = requiredFlags.filter((flag) => !environmentFlags[flag])
+  private validConfig(
+    environmentFlags: FlagValues,
+    requiredFlags: Exclude<RequiredFlags, null>,
+    environmentName: string,
+  ): string[] | true {
+    const missingFlags = requiredFlags
+      .filter((flag) => (Array.isArray(flag) ? !flag.some((flag) => environmentFlags[flag]) : !environmentFlags[flag]))
+      .map((flag) => (Array.isArray(flag) ? flag.join(' or ') : flag))
 
     if (missingFlags.length > 0) {
       renderWarning({