Merge pull request #6314 from Shopify/fix-741

Improve `shopify theme dev` to prevent accidental updates to live themes

Author: karreiro

.changeset/sour-clocks-suffer.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Improve `shopify theme dev` to prevent accidental updates to live themes

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

@@ -5,6 +5,7 @@ import {dev} from '../../services/dev.js'
 import {DevelopmentThemeManager} from '../../utilities/development-theme-manager.js'
 import {findOrSelectTheme} from '../../utilities/theme-selector.js'
 import {metafieldsPull} from '../../services/metafields-pull.js'
+import {ensureLiveThemeConfirmed} from '../../utilities/theme-ui.js'
 import {validateThemePassword} from '../../services/flags-validation.js'
 import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
@@ -146,6 +147,11 @@ You can run this command only in a directory that matches the [default Shopify t
       flags = {...flags, theme: theme.id.toString(), 'overwrite-json': overwriteJson}
     }
 
+    const confirmed = await ensureLiveThemeConfirmed(theme, 'start development mode')
+    if (!confirmed) {
+      return
+    }
+
     await dev({
       adminSession,
       directory: flags.path,

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

@@ -1,5 +1,6 @@
 import {recordEvent} from '@shopify/cli-kit/node/analytics'
 import {Theme} from '@shopify/cli-kit/node/themes/types'
+import {LIVE_THEME_ROLE} from '@shopify/cli-kit/node/themes/utils'
 import {Task, renderConfirmationPrompt, renderTasks, renderWarning} from '@shopify/cli-kit/node/ui'
 
 export function themeComponent(theme: Theme) {
@@ -40,6 +41,26 @@ export async function ensureDirectoryConfirmed(
   return confirm
 }
 
+export async function ensureLiveThemeConfirmed(theme: Theme, action: string) {
+  if (theme.role !== LIVE_THEME_ROLE || !process.stdout.isTTY) {
+    return true
+  }
+
+  const message =
+    `You're about to ${action} on your live theme "${theme.name}". ` +
+    `This will make changes visible to customers. Are you sure you want to proceed?`
+
+  const confirm = await renderConfirmationPrompt({
+    message,
+    confirmationMessage: 'Yes, proceed with live theme',
+    cancellationMessage: 'No, cancel',
+  })
+
+  recordEvent(`theme-service:confirm-live-theme:${confirm}`)
+
+  return confirm
+}
+
 // This prevents the progress bar from polluting stdout (important for pipe operations)
 export async function renderTasksToStdErr(tasks: Task[]) {
   if (tasks.length > 0) {