From 44739629f5dff7a59c333b21ef3176c95c419498 Mon Sep 17 00:00:00 2001 From: Makito Date: Fri, 22 Mar 2024 13:35:44 +0800 Subject: [PATCH] fix(entities-gateway-services): update validation pattern to allow UTF8 chars in names --- .../src/components/GatewayServiceForm.cy.ts | 58 +++++++++++++++++++ .../src/components/GatewayServiceForm.vue | 19 +----- .../src/locales/en.json | 2 +- 3 files changed, 62 insertions(+), 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 index e6320cc49c..2af72ebe18 100644 --- 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('', { 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('', { 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 index a4fdda5bde..013fdeeab3 100644 --- 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" /> { 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 index ce911caa9c..e971a8cea7 100644 --- 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",