Merge pull request #5197 from Shopify/theme-info-rework

Theme info rework

Author: amcaplan

.changeset/healthy-tips-raise.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': minor
+---
+
+Give theme info a facelift using standard UI components

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

@@ -7,6 +7,7 @@ import {ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import {globalFlags, jsonFlag} from '@shopify/cli-kit/node/cli'
 import {formatSection, outputInfo} from '@shopify/cli-kit/node/output'
+import {renderInfo} from '@shopify/cli-kit/node/ui'
 
 export default class Info extends ThemeCommand {
   static description =
@@ -52,7 +53,7 @@ export default class Info extends ThemeCommand {
       outputInfo(infoMessage)
     } else {
       const infoMessage = await fetchDevInfo({cliVersion: this.config.version})
-      outputInfo(infoMessage)
+      renderInfo({customSections: infoMessage})
     }
   }
 }

packages/theme/src/cli/services/info.ts

@@ -2,13 +2,10 @@ import {getDevelopmentTheme, getThemeStore} from './local-storage.js'
 import {findOrSelectTheme} from '../utilities/theme-selector.js'
 import {DevelopmentThemeManager} from '../utilities/development-theme-manager.js'
 import {platformAndArch} from '@shopify/cli-kit/node/os'
-import {checkForNewVersion} from '@shopify/cli-kit/node/node-package-manager'
 import {themeEditorUrl, themePreviewUrl} from '@shopify/cli-kit/node/themes/urls'
 import {Theme} from '@shopify/cli-kit/node/themes/types'
 import {AdminSession} from '@shopify/cli-kit/node/session'
-import {linesToColumns} from '@shopify/cli-kit/common/string'
-import {OutputMessage, formatSection} from '@shopify/cli-kit/node/output'
-import {getOutputUpdateCLIReminder} from '@shopify/cli-kit/node/upgrade'
+import {AlertCustomSection, InlineToken} from '@shopify/cli-kit/node/ui'
 
 interface ThemeInfo {
   theme: {
@@ -58,40 +55,32 @@ export async function fetchThemeInfo(
   return theme ? themeInfoJSON(theme, adminSession) : undefined
 }
 
-export async function fetchDevInfo(config: {cliVersion: string}): Promise<OutputMessage> {
-  const sections: [string, string][] = [devConfigSection(), await systemInfoSection(config)]
-  const message = sections.map((sectionContents) => formatSection(...sectionContents)).join('\n\n')
-  return message
+export async function fetchDevInfo(config: {cliVersion: string}): Promise<AlertCustomSection[]> {
+  return [devConfigSection(), await systemInfoSection(config)]
 }
 
-function devConfigSection(): [string, string] {
-  const title = 'Theme Configuration'
+function devConfigSection(): AlertCustomSection {
   const store = getThemeStore() || 'Not configured'
-  let developmentTheme = getDevelopmentTheme()
-  developmentTheme = developmentTheme ? `#${developmentTheme}` : 'Not set'
-  const lines: string[][] = [
+  const developmentTheme = getDevelopmentTheme()
+  return tabularSection('Theme Configuration', [
     ['Store', store],
-    ['Development Theme ID', developmentTheme],
-  ]
-  return [title, linesToColumns(lines)]
+    ['Development Theme ID', developmentTheme ? `#${developmentTheme}` : {subdued: 'Not set'}],
+  ])
 }
 
-async function systemInfoSection(config: {cliVersion: string}): Promise<[string, string]> {
-  const title = 'Tooling and System'
+async function systemInfoSection(config: {cliVersion: string}): Promise<AlertCustomSection> {
   const {platform, arch} = platformAndArch()
-  const lines: string[][] = [
-    ['Shopify CLI', await cliVersionInfo(config)],
+  return tabularSection('Tooling and System', [
+    ['Shopify CLI', config.cliVersion],
     ['OS', `${platform}-${arch}`],
     ['Shell', process.env.SHELL || 'unknown'],
     ['Node version', process.version],
-  ]
-  return [title, linesToColumns(lines)]
+  ])
 }
 
-async function cliVersionInfo(config: {cliVersion: string}): Promise<string> {
-  const dependency = '@shopify/cli'
-  const newestVersion = await checkForNewVersion(dependency, config.cliVersion)
-  if (!newestVersion) return config.cliVersion
-  const upgradeMessage = getOutputUpdateCLIReminder(newestVersion)
-  return [config.cliVersion, upgradeMessage].join(' ').trim()
+function tabularSection(title: string, data: InlineToken[][]): AlertCustomSection {
+  return {
+    title,
+    body: {tabularData: data, firstColumnSubdued: true},
+  }
 }