[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

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() {}