fix(entities-gateway-services): update validation pattern to allow UT…

…F8 chars in names
Kong · Mar 22, 2024 · 4473962 · 4473962
1 parent eb528d0
commit 4473962
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 17 deletions.
diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceForm.cy.ts b/packages/entities/entities-gateway-services/src/components/GatewayServiceForm.cy.ts
@@ -83,6 +83,35 @@ describe('<GatewayServiceForm />', { viewportHeight: 800, viewportWidth: 700 },
       cy.getTestId('form-submit').should('be.disabled')
     })
 
+    it("should check for name's validity", () => {
+      cy.mount(GatewayServiceForm, {
+        props: {
+          config: baseConfigKonnect,
+        },
+      })
+
+      cy.get('.kong-ui-entities-gateway-service-form').should('be.visible')
+      cy.get('.kong-ui-entities-gateway-service-form form').should('be.visible')
+
+      cy.getTestId('gateway-service-name-input').should('be.visible')
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .should('not.exist')
+
+      cy.getTestId('gateway-service-name-input').type('service')
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .should('not.exist')
+
+      cy.getTestId('gateway-service-name-input').clear()
+      cy.getTestId('gateway-service-name-input').type('service abc') // with a space
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .first().find('.help-text').should('be.visible')
+
+      cy.getTestId('gateway-service-name-input').clear()
+      cy.getTestId('gateway-service-name-input').type('Hello-ÆBČÐẼF-你好-妳好-こんにちは-안녕하세요-𑁦𑁧𑁨𑁩𑁪𑁫𑁬𑁭𑁮𑁯') // UTF-8
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .should('not.exist')
+    })
+
     it('should enable Save button if Upstream URL is selected and Upstream URL field is filled in', () => {
       cy.mount(GatewayServiceForm, {
         props: {
@@ -436,6 +465,35 @@ describe('<GatewayServiceForm />', { viewportHeight: 800, viewportWidth: 700 },
       cy.getTestId('form-submit').should('be.disabled')
     })
 
+    it("should check for name's validity", () => {
+      cy.mount(GatewayServiceForm, {
+        props: {
+          config: baseConfigKonnect,
+        },
+      })
+
+      cy.get('.kong-ui-entities-gateway-service-form').should('be.visible')
+      cy.get('.kong-ui-entities-gateway-service-form form').should('be.visible')
+
+      cy.getTestId('gateway-service-name-input').should('be.visible')
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .should('not.exist')
+
+      cy.getTestId('gateway-service-name-input').type('service')
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .should('not.exist')
+
+      cy.getTestId('gateway-service-name-input').clear()
+      cy.getTestId('gateway-service-name-input').type('service abc') // with a space
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .first().find('.help-text').should('be.visible')
+
+      cy.getTestId('gateway-service-name-input').clear()
+      cy.getTestId('gateway-service-name-input').type('Hello-ÆBČÐẼF-你好-妳好-こんにちは-안녕하세요-𑁦𑁧𑁨𑁩𑁪𑁫𑁬𑁭𑁮𑁯') // UTF-8
+      cy.getTestId('gateway-service-name-input').parents('.k-input-wrapper.input-error')
+        .should('not.exist')
+    })
+
     it('should enable Save button if Upstream URL is selected and Upstream URL field is filled in', () => {
       cy.mount(GatewayServiceForm, {
         props: {

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceForm.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceForm.vue
@@ -31,7 +31,7 @@
           :placeholder="t('gateway_services.form.fields.name.placeholder')"
           :readonly="form.isReadonly"
           type="text"
-          @input="preValidate"
+          @input="validateName"
         />
 
         <KInput
@@ -621,21 +621,8 @@ const showTlsVerify = computed((): boolean => {
   return checkedGroup.value === 'protocol' && isValidProtocol
 })
 
-/**
- * Check whether the given string matches name formats
-* and returns an error message (if invalid) or empty string (if valid)
-* @param {String} str the str to test
-* @returns {String} an error message
-*/
-const validateName = (str: string): string => {
-  // eslint-disable-next-line prefer-regex-literals
-  const namePattern = new RegExp('^[0-9a-zA-Z.\\-_~]*$')
-
-  return namePattern.test(str) ? '' : t('errors.validationNameError')
-}
-
-const preValidate = (input: string): void => {
-  preValidateErrorMessage.value = validateName(input)
+const validateName = (input: string): void => {
+  preValidateErrorMessage.value = /^[\p{N}\p{L}.\-_~]*$/u.test(input) ? '' : t('errors.validationNameError')
 }
 
 /**

diff --git a/packages/entities/entities-gateway-services/src/locales/en.json b/packages/entities/entities-gateway-services/src/locales/en.json
@@ -168,7 +168,7 @@
     "delete": "The gateway service could not be deleted at this time.",
     "copy": "Failed to copy to clipboard",
     "urlErrorMessage": "Error: invalid URL",
-    "validationNameError": "The name can be any string containing letters, numbers, or the following characters: ., -, _, or ~. Do not use spaces."
+    "validationNameError": "The name can be any string containing characters, letters, numbers, or the following characters: ., -, _, or ~. Do not use spaces."
   },
   "copy": {
     "success": "Copied {val} to clipboard",