Add confirmation prompt to multi-env theme commands

Previously multi-environment theme commands did
not prompt for confirmation before running. This commit
adds a confirmation prompt that will be displayed
if the command accepts `--force` flag and has not
been set to force.

Author: dejmedus

.changeset/dry-waves-agree.md

@@ -0,0 +1,6 @@
+---
+'@shopify/theme': minor
+'@shopify/cli': minor
+---
+
+Prompt for confirmation before running multi-environment theme commands that allow `--force` flag

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

@@ -1,4 +1,5 @@
 import ThemeCommand from './theme-command.js'
+import {ensureThemeStore} from './theme-store.js'
 import {describe, vi, expect, test, beforeEach} from 'vitest'
 import {Config, Flags} from '@oclif/core'
 import {AdminSession, ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
@@ -9,6 +10,7 @@ import type {Writable} from 'stream'
 vi.mock('@shopify/cli-kit/node/session')
 vi.mock('@shopify/cli-kit/node/environments')
 vi.mock('@shopify/cli-kit/node/ui')
+vi.mock('./theme-store.js')
 
 const CommandConfig = new Config({root: __dirname})
 
@@ -45,6 +47,17 @@ class TestThemeCommand extends ThemeCommand {
   }
 }
 
+class TestThemeCommandWithForce extends TestThemeCommand {
+  static flags = {
+    ...TestThemeCommand.flags,
+    force: Flags.boolean({
+      char: 'f',
+      description: 'Skip confirmation',
+      env: 'SHOPIFY_FLAG_FORCE',
+    }),
+  }
+}
+
 describe('ThemeCommand', () => {
   let mockSession: AdminSession
 
@@ -53,6 +66,7 @@ describe('ThemeCommand', () => {
       token: 'test-token',
       storeFqdn: 'test-store.myshopify.com',
     }
+    vi.mocked(ensureThemeStore).mockReturnValue('test-store.myshopify.com')
     vi.mocked(ensureAuthenticatedThemes).mockResolvedValue(mockSession)
   })
 
@@ -61,7 +75,6 @@ describe('ThemeCommand', () => {
       // Given
       await CommandConfig.load()
       const command = new TestThemeCommand([], CommandConfig)
-
       // When
       await command.run()
 
@@ -136,6 +149,103 @@ describe('ThemeCommand', () => {
   })
 
   describe('multi environment', () => {
+    test('commands with --force flag should not prompt for confirmation', async () => {
+      // Given
+      const environmentConfig = {store: 'store.myshopify.com'}
+      vi.mocked(loadEnvironment).mockResolvedValue(environmentConfig)
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true)
+      vi.mocked(renderConcurrent).mockResolvedValue(undefined)
+
+      await CommandConfig.load()
+      const command = new TestThemeCommandWithForce(
+        ['--environment', 'development', '--environment', 'staging', '--force'],
+        CommandConfig,
+      )
+
+      // When
+      await command.run()
+
+      // Then
+      expect(renderConfirmationPrompt).not.toHaveBeenCalled()
+      expect(renderConcurrent).toHaveBeenCalledOnce()
+      expect(renderConcurrent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          processes: expect.arrayContaining([
+            expect.objectContaining({prefix: 'development'}),
+            expect.objectContaining({prefix: 'staging'}),
+          ]),
+          showTimestamps: true,
+        }),
+      )
+    })
+
+    test('commands that do not allow --force flag should not prompt for confirmation', async () => {
+      // Given
+      const environmentConfig = {store: 'store.myshopify.com'}
+      vi.mocked(loadEnvironment).mockResolvedValue(environmentConfig)
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true)
+      vi.mocked(renderConcurrent).mockResolvedValue(undefined)
+
+      await CommandConfig.load()
+      const command = new TestThemeCommand(['--environment', 'development', '--environment', 'staging'], CommandConfig)
+
+      // When
+      await command.run()
+
+      // Then
+      expect(renderConfirmationPrompt).not.toHaveBeenCalled()
+      expect(renderConcurrent).toHaveBeenCalledOnce()
+    })
+
+    test('commands without --force flag that allow it should prompt for confirmation', async () => {
+      // Given
+      const environmentConfig = {store: 'store.myshopify.com'}
+      vi.mocked(loadEnvironment).mockResolvedValue(environmentConfig)
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true)
+      vi.mocked(renderConcurrent).mockResolvedValue(undefined)
+
+      await CommandConfig.load()
+      const command = new TestThemeCommandWithForce(
+        ['--environment', 'development', '--environment', 'staging'],
+        CommandConfig,
+      )
+
+      // When
+      await command.run()
+
+      // Then
+      expect(renderConfirmationPrompt).toHaveBeenCalledOnce()
+      expect(renderConfirmationPrompt).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.any(Array),
+          confirmationMessage: 'Yes, proceed',
+          cancellationMessage: 'Cancel',
+        }),
+      )
+      expect(renderConcurrent).toHaveBeenCalledOnce()
+    })
+
+    test('should not execute command if confirmation is cancelled', async () => {
+      // Given
+      const environmentConfig = {store: 'store.myshopify.com'}
+      vi.mocked(loadEnvironment).mockResolvedValue(environmentConfig)
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(false)
+      vi.mocked(renderConcurrent).mockResolvedValue(undefined)
+
+      await CommandConfig.load()
+      const command = new TestThemeCommandWithForce(
+        ['--environment', 'development', '--environment', 'staging'],
+        CommandConfig,
+      )
+
+      // When
+      await command.run()
+
+      // Then
+      expect(renderConfirmationPrompt).toHaveBeenCalledOnce()
+      expect(renderConcurrent).not.toHaveBeenCalled()
+    })
+
     test('should not execute commands in environments that are missing required flags', async () => {
       // Given
       vi.mocked(loadEnvironment)

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

@@ -4,7 +4,13 @@ import {Input} from '@oclif/core/interfaces'
 import Command, {ArgOutput, FlagOutput} from '@shopify/cli-kit/node/base-command'
 import {AdminSession, ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
 import {loadEnvironment} from '@shopify/cli-kit/node/environments'
-import {renderWarning, renderConcurrent, renderError} from '@shopify/cli-kit/node/ui'
+import {
+  renderWarning,
+  renderConcurrent,
+  renderConfirmationPrompt,
+  RenderConfirmationPromptOptions,
+  renderError,
+} from '@shopify/cli-kit/node/ui'
 import {AbortController} from '@shopify/cli-kit/node/abort'
 import type {Writable} from 'stream'
 
@@ -53,6 +59,7 @@ export default abstract class ThemeCommand extends Command {
     // Parse command flags using the current command class definitions
     const klass = this.constructor as unknown as Input<TFlags, TGlobalFlags, TArgs> & {
       multiEnvironmentsFlags: string[]
+      flags: FlagOutput
     }
     const requiredFlags = klass.multiEnvironmentsFlags
     const {flags} = await this.parse(klass)
@@ -71,6 +78,13 @@ export default abstract class ThemeCommand extends Command {
     const environmentsMap = await this.loadEnvironments(environments, flags)
     const validationResults = await this.validateEnvironments(environmentsMap, requiredFlags)
 
+    const commandAllowsForceFlag = 'force' in klass.flags
+
+    if (commandAllowsForceFlag && !flags.force) {
+      const confirmed = await this.showConfirmation(this.constructor.name, requiredFlags, validationResults)
+      if (!confirmed) return
+    }
+
     await this.runConcurrent(validationResults.valid)
   }
 
@@ -114,22 +128,66 @@ export default abstract class ThemeCommand extends Command {
     const invalid: {environment: EnvironmentName; reason: string}[] = []
 
     for (const [environmentName, environmentFlags] of environmentMap) {
-      // eslint-disable-next-line no-await-in-loop
-      const session = await this.createSession(environmentFlags)
-
       const validationResult = this.validConfig(environmentFlags, requiredFlags, environmentName)
       if (validationResult !== true) {
         const missingFlagsText = validationResult.join(', ')
         invalid.push({environment: environmentName, reason: `Missing flags: ${missingFlagsText}`})
         continue
       }
 
+      // eslint-disable-next-line no-await-in-loop
+      const session = await this.createSession(environmentFlags)
+
       valid.push({environment: environmentName, flags: environmentFlags, session})
     }
 
     return {valid, invalid}
   }
 
+  /**
+   * Show a confirmation prompt
+   * @param commandName - The name of the command being run
+   * @param requiredFlags - The flags required to run the command
+   * @param validationResults -  The environments split into valid and invalid
+   * @returns Whether the user confirmed the action
+   */
+  private async showConfirmation(
+    commandName: string,
+    requiredFlags: string[],
+    validationResults: {
+      valid: {environment: string; flags: FlagValues}[]
+      invalid: {environment: string; reason: string}[]
+    },
+  ) {
+    const command = commandName.toLowerCase()
+    const message = [`Run ${command} in the following environments?`]
+
+    const options: RenderConfirmationPromptOptions = {
+      message,
+      confirmationMessage: 'Yes, proceed',
+      cancellationMessage: 'Cancel',
+    }
+
+    const environmentDetails = [
+      ...validationResults.valid.map(({environment, flags}) => {
+        const flagDetails = requiredFlags
+          .map((flag) => (flag.includes('password') ? flag : `${flag}: ${String(flags[flag])}`))
+          .join(', ')
+
+        return [environment, {subdued: flagDetails || 'No flags required'}]
+      }),
+      ...validationResults.invalid.map(({environment, reason}) => [environment, {error: `Skipping | ${reason}`}]),
+    ]
+
+    options.infoTable = {Environment: environmentDetails}
+
+    if (validationResults.invalid.length > 0) {
+      options.confirmationMessage = 'Proceed anyway (will skip invalid environments)'
+    }
+
+    return renderConfirmationPrompt(options)
+  }
+
   /**
    * Run the command in each valid environment concurrently
    * @param validEnvironments - The valid environments to run the command in
@@ -161,7 +219,7 @@ export default abstract class ThemeCommand extends Command {
   }
 
   /**
-   * Create an authenticated session object from the flags
+   * Create an unauthenticated session object from store and password
    * @param flags - The environment flags containing store and password
    * @returns The unauthenticated session object
    */