fix: default cors plugin formdata validation error

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});
   });
 });

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();

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();
                     }}