Truncate the handle string if it is >30 chars

packages/app/src/cli/services/flow/extension-to-toml.test.ts

@@ -45,6 +45,57 @@ type = "email"
 name = "email label"
 required = false
 
+[[settings.fields]]
+key = "number name"
+description = "number help"
+type = "number_decimal"
+name = "number label"
+required = true
+`)
+  })
+
+  test('truncates the handle if the title has >30 characters', () => {
+    // Given
+    const extension1: ExtensionRegistration = {
+      id: '26237698049',
+      uuid: 'ad9947a9-bc0b-4855-82da-008aefbc1c71',
+      title: 'flow action @ Char! flow action @ Char! flow action @ Char!',
+      type: 'flow_action_definition',
+      draftVersion: {
+        config:
+          '{"title":"action title","description":"action description","url":"https://google.es","fields":[{"name":"customer_id","label":"Customer ID","description":"","required":true,"id":"bc16767a-02ab-4775-93e0-04bfe91a94e2","uiType":"commerce-object-id"},{"name":"product_id","label":"Product ID","description":"","required":true,"id":"8dc7911e-f15d-46ee-8aae-82eac7630378","uiType":"commerce-object-id"},{"name":"email field","label":"email label","description":"email help","required":false,"id":"b174c2aa-6cee-4e13-82f8-b60033e84835","uiType":"email"},{"name":"number name","label":"number label","description":"number help","required":true,"id":"363619e5-7b34-4fff-8bd6-c3af054be321","uiType":"number"}],"custom_configuration_page_url":"https://destinationsurl.test.dev","custom_configuration_page_preview_url":"https://previewurl.test.dev","validation_url":"https://validation.test.dev"}',
+      },
+    }
+
+    // When
+    const got = buildTomlObject(extension1)
+
+    // Then
+    expect(got).toEqual(`[[extensions]]
+type = "flow_action"
+name = "action title"
+handle = "flow-action-char-flow-action-c"
+description = "action description"
+runtime_url = "https://google.es"
+config_page_url = "https://destinationsurl.test.dev"
+config_page_preview_url = "https://previewurl.test.dev"
+validation_url = "https://validation.test.dev"
+
+[[settings.fields]]
+type = "customer_reference"
+required = true
+
+[[settings.fields]]
+type = "product_reference"
+required = true
+
+[[settings.fields]]
+key = "email field"
+description = "email help"
+type = "email"
+name = "email label"
+required = false
+
 [[settings.fields]]
 key = "number name"
 description = "number help"

packages/app/src/cli/services/flow/extension-to-toml.ts

@@ -4,6 +4,8 @@ import {ExtensionRegistration} from '../../api/graphql/all_app_extension_registr
 import {encodeToml} from '@shopify/cli-kit/node/toml'
 import {slugify} from '@shopify/cli-kit/common/string'
 
+const MAX_EXTENSION_HANDLE_LENGTH = 30
+
 interface FlowConfig {
   title: string
   description: string
@@ -39,7 +41,7 @@ export function buildTomlObject(extension: ExtensionRegistration): string {
       {
         type: extension.type.replace('_definition', ''),
         name: config.title,
-        handle: slugify(extension.title),
+        handle: slugify(extension.title).substring(0, MAX_EXTENSION_HANDLE_LENGTH),
         description: config.description,
         runtime_url: config.url ?? defaultURL,
         config_page_url: config.custom_configuration_page_url,

packages/app/src/cli/services/payments/extension-to-toml.test.ts

@@ -93,6 +93,57 @@ supports_installments = true
 `)
   })
 
+  test('truncates the handle if the title has >30 characters', () => {
+    // Given
+    const extension1: ExtensionRegistration = {
+      id: '30366498817',
+      uuid: '626ab61a-e494-4e16-b511-e8721ec011a4',
+      title: 'Bogus Pay Bogus Pay Bogus Pay Bogus',
+      type: 'payments_extension',
+      draftVersion: {
+        context: 'payments.offsite.render',
+        config: SAMPLE_OFFSITE_CONFIG,
+      },
+    }
+
+    // When
+    const got = buildTomlObject(extension1)
+
+    // Then
+    expectIncludesKeys(got, SAMPLE_OFFSITE_CONFIG)
+    expect(got).toEqual(`api_version = "2023-10"
+
+[[extensions]]
+name = "Bogus Pay"
+type = "payments_extension"
+handle = "bogus-pay-bogus-pay-bogus-pay-"
+payment_session_url = "https://bogus-app/payment-sessions/start"
+refund_session_url = "https://bogus-app/payment-sessions/refund"
+capture_session_url = "https://bogus-app/payment-sessions/capture"
+void_session_url = "https://bogus-app/payment-sessions/void"
+confirmation_callback_url = "https://bogus-app/payment-sessions/confirm"
+multiple_capture = false
+merchant_label = "Offsite Payments App Extension"
+supported_countries = [ "GG", "AF", "AZ", "BH" ]
+supported_payment_methods = [
+  "visa",
+  "master",
+  "american_express",
+  "discover",
+  "diners_club",
+  "jcb"
+]
+test_mode_available = true
+supports_oversell_protection = false
+supports_3ds = true
+supports_deferred_payments = true
+supports_installments = true
+
+  [[extensions.targeting]]
+  target = "payments.offsite.render"
+`)
+  })
+
   test('correctly builds a toml string for an offsite app', async () => {
     // Given
     const extension1: ExtensionRegistration = {

packages/app/src/cli/services/payments/extension-to-toml.ts

@@ -28,6 +28,8 @@ import {
 import {encodeToml} from '@shopify/cli-kit/node/toml'
 import {slugify} from '@shopify/cli-kit/common/string'
 
+const MAX_EXTENSION_HANDLE_LENGTH = 30
+
 function typeToContext(type: string) {
   switch (type) {
     case DashboardPaymentExtensionType.Offsite:
@@ -102,7 +104,7 @@ function buildPaymentsToml<T extends BasePaymentsAppExtensionDeployConfigType>(
       {
         name: extension.title,
         type: 'payments_extension',
-        handle: slugify(extension.title),
+        handle: slugify(extension.title).substring(0, MAX_EXTENSION_HANDLE_LENGTH),
         ...cliConfig,
         targeting: [
           {