chore: improve Route module

docs/en/latest/I18N_USER_GUIDE.md

@@ -23,13 +23,13 @@ title: i18n User Guide
 
 The Apache APISIX Dashboard uses [@umijs/plugin-locale](https://umijs.org/plugins/plugin-locale) to solve the i18n issues, in order to make the i18n more clear and reasonable, we would recommend to obey the following rules
 
-## Location of locale configuration：
+## Location of locale configuration
 
 - Please put **the global locales** under `src/locales`.
 - Please put **each page's locale file** under `src/pages/$PAGE/locales` folder.
 - Please put **the Component's locale file** under `src/components/$COMPONENT/locales` folder, and we **MUST** import them manually
 
-## How to name the key for each locale filed：
+## How to name the key for each locale filed
 
 the key can be like this : [basicModule].[moduleName].[elementName].[...desc]
 
@@ -64,7 +64,6 @@ we have already defined many global keys, before you do i18n, you can refer to [
 
 ```js
 'page.route.form.itemRulesExtraMessage.parameterName': '仅支持字母和数字，且只能以字母开头',
-'page.route.form.itemLabel.apiName': 'API 名称',
 'page.route.form.itemRulesPatternMessage.apiNameRule': '最大长度100，仅支持字母、数字、- 和 _，且只能以字母开头',
 ```
 
@@ -101,7 +100,7 @@ we have already defined many global keys, before you do i18n, you can refer to [
 **Example:**
 
 ```js
-'page.route.steps.stepTitle.defineApiRequest': '定义 API 请求',
+'page.route.steps.stepTitle.defineApiRequest': '设置路由信息',
 ```
 
 - **Select**

web/cypress/fixtures/selector.json

@@ -85,5 +85,7 @@
   "pageTwoActived": ".ant-pagination-item-2.ant-pagination-item-active",
   "selectDropdown": ".ant-select-dropdown",
   "codeMirrorMode": "[data-cy='code-mirror-mode']",
-  "selectJSON":".ant-select-dropdown [label=JSON]"
+  "selectJSON":".ant-select-dropdown [label=JSON]",
+
+  "deleteAlert": ".ant-modal-body"
 }

web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js

@@ -29,6 +29,7 @@ context('Create Configure and Delete PluginTemplate', () => {
     cy.visit('/');
     cy.contains('Route').click();
     cy.get(this.domSelector.empty).should('be.visible');
+    cy.contains('Advanced').should('be.visible').click();
     cy.contains('Plugin Template Config').should('be.visible').click();
     cy.get(this.domSelector.empty).should('be.visible');
     cy.contains('Create').click();

web/cypress/integration/pluginTemplate/create-plugin-template-with-route.spec.js

@@ -28,6 +28,7 @@ context('Create PluginTemplate Binding To Route', () => {
     cy.visit('/');
     cy.contains('Route').click();
     cy.get(this.domSelector.empty).should('be.visible');
+    cy.contains('Advanced').should('be.visible').click();
     cy.contains('Plugin Template Config').should('be.visible').click();
     cy.get(this.domSelector.empty).should('be.visible');
     cy.contains('Create').click();
@@ -37,8 +38,10 @@ context('Create PluginTemplate Binding To Route', () => {
     cy.contains('Submit').click();
     cy.get(this.domSelector.notification).should('contain', this.data.createPluginTemplateSuccess);
 
-    cy.visit('routes/list');
+    cy.visit('/routes/list');
     cy.contains('Create').click();
+    cy.get(this.domSelector.empty).should('be.visible');
+    cy.get(this.domSelector.name).click();
     cy.get(this.domSelector.name).type(this.data.routeName);
     cy.contains('Next').click();
     cy.get(this.domSelector.nodes_0_host).type(this.data.ip1);
@@ -98,8 +101,11 @@ context('Create PluginTemplate Binding To Route', () => {
     cy.visit('/routes/list');
     cy.get(this.domSelector.nameSelector).type(this.data.routeName);
     cy.contains('Search').click();
-    cy.contains(this.data.routeName).siblings().contains('Delete').click();
-    cy.contains('button', 'Confirm').click();
+    cy.contains(this.data.routeName).siblings().contains('More').click();
+    cy.contains('Delete').should('be.visible').click();
+    cy.get('.ant-modal-content').should('be.visible').within(() => {
+      cy.contains('OK').click();
+    });
     cy.get(this.domSelector.notification).should('contain', this.data.deleteRouteSuccess);
   });
 });

web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js

@@ -35,7 +35,14 @@ context('Test RawDataEditor', () => {
     menuList.forEach(function (item) {
       cy.visit('/');
       cy.contains(item).click();
-      cy.contains('Raw Data Editor').click();
+      cy.get('.anticon-reload').click();
+      if (item === 'Route') {
+        cy.contains('Advanced').should('be.visible').click({ force: true });
+        cy.contains('Raw Data Editor').should('be.visible').click();
+      } else {
+        cy.contains('Raw Data Editor').should('be.visible').click();
+      }
+
       const data = dateset[item];
 
       cy.window().then(({ codemirror }) => {
@@ -52,11 +59,21 @@ context('Test RawDataEditor', () => {
       });
 
       cy.reload();
-      // update with editor
-      cy.contains(item === 'Consumer' ? data.username : data.name)
-        .siblings()
-        .contains('View')
-        .click();
+      if (item === 'Route') {
+        // update with editor
+        cy.contains(item === 'Consumer' ? data.username : data.name)
+          .siblings()
+          .contains('More')
+          .click();
+
+        cy.contains('View').should('be.visible').click({ force: true });
+      } else {
+        // update with editor
+        cy.contains(item === 'Consumer' ? data.username : data.name)
+          .siblings()
+          .contains('View')
+          .click();
+      };
 
       cy.window().then(({ codemirror }) => {
         if (codemirror) {
@@ -75,15 +92,29 @@ context('Test RawDataEditor', () => {
         });
       });
 
-      cy.reload();
-      cy.get(domSelector.tableBody).should('contain', item === 'Consumer' ? 'newDesc' : 'newName');
+      if (item === 'Route') {
+        cy.reload();
+        cy.get(domSelector.tableBody).should('contain', item === 'Consumer' ? 'newDesc' : 'newName');
+
+        cy.contains(item === 'Consumer' ? 'newDesc' : 'newName')
+          .siblings()
+          .contains('More')
+          .click();
+
+        cy.contains('Delete').should('be.visible').click();
+        cy.get('.ant-modal-content').should('be.visible').within(() => {
+          cy.contains('OK').click();
+        });
+      } else {
+        cy.reload();
+        cy.get(domSelector.tableBody).should('contain', item === 'Consumer' ? 'newDesc' : 'newName');
 
-      // delete resource
-      cy.contains(item === 'Consumer' ? 'newDesc' : 'newName')
-        .siblings()
-        .contains('Delete')
-        .click();
-      cy.contains('button', 'Confirm').click();
+        cy.contains(item === 'Consumer' ? 'newDesc' : 'newName')
+          .siblings()
+          .contains('Delete')
+          .click();
+        cy.contains('button', 'Confirm').click();
+      }
 
       cy.get(domSelector.notification).should('contain', publicData[`delete${item}Success`]);
       cy.get(domSelector.notificationClose).should('be.visible').click({

web/cypress/integration/route/can-skip-upstream-when-select-service-id.spec.js

@@ -55,12 +55,14 @@ context('Can select service_id skip upstream in route', () => {
     cy.contains('Create').click();
 
     // The None option doesn't exist when service isn't selected
+    cy.contains('Next').click().click();
     cy.get(this.domSelector.name).type(this.data.routeName);
     cy.contains('Next').click();
     cy.get(this.domSelector.upstreamSelector).click();
     cy.contains('None').should('not.exist');
 
     cy.contains('Previous').click();
+    cy.wait(500);
     cy.contains('None').click();
     cy.contains(this.data.serviceName).click();
     cy.contains('Next').click();
@@ -106,8 +108,11 @@ context('Can select service_id skip upstream in route', () => {
 
     cy.visit('/');
     cy.contains('Route').click();
-    cy.contains(this.data.routeName).siblings().contains('Delete').click();
-    cy.contains('button', 'Confirm').click();
+    cy.contains(this.data.routeName).siblings().contains('More').click();
+    cy.contains('Delete').click();
+    cy.get(this.domSelector.deleteAlert).should('be.visible').within(() => {
+      cy.contains('OK').click();
+    });
     cy.get(this.domSelector.notification).should('contain', this.data.deleteRouteSuccess);
 
     cy.visit('/');

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

@@ -35,6 +35,7 @@ context('Create and Delete Route', () => {
     cy.contains('Route').click();
     cy.get(this.domSelector.empty).should('be.visible');
     cy.contains('Create').click();
+    cy.contains('Next').click().click();
     cy.get(this.domSelector.name).type(name);
     cy.get(this.domSelector.description).type(this.data.description);
 
@@ -48,7 +49,7 @@ context('Create and Delete Route', () => {
     cy.contains('Advanced Routing Matching Conditions')
       .parent()
       .siblings()
-      .contains('Create')
+      .contains('Add')
       .click();
 
     // create advanced routing matching conditions
@@ -120,7 +121,8 @@ context('Create and Delete Route', () => {
 
     cy.get(this.domSelector.nameSelector).type(name);
     cy.contains('Search').click();
-    cy.contains(name).siblings().contains('View').click();
+    cy.contains(name).siblings().contains('More').click();
+    cy.contains('View').click();
     cy.get(this.domSelector.drawer).should('be.visible');
 
     cy.get(this.domSelector.codemirrorScroll).within(() => {
@@ -137,6 +139,7 @@ context('Create and Delete Route', () => {
     cy.contains('Search').click();
     cy.contains(name).siblings().contains('Configure').click();
 
+    cy.wait(500);
     cy.get(this.domSelector.name).clear().type(newName);
     cy.get(this.domSelector.description).clear().type(this.data.description2);
     cy.contains('Next').click();
@@ -149,7 +152,8 @@ context('Create and Delete Route', () => {
     cy.contains(newName).siblings().should('contain', this.data.description2);
 
     // test view
-    cy.contains(newName).siblings().contains('View').click();
+    cy.contains(newName).siblings().contains('More').click();
+    cy.contains('View').click();
     cy.get(this.domSelector.drawer).should('be.visible');
 
     cy.get(this.domSelector.codemirrorScroll).within(() => {
@@ -165,8 +169,10 @@ context('Create and Delete Route', () => {
 
     cy.get(this.domSelector.nameSelector).type(newName);
     cy.contains('Search').click();
-    cy.contains(newName).siblings().contains('Duplicate').click();
+    cy.contains(newName).siblings().contains('More').click();
+    cy.contains('Duplicate').click();
 
+    cy.wait(500);
     cy.get(this.domSelector.name).clear().type(duplicateNewName);
     cy.get(this.domSelector.description).clear().type(this.data.description2);
     cy.contains('Next').click();
@@ -179,7 +185,8 @@ context('Create and Delete Route', () => {
     cy.contains(duplicateNewName).siblings().should('contain', this.data.description2);
 
     // test view
-    cy.contains(duplicateNewName).siblings().contains('View').click();
+    cy.contains(duplicateNewName).siblings().contains('More').click();
+    cy.contains('View').click();
     cy.get(this.domSelector.drawer).should('be.visible');
 
     cy.get(this.domSelector.codemirrorScroll).within(() => {
@@ -195,9 +202,13 @@ context('Create and Delete Route', () => {
     routeNames.forEach(function (routeName) {
       cy.get(domSelector.name).clear().type(routeName);
       cy.contains('Search').click();
-      cy.contains(routeName).siblings().contains('Delete').click();
-      cy.contains('button', 'Confirm').click();
+      cy.contains(routeName).siblings().contains('More').click();
+      cy.contains('Delete').click();
+      cy.get(domSelector.deleteAlert).should('be.visible').within(() => {
+        cy.contains('OK').click();
+      });
       cy.get(domSelector.notification).should('contain', data.deleteRouteSuccess);
+      cy.get(domSelector.notificationCloseIcon).click();
     });
   });
 });

web/cypress/integration/route/create-route-with-proxy-rewrite-plugin.spec.js

@@ -56,6 +56,7 @@ context('create route with proxy-rewrite plugin', () => {
 
     // show create page
     cy.contains(componentLocaleUS['component.global.create']).click();
+    cy.contains('Next').click().click();
     cy.get(this.domSelector.name).type(this.data.routeName);
 
     // show requestOverride PanelSection
@@ -105,6 +106,7 @@ context('create route with proxy-rewrite plugin', () => {
     cy.get(this.domSelector.nameSelector).type(this.data.routeName);
     cy.contains('Search').click();
     cy.contains(this.data.routeName).siblings().contains('Configure').click();
+    cy.wait(500);
     cy.get(this.domSelector.name).type(this.data.routeName);
 
     cy.contains(routeLocaleUS['page.route.form.itemLabel.newPath']).should('be.visible');
@@ -132,8 +134,11 @@ context('create route with proxy-rewrite plugin', () => {
     cy.visit('/routes/list');
     cy.get(this.domSelector.nameSelector).type(this.data.routeName);
     cy.contains('Search').click();
-    cy.contains(this.data.routeName).siblings().contains('Delete').click();
-    cy.contains('button', 'Confirm').click();
+    cy.contains(this.data.routeName).siblings().contains('More').click();
+    cy.contains('Delete').click();
+    cy.get(this.domSelector.deleteAlert).should('be.visible').within(() => {
+      cy.contains('OK').click();
+    });
     cy.get(this.domSelector.notification).should('contain', this.data.deleteRouteSuccess);
   });
 });

web/cypress/integration/route/create-route-with-upstream.spec.js

@@ -41,6 +41,7 @@ context('Create Route with Upstream', () => {
     cy.contains('Route').click();
     cy.contains('Create').click();
 
+    cy.contains('Next').click().click();
     cy.get(this.domSelector.name).type(this.data.routeName);
     cy.contains('Next').click();
     // should disable Upstream input boxes after selecting an existing upstream
@@ -106,8 +107,11 @@ context('Create Route with Upstream', () => {
     cy.visit('/routes/list');
     cy.get(this.domSelector.nameSelector).type(this.data.routeName);
     cy.contains('Search').click();
-    cy.contains(this.data.routeName).siblings().contains('Delete').click();
-    cy.contains('button', 'Confirm').click();
+    cy.contains(this.data.routeName).siblings().contains('More').click();
+    cy.contains('Delete').click();
+    cy.get(this.domSelector.deleteAlert).should('be.visible').within(() => {
+      cy.contains('OK').click();
+    });
     cy.get(this.domSelector.notification).should('contain', this.data.deleteRouteSuccess);
 
     cy.visit('/');

web/cypress/integration/route/import_export_route.spec.js

@@ -53,6 +53,7 @@ context('import and export routes', () => {
       cy.contains(menuLocaleUS['menu.routes']).click();
       cy.contains(componentLocaleUS['component.global.create']).click();
       // input name, click Next
+      cy.contains('Next').click().click();
       cy.get(this.domSelector.name).type(data[`route_name_${i}`]);
       //FIXME: only GET in methods
       cy.get('#methods').click();
@@ -127,8 +128,11 @@ context('import and export routes', () => {
     cy.get(this.domSelector.refresh).click();
 
     for (let i = 0; i < 2; i += 1) {
-      cy.contains(data[`route_name_${i}`]).siblings().contains('Delete').click();
-      cy.contains('button', 'Confirm').click();
+      cy.contains(data[`route_name_${i}`]).siblings().contains('More').click();
+      cy.contains('Delete').click();
+      cy.get(this.domSelector.deleteAlert).should('be.visible').within(() => {
+        cy.contains('OK').click();
+      });
       cy.get(this.domSelector.notification).should('contain', this.data.deleteRouteSuccess);
       cy.get(this.domSelector.notificationCloseIcon).click().should('not.exist');
       cy.reload();
@@ -141,7 +145,9 @@ context('import and export routes', () => {
 
     data.uploadRouteFiles.forEach((file) => {
       // click import button
-      cy.contains(routeLocaleUS['page.route.button.importOpenApi']).click();
+      cy.get(this.domSelector.refresh).click();
+      cy.contains('Advanced').click();
+      cy.contains(routeLocaleUS['page.route.button.importOpenApi']).should('be.visible').click();
       // select file
       cy.get(this.domSelector.fileSelector).attachFile(file);
       // click submit
@@ -159,9 +165,11 @@ context('import and export routes', () => {
         cy.get(this.domSelector.notificationCloseIcon).click().should('not.exist');
         // delete route just imported
         cy.reload();
-        cy.get(this.domSelector.deleteButton).should('exist').click();
-        cy.contains('button', componentLocaleUS['component.global.confirm']).click({ force: true });
-
+        cy.contains('More').click();
+        cy.contains('Delete').should('be.visible').click();
+        cy.get(this.domSelector.deleteAlert).should('be.visible').within(() => {
+          cy.contains('OK').click();
+        });
         // show delete successfully notification
         cy.get(this.domSelector.notification).should('contain', this.data.deleteRouteSuccess);
         cy.get(this.domSelector.notificationCloseIcon).click();