@shopify/cli-kit 3.47.4 → 3.48.0

package/assets/cli-ruby/lib/project_types/extension/messages/messages.rb

@@ -128,7 +128,7 @@ module Extension
         PREVIEW_MESSAGE
         preview_message_1p: <<~PREVIEW_MESSAGE,
           Access Shopify Organization:
-            {{green:%s}}
+          {{green:%s}}
 
           Enable your theme app extension:
           {{green:%s}}
@@ -136,6 +136,23 @@ module Extension
           Setup your theme app extension in the host theme:
           {{green:%s}}
 
+          Preview your theme app extension:
+          {{green:%s}}
+        PREVIEW_MESSAGE
+        preview_message_unified: <<~PREVIEW_MESSAGE,
+          Setup your theme app extension in the host theme:
+          {{green:%s}}
+
+          Preview your theme app extension:
+          {{green:%s}}
+        PREVIEW_MESSAGE
+        preview_message_1p_unified: <<~PREVIEW_MESSAGE,
+          Access Shopify Organization:
+            {{green:%s}}
+
+          Setup your theme app extension in the host theme:
+          {{green:%s}}
+
           Preview your theme app extension:
           {{green:%s}}
         PREVIEW_MESSAGE

package/assets/cli-ruby/lib/shopify_cli/constants.rb

@@ -33,6 +33,7 @@ module ShopifyCLI
       TTY = "SHOPIFY_CLI_TTY"
       RUN_AS_SUBPROCESS = "SHOPIFY_CLI_RUN_AS_SUBPROCESS"
       RUBY_BIN = "SHOPIFY_CLI_RUBY_BIN"
+      UNIFIED_DEPLOYMENT = "SHOPIFY_CLI_UNIFIED_DEPLOYMENT"
 
       # When true the CLI points to a local instance of
       # the partners dashboard and identity.

package/assets/cli-ruby/lib/shopify_cli/environment.rb

@@ -199,5 +199,12 @@ module ShopifyCLI
     def self.theme_access_password?
       admin_auth_token&.start_with?(THEME_ACCESS_PASSWORD_PREFIX)
     end
+
+    def self.unified_deployment?(env_variables: ENV)
+      env_variable_truthy?(
+        Constants::EnvironmentVariables::UNIFIED_DEPLOYMENT,
+        env_variables: env_variables
+      )
+    end
   end
 end

package/assets/cli-ruby/lib/shopify_cli/theme/extension/dev_server.rb

@@ -159,9 +159,15 @@ module ShopifyCLI
 
         def preview_message
           if Shopifolk.acting_as_shopify_organization?
-            parsed_uri = URI.parse(extension.location)
+            parsed_uri = URI.parse(extension.preview_message)
             shopify_org_url = "#{parsed_uri.scheme}://#{parsed_uri.host}/9082/impersonate"
-            ctx.message("serve.preview_message_1p", shopify_org_url, extension.location, theme.editor_url, address)
+            if ShopifyCLI::Environment.unified_deployment?
+              ctx.message("serve.preview_message_1p_unified", shopify_org_url, theme.editor_url, address)
+            else
+              ctx.message("serve.preview_message_1p", shopify_org_url, extension.location, theme.editor_url, address)
+            end
+          elsif ShopifyCLI::Environment.unified_deployment?
+            ctx.message("serve.preview_message_unified", theme.editor_url, address)
           else
             ctx.message("serve.preview_message", extension.location, theme.editor_url, address)
           end

package/dist/private/node/ui/alert.js

@@ -1,17 +1,19 @@
 import { Alert } from './components/Alert.js';
 import { renderOnce } from '../ui.js';
-import { consoleLog, consoleWarn } from '../../../public/node/output.js';
+import { consoleError, consoleLog, consoleWarn } from '../../../public/node/output.js';
 import { recordUIEvent } from '../demo-recorder.js';
 import React from 'react';
 const typeToLogLevel = {
     info: 'info',
     warning: 'warn',
     success: 'info',
+    error: 'error',
 };
 const typeToLogger = {
     info: consoleLog,
     warning: consoleWarn,
     success: consoleLog,
+    error: consoleError,
 };
 export function alert({ type, headline, body, nextSteps, reference, link, customSections, orderedNextSteps = false, renderOptions, }) {
     // eslint-disable-next-line prefer-rest-params

package/dist/private/node/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/private/node/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAa,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AACnC,OAAO,EAAC,UAAU,EAAE,WAAW,EAAmB,MAAM,gCAAgC,CAAA;AACxF,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,cAAc,GAA4C;IAC9D,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,YAAY,GAA0C;IAC1D,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,UAAU;CACpB,CAAA;AAMD,MAAM,UAAU,KAAK,CAAC,EACpB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,aAAa,GACA;IACb,8CAA8C;IAC9C,MAAM,EAAC,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;IACrD,aAAa,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAC,CAAC,CAAA;IAE7C,OAAO,UAAU,CACf,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,GAC9B,EACF,EAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAC,CAC5E,CAAA;AACH,CAAC","sourcesContent":["import {Alert, AlertProps} from './components/Alert.js'\nimport {renderOnce} from '../ui.js'\nimport {consoleLog, consoleWarn, Logger, LogLevel} from '../../../public/node/output.js'\nimport {recordUIEvent} from '../demo-recorder.js'\nimport React from 'react'\nimport {RenderOptions} from 'ink'\n\nconst typeToLogLevel: {[key in AlertProps['type']]: LogLevel} = {\n  info: 'info',\n  warning: 'warn',\n  success: 'info',\n}\n\nconst typeToLogger: {[key in AlertProps['type']]: Logger} = {\n  info: consoleLog,\n  warning: consoleWarn,\n  success: consoleLog,\n}\n\nexport interface AlertOptions extends AlertProps {\n  renderOptions?: RenderOptions\n}\n\nexport function alert({\n  type,\n  headline,\n  body,\n  nextSteps,\n  reference,\n  link,\n  customSections,\n  orderedNextSteps = false,\n  renderOptions,\n}: AlertOptions) {\n  // eslint-disable-next-line prefer-rest-params\n  const {type: alertType, ...eventProps} = arguments[0]\n  recordUIEvent({type, properties: eventProps})\n\n  return renderOnce(\n    <Alert\n      type={type}\n      headline={headline}\n      body={body}\n      nextSteps={nextSteps}\n      reference={reference}\n      link={link}\n      orderedNextSteps={orderedNextSteps}\n      customSections={customSections}\n    />,\n    {logLevel: typeToLogLevel[type], logger: typeToLogger[type], renderOptions},\n  )\n}\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/private/node/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAa,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AACnC,OAAO,EAAC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAmB,MAAM,gCAAgC,CAAA;AACtG,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,cAAc,GAA4C;IAC9D,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,YAAY,GAA0C;IAC1D,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,YAAY;CACpB,CAAA;AAMD,MAAM,UAAU,KAAK,CAAC,EACpB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,aAAa,GACA;IACb,8CAA8C;IAC9C,MAAM,EAAC,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;IACrD,aAAa,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAC,CAAC,CAAA;IAE7C,OAAO,UAAU,CACf,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,GAC9B,EACF,EAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAC,CAC5E,CAAA;AACH,CAAC","sourcesContent":["import {Alert, AlertProps} from './components/Alert.js'\nimport {renderOnce} from '../ui.js'\nimport {consoleError, consoleLog, consoleWarn, Logger, LogLevel} from '../../../public/node/output.js'\nimport {recordUIEvent} from '../demo-recorder.js'\nimport React from 'react'\nimport {RenderOptions} from 'ink'\n\nconst typeToLogLevel: {[key in AlertProps['type']]: LogLevel} = {\n  info: 'info',\n  warning: 'warn',\n  success: 'info',\n  error: 'error',\n}\n\nconst typeToLogger: {[key in AlertProps['type']]: Logger} = {\n  info: consoleLog,\n  warning: consoleWarn,\n  success: consoleLog,\n  error: consoleError,\n}\n\nexport interface AlertOptions extends AlertProps {\n  renderOptions?: RenderOptions\n}\n\nexport function alert({\n  type,\n  headline,\n  body,\n  nextSteps,\n  reference,\n  link,\n  customSections,\n  orderedNextSteps = false,\n  renderOptions,\n}: AlertOptions) {\n  // eslint-disable-next-line prefer-rest-params\n  const {type: alertType, ...eventProps} = arguments[0]\n  recordUIEvent({type, properties: eventProps})\n\n  return renderOnce(\n    <Alert\n      type={type}\n      headline={headline}\n      body={body}\n      nextSteps={nextSteps}\n      reference={reference}\n      link={link}\n      orderedNextSteps={orderedNextSteps}\n      customSections={customSections}\n    />,\n    {logLevel: typeToLogLevel[type], logger: typeToLogger[type], renderOptions},\n  )\n}\n"]}

package/dist/private/node/ui/components/Alert.d.ts

@@ -6,7 +6,7 @@ export interface CustomSection {
     body: TokenItem;
 }
 export interface AlertProps {
-    type: Exclude<BannerType, 'error' | 'external_error'>;
+    type: Exclude<BannerType, 'external_error'>;
     headline?: TokenItem<Exclude<InlineToken, LinkToken | BoldToken>>;
     body?: TokenItem;
     nextSteps?: TokenItem<InlineToken>[];

package/dist/private/node/ui/components/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAa,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAA+C,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAC9F,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAA0B,MAAM,OAAO,CAAA;AAqB9C,MAAM,KAAK,GAAkC,CAAC,EAC5C,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,cAAc,EACd,gBAAgB,GAAG,KAAK,GACzB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI;QACf,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,IAAI,IAAC,IAAI;YACR,oBAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,GAAI,CAC5B,CACR,CAAC,CAAC,CAAC,IAAI;QAEP,IAAI,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI;QAE3C,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACnC,oBAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,GAAI,CACzE,CAAC,CAAC,CAAC,IAAI;QAEP,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI;QAEvF,IAAI,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI;QAExD,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7C,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,IAC/B,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,oBAAC,GAAG,IAAC,GAAG,EAAE,KAAK,EAAE,aAAa,EAAC,QAAQ;YACpC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,UAAE,OAAO,CAAC,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI;YACzD,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CACjC,CACP,CAAC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACD,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,KAAK,EAAC,CAAA","sourcesContent":["import {Banner, BannerType} from './Banner.js'\nimport {Link} from './Link.js'\nimport {List} from './List.js'\nimport {BoldToken, InlineToken, LinkToken, TokenItem, TokenizedText} from './TokenizedText.js'\nimport {Box, Text} from 'ink'\nimport React, {FunctionComponent} from 'react'\n\nexport interface CustomSection {\n  title?: string\n  body: TokenItem\n}\n\nexport interface AlertProps {\n  type: Exclude<BannerType, 'error' | 'external_error'>\n  headline?: TokenItem<Exclude<InlineToken, LinkToken | BoldToken>>\n  body?: TokenItem\n  nextSteps?: TokenItem<InlineToken>[]\n  reference?: TokenItem<InlineToken>[]\n  link?: {\n    label: string\n    url: string\n  }\n  orderedNextSteps?: boolean\n  customSections?: CustomSection[]\n}\n\nconst Alert: FunctionComponent<AlertProps> = ({\n  type,\n  headline,\n  body,\n  nextSteps,\n  reference,\n  link,\n  customSections,\n  orderedNextSteps = false,\n}) => {\n  return (\n    <Banner type={type}>\n      {headline ? (\n        <Text bold>\n          <TokenizedText item={headline} />\n        </Text>\n      ) : null}\n\n      {body ? <TokenizedText item={body} /> : null}\n\n      {nextSteps && nextSteps.length > 0 ? (\n        <List title=\"Next steps\" items={nextSteps} ordered={orderedNextSteps} />\n      ) : null}\n\n      {reference && reference.length > 0 ? <List title=\"Reference\" items={reference} /> : null}\n\n      {link ? <Link url={link.url} label={link.label} /> : null}\n\n      {customSections && customSections.length > 0 ? (\n        <Box flexDirection=\"column\" gap={1}>\n          {customSections.map((section, index) => (\n            <Box key={index} flexDirection=\"column\">\n              {section.title ? <Text bold>{section.title}</Text> : null}\n              <TokenizedText item={section.body} />\n            </Box>\n          ))}\n        </Box>\n      ) : null}\n    </Banner>\n  )\n}\n\nexport {Alert}\n"]}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAa,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAA+C,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAC9F,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAA0B,MAAM,OAAO,CAAA;AAqB9C,MAAM,KAAK,GAAkC,CAAC,EAC5C,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,cAAc,EACd,gBAAgB,GAAG,KAAK,GACzB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI;QACf,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,IAAI,IAAC,IAAI;YACR,oBAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,GAAI,CAC5B,CACR,CAAC,CAAC,CAAC,IAAI;QAEP,IAAI,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI;QAE3C,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACnC,oBAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,GAAI,CACzE,CAAC,CAAC,CAAC,IAAI;QAEP,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI;QAEvF,IAAI,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI;QAExD,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7C,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,IAC/B,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,oBAAC,GAAG,IAAC,GAAG,EAAE,KAAK,EAAE,aAAa,EAAC,QAAQ;YACpC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,UAAE,OAAO,CAAC,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI;YACzD,oBAAC,aAAa,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CACjC,CACP,CAAC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACD,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,KAAK,EAAC,CAAA","sourcesContent":["import {Banner, BannerType} from './Banner.js'\nimport {Link} from './Link.js'\nimport {List} from './List.js'\nimport {BoldToken, InlineToken, LinkToken, TokenItem, TokenizedText} from './TokenizedText.js'\nimport {Box, Text} from 'ink'\nimport React, {FunctionComponent} from 'react'\n\nexport interface CustomSection {\n  title?: string\n  body: TokenItem\n}\n\nexport interface AlertProps {\n  type: Exclude<BannerType, 'external_error'>\n  headline?: TokenItem<Exclude<InlineToken, LinkToken | BoldToken>>\n  body?: TokenItem\n  nextSteps?: TokenItem<InlineToken>[]\n  reference?: TokenItem<InlineToken>[]\n  link?: {\n    label: string\n    url: string\n  }\n  orderedNextSteps?: boolean\n  customSections?: CustomSection[]\n}\n\nconst Alert: FunctionComponent<AlertProps> = ({\n  type,\n  headline,\n  body,\n  nextSteps,\n  reference,\n  link,\n  customSections,\n  orderedNextSteps = false,\n}) => {\n  return (\n    <Banner type={type}>\n      {headline ? (\n        <Text bold>\n          <TokenizedText item={headline} />\n        </Text>\n      ) : null}\n\n      {body ? <TokenizedText item={body} /> : null}\n\n      {nextSteps && nextSteps.length > 0 ? (\n        <List title=\"Next steps\" items={nextSteps} ordered={orderedNextSteps} />\n      ) : null}\n\n      {reference && reference.length > 0 ? <List title=\"Reference\" items={reference} /> : null}\n\n      {link ? <Link url={link.url} label={link.label} /> : null}\n\n      {customSections && customSections.length > 0 ? (\n        <Box flexDirection=\"column\" gap={1}>\n          {customSections.map((section, index) => (\n            <Box key={index} flexDirection=\"column\">\n              {section.title ? <Text bold>{section.title}</Text> : null}\n              <TokenizedText item={section.body} />\n            </Box>\n          ))}\n        </Box>\n      ) : null}\n    </Banner>\n  )\n}\n\nexport {Alert}\n"]}

package/dist/private/node/ui/components/AutocompletePrompt.d.ts

@@ -1,5 +1,8 @@
 import { SelectInputProps, Item as SelectItem } from './SelectInput.js';
 import { InfoTableProps } from './Prompts/InfoTable.js';
+import { InfoMessageProps } from './Prompts/InfoMessage.js';
+import { GitDiffProps } from './Prompts/GitDiff.js';
+import { Message } from './Prompts/PromptLayout.js';
 import { AbortSignal } from '../../../../public/node/abort.js';
 import React, { ReactElement } from 'react';
 export interface SearchResults<T> {
@@ -9,13 +12,15 @@ export interface SearchResults<T> {
     };
 }
 export interface AutocompletePromptProps<T> {
-    message: string;
+    message: Message;
     choices: SelectInputProps<T>['items'];
     onSubmit: (value: T) => void;
     infoTable?: InfoTableProps['table'];
     hasMorePages?: boolean;
     search: (term: string) => Promise<SearchResults<T>>;
     abortSignal?: AbortSignal;
+    infoMessage?: InfoMessageProps['message'];
+    gitDiff?: GitDiffProps['gitDiff'];
 }
-declare function AutocompletePrompt<T>({ message, choices: initialChoices, infoTable, onSubmit, search, hasMorePages: initialHasMorePages, abortSignal, }: React.PropsWithChildren<AutocompletePromptProps<T>>): ReactElement | null;
+declare function AutocompletePrompt<T>({ message, choices, infoTable, onSubmit, search, hasMorePages: initialHasMorePages, abortSignal, infoMessage, gitDiff, }: React.PropsWithChildren<AutocompletePromptProps<T>>): ReactElement | null;
 export { AutocompletePrompt };

package/dist/private/node/ui/components/AutocompletePrompt.js

@@ -1,85 +1,34 @@
 import { SelectInput } from './SelectInput.js';
-import { InfoTable } from './Prompts/InfoTable.js';
 import { TextInput } from './TextInput.js';
-import { TokenizedText } from './TokenizedText.js';
-import { messageWithPunctuation } from '../utilities.js';
+import { PromptLayout } from './Prompts/PromptLayout.js';
 import { debounce } from '../../../../public/common/function.js';
-import useAbortSignal from '../hooks/use-abort-signal.js';
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { Box, measureElement, Text, useApp, useStdout } from 'ink';
-import figures from 'figures';
-import ansiEscapes from 'ansi-escapes';
-import { uniqBy } from '@shopify/cli-kit/common/array';
-var PromptState;
-(function (PromptState) {
-    PromptState["Idle"] = "idle";
-    PromptState["Loading"] = "loading";
-    PromptState["Submitted"] = "submitted";
-    PromptState["Error"] = "error";
-})(PromptState || (PromptState = {}));
-const PAGE_SIZE = 25;
+import usePrompt, { PromptState } from '../hooks/use-prompt.js';
+import React, { useCallback, useRef, useState } from 'react';
+import { Box, useApp } from 'ink';
+const MIN_NUMBER_OF_ITEMS_FOR_SEARCH = 5;
 // eslint-disable-next-line react/function-component-definition
-function AutocompletePrompt({ message, choices: initialChoices, infoTable, onSubmit, search, hasMorePages: initialHasMorePages = false, abortSignal, }) {
-    const paginatedInitialChoices = initialChoices.slice(0, PAGE_SIZE);
-    const [answer, setAnswer] = useState(paginatedInitialChoices[0]);
+function AutocompletePrompt({ message, choices, infoTable, onSubmit, search, hasMorePages: initialHasMorePages = false, abortSignal, infoMessage, gitDiff, }) {
     const { exit: unmountInk } = useApp();
-    const [promptState, setPromptState] = useState(PromptState.Idle);
     const [searchTerm, setSearchTerm] = useState('');
-    const [searchResults, setSearchResults] = useState(paginatedInitialChoices.slice(0, PAGE_SIZE));
-    const { stdout } = useStdout();
-    const canSearch = initialChoices.length >= PAGE_SIZE;
+    const [searchResults, setSearchResults] = useState(choices);
+    const canSearch = choices.length > MIN_NUMBER_OF_ITEMS_FOR_SEARCH;
     const [hasMorePages, setHasMorePages] = useState(initialHasMorePages);
-    const [wrapperHeight, setWrapperHeight] = useState(0);
-    const [selectInputHeight, setSelectInputHeight] = useState(0);
-    const [limit, setLimit] = useState(searchResults.length);
-    const numberOfGroups = uniqBy(searchResults.filter((choice) => choice.group), 'group').length;
+    const { promptState, setPromptState, answer, setAnswer } = usePrompt({
+        initialAnswer: undefined,
+    });
     const paginatedSearch = useCallback(async (term) => {
         const results = await search(term);
-        results.data = results.data.slice(0, PAGE_SIZE);
         return results;
     }, [search]);
-    const wrapperRef = useCallback((node) => {
-        if (node !== null) {
-            const { height } = measureElement(node);
-            setWrapperHeight(height);
-        }
-    }, []);
-    const inputRef = useCallback((node) => {
-        if (node !== null) {
-            const { height } = measureElement(node);
-            setSelectInputHeight(height);
-        }
-    }, []);
-    useLayoutEffect(() => {
-        function onResize() {
-            const availableSpace = stdout.rows - (wrapperHeight - selectInputHeight);
-            // rough estimate of the limit needed based on the space available
-            const newLimit = Math.max(2, availableSpace - numberOfGroups * 2 - 4);
-            if (newLimit < limit) {
-                stdout.write(ansiEscapes.clearTerminal);
-            }
-            setLimit(Math.min(newLimit, searchResults.length));
-        }
-        onResize();
-        stdout.on('resize', onResize);
-        return () => {
-            stdout.off('resize', onResize);
-        };
-    }, [wrapperHeight, selectInputHeight, searchResults.length, stdout, limit, numberOfGroups]);
-    const { isAborted } = useAbortSignal(abortSignal);
     const submitAnswer = useCallback((answer) => {
         if (promptState === PromptState.Idle) {
-            // -1 is for the last row with the terminal cursor
-            if (stdout && wrapperHeight >= stdout.rows - 1) {
-                stdout.write(ansiEscapes.clearTerminal);
-            }
             setAnswer(answer);
             setPromptState(PromptState.Submitted);
             setSearchTerm('');
             unmountInk();
             onSubmit(answer.value);
         }
-    }, [promptState, stdout, wrapperHeight, onSubmit, unmountInk]);
+    }, [promptState, setAnswer, setPromptState, unmountInk, onSubmit]);
     const setLoadingWhenSlow = useRef();
     // we want to set it each time so that searchTermRef always tracks searchTerm,
     // this is NOT the same as writing useRef(searchTerm)
@@ -97,7 +46,7 @@ function AutocompletePrompt({ message, choices: initialChoices, infoTable, onSub
             // has emptied the search term, so we want to show the default
             // choices instead
             if (searchTermRef.current.length === 0) {
-                setSearchResults(paginatedInitialChoices);
+                setSearchResults(choices);
                 setHasMorePages(initialHasMorePages);
             }
             else {
@@ -112,33 +61,21 @@ function AutocompletePrompt({ message, choices: initialChoices, infoTable, onSub
             .finally(() => {
             clearTimeout(setLoadingWhenSlow.current);
         });
-    }, 300), [initialHasMorePages, paginatedInitialChoices, paginatedSearch]);
-    return isAborted ? null : (React.createElement(Box, { flexDirection: "column", marginBottom: 1, ref: wrapperRef },
-        React.createElement(Box, null,
-            React.createElement(Box, { marginRight: 2 },
-                React.createElement(Text, null, "?")),
-            React.createElement(TokenizedText, { item: messageWithPunctuation(message) }),
-            promptState !== PromptState.Submitted && canSearch ? (React.createElement(Box, { marginLeft: 3 },
-                React.createElement(TextInput, { value: searchTerm, onChange: (term) => {
-                        setSearchTerm(term);
-                        if (term.length > 0) {
-                            debounceSearch(term);
-                        }
-                        else {
-                            debounceSearch.cancel();
-                            setPromptState(PromptState.Idle);
-                            setSearchResults(paginatedInitialChoices);
-                        }
-                    }, placeholder: "Type to search..." }))) : null),
-        infoTable && promptState !== PromptState.Submitted ? (React.createElement(Box, { marginLeft: 7, marginTop: 1 },
-            React.createElement(InfoTable, { table: infoTable }))) : null,
-        promptState === PromptState.Submitted ? (React.createElement(Box, null,
-            React.createElement(Box, { marginRight: 2 },
-                React.createElement(Text, { color: "cyan" }, figures.tick)),
-            React.createElement(Text, { color: "cyan" }, answer.label))) : (React.createElement(Box, { marginTop: 1 },
-            React.createElement(SelectInput, { items: searchResults, enableShortcuts: false, emptyMessage: "No results found.", highlightedTerm: searchTerm, loading: promptState === PromptState.Loading, errorMessage: promptState === PromptState.Error
-                    ? 'There has been an error while searching. Please try again later.'
-                    : undefined, hasMorePages: hasMorePages, morePagesMessage: "Find what you're looking for by typing its name.", ref: inputRef, limit: limit, onSubmit: submitAnswer })))));
+    }, 300), [initialHasMorePages, choices, paginatedSearch, searchResults]);
+    return (React.createElement(PromptLayout, { message: message, state: promptState, infoTable: infoTable, infoMessage: infoMessage, gitDiff: gitDiff, abortSignal: abortSignal, header: promptState !== PromptState.Submitted && canSearch ? (React.createElement(Box, { marginLeft: 3 },
+            React.createElement(TextInput, { value: searchTerm, onChange: (term) => {
+                    setSearchTerm(term);
+                    if (term.length > 0) {
+                        debounceSearch(term);
+                    }
+                    else {
+                        debounceSearch.cancel();
+                        setPromptState(PromptState.Idle);
+                        setSearchResults(choices);
+                    }
+                }, placeholder: "Type to search..." }))) : null, submittedAnswerLabel: answer?.label, input: React.createElement(SelectInput, { items: searchResults, initialItems: choices, enableShortcuts: false, emptyMessage: "No results found.", highlightedTerm: searchTerm, loading: promptState === PromptState.Loading, errorMessage: promptState === PromptState.Error
+                ? 'There has been an error while searching. Please try again later.'
+                : undefined, hasMorePages: hasMorePages, morePagesMessage: "Find what you're looking for by typing its name.", onSubmit: submitAnswer }) }));
 }
 export { AutocompletePrompt };
 //# sourceMappingURL=AutocompletePrompt.js.map

package/dist/private/node/ui/components/AutocompletePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompletePrompt.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/AutocompletePrompt.tsx"],"names":[],"mappings":"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","sourcesContent":["import {SelectInput, SelectInputProps, Item as SelectItem} from './SelectInput.js'\nimport {InfoTable, InfoTableProps} from './Prompts/InfoTable.js'\nimport {TextInput} from './TextInput.js'\nimport {TokenizedText} from './TokenizedText.js'\nimport {messageWithPunctuation} from '../utilities.js'\nimport {debounce} from '../../../../public/common/function.js'\nimport {AbortSignal} from '../../../../public/node/abort.js'\nimport useAbortSignal from '../hooks/use-abort-signal.js'\nimport React, {ReactElement, useCallback, useLayoutEffect, useRef, useState} from 'react'\nimport {Box, measureElement, Text, useApp, useStdout} from 'ink'\nimport figures from 'figures'\nimport ansiEscapes from 'ansi-escapes'\nimport {uniqBy} from '@shopify/cli-kit/common/array'\n\nexport interface SearchResults<T> {\n  data: SelectItem<T>[]\n  meta?: {\n    hasNextPage: boolean\n  }\n}\n\nexport interface AutocompletePromptProps<T> {\n  message: string\n  choices: SelectInputProps<T>['items']\n  onSubmit: (value: T) => void\n  infoTable?: InfoTableProps['table']\n  hasMorePages?: boolean\n  search: (term: string) => Promise<SearchResults<T>>\n  abortSignal?: AbortSignal\n}\n\nenum PromptState {\n  Idle = 'idle',\n  Loading = 'loading',\n  Submitted = 'submitted',\n  Error = 'error',\n}\n\nconst PAGE_SIZE = 25\n\n// eslint-disable-next-line react/function-component-definition\nfunction AutocompletePrompt<T>({\n  message,\n  choices: initialChoices,\n  infoTable,\n  onSubmit,\n  search,\n  hasMorePages: initialHasMorePages = false,\n  abortSignal,\n}: React.PropsWithChildren<AutocompletePromptProps<T>>): ReactElement | null {\n  const paginatedInitialChoices = initialChoices.slice(0, PAGE_SIZE)\n  const [answer, setAnswer] = useState<SelectItem<T> | undefined>(paginatedInitialChoices[0])\n  const {exit: unmountInk} = useApp()\n  const [promptState, setPromptState] = useState<PromptState>(PromptState.Idle)\n  const [searchTerm, setSearchTerm] = useState('')\n  const [searchResults, setSearchResults] = useState<SelectItem<T>[]>(paginatedInitialChoices.slice(0, PAGE_SIZE))\n  const {stdout} = useStdout()\n  const canSearch = initialChoices.length >= PAGE_SIZE\n  const [hasMorePages, setHasMorePages] = useState(initialHasMorePages)\n  const [wrapperHeight, setWrapperHeight] = useState(0)\n  const [selectInputHeight, setSelectInputHeight] = useState(0)\n  const [limit, setLimit] = useState(searchResults.length)\n  const numberOfGroups = uniqBy(\n    searchResults.filter((choice) => choice.group),\n    'group',\n  ).length\n\n  const paginatedSearch = useCallback(\n    async (term: string) => {\n      const results = await search(term)\n      results.data = results.data.slice(0, PAGE_SIZE)\n      return results\n    },\n    [search],\n  )\n\n  const wrapperRef = useCallback((node) => {\n    if (node !== null) {\n      const {height} = measureElement(node)\n      setWrapperHeight(height)\n    }\n  }, [])\n\n  const inputRef = useCallback((node) => {\n    if (node !== null) {\n      const {height} = measureElement(node)\n      setSelectInputHeight(height)\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    function onResize() {\n      const availableSpace = stdout.rows - (wrapperHeight - selectInputHeight)\n      // rough estimate of the limit needed based on the space available\n      const newLimit = Math.max(2, availableSpace - numberOfGroups * 2 - 4)\n\n      if (newLimit < limit) {\n        stdout.write(ansiEscapes.clearTerminal)\n      }\n\n      setLimit(Math.min(newLimit, searchResults.length))\n    }\n\n    onResize()\n\n    stdout.on('resize', onResize)\n    return () => {\n      stdout.off('resize', onResize)\n    }\n  }, [wrapperHeight, selectInputHeight, searchResults.length, stdout, limit, numberOfGroups])\n\n  const {isAborted} = useAbortSignal(abortSignal)\n\n  const submitAnswer = useCallback(\n    (answer: SelectItem<T>) => {\n      if (promptState === PromptState.Idle) {\n        // -1 is for the last row with the terminal cursor\n        if (stdout && wrapperHeight >= stdout.rows - 1) {\n          stdout.write(ansiEscapes.clearTerminal)\n        }\n        setAnswer(answer)\n        setPromptState(PromptState.Submitted)\n        setSearchTerm('')\n        unmountInk()\n        onSubmit(answer.value)\n      }\n    },\n    [promptState, stdout, wrapperHeight, onSubmit, unmountInk],\n  )\n\n  const setLoadingWhenSlow = useRef<NodeJS.Timeout>()\n\n  // we want to set it each time so that searchTermRef always tracks searchTerm,\n  // this is NOT the same as writing useRef(searchTerm)\n  const searchTermRef = useRef('')\n  searchTermRef.current = searchTerm\n\n  // disable exhaustive-deps because we want to memoize the debounce function itself\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const debounceSearch = useCallback(\n    debounce((term: string) => {\n      setLoadingWhenSlow.current = setTimeout(() => {\n        setPromptState(PromptState.Loading)\n      }, 100)\n      paginatedSearch(term)\n        .then((result) => {\n          // while we were waiting for the promise to resolve, the user\n          // has emptied the search term, so we want to show the default\n          // choices instead\n          if (searchTermRef.current.length === 0) {\n            setSearchResults(paginatedInitialChoices)\n            setHasMorePages(initialHasMorePages)\n          } else {\n            setSearchResults(result.data)\n            setHasMorePages(result.meta?.hasNextPage ?? false)\n          }\n\n          setPromptState(PromptState.Idle)\n        })\n        .catch(() => {\n          setPromptState(PromptState.Error)\n        })\n        .finally(() => {\n          clearTimeout(setLoadingWhenSlow.current)\n        })\n    }, 300),\n    [initialHasMorePages, paginatedInitialChoices, paginatedSearch],\n  )\n\n  return isAborted ? null : (\n    <Box flexDirection=\"column\" marginBottom={1} ref={wrapperRef}>\n      <Box>\n        <Box marginRight={2}>\n          <Text>?</Text>\n        </Box>\n        <TokenizedText item={messageWithPunctuation(message)} />\n        {promptState !== PromptState.Submitted && canSearch ? (\n          <Box marginLeft={3}>\n            <TextInput\n              value={searchTerm}\n              onChange={(term) => {\n                setSearchTerm(term)\n\n                if (term.length > 0) {\n                  debounceSearch(term)\n                } else {\n                  debounceSearch.cancel()\n                  setPromptState(PromptState.Idle)\n                  setSearchResults(paginatedInitialChoices)\n                }\n              }}\n              placeholder=\"Type to search...\"\n            />\n          </Box>\n        ) : null}\n      </Box>\n\n      {infoTable && promptState !== PromptState.Submitted ? (\n        <Box marginLeft={7} marginTop={1}>\n          <InfoTable table={infoTable} />\n        </Box>\n      ) : null}\n\n      {promptState === PromptState.Submitted ? (\n        <Box>\n          <Box marginRight={2}>\n            <Text color=\"cyan\">{figures.tick}</Text>\n          </Box>\n\n          <Text color=\"cyan\">{answer!.label}</Text>\n        </Box>\n      ) : (\n        <Box marginTop={1}>\n          <SelectInput\n            items={searchResults}\n            enableShortcuts={false}\n            emptyMessage=\"No results found.\"\n            highlightedTerm={searchTerm}\n            loading={promptState === PromptState.Loading}\n            errorMessage={\n              promptState === PromptState.Error\n                ? 'There has been an error while searching. Please try again later.'\n                : undefined\n            }\n            hasMorePages={hasMorePages}\n            morePagesMessage=\"Find what you're looking for by typing its name.\"\n            ref={inputRef}\n            limit={limit}\n            onSubmit={submitAnswer}\n          />\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport {AutocompletePrompt}\n"]}
+{"version":3,"file":"AutocompletePrompt.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/AutocompletePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAuC,MAAM,kBAAkB,CAAA;AAElF,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAAU,YAAY,EAAC,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EAAC,QAAQ,EAAC,MAAM,uCAAuC,CAAA;AAE9D,OAAO,SAAS,EAAE,EAAC,WAAW,EAAC,MAAM,wBAAwB,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAe,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,KAAK,CAAA;AAqB/B,MAAM,8BAA8B,GAAG,CAAC,CAAA;AAExC,+DAA+D;AAC/D,SAAS,kBAAkB,CAAI,EAC7B,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,YAAY,EAAE,mBAAmB,GAAG,KAAK,EACzC,WAAW,EACX,WAAW,EACX,OAAO,GAC6C;IACpD,MAAM,EAAC,IAAI,EAAE,UAAU,EAAC,GAAG,MAAM,EAAE,CAAA;IACnC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAChD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,OAAO,CAAC,CAAA;IAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,8BAA8B,CAAA;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IACrE,MAAM,EAAC,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAC,GAAG,SAAS,CAA4B;QAC5F,aAAa,EAAE,SAAS;KACzB,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,IAAY,EAAE,EAAE;QACrB,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,CAAA;QAClC,OAAO,OAAO,CAAA;IAChB,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAqB,EAAE,EAAE;QACxB,IAAI,WAAW,KAAK,WAAW,CAAC,IAAI,EAAE;YACpC,SAAS,CAAC,MAAM,CAAC,CAAA;YACjB,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;YACrC,aAAa,CAAC,EAAE,CAAC,CAAA;YACjB,UAAU,EAAE,CAAA;YACZ,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SACvB;IACH,CAAC,EACD,CAAC,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,CAAC,CAC/D,CAAA;IAED,MAAM,kBAAkB,GAAG,MAAM,EAAkB,CAAA;IAEnD,8EAA8E;IAC9E,qDAAqD;IACrD,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC,CAAA;IAChC,aAAa,CAAC,OAAO,GAAG,UAAU,CAAA;IAElC,kFAAkF;IAClF,uDAAuD;IACvD,MAAM,cAAc,GAAG,WAAW,CAChC,QAAQ,CAAC,CAAC,IAAY,EAAE,EAAE;QACxB,kBAAkB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC3C,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QACrC,CAAC,EAAE,GAAG,CAAC,CAAA;QACP,eAAe,CAAC,IAAI,CAAC;aAClB,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACf,6DAA6D;YAC7D,8DAA8D;YAC9D,kBAAkB;YAClB,IAAI,aAAa,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtC,gBAAgB,CAAC,OAAO,CAAC,CAAA;gBACzB,eAAe,CAAC,mBAAmB,CAAC,CAAA;aACrC;iBAAM;gBACL,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;gBAC7B,eAAe,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,IAAI,KAAK,CAAC,CAAA;aACnD;YAED,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAClC,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAA;QAC1C,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,GAAG,CAAC,EACP,CAAC,mBAAmB,EAAE,OAAO,EAAE,eAAe,EAAE,aAAa,CAAC,CAC/D,CAAA;IAED,OAAO,CACL,oBAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EACJ,WAAW,KAAK,WAAW,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CACnD,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;YAChB,oBAAC,SAAS,IACR,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;oBACjB,aAAa,CAAC,IAAI,CAAC,CAAA;oBAEnB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;wBACnB,cAAc,CAAC,IAAI,CAAC,CAAA;qBACrB;yBAAM;wBACL,cAAc,CAAC,MAAM,EAAE,CAAA;wBACvB,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;wBAChC,gBAAgB,CAAC,OAAO,CAAC,CAAA;qBAC1B;gBACH,CAAC,EACD,WAAW,EAAC,mBAAmB,GAC/B,CACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEV,oBAAoB,EAAE,MAAM,EAAE,KAAK,EACnC,KAAK,EACH,oBAAC,WAAW,IACV,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,OAAO,EACrB,eAAe,EAAE,KAAK,EACtB,YAAY,EAAC,mBAAmB,EAChC,eAAe,EAAE,UAAU,EAC3B,OAAO,EAAE,WAAW,KAAK,WAAW,CAAC,OAAO,EAC5C,YAAY,EACV,WAAW,KAAK,WAAW,CAAC,KAAK;gBAC/B,CAAC,CAAC,kEAAkE;gBACpE,CAAC,CAAC,SAAS,EAEf,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAC,kDAAkD,EACnE,QAAQ,EAAE,YAAY,GACtB,GAEJ,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAC,kBAAkB,EAAC,CAAA","sourcesContent":["import {SelectInput, SelectInputProps, Item as SelectItem} from './SelectInput.js'\nimport {InfoTableProps} from './Prompts/InfoTable.js'\nimport {TextInput} from './TextInput.js'\nimport {InfoMessageProps} from './Prompts/InfoMessage.js'\nimport {GitDiffProps} from './Prompts/GitDiff.js'\nimport {Message, PromptLayout} from './Prompts/PromptLayout.js'\nimport {debounce} from '../../../../public/common/function.js'\nimport {AbortSignal} from '../../../../public/node/abort.js'\nimport usePrompt, {PromptState} from '../hooks/use-prompt.js'\nimport React, {ReactElement, useCallback, useRef, useState} from 'react'\nimport {Box, useApp} from 'ink'\n\nexport interface SearchResults<T> {\n  data: SelectItem<T>[]\n  meta?: {\n    hasNextPage: boolean\n  }\n}\n\nexport interface AutocompletePromptProps<T> {\n  message: Message\n  choices: SelectInputProps<T>['items']\n  onSubmit: (value: T) => void\n  infoTable?: InfoTableProps['table']\n  hasMorePages?: boolean\n  search: (term: string) => Promise<SearchResults<T>>\n  abortSignal?: AbortSignal\n  infoMessage?: InfoMessageProps['message']\n  gitDiff?: GitDiffProps['gitDiff']\n}\n\nconst MIN_NUMBER_OF_ITEMS_FOR_SEARCH = 5\n\n// eslint-disable-next-line react/function-component-definition\nfunction AutocompletePrompt<T>({\n  message,\n  choices,\n  infoTable,\n  onSubmit,\n  search,\n  hasMorePages: initialHasMorePages = false,\n  abortSignal,\n  infoMessage,\n  gitDiff,\n}: React.PropsWithChildren<AutocompletePromptProps<T>>): ReactElement | null {\n  const {exit: unmountInk} = useApp()\n  const [searchTerm, setSearchTerm] = useState('')\n  const [searchResults, setSearchResults] = useState<SelectItem<T>[]>(choices)\n  const canSearch = choices.length > MIN_NUMBER_OF_ITEMS_FOR_SEARCH\n  const [hasMorePages, setHasMorePages] = useState(initialHasMorePages)\n  const {promptState, setPromptState, answer, setAnswer} = usePrompt<SelectItem<T> | undefined>({\n    initialAnswer: undefined,\n  })\n\n  const paginatedSearch = useCallback(\n    async (term: string) => {\n      const results = await search(term)\n      return results\n    },\n    [search],\n  )\n\n  const submitAnswer = useCallback(\n    (answer: SelectItem<T>) => {\n      if (promptState === PromptState.Idle) {\n        setAnswer(answer)\n        setPromptState(PromptState.Submitted)\n        setSearchTerm('')\n        unmountInk()\n        onSubmit(answer.value)\n      }\n    },\n    [promptState, setAnswer, setPromptState, unmountInk, onSubmit],\n  )\n\n  const setLoadingWhenSlow = useRef<NodeJS.Timeout>()\n\n  // we want to set it each time so that searchTermRef always tracks searchTerm,\n  // this is NOT the same as writing useRef(searchTerm)\n  const searchTermRef = useRef('')\n  searchTermRef.current = searchTerm\n\n  // disable exhaustive-deps because we want to memoize the debounce function itself\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const debounceSearch = useCallback(\n    debounce((term: string) => {\n      setLoadingWhenSlow.current = setTimeout(() => {\n        setPromptState(PromptState.Loading)\n      }, 100)\n      paginatedSearch(term)\n        .then((result) => {\n          // while we were waiting for the promise to resolve, the user\n          // has emptied the search term, so we want to show the default\n          // choices instead\n          if (searchTermRef.current.length === 0) {\n            setSearchResults(choices)\n            setHasMorePages(initialHasMorePages)\n          } else {\n            setSearchResults(result.data)\n            setHasMorePages(result.meta?.hasNextPage ?? false)\n          }\n\n          setPromptState(PromptState.Idle)\n        })\n        .catch(() => {\n          setPromptState(PromptState.Error)\n        })\n        .finally(() => {\n          clearTimeout(setLoadingWhenSlow.current)\n        })\n    }, 300),\n    [initialHasMorePages, choices, paginatedSearch, searchResults],\n  )\n\n  return (\n    <PromptLayout\n      message={message}\n      state={promptState}\n      infoTable={infoTable}\n      infoMessage={infoMessage}\n      gitDiff={gitDiff}\n      abortSignal={abortSignal}\n      header={\n        promptState !== PromptState.Submitted && canSearch ? (\n          <Box marginLeft={3}>\n            <TextInput\n              value={searchTerm}\n              onChange={(term) => {\n                setSearchTerm(term)\n\n                if (term.length > 0) {\n                  debounceSearch(term)\n                } else {\n                  debounceSearch.cancel()\n                  setPromptState(PromptState.Idle)\n                  setSearchResults(choices)\n                }\n              }}\n              placeholder=\"Type to search...\"\n            />\n          </Box>\n        ) : null\n      }\n      submittedAnswerLabel={answer?.label}\n      input={\n        <SelectInput\n          items={searchResults}\n          initialItems={choices}\n          enableShortcuts={false}\n          emptyMessage=\"No results found.\"\n          highlightedTerm={searchTerm}\n          loading={promptState === PromptState.Loading}\n          errorMessage={\n            promptState === PromptState.Error\n              ? 'There has been an error while searching. Please try again later.'\n              : undefined\n          }\n          hasMorePages={hasMorePages}\n          morePagesMessage=\"Find what you're looking for by typing its name.\"\n          onSubmit={submitAnswer}\n        />\n      }\n    />\n  )\n}\n\nexport {AutocompletePrompt}\n"]}