Merge pull request #6326 from Shopify/idempotent-import-extension

Better handling on import-extensions with existing folder

Author: gonzaloriestra

.changeset/rotten-ties-flash.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Better handling on import-extensions with existing folder

packages/app/src/cli/services/import-extensions.test.ts

@@ -4,9 +4,10 @@ import {testAppLinked, testDeveloperPlatformClient, testUIExtension} from '../mo
 import {OrganizationApp} from '../models/organization.js'
 import {ExtensionRegistration} from '../api/graphql/all_app_extension_registrations.js'
 import {describe, expect, test, vi, beforeEach} from 'vitest'
-import {fileExistsSync, inTemporaryDirectory} from '@shopify/cli-kit/node/fs'
+import {fileExistsSync, inTemporaryDirectory, mkdir} from '@shopify/cli-kit/node/fs'
 import {renderSelectPrompt, renderSuccess} from '@shopify/cli-kit/node/ui'
 import {joinPath} from '@shopify/cli-kit/node/path'
+import {AbortSilentError} from '@shopify/cli-kit/node/error'
 
 vi.mock('@shopify/cli-kit/node/ui')
 vi.mock('./context.js')
@@ -135,6 +136,141 @@ describe('import-extensions', () => {
     })
   })
 
+  test('handles existing directory with user prompt - skip', async () => {
+    // Given
+    const extensions = [flowExtensionA]
+
+    // When
+    await inTemporaryDirectory(async (tmpDir) => {
+      const app = testAppLinked({directory: tmpDir})
+
+      // Create the extensions directory
+      const extensionsDir = joinPath(tmpDir, 'extensions')
+      await mkdir(extensionsDir)
+
+      // Create the specific extension directory
+      const extensionDir = joinPath(extensionsDir, 'title-a')
+      await mkdir(extensionDir)
+
+      // Mock prompts:
+      // 1. First prompt: select which extension to migrate (select flowExtensionA by its UUID)
+      // 2. Second prompt: what to do with existing directory (select skip)
+      vi.mocked(renderSelectPrompt)
+        // Select flowExtensionA
+        .mockResolvedValueOnce('uuidA')
+        // Skip existing directory
+        .mockResolvedValueOnce('skip')
+
+      await importExtensions({
+        app,
+        remoteApp: organizationApp,
+        developerPlatformClient: testDeveloperPlatformClient(),
+        extensionTypes: ['flow_action_definition'],
+        extensions,
+        buildTomlObject,
+      })
+
+      // Then - expect the success message to be shown (even for skipped extensions)
+      expect(renderSuccess).toHaveBeenCalledWith({
+        headline: ['Imported the following extensions from the dashboard:'],
+        body: '• "titleA" at: extensions/title-a',
+      })
+
+      // The toml file should not be created since we skipped
+      const tomlPathA = joinPath(tmpDir, 'extensions', 'title-a', 'shopify.extension.toml')
+      expect(fileExistsSync(tomlPathA)).toBe(false)
+    })
+  })
+
+  test('handles existing directory with write option', async () => {
+    // Given
+    const extensions = [flowExtensionA]
+
+    // When
+    await inTemporaryDirectory(async (tmpDir) => {
+      const app = testAppLinked({directory: tmpDir})
+
+      // Create the extensions directory
+      const extensionsDir = joinPath(tmpDir, 'extensions')
+      await mkdir(extensionsDir)
+
+      // Create the specific extension directory
+      const extensionDir = joinPath(extensionsDir, 'title-a')
+      await mkdir(extensionDir)
+
+      // Mock prompts:
+      // 1. First prompt: select which extension to migrate (select flowExtensionA by its UUID)
+      // 2. Second prompt: what to do with existing directory (select write)
+      vi.mocked(renderSelectPrompt)
+        // Select flowExtensionA
+        .mockResolvedValueOnce('uuidA')
+        // Write/overwrite existing directory
+        .mockResolvedValueOnce('write')
+
+      await importExtensions({
+        app,
+        remoteApp: organizationApp,
+        developerPlatformClient: testDeveloperPlatformClient(),
+        extensionTypes: ['flow_action_definition'],
+        extensions,
+        buildTomlObject,
+      })
+
+      // Then - expect the success message to be shown
+      expect(renderSuccess).toHaveBeenCalledWith({
+        headline: ['Imported the following extensions from the dashboard:'],
+        body: '• "titleA" at: extensions/title-a',
+      })
+
+      // The toml file should be created since we wrote/overwrote
+      const tomlPathA = joinPath(tmpDir, 'extensions', 'title-a', 'shopify.extension.toml')
+      expect(fileExistsSync(tomlPathA)).toBe(true)
+    })
+  })
+
+  test('handles existing directory with cancel option', async () => {
+    // Given
+    const extensions = [flowExtensionA]
+
+    // When
+    await inTemporaryDirectory(async (tmpDir) => {
+      const app = testAppLinked({directory: tmpDir})
+
+      // Create the extensions directory
+      const extensionsDir = joinPath(tmpDir, 'extensions')
+      await mkdir(extensionsDir)
+
+      // Create the specific extension directory
+      const extensionDir = joinPath(extensionsDir, 'title-a')
+      await mkdir(extensionDir)
+
+      // Mock prompts:
+      // 1. First prompt: select which extension to migrate (select flowExtensionA by its UUID)
+      // 2. Second prompt: what to do with existing directory (select cancel)
+      vi.mocked(renderSelectPrompt)
+        // Select flowExtensionA
+        .mockResolvedValueOnce('uuidA')
+        // Cancel the operation
+        .mockResolvedValueOnce('cancel')
+
+      // Then - expect the function to throw an AbortSilentError
+      await expect(
+        importExtensions({
+          app,
+          remoteApp: organizationApp,
+          developerPlatformClient: testDeveloperPlatformClient(),
+          extensionTypes: ['flow_action_definition'],
+          extensions,
+          buildTomlObject,
+        }),
+      ).rejects.toThrow(AbortSilentError)
+
+      // The toml file should not be created since we cancelled
+      const tomlPathA = joinPath(tmpDir, 'extensions', 'title-a', 'shopify.extension.toml')
+      expect(fileExistsSync(tomlPathA)).toBe(false)
+    })
+  })
+
   test('selecting All imports all extensions', async () => {
     // Given
     const extensions = [

packages/app/src/cli/services/import-extensions.ts

@@ -1,18 +1,17 @@
-import {ensureExtensionDirectoryExists} from './extensions/common.js'
 import {AppLinkedInterface, CurrentAppConfiguration} from '../models/app/app.js'
 import {updateAppIdentifiers, IdentifiersExtensions} from '../models/app/identifiers.js'
 import {ExtensionRegistration} from '../api/graphql/all_app_extension_registrations.js'
 import {DeveloperPlatformClient} from '../utilities/developer-platform-client.js'
 import {MAX_EXTENSION_HANDLE_LENGTH} from '../models/extensions/schemas.js'
 import {OrganizationApp} from '../models/organization.js'
 import {allMigrationChoices, getMigrationChoices} from '../prompts/import-extensions.js'
-import {configurationFileNames} from '../constants.js'
+import {configurationFileNames, blocks} from '../constants.js'
 import {renderSelectPrompt, renderSuccess} from '@shopify/cli-kit/node/ui'
 import {basename, joinPath} from '@shopify/cli-kit/node/path'
-import {removeFile, writeFile} from '@shopify/cli-kit/node/fs'
+import {removeFile, writeFile, fileExists, mkdir, touchFile} from '@shopify/cli-kit/node/fs'
 import {outputContent} from '@shopify/cli-kit/node/output'
-import {slugify} from '@shopify/cli-kit/common/string'
-import {AbortError} from '@shopify/cli-kit/node/error'
+import {slugify, hyphenate} from '@shopify/cli-kit/common/string'
+import {AbortError, AbortSilentError} from '@shopify/cli-kit/node/error'
 
 export const allExtensionTypes = allMigrationChoices.flatMap((choice) => choice.extensionTypes)
 
@@ -33,6 +32,50 @@ interface ImportOptions extends ImportAllOptions {
   all?: boolean
 }
 
+enum DirectoryAction {
+  Write = 'write',
+  Skip = 'skip',
+  Cancel = 'cancel',
+}
+
+/**
+ * Handles extension directory creation during import with user prompts for existing directories
+ */
+async function handleExtensionDirectory({
+  name,
+  app,
+}: {
+  name: string
+  app: AppLinkedInterface
+}): Promise<{directory: string; action: DirectoryAction}> {
+  const hyphenizedName = hyphenate(name)
+  const extensionDirectory = joinPath(app.directory, blocks.extensions.directoryName, hyphenizedName)
+
+  if (await fileExists(extensionDirectory)) {
+    const choices = [
+      {label: 'Overwrite local TOML with remote configuration', value: DirectoryAction.Write},
+      {label: 'Keep local TOML', value: DirectoryAction.Skip},
+      {label: 'Cancel', value: DirectoryAction.Cancel},
+    ]
+
+    const action = await renderSelectPrompt({
+      message: `Directory "${hyphenizedName}" already exists. What would you like to do?`,
+      choices,
+    })
+
+    if (action === DirectoryAction.Cancel) {
+      throw new AbortSilentError()
+    }
+
+    return {directory: extensionDirectory, action}
+  }
+
+  // Directory doesn't exist, create it
+  await mkdir(extensionDirectory)
+  await touchFile(joinPath(extensionDirectory, configurationFileNames.lockFile))
+  return {directory: extensionDirectory, action: DirectoryAction.Write}
+}
+
 export async function importExtensions(options: ImportOptions) {
   const {app, remoteApp, developerPlatformClient, extensionTypes, extensions, buildTomlObject, all} = options
 
@@ -61,14 +104,19 @@ export async function importExtensions(options: ImportOptions) {
 
   const extensionUuids: IdentifiersExtensions = {}
   const importPromises = extensionsToMigrate.map(async (ext) => {
-    const directory = await ensureExtensionDirectoryExists({app, name: ext.title})
-    const tomlObject = buildTomlObject(ext, extensions, app.configuration)
-    const path = joinPath(directory, 'shopify.extension.toml')
-    await writeFile(path, tomlObject)
+    const {directory, action} = await handleExtensionDirectory({app, name: ext.title})
+
     const handle = slugify(ext.title.substring(0, MAX_EXTENSION_HANDLE_LENGTH))
     extensionUuids[handle] = ext.uuid
-    const lockFilePath = joinPath(directory, configurationFileNames.lockFile)
-    await removeFile(lockFilePath)
+
+    if (action === DirectoryAction.Write) {
+      const tomlObject = buildTomlObject(ext, extensions, app.configuration)
+      const path = joinPath(directory, 'shopify.extension.toml')
+      await writeFile(path, tomlObject)
+      const lockFilePath = joinPath(directory, configurationFileNames.lockFile)
+      await removeFile(lockFilePath)
+    }
+
     return {extension: ext, directory: joinPath('extensions', basename(directory))}
   })