@shopify/cli-kit 3.47.5 → 3.48.1

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/api/graphql.js

@@ -5,11 +5,18 @@ import { ClientError } from 'graphql-request';
 export function debugLogRequestInfo(api, query, variables, headers = {}) {
     outputDebug(outputContent `Sending ${outputToken.json(api)} GraphQL request:
   ${outputToken.raw(query.toString().trim())}
-${variables ? `\nWith variables:\n${JSON.stringify(variables, null, 2)}\n` : ''}
+${variables ? `\nWith variables:\n${sanitizeVariables(variables)}\n` : ''}
 With request headers:
 ${sanitizedHeadersOutput(headers)}
 `);
 }
+function sanitizeVariables(variables) {
+    const result = { ...variables };
+    if ('apiKey' in result) {
+        result.apiKey = '*****';
+    }
+    return JSON.stringify(result, null, 2);
+}
 export function errorHandler(api) {
     return (error) => {
         if (error instanceof ClientError) {

package/dist/private/node/api/graphql.js.map

@@ -1 +1 @@
-{"version":3,"file":"graphql.js","sourceRoot":"","sources":["../../../../src/private/node/api/graphql.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,cAAc,CAAA;AACvE,OAAO,EAAC,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAC,MAAM,gCAAgC,CAAA;AACxG,OAAO,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAC,WAAW,EAA6B,MAAM,iBAAiB,CAAA;AAEvE,MAAM,UAAU,mBAAmB,CACjC,GAAW,EACX,KAAsB,EACtB,SAAqB,EACrB,UAAmC,EAAE;IAErC,WAAW,CAAC,aAAa,CAAA,WAAW,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;IACvD,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;EAC1C,SAAS,CAAC,CAAC,CAAC,sBAAsB,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;;EAE7E,sBAAsB,CAAC,OAAO,CAAC;CAChC,CAAC,CAAA;AACF,CAAC;AAED,MAAM,UAAU,YAAY,CAAI,GAAW;IACzC,OAAO,CAAC,KAAc,EAAE,EAAE;QACxB,IAAI,KAAK,YAAY,WAAW,EAAE;YAChC,MAAM,YAAY,GAAG,gBAAgB,CAAC,aAAa,CAAA;QACjD,WAAW,CAAC,GAAG,CACnB,GAAG,CACJ,8DAA8D,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;;IAEvF,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;OACpC,CAAC,CAAA;YACF,IAAI,WAAkB,CAAA;YACtB,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;gBAC/B,WAAW,GAAG,IAAI,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;aACjG;iBAAM;gBACL,WAAW,GAAG,IAAI,UAAU,CAAC,YAAY,CAAC,CAAA;aAC3C;YACD,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAC/B,OAAO,WAAW,CAAA;SACnB;aAAM;YACL,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAA;AACH,CAAC","sourcesContent":["import {GraphQLClientError, sanitizedHeadersOutput} from './headers.js'\nimport {stringifyMessage, outputContent, outputToken, outputDebug} from '../../../public/node/output.js'\nimport {AbortError} from '../../../public/node/error.js'\nimport {ClientError, RequestDocument, Variables} from 'graphql-request'\n\nexport function debugLogRequestInfo<T>(\n  api: string,\n  query: RequestDocument,\n  variables?: Variables,\n  headers: {[key: string]: string} = {},\n) {\n  outputDebug(outputContent`Sending ${outputToken.json(api)} GraphQL request:\n  ${outputToken.raw(query.toString().trim())}\n${variables ? `\\nWith variables:\\n${JSON.stringify(variables, null, 2)}\\n` : ''}\nWith request headers:\n${sanitizedHeadersOutput(headers)}\n`)\n}\n\nexport function errorHandler<T>(api: string): (error: unknown) => Error | unknown {\n  return (error: unknown) => {\n    if (error instanceof ClientError) {\n      const errorMessage = stringifyMessage(outputContent`\n  The ${outputToken.raw(\n    api,\n  )} GraphQL API responded unsuccessfully with the HTTP status ${`${error.response.status}`} and errors:\n\n  ${outputToken.json(error.response.errors)}\n      `)\n      let mappedError: Error\n      if (error.response.status < 500) {\n        mappedError = new GraphQLClientError(errorMessage, error.response.status, error.response.errors)\n      } else {\n        mappedError = new AbortError(errorMessage)\n      }\n      mappedError.stack = error.stack\n      return mappedError\n    } else {\n      return error\n    }\n  }\n}\n"]}
+{"version":3,"file":"graphql.js","sourceRoot":"","sources":["../../../../src/private/node/api/graphql.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,cAAc,CAAA;AACvE,OAAO,EAAC,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAC,MAAM,gCAAgC,CAAA;AACxG,OAAO,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAC,WAAW,EAA6B,MAAM,iBAAiB,CAAA;AAEvE,MAAM,UAAU,mBAAmB,CACjC,GAAW,EACX,KAAsB,EACtB,SAAqB,EACrB,UAAmC,EAAE;IAErC,WAAW,CAAC,aAAa,CAAA,WAAW,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;IACvD,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;EAC1C,SAAS,CAAC,CAAC,CAAC,sBAAsB,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;;EAEvE,sBAAsB,CAAC,OAAO,CAAC;CAChC,CAAC,CAAA;AACF,CAAC;AAED,SAAS,iBAAiB,CAAC,SAAoB;IAC7C,MAAM,MAAM,GAAc,EAAC,GAAG,SAAS,EAAC,CAAA;IACxC,IAAI,QAAQ,IAAI,MAAM,EAAE;QACtB,MAAM,CAAC,MAAM,GAAG,OAAO,CAAA;KACxB;IACD,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;AACxC,CAAC;AAED,MAAM,UAAU,YAAY,CAAI,GAAW;IACzC,OAAO,CAAC,KAAc,EAAE,EAAE;QACxB,IAAI,KAAK,YAAY,WAAW,EAAE;YAChC,MAAM,YAAY,GAAG,gBAAgB,CAAC,aAAa,CAAA;QACjD,WAAW,CAAC,GAAG,CACnB,GAAG,CACJ,8DAA8D,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;;IAEvF,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;OACpC,CAAC,CAAA;YACF,IAAI,WAAkB,CAAA;YACtB,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;gBAC/B,WAAW,GAAG,IAAI,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;aACjG;iBAAM;gBACL,WAAW,GAAG,IAAI,UAAU,CAAC,YAAY,CAAC,CAAA;aAC3C;YACD,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAC/B,OAAO,WAAW,CAAA;SACnB;aAAM;YACL,OAAO,KAAK,CAAA;SACb;IACH,CAAC,CAAA;AACH,CAAC","sourcesContent":["import {GraphQLClientError, sanitizedHeadersOutput} from './headers.js'\nimport {stringifyMessage, outputContent, outputToken, outputDebug} from '../../../public/node/output.js'\nimport {AbortError} from '../../../public/node/error.js'\nimport {ClientError, RequestDocument, Variables} from 'graphql-request'\n\nexport function debugLogRequestInfo<T>(\n  api: string,\n  query: RequestDocument,\n  variables?: Variables,\n  headers: {[key: string]: string} = {},\n) {\n  outputDebug(outputContent`Sending ${outputToken.json(api)} GraphQL request:\n  ${outputToken.raw(query.toString().trim())}\n${variables ? `\\nWith variables:\\n${sanitizeVariables(variables)}\\n` : ''}\nWith request headers:\n${sanitizedHeadersOutput(headers)}\n`)\n}\n\nfunction sanitizeVariables(variables: Variables): string {\n  const result: Variables = {...variables}\n  if ('apiKey' in result) {\n    result.apiKey = '*****'\n  }\n  return JSON.stringify(result, null, 2)\n}\n\nexport function errorHandler<T>(api: string): (error: unknown) => Error | unknown {\n  return (error: unknown) => {\n    if (error instanceof ClientError) {\n      const errorMessage = stringifyMessage(outputContent`\n  The ${outputToken.raw(\n    api,\n  )} GraphQL API responded unsuccessfully with the HTTP status ${`${error.response.status}`} and errors:\n\n  ${outputToken.json(error.response.errors)}\n      `)\n      let mappedError: Error\n      if (error.response.status < 500) {\n        mappedError = new GraphQLClientError(errorMessage, error.response.status, error.response.errors)\n      } else {\n        mappedError = new AbortError(errorMessage)\n      }\n      mappedError.stack = error.stack\n      return mappedError\n    } else {\n      return error\n    }\n  }\n}\n"]}

package/dist/private/node/api/headers.js

@@ -23,7 +23,7 @@ export class GraphQLClientError extends RequestClientError {
  */
 export function sanitizedHeadersOutput(headers) {
     const sanitized = {};
-    const keywords = ['token', 'authorization'];
+    const keywords = ['token', 'authorization', 'subject_token'];
     Object.keys(headers).forEach((header) => {
         if (keywords.find((keyword) => header.toLocaleLowerCase().includes(keyword)) === undefined) {
             sanitized[header] = headers[header];

package/dist/private/node/api/headers.js.map

@@ -1 +1 @@
-{"version":3,"file":"headers.js","sourceRoot":"","sources":["../../../../src/private/node/api/headers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,mCAAmC,CAAA;AACjE,OAAO,EAAC,aAAa,EAAC,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAC,eAAe,EAAC,MAAM,+BAA+B,CAAA;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,OAAO,kBAAmB,SAAQ,eAAe;IAErD,YAAmB,OAAe,EAAE,UAAkB;QACpD,KAAK,CAAC,OAAO,CAAC,CAAA;QACd,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;IAC9B,CAAC;CACF;AACD,MAAM,OAAO,kBAAmB,SAAQ,kBAAkB;IAIxD,8DAA8D;IAC9D,YAAmB,OAAe,EAAE,UAAkB,EAAE,MAAc;QACpE,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACtB,CAAC;CACF;AAED;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAgC;IACrE,MAAM,SAAS,GAA4B,EAAE,CAAA;IAC7C,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;IAC3C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACtC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,SAAS,EAAE;YAC1F,SAAS,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAE,CAAA;SACrC;IACH,CAAC,CAAC,CAAA;IACF,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;SAC1B,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACd,OAAO,MAAM,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,EAAE,CAAA;IAC7C,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAc;IACzC,MAAM,SAAS,GAAG,kBAAkB,eAAe,EAAE,CAAA;IAErD,MAAM,OAAO,GAA+B;QAC1C,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,YAAY;QAC1B,0DAA0D;QAC1D,oBAAoB,EAAE,OAAO,CAAC,QAAQ;QACtC,cAAc,EAAE,kBAAkB;QAClC,GAAG,CAAC,aAAa,EAAE,IAAI,EAAC,wBAAwB,EAAE,GAAG,EAAC,CAAC;KACxD,CAAA;IACD,IAAI,KAAK,EAAE;QACT,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,EAAE,CAAA;QACxE,wCAAwC;QACxC,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAA;QACrC,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAA;KAC/C;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU;IAC9B,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC;QACrB,kBAAkB,EAAE,MAAM,gCAAgC,EAAE;QAC5D,SAAS,EAAE,IAAI;KAChB,CAAC,CAAA;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,KAAK,UAAU,gCAAgC;IAC7C,OAAO,CAAC,MAAM,kBAAkB,EAAE,CAAC,KAAK,WAAW,CAAC,IAAI,CAAA;AAC1D,CAAC","sourcesContent":["import {CLI_KIT_VERSION} from '../../../public/common/version.js'\nimport {firstPartyDev} from '../../../public/node/context/local.js'\nimport {Environment, serviceEnvironment} from '../context/service.js'\nimport {ExtendableError} from '../../../public/node/error.js'\nimport https from 'https'\n\nexport class RequestClientError extends ExtendableError {\n  statusCode: number\n  public constructor(message: string, statusCode: number) {\n    super(message)\n    this.statusCode = statusCode\n  }\n}\nexport class GraphQLClientError extends RequestClientError {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  errors?: any[]\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public constructor(message: string, statusCode: number, errors?: any[]) {\n    super(message, statusCode)\n    this.errors = errors\n  }\n}\n\n/**\n * Removes the sensitive data from the headers and outputs them as a string.\n * @param headers - HTTP headers.\n * @returns A sanitized version of the headers as a string.\n */\nexport function sanitizedHeadersOutput(headers: {[key: string]: string}): string {\n  const sanitized: {[key: string]: string} = {}\n  const keywords = ['token', 'authorization']\n  Object.keys(headers).forEach((header) => {\n    if (keywords.find((keyword) => header.toLocaleLowerCase().includes(keyword)) === undefined) {\n      sanitized[header] = headers[header]!\n    }\n  })\n  return Object.keys(sanitized)\n    .map((header) => {\n      return ` - ${header}: ${sanitized[header]}`\n    })\n    .join('\\n')\n}\n\nexport function buildHeaders(token?: string): {[key: string]: string} {\n  const userAgent = `Shopify CLI; v=${CLI_KIT_VERSION}`\n\n  const headers: {[header: string]: string} = {\n    'User-Agent': userAgent,\n    'Keep-Alive': 'timeout=30',\n    // 'Sec-CH-UA': secCHUA, This header requires the Git sha.\n    'Sec-CH-UA-PLATFORM': process.platform,\n    'Content-Type': 'application/json',\n    ...(firstPartyDev() && {'X-Shopify-Cli-Employee': '1'}),\n  }\n  if (token) {\n    const authString = token.startsWith('shpat') ? token : `Bearer ${token}`\n    // eslint-disable-next-line dot-notation\n    headers['authorization'] = authString\n    headers['X-Shopify-Access-Token'] = authString\n  }\n\n  return headers\n}\n\n/**\n * This utility function returns the https.Agent to use for a given service. The agent\n * includes the right configuration based on the service's environment. For example,\n * if the service is running in a Spin environment, the attribute \"rejectUnauthorized\" is\n * set to false\n */\nexport async function httpsAgent(): Promise<https.Agent> {\n  return new https.Agent({\n    rejectUnauthorized: await shouldRejectUnauthorizedRequests(),\n    keepAlive: true,\n  })\n}\n\n/**\n * Spin stores the CA certificate in the keychain and it should be used when sending HTTP\n * requests to Spin instances. However, Node doesn't read certificates from the Keychain\n * by default, which leads to Shopifolks running into issues that they workaround by setting the\n * NODE_TLS_REJECT_UNAUTHORIZED=0 environment variable, which applies to all the HTTP\n * requests sent from the CLI (context: https://github.com/nodejs/node/issues/39657)\n * This utility function allows controlling the behavior in a per-service level by returning\n * the value of for the \"rejectUnauthorized\" attribute that's used in the https agent.\n *\n * @returns A promise that resolves with a boolean indicating whether\n * unauthorized requests should be rejected or not.\n */\nasync function shouldRejectUnauthorizedRequests(): Promise<boolean> {\n  return (await serviceEnvironment()) !== Environment.Spin\n}\n"]}
+{"version":3,"file":"headers.js","sourceRoot":"","sources":["../../../../src/private/node/api/headers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,mCAAmC,CAAA;AACjE,OAAO,EAAC,aAAa,EAAC,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAC,eAAe,EAAC,MAAM,+BAA+B,CAAA;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,OAAO,kBAAmB,SAAQ,eAAe;IAErD,YAAmB,OAAe,EAAE,UAAkB;QACpD,KAAK,CAAC,OAAO,CAAC,CAAA;QACd,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;IAC9B,CAAC;CACF;AACD,MAAM,OAAO,kBAAmB,SAAQ,kBAAkB;IAIxD,8DAA8D;IAC9D,YAAmB,OAAe,EAAE,UAAkB,EAAE,MAAc;QACpE,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACtB,CAAC;CACF;AAED;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAgC;IACrE,MAAM,SAAS,GAA4B,EAAE,CAAA;IAC7C,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAA;IAC5D,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACtC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,SAAS,EAAE;YAC1F,SAAS,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAE,CAAA;SACrC;IACH,CAAC,CAAC,CAAA;IACF,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;SAC1B,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACd,OAAO,MAAM,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,EAAE,CAAA;IAC7C,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAc;IACzC,MAAM,SAAS,GAAG,kBAAkB,eAAe,EAAE,CAAA;IAErD,MAAM,OAAO,GAA+B;QAC1C,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,YAAY;QAC1B,0DAA0D;QAC1D,oBAAoB,EAAE,OAAO,CAAC,QAAQ;QACtC,cAAc,EAAE,kBAAkB;QAClC,GAAG,CAAC,aAAa,EAAE,IAAI,EAAC,wBAAwB,EAAE,GAAG,EAAC,CAAC;KACxD,CAAA;IACD,IAAI,KAAK,EAAE;QACT,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,EAAE,CAAA;QACxE,wCAAwC;QACxC,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAA;QACrC,OAAO,CAAC,wBAAwB,CAAC,GAAG,UAAU,CAAA;KAC/C;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU;IAC9B,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC;QACrB,kBAAkB,EAAE,MAAM,gCAAgC,EAAE;QAC5D,SAAS,EAAE,IAAI;KAChB,CAAC,CAAA;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,KAAK,UAAU,gCAAgC;IAC7C,OAAO,CAAC,MAAM,kBAAkB,EAAE,CAAC,KAAK,WAAW,CAAC,IAAI,CAAA;AAC1D,CAAC","sourcesContent":["import {CLI_KIT_VERSION} from '../../../public/common/version.js'\nimport {firstPartyDev} from '../../../public/node/context/local.js'\nimport {Environment, serviceEnvironment} from '../context/service.js'\nimport {ExtendableError} from '../../../public/node/error.js'\nimport https from 'https'\n\nexport class RequestClientError extends ExtendableError {\n  statusCode: number\n  public constructor(message: string, statusCode: number) {\n    super(message)\n    this.statusCode = statusCode\n  }\n}\nexport class GraphQLClientError extends RequestClientError {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  errors?: any[]\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  public constructor(message: string, statusCode: number, errors?: any[]) {\n    super(message, statusCode)\n    this.errors = errors\n  }\n}\n\n/**\n * Removes the sensitive data from the headers and outputs them as a string.\n * @param headers - HTTP headers.\n * @returns A sanitized version of the headers as a string.\n */\nexport function sanitizedHeadersOutput(headers: {[key: string]: string}): string {\n  const sanitized: {[key: string]: string} = {}\n  const keywords = ['token', 'authorization', 'subject_token']\n  Object.keys(headers).forEach((header) => {\n    if (keywords.find((keyword) => header.toLocaleLowerCase().includes(keyword)) === undefined) {\n      sanitized[header] = headers[header]!\n    }\n  })\n  return Object.keys(sanitized)\n    .map((header) => {\n      return ` - ${header}: ${sanitized[header]}`\n    })\n    .join('\\n')\n}\n\nexport function buildHeaders(token?: string): {[key: string]: string} {\n  const userAgent = `Shopify CLI; v=${CLI_KIT_VERSION}`\n\n  const headers: {[header: string]: string} = {\n    'User-Agent': userAgent,\n    'Keep-Alive': 'timeout=30',\n    // 'Sec-CH-UA': secCHUA, This header requires the Git sha.\n    'Sec-CH-UA-PLATFORM': process.platform,\n    'Content-Type': 'application/json',\n    ...(firstPartyDev() && {'X-Shopify-Cli-Employee': '1'}),\n  }\n  if (token) {\n    const authString = token.startsWith('shpat') ? token : `Bearer ${token}`\n    // eslint-disable-next-line dot-notation\n    headers['authorization'] = authString\n    headers['X-Shopify-Access-Token'] = authString\n  }\n\n  return headers\n}\n\n/**\n * This utility function returns the https.Agent to use for a given service. The agent\n * includes the right configuration based on the service's environment. For example,\n * if the service is running in a Spin environment, the attribute \"rejectUnauthorized\" is\n * set to false\n */\nexport async function httpsAgent(): Promise<https.Agent> {\n  return new https.Agent({\n    rejectUnauthorized: await shouldRejectUnauthorizedRequests(),\n    keepAlive: true,\n  })\n}\n\n/**\n * Spin stores the CA certificate in the keychain and it should be used when sending HTTP\n * requests to Spin instances. However, Node doesn't read certificates from the Keychain\n * by default, which leads to Shopifolks running into issues that they workaround by setting the\n * NODE_TLS_REJECT_UNAUTHORIZED=0 environment variable, which applies to all the HTTP\n * requests sent from the CLI (context: https://github.com/nodejs/node/issues/39657)\n * This utility function allows controlling the behavior in a per-service level by returning\n * the value of for the \"rejectUnauthorized\" attribute that's used in the https agent.\n *\n * @returns A promise that resolves with a boolean indicating whether\n * unauthorized requests should be rejected or not.\n */\nasync function shouldRejectUnauthorizedRequests(): Promise<boolean> {\n  return (await serviceEnvironment()) !== Environment.Spin\n}\n"]}

package/dist/private/node/api/urls.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Removes the sensitive data from the url and outputs them as a string.
+ * @param url - HTTP headers.
+ * @returns A sanitized version of the url as a string.
+ */
+export declare function sanitizeURL(url: string): string;

package/dist/private/node/api/urls.js

@@ -0,0 +1,16 @@
+/**
+ * Removes the sensitive data from the url and outputs them as a string.
+ * @param url - HTTP headers.
+ * @returns A sanitized version of the url as a string.
+ */
+export function sanitizeURL(url) {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.searchParams.has('subject_token')) {
+        parsedUrl.searchParams.set('subject_token', '****');
+    }
+    if (parsedUrl.searchParams.has('token')) {
+        parsedUrl.searchParams.set('token', '****');
+    }
+    return parsedUrl.toString();
+}
+//# sourceMappingURL=urls.js.map

package/dist/private/node/api/urls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urls.js","sourceRoot":"","sources":["../../../../src/private/node/api/urls.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,GAAW;IACrC,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;IAC9B,IAAI,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;QAC/C,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;KACpD;IACD,IAAI,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;QACvC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;KAC5C;IACD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAA;AAC7B,CAAC","sourcesContent":["/**\n * Removes the sensitive data from the url and outputs them as a string.\n * @param url - HTTP headers.\n * @returns A sanitized version of the url as a string.\n */\nexport function sanitizeURL(url: string): string {\n  const parsedUrl = new URL(url)\n  if (parsedUrl.searchParams.has('subject_token')) {\n    parsedUrl.searchParams.set('subject_token', '****')\n  }\n  if (parsedUrl.searchParams.has('token')) {\n    parsedUrl.searchParams.set('token', '****')\n  }\n  return parsedUrl.toString()\n}\n"]}

package/dist/private/node/api.js

@@ -1,4 +1,5 @@
 import { sanitizedHeadersOutput } from './api/headers.js';
+import { sanitizeURL } from './api/urls.js';
 import { outputDebug } from '@shopify/cli-kit/node/output';
 import { ClientError } from 'graphql-request';
 import { performance } from 'perf_hooks';
@@ -34,7 +35,7 @@ export async function debugLogResponseInfo({ request, url }, errorHandler) {
     }
     finally {
         const t1 = performance.now();
-        outputDebug(`Request to ${url} completed in ${Math.round(t1 - t0)} ms
+        outputDebug(`Request to ${sanitizeURL(url)} completed in ${Math.round(t1 - t0)} ms
 With response headers:
 ${sanitizedHeadersOutput(responseHeaders)}
     `);

package/dist/private/node/api.js.map

@@ -1 +1 @@
-{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../src/private/node/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAA;AAItC,MAAM,CAAC,MAAM,OAAO,GAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAA;AAO/F,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,CAAC,eAAe,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAA;AAErG,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,EAAC,OAAO,EAAE,GAAG,EAAoB,EACjC,YAAkD;IAElD,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAC5B,MAAM,eAAe,GAA4B,EAAE,CAAA;IACnD,IAAI,QAAQ,GAAM,EAAO,CAAA;IACzB,IAAI;QACF,QAAQ,GAAG,MAAM,OAAO,CAAA;QACxB,8DAA8D;QAC9D,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;YAChD,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACvE,CAAC,CAAC,CAAA;KACH;IAAC,OAAO,GAAG,EAAE;QACZ,IAAI,GAAG,YAAY,WAAW,EAAE;YAC9B,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE;gBACzB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAqC,EAAE;oBAC9E,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;wBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;iBACtE;aACF;SACF;QACD,IAAI,YAAY,EAAE;YAChB,MAAM,YAAY,CAAC,GAAG,CAAC,CAAA;SACxB;aAAM;YACL,MAAM,GAAG,CAAA;SACV;KACF;YAAS;QACR,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC5B,WAAW,CAAC,cAAc,GAAG,iBAAiB,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;;EAEnE,sBAAsB,CAAC,eAAe,CAAC;KACpC,CAAC,CAAA;KACH;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["import {sanitizedHeadersOutput} from './api/headers.js'\nimport {outputDebug} from '@shopify/cli-kit/node/output'\nimport {Headers} from 'form-data'\nimport {ClientError} from 'graphql-request'\nimport {performance} from 'perf_hooks'\n\nexport type API = 'admin' | 'storefront-renderer' | 'partners' | 'business-platform'\n\nexport const allAPIs: API[] = ['admin', 'storefront-renderer', 'partners', 'business-platform']\n\ninterface RequestOptions<T> {\n  request: Promise<T>\n  url: string\n}\n\nconst interestingResponseHeaders = new Set(['cache-control', 'content-type', 'etag', 'x-request-id'])\n\nexport async function debugLogResponseInfo<T extends {headers: Headers; status: number}>(\n  {request, url}: RequestOptions<T>,\n  errorHandler?: (error: unknown) => Error | unknown,\n): Promise<T> {\n  const t0 = performance.now()\n  const responseHeaders: {[key: string]: string} = {}\n  let response: T = {} as T\n  try {\n    response = await request\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    response.headers.forEach((value: any, key: any) => {\n      if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n    })\n  } catch (err) {\n    if (err instanceof ClientError) {\n      if (err.response?.headers) {\n        for (const [key, value] of err.response?.headers as Iterable<[string, string]>) {\n          if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n        }\n      }\n    }\n    if (errorHandler) {\n      throw errorHandler(err)\n    } else {\n      throw err\n    }\n  } finally {\n    const t1 = performance.now()\n    outputDebug(`Request to ${url} completed in ${Math.round(t1 - t0)} ms\nWith response headers:\n${sanitizedHeadersOutput(responseHeaders)}\n    `)\n  }\n  return response\n}\n"]}
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../src/private/node/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAA;AAItC,MAAM,CAAC,MAAM,OAAO,GAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAA;AAO/F,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,CAAC,eAAe,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAA;AAErG,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,EAAC,OAAO,EAAE,GAAG,EAAoB,EACjC,YAAkD;IAElD,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAC5B,MAAM,eAAe,GAA4B,EAAE,CAAA;IACnD,IAAI,QAAQ,GAAM,EAAO,CAAA;IACzB,IAAI;QACF,QAAQ,GAAG,MAAM,OAAO,CAAA;QACxB,8DAA8D;QAC9D,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;YAChD,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACvE,CAAC,CAAC,CAAA;KACH;IAAC,OAAO,GAAG,EAAE;QACZ,IAAI,GAAG,YAAY,WAAW,EAAE;YAC9B,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE;gBACzB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,OAAqC,EAAE;oBAC9E,IAAI,0BAA0B,CAAC,GAAG,CAAC,GAAG,CAAC;wBAAE,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;iBACtE;aACF;SACF;QACD,IAAI,YAAY,EAAE;YAChB,MAAM,YAAY,CAAC,GAAG,CAAC,CAAA;SACxB;aAAM;YACL,MAAM,GAAG,CAAA;SACV;KACF;YAAS;QACR,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC5B,WAAW,CAAC,cAAc,WAAW,CAAC,GAAG,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;;EAEhF,sBAAsB,CAAC,eAAe,CAAC;KACpC,CAAC,CAAA;KACH;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["import {sanitizedHeadersOutput} from './api/headers.js'\nimport {sanitizeURL} from './api/urls.js'\nimport {outputDebug} from '@shopify/cli-kit/node/output'\nimport {Headers} from 'form-data'\nimport {ClientError} from 'graphql-request'\nimport {performance} from 'perf_hooks'\n\nexport type API = 'admin' | 'storefront-renderer' | 'partners' | 'business-platform'\n\nexport const allAPIs: API[] = ['admin', 'storefront-renderer', 'partners', 'business-platform']\n\ninterface RequestOptions<T> {\n  request: Promise<T>\n  url: string\n}\n\nconst interestingResponseHeaders = new Set(['cache-control', 'content-type', 'etag', 'x-request-id'])\n\nexport async function debugLogResponseInfo<T extends {headers: Headers; status: number}>(\n  {request, url}: RequestOptions<T>,\n  errorHandler?: (error: unknown) => Error | unknown,\n): Promise<T> {\n  const t0 = performance.now()\n  const responseHeaders: {[key: string]: string} = {}\n  let response: T = {} as T\n  try {\n    response = await request\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    response.headers.forEach((value: any, key: any) => {\n      if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n    })\n  } catch (err) {\n    if (err instanceof ClientError) {\n      if (err.response?.headers) {\n        for (const [key, value] of err.response?.headers as Iterable<[string, string]>) {\n          if (interestingResponseHeaders.has(key)) responseHeaders[key] = value\n        }\n      }\n    }\n    if (errorHandler) {\n      throw errorHandler(err)\n    } else {\n      throw err\n    }\n  } finally {\n    const t1 = performance.now()\n    outputDebug(`Request to ${sanitizeURL(url)} completed in ${Math.round(t1 - t0)} ms\nWith response headers:\n${sanitizedHeadersOutput(responseHeaders)}\n    `)\n  }\n  return response\n}\n"]}

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":"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","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"]}