From ce0342a530762e1fe3519544e3feeab964b42c15 Mon Sep 17 00:00:00 2001
From: James Meng <35415298+jamesmengo@users.noreply.github.com>
Date: Wed, 14 Aug 2024 05:31:58 -0700
Subject: [PATCH] [Themes] App Dev Dev Preview - Host Theme Creation Process UI
 (#4307)

* Render progress bar when creating host theme

* Render preview link after host theme is created

* Update progress bar message

* Add debug logs

* Refactor: clean up types and arguments
---
 .../dev/processes/theme-app-extension-next.ts | 78 +++++++++++--------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/cli/services/dev/processes/theme-app-extension-next.ts b/packages/app/src/cli/services/dev/processes/theme-app-extension-next.ts
index 0b7391c483..d02b5e5758 100644
--- a/packages/app/src/cli/services/dev/processes/theme-app-extension-next.ts
+++ b/packages/app/src/cli/services/dev/processes/theme-app-extension-next.ts
@@ -2,50 +2,39 @@ import {BaseProcess, DevProcessFunction} from './types.js'
 import {ExtensionInstance} from '../../../models/extensions/extension-instance.js'
 import {DeveloperPlatformClient} from '../../../utilities/developer-platform-client.js'
 import {HostThemeManager} from '../../../utilities/host-theme-manager.js'
-import {outputInfo} from '@shopify/cli-kit/node/output'
+import {outputDebug, outputInfo} from '@shopify/cli-kit/node/output'
 import {AdminSession, ensureAuthenticatedAdmin} from '@shopify/cli-kit/node/session'
 import {fetchTheme} from '@shopify/cli-kit/node/themes/api'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import {Theme} from '@shopify/cli-kit/node/themes/types'
+import {renderInfo, renderTasks, Task} from '@shopify/cli-kit/node/ui'
 
-interface PreviewThemeAppExtensionsOptions {
+interface ThemeAppExtensionServerOptions {
   adminSession: AdminSession
   developerPlatformClient: DeveloperPlatformClient
   themeId?: string
   themeExtensionPort?: number
 }
 
-export interface PreviewThemeAppExtensionsProcess extends BaseProcess<PreviewThemeAppExtensionsOptions> {
-  type: 'theme-app-extensions'
-}
-
-const runThemeAppExtensionsServerNext: DevProcessFunction<PreviewThemeAppExtensionsOptions> = async (
-  {stdout: _stdout, stderr: _stderr, abortSignal: _abortSignal},
-  {
-    adminSession: _adminSession,
-    developerPlatformClient: _developerPlatformClient,
-    themeId: _themeId,
-    themeExtensionPort: _themeExtensionPort,
-  },
-) => {
-  await initializeFSWatcher()
-  await startThemeAppExtensionDevelopmentServer()
-}
-
-export async function setupPreviewThemeAppExtensionsProcess({
-  allExtensions,
-  storeFqdn,
-  theme,
-  themeExtensionPort,
-  developerPlatformClient,
-}: Pick<PreviewThemeAppExtensionsOptions, 'developerPlatformClient'> & {
+interface HostThemeSetupOptions {
   allExtensions: ExtensionInstance[]
   storeFqdn: string
   theme?: string
   themeExtensionPort?: number
-}): Promise<PreviewThemeAppExtensionsProcess | undefined> {
+  developerPlatformClient: DeveloperPlatformClient
+}
+
+export interface PreviewThemeAppExtensionsProcess extends BaseProcess<ThemeAppExtensionServerOptions> {
+  type: 'theme-app-extensions'
+}
+
+export async function setupPreviewThemeAppExtensionsProcess(
+  options: HostThemeSetupOptions,
+): Promise<PreviewThemeAppExtensionsProcess | undefined> {
   outputInfo('This feature is currently in development and is not ready for use or testing yet.')
 
+  const {allExtensions, storeFqdn, theme, themeExtensionPort, developerPlatformClient} = options
+
   const themeExtensions = allExtensions.filter((ext) => ext.isThemeExtension)
   if (themeExtensions.length === 0) {
     return
@@ -55,6 +44,14 @@ export async function setupPreviewThemeAppExtensionsProcess({
 
   const themeId = await findOrCreateHostTheme(adminSession, theme)
 
+  renderInfo({
+    headline: {info: 'Setup your theme app extension in the host theme:'},
+    link: {
+      label: `https://${adminSession.storeFqdn}/admin/themes/${themeId}/editor`,
+      url: `https://${adminSession.storeFqdn}/admin/themes/${themeId}/editor`,
+    },
+  })
+
   return {
     type: 'theme-app-extensions',
     prefix: 'theme-extensions',
@@ -71,16 +68,35 @@ export async function setupPreviewThemeAppExtensionsProcess({
 export async function findOrCreateHostTheme(adminSession: AdminSession, theme?: string): Promise<string> {
   let hostTheme: Theme | undefined
   if (theme) {
+    outputDebug(`Fetching theme with provided id ${theme}`)
     hostTheme = await fetchTheme(parseInt(theme, 10), adminSession)
-    if (!hostTheme) {
-      throw new AbortError(`Could not find a theme on shop ${adminSession.storeFqdn} with id ${theme}`)
-    }
   } else {
     const themeManager = new HostThemeManager(adminSession, {devPreview: true})
-    hostTheme = await themeManager.findOrCreate()
+    const tasks: Task[] = [
+      {
+        title: 'Configuring host theme for theme app extension',
+        task: async () => {
+          outputDebug('Finding or creating host theme for theme app extensions')
+          hostTheme = await themeManager.findOrCreate()
+        },
+      },
+    ]
+    await renderTasks(tasks)
+  }
+
+  if (!hostTheme) {
+    throw new AbortError(`Could not find or create a host theme for theme app extensions`)
   }
+
   return hostTheme.id.toString()
 }
+const runThemeAppExtensionsServerNext: DevProcessFunction<ThemeAppExtensionServerOptions> = async (
+  {stdout: _stdout, stderr: _stderr, abortSignal: _abortSignal},
+  _PreviewThemeAppExtensionsOptions,
+) => {
+  await initializeFSWatcher()
+  await startThemeAppExtensionDevelopmentServer()
+}
 
 async function initializeFSWatcher() {}