[apisix-dashboard] branch master updated: fix: default cors plugin formdata validation error (#1855)

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

majunjie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new a4c7898  fix: default cors plugin formdata validation error (#1855)
a4c7898 is described below

commit a4c78980491226abcbf4cc9a2fda5e50140d41b0
Author: liuxiran <li...@apache.org>
AuthorDate: Mon May 10 10:30:20 2021 +0800

    fix: default cors plugin formdata validation error (#1855)
---
 .../route/create-route-with-cors-form.spec.js      | 55 ++++++++++++++++++++--
 web/src/components/Plugin/PluginDetail.tsx         |  7 +++
 web/src/components/Plugin/UI/cors.tsx              |  1 +
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/web/cypress/integration/route/create-route-with-cors-form.spec.js b/web/cypress/integration/route/create-route-with-cors-form.spec.js
index beabccc..2630933 100644
--- a/web/cypress/integration/route/create-route-with-cors-form.spec.js
+++ b/web/cypress/integration/route/create-route-with-cors-form.spec.js
@@ -19,7 +19,9 @@
 context('Create and delete route with cors form', () => {
   const selector = {
     allow_credential: "#allow_credential",
-    allow_origins_by_regex: "#allow_origins_by_regex_0"
+    allow_origins_by_regex0: "#allow_origins_by_regex_0",
+    allow_origins_by_regex1: "#allow_origins_by_regex_1",
+    addButton: "[data-cy=add-allow_origins_by_regex]",
   }
 
   beforeEach(() => {
@@ -58,7 +60,54 @@ context('Create and delete route with cors form', () => {
 
     // config cors form
     cy.get(selector.allow_credential).click();
-    cy.get(selector.allow_origins_by_regex).type('.*.test.com');
+    cy.get(selector.allow_origins_by_regex0).type('.*.test.com');
+    // add allow_origins_by_regex, assert new input and minus icons exist
+    cy.get(selector.addButton).click();
+    cy.get(selector.allow_origins_by_regex1).should('exist');
+    cy.get(selector.allow_origins_by_regex0).next().should('have.class', 'anticon-minus-circle');
+    cy.get(selector.allow_origins_by_regex1).type('foo.com').next().should('have.class', 'anticon-minus-circle');
+
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Submit').click({
+        force: true,
+      });
+    });
+    cy.get(this.domSelector.drawer).should('not.exist');
+
+    cy.contains('button', 'Next').click();
+    cy.contains('button', 'Submit').click();
+    cy.contains(this.data.submitSuccess);
+
+    // back to route list page
+    cy.contains('Goto List').click();
+    cy.url().should('contains', 'routes/list');
+  });
+
+  it('should edit route with cors form no allow_origins_by_regex configured', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.get(this.domSelector.name).clear().type('routeName');
+    cy.contains('Search').click();
+    cy.contains('routeName').siblings().contains('Configure').click();
+    cy.get(this.domSelector.name).should('have.value','routeName');
+    cy.contains('Next').click();
+    cy.contains('Next').click();
+
+    // config cors plugin
+    cy.contains('cors').parents(this.domSelector.pluginCardBordered).within(() => {
+      cy.get('button').click({
+        force: true
+      });
+    });
+
+    cy.get(this.domSelector.drawer).should('be.visible').within(() => {
+      cy.get(this.domSelector.disabledSwitcher).click();
+      cy.get(this.domSelector.checkedSwitcher).should('exist');
+    });
+
+    // edit allow_origins_by_regex ''
+    cy.get(selector.allow_origins_by_regex0).clear();
+    cy.get(selector.allow_origins_by_regex1).next().click();
     cy.get(this.domSelector.drawer).within(() => {
       cy.contains('Submit').click({
         force: true,
@@ -90,6 +139,6 @@ context('Create and delete route with cors form', () => {
       cy.contains('OK').click();
     });
     cy.get(domSelector.notification).should('contain', data.deleteRouteSuccess);
-    cy.get(domSelector.notificationCloseIcon).click();
+    cy.get(domSelector.notificationCloseIcon).click({ multiple: true});
   });
 });
diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
index 983765a..addaf3c 100644
--- a/web/src/components/Plugin/PluginDetail.tsx
+++ b/web/src/components/Plugin/PluginDetail.tsx
@@ -37,6 +37,7 @@ import { LinkOutlined } from '@ant-design/icons';
 import Ajv from 'ajv';
 import type { DefinedError } from 'ajv';
 import addFormats from 'ajv-formats';
+import { compact, omit } from 'lodash';
 
 import { fetchSchema } from './service';
 import { json2yaml, yaml2json } from '../../helpers';
@@ -121,6 +122,12 @@ const PluginDetail: React.FC<Props> = ({
     if (name === 'cors') {
       const formData = UIForm.getFieldsValue();
       const newMethods = formData.allow_methods.join(",");
+      const compactAllowRegex = compact(formData.allow_origins_by_regex);
+      // Note: default allow_origins_by_regex setted for UI is [''], but this is not allowed, omit it.
+      if (compactAllowRegex.length === 0) {
+        return omit({ ...formData, allow_methods: newMethods }, ['allow_origins_by_regex'])
+      }
+
       return { ...formData, allow_methods: newMethods };
     }
     return UIForm.getFieldsValue();
diff --git a/web/src/components/Plugin/UI/cors.tsx b/web/src/components/Plugin/UI/cors.tsx
index 4bee0eb..6a8fc6d 100644
--- a/web/src/components/Plugin/UI/cors.tsx
+++ b/web/src/components/Plugin/UI/cors.tsx
@@ -158,6 +158,7 @@ const Cors: React.FC<Props> = ({ form }) => {
                 <Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
                   <Button
                     type="dashed"
+                    data-cy="add-allow_origins_by_regex"
                     onClick={() => {
                       add();
                     }}