feat: added cors plugin form

web/cypress/integration/consumer/create-upstream-with-cors-form.spec.js

@@ -0,0 +1,101 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Consumer', () => {
+  beforeEach(() => {
+    cy.login();
+
+    cy.fixture('selector.json').as('domSelector');
+    cy.fixture('data.json').as('data');
+  });
+
+  const selector = {
+    max_age: "#max_age"
+  }
+
+  const data = {
+    time: 2,
+  }
+
+  it('creates consumer with cors form', function () {
+    cy.visit('/');
+    cy.contains('Consumer').click();
+    cy.get(this.domSelector.empty).should('be.visible');
+    cy.contains('Create').click();
+    // basic information
+    cy.get(this.domSelector.username).type(this.data.consumerName);
+    cy.get(this.domSelector.description).type(this.data.description);
+    cy.contains('Next').click();
+
+    // config auth plugin
+    cy.contains(this.domSelector.pluginCard, 'key-auth').within(() => {
+      cy.contains('Enable').click({ force: true });
+    });
+    cy.focused(this.domSelector.drawer).should('exist');
+    cy.get(this.domSelector.disabledSwitcher).click().should('have.class', 'ant-switch-checked');
+    // edit codemirror
+    cy.get(this.domSelector.codeMirror)
+      .first()
+      .then((editor) => {
+        editor[0].CodeMirror.setValue(
+          JSON.stringify({
+            key: 'test',
+          }),
+        );
+        cy.contains('button', 'Submit').click();
+      });
+
+    cy.contains(this.domSelector.pluginCard, 'cors').within(() => {
+      cy.contains('Enable').click({
+        force: true,
+      });
+    });
+
+    cy.get(this.domSelector.drawer).should('be.visible');
+
+    cy.get(selector.max_age).clear();
+    // config proxy-mirror form
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Submit').click({
+        force: true,
+      });
+    });
+    cy.get(this.domSelector.notification).should('contain', 'Invalid plugin data');
+    cy.get(this.domSelector.notificationCloseIcon).click().should('not.exist');
+
+    cy.get(selector.max_age).type(data.time);
+    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.get(this.domSelector.notification).should('contain', this.data.createConsumerSuccess);
+    cy.get(this.domSelector.notificationCloseIcon).click().should('not.exist');
+  });
+
+  it('delete the consumer', function () {
+    cy.visit('/consumer/list');
+    cy.contains(this.data.consumerName).should('be.visible').siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+    cy.get(this.domSelector.notification).should('contain', this.data.deleteConsumerSuccess);
+  });
+});

web/cypress/integration/route/create-route-with-cors-form.spec.js

@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-undef */
+
+context('Create and delete route with cors form', () => {
+  const selector = {
+    allow_credential: "#allow_credential",
+    allow_origins_by_regex: "#allow_origins_by_regex_0"
+  }
+
+  beforeEach(() => {
+    cy.login();
+
+    cy.fixture('selector.json').as('domSelector');
+    cy.fixture('data.json').as('data');
+  });
+
+  it('should create route with cors form', function () {
+    cy.visit('/');
+    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('routeName');
+    cy.get(this.domSelector.description).type('desc');
+    cy.contains('Next').click();
+
+    cy.get(this.domSelector.nodes_0_host).type('127.0.0.1');
+    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');
+    });
+
+    // config cors form
+    cy.get(selector.allow_credential).click();
+    cy.get(selector.allow_origins_by_regex).type('.*.test.com');
+    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 delete the route', function () {
+    cy.visit('/routes/list');
+    const {
+      domSelector,
+      data
+    } = this;
+
+    cy.get(domSelector.name).clear().type('routeName');
+    cy.contains('Search').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/src/components/Plugin/PluginDetail.tsx

@@ -116,14 +116,32 @@ const PluginDetail: React.FC<Props> = ({
     modeOptions.push({ label: formatMessage({ id: 'component.plugin.form' }), value: codeMirrorModeList.UIForm });
   }
 
+  const getUIFormData = () => {
+    if (name === 'cors') {
+      const formData = UIForm.getFieldsValue();
+      const newMethods = formData.allow_methods.join(",");
+      return { ...formData, allow_methods: newMethods };
+    }
+    return UIForm.getFieldsValue();
+  };
+
+  const setUIFormData = (formData: any) => {
+    if (name === 'cors' && formData) {
+      const methods = (formData.allow_methods || '').length ? formData.allow_methods.split(",") : ["*"];
+      UIForm.setFieldsValue({ ...formData, allow_methods: methods });
+      return;
+    }
+    UIForm.setFieldsValue(formData);
+  };
+
   useEffect(() => {
     form.setFieldsValue({
       disable: initialData[name] && !initialData[name].disable,
       scope: 'global',
     });
     if (PLUGIN_UI_LIST.includes(name)) {
       setCodeMirrorMode(codeMirrorModeList.UIForm);
-      UIForm.setFieldsValue(initialData[name]);
+      setUIFormData(initialData[name]);
     };
   }, []);
 
@@ -189,15 +207,15 @@ const PluginDetail: React.FC<Props> = ({
           );
         } else {
           ref.current.editor.setValue(
-            js_beautify(JSON.stringify(UIForm.getFieldsValue()), {
+            js_beautify(JSON.stringify(getUIFormData()), {
               indent_size: 2,
             }),
           );
         }
         break;
       }
       case codeMirrorModeList.YAML: {
-        const { data: jsonData, error } = json2yaml(codeMirrorMode === codeMirrorModeList.JSON ? ref.current.editor.getValue() : JSON.stringify(UIForm.getFieldsValue()));
+        const { data: jsonData, error } = json2yaml(codeMirrorMode === codeMirrorModeList.JSON ? ref.current.editor.getValue() : JSON.stringify(getUIFormData()));
 
         if (error) {
           notification.error({
@@ -211,7 +229,7 @@ const PluginDetail: React.FC<Props> = ({
 
       case codeMirrorModeList.UIForm: {
         if (codeMirrorMode === codeMirrorModeList.JSON) {
-          UIForm.setFieldsValue(JSON.parse(ref.current.editor.getValue()));
+          setUIFormData(JSON.parse(ref.current.editor.getValue()));
         } else {
           const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
           if (error) {
@@ -220,7 +238,7 @@ const PluginDetail: React.FC<Props> = ({
             });
             return;
           }
-          UIForm.setFieldsValue(JSON.parse(yamlData));
+          setUIFormData(JSON.parse(yamlData));
         }
         break;
       }
@@ -292,7 +310,7 @@ const PluginDetail: React.FC<Props> = ({
                     } else if (codeMirrorMode === codeMirrorModeList.YAML) {
                       editorData = yaml2json(ref.current?.editor.getValue(), false).data;
                     } else {
-                      editorData = UIForm.getFieldsValue();
+                      editorData = getUIFormData();
                     }
 
                     validateData(name, editorData).then((value) => {