fix: validate rules in Apisix Dashboard is same as Apisix api (#2085)

Co-authored-by: foolwc <[email protected]>

Author: iamayushdas

docs/en/latest/I18N_USER_GUIDE.md

@@ -64,7 +64,7 @@ we have already defined many global keys, before you do i18n, you can refer to [
 
 ```js
 'page.route.form.itemRulesExtraMessage.parameterName': '仅支持字母和数字，且只能以字母开头',
-'page.route.form.itemRulesPatternMessage.apiNameRule': '最大长度100，仅支持字母、数字、- 和 _，且只能以字母开头',
+'page.route.form.itemRulesPatternMessage.apiNameRule': '最大长度应小于100',
 ```
 
 - **Input**

web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js

@@ -53,12 +53,14 @@ context('Create and Delete Route', () => {
     notification: '.ant-notification-notice-message',
     addHost: '[data-cy=addHost]',
     schemaErrorMessage: '.ant-form-item-explain.ant-form-item-explain-error',
+    stepCheck: '.ant-steps-finish-icon',
     advancedMatchingTable: '.ant-table-row.ant-table-row-level-0',
     advancedMatchingTableOperation: '.ant-space',
   };
 
   const data = {
     description: 'desc_by_autotest',
+    invalidName: new Array(101).fill('a').join(''),
     host1: '11.11.11.11',
     host2: '12.12.12.12',
     host3: '10.10.10.10',
@@ -83,6 +85,20 @@ context('Create and Delete Route', () => {
     cy.login();
   });
 
+  it.only('should not create route with name above 100 characters', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.get(selector.empty).should('be.visible');
+    cy.contains('Create').click();
+    cy.contains('Next').click();
+    cy.get(selector.name).type(data.invalidName);
+    cy.contains(selector.schemaErrorMessage, 'Maximum length should be of 100 only').should(
+      'be.visible',
+    );
+    cy.contains('Next').click();
+    cy.get(selector.stepCheck).should('not.exist');
+  });
+
   it('should create route', function () {
     cy.visit('/');
     cy.contains('Route').click();

web/src/pages/Route/components/Step1/MetaView.tsx

@@ -136,7 +136,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({
                 }),
               },
               {
-                pattern: new RegExp(/^[a-zA-Z][a-zA-Z0-9_-]{0,100}$/, 'g'),
+                pattern: new RegExp(/^.{0,100}$/, 'g'),
                 message: formatMessage({
                   id: 'page.route.form.itemRulesPatternMessage.apiNameRule',
                 }),

web/src/pages/Route/locales/en-US.ts

@@ -56,8 +56,7 @@ export default {
   'page.route.panelSection.title.advancedMatchRule': 'Advanced Routing Matching Conditions',
 
   'page.route.panelSection.title.nameDescription': 'Name And Description',
-  'page.route.form.itemRulesPatternMessage.apiNameRule':
-    'Maximum length 100, only letters, Numbers, _, and - are supported, and can only begin with letters',
+  'page.route.form.itemRulesPatternMessage.apiNameRule': 'Maximum length should be of 100 only',
 
   'page.route.panelSection.title.requestConfigBasicDefine': 'Request Basic Define',
   'page.route.form.itemLabel.httpMethod': 'HTTP Method',

web/src/pages/Route/locales/zh-CN.ts

@@ -65,8 +65,7 @@ export default {
   'page.route.input.placeholder.paramValue': '参数值',
   // form
   'page.route.form.itemRulesRequiredMessage.parameterName': '仅支持字母和数字，且只能以字母开头',
-  'page.route.form.itemRulesPatternMessage.apiNameRule':
-    '路由的名称，最大长度100，仅支持字母、数字、- 和 _，且只能以字母开头',
+  'page.route.form.itemRulesPatternMessage.apiNameRule': '最大长度应仅为 100',
   'page.route.form.itemLabel.httpMethod': 'HTTP 方法',
   'page.route.form.itemLabel.scheme': '协议',
   'page.route.form.itemLabel.priority': '优先级',