feat: add proxy-mirror plugin form

web/cypress.json

@@ -3,6 +3,5 @@
   "viewportHeight": 1080,
   "baseUrl": "http://localhost:8000",
   "video": true,
-  "numTestsKeptInMemory": 0,
   "videoUploadOnPasses": false
 }

web/cypress/integration/consumer/create-consumer-with-proxy-mirror-form.spec.js

@@ -0,0 +1,103 @@
+/*
+ * 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 = {
+    host: "#host"
+  }
+
+  const data = {
+    correctHost: 'http://127.0.0.1',
+    wrongHost: '127.0.0.1:1999'
+  }
+
+  it('creates consumer with proxy-mirror 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();
+    // 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, 'proxy-mirror').within(() => {
+      cy.contains('Enable').click({
+        force: true,
+      });
+    });
+
+    cy.focused(this.domSelector.drawer).should('exist');
+
+    // config proxy-mirror form
+    cy.get(selector.host).type(data.wrongHost);
+    cy.get(this.domSelector.drawer).within(() => {
+      cy.contains('Submit').click({
+        force: true,
+      });
+    });
+    cy.get(this.domSelector.notification).should('contain', 'Invalid plugin data');
+
+    cy.get(selector.host).clear().type(data.correctHost);
+    cy.get(this.domSelector.disabledSwitcher).click();
+    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);
+  });
+
+  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/pluginTemplate/create-plugin-template-with-route.spec.js

@@ -40,8 +40,9 @@ context('Create PluginTemplate Binding To Route', () => {
 
     cy.visit('/routes/list');
     cy.contains('Create').click();
-    cy.get(this.domSelector.empty).should('be.visible');
-    cy.get(this.domSelector.name).click();
+
+    // NOTE: make sure all components rerender done
+    cy.contains('Next').click().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);

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

@@ -139,7 +139,8 @@ context('Create and Delete Route', () => {
     cy.contains('Search').click();
     cy.contains(name).siblings().contains('Configure').click();
 
-    cy.wait(500);
+    // NOTE: make sure all components rerender done
+    cy.get('#status').should('have.class', 'ant-switch-checked');
     cy.get(this.domSelector.name).clear().type(newName);
     cy.get(this.domSelector.description).clear().type(this.data.description2);
     cy.contains('Next').click();
@@ -166,13 +167,15 @@ context('Create and Delete Route', () => {
   it('should duplicate the route', function () {
     cy.visit('/');
     cy.contains('Route').click();
+    cy.reload();
 
     cy.get(this.domSelector.nameSelector).type(newName);
     cy.contains('Search').click();
     cy.contains(newName).siblings().contains('More').click();
     cy.contains('Duplicate').click();
 
-    cy.wait(500);
+    // NOTE: make sure all components rerender done
+    cy.get('#status').should('have.class', 'ant-switch-checked');
     cy.get(this.domSelector.name).clear().type(duplicateNewName);
     cy.get(this.domSelector.description).clear().type(this.data.description2);
     cy.contains('Next').click();

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

@@ -106,7 +106,9 @@ 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);
+
+    // NOTE: make sure all components rerender done
+    cy.get('#status').should('have.class', 'ant-switch-checked');
     cy.get(this.domSelector.name).type(this.data.routeName);
 
     cy.contains(routeLocaleUS['page.route.form.itemLabel.newPath']).should('be.visible');

web/cypress/integration/route/search-route.spec.js

@@ -98,9 +98,8 @@ context('Create and Search Route', () => {
   });
 
   it('should search the route with labels', function () {
-    cy.visit('/routes/list');
     // search one label
-    cy.contains(data.test0).should('exist');
+    cy.reload();
     cy.get(this.domSelector.labelSelect_0).click({ timeout });
     cy.get(this.domSelector.dropdown).contains(data.value0).should('be.visible').click();
     cy.contains('Search').click();

web/cypress/support/commands.js

@@ -66,26 +66,41 @@ Cypress.Commands.add('configurePlugins', (cases) => {
 
         // NOTE: wait for the Drawer to appear on the DOM
         cy.focused(domSelector.drawer).should('exist');
+
+        cy.get(domSelector.codeMirrorMode).invoke('text').then(text => {
+          if (text === 'Form') {
+            // FIXME: https://github.com/cypress-io/cypress/issues/7306
+            cy.wait(5000);
+            cy.get(domSelector.codeMirrorMode).should('be.visible');
+            cy.get(domSelector.codeMirrorMode).click();
+            cy.get(domSelector.selectDropdown).should('be.visible');
+            cy.get(domSelector.selectJSON).click();
+          }
+        });
+
         cy.get(domSelector.drawer, { timeout }).within(() => {
           cy.get(domSelector.switch).click({
             force: true,
           });
         });
 
+        cy.get(domSelector.codeMirrorMode).invoke('text').then(text => {
+          if (text === 'Form') {
+            // FIXME: https://github.com/cypress-io/cypress/issues/7306
+            cy.wait(5000);
+            cy.get(domSelector.codeMirrorMode).should('be.visible');
+            cy.get(domSelector.codeMirrorMode).click();
+            cy.get(domSelector.selectDropdown).should('be.visible');
+            cy.get(domSelector.selectJSON).click();
+          }
+        });
+
         cy.window().then(({ codemirror }) => {
           if (codemirror) {
             codemirror.setValue(JSON.stringify(data));
           }
           cy.get(domSelector.drawer).should('exist');
 
-          cy.get(domSelector.codeMirrorMode).invoke('text').then(text => {
-            if (text === 'Form') {
-              cy.get(domSelector.codeMirrorMode).click();
-              cy.get(domSelector.selectDropdown).should('be.visible');
-              cy.get(domSelector.selectJSON).click();
-            }
-          });
-
           cy.get(domSelector.drawer, { timeout }).within(() => {
             cy.contains('Submit').click({
               force: true,

web/src/components/Plugin/UI/plugin.tsx

@@ -19,15 +19,16 @@ import { FormInstance } from 'antd/es/form';
 import { Empty } from 'antd';
 import { useIntl } from 'umi';
 
-import BasicAuth from './basic-auth'
+import BasicAuth from './basic-auth';
+import ProxyMirror from './proxy-mirror';
 
 type Props = {
   name: string,
   form: FormInstance,
   renderForm: boolean
 }
 
-export const PLUGIN_UI_LIST = ['basic-auth',];
+export const PLUGIN_UI_LIST = ['basic-auth', 'proxy-mirror'];
 
 export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
 
@@ -38,6 +39,8 @@ export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
   switch (name) {
     case 'basic-auth':
       return <BasicAuth form={form} />
+    case 'proxy-mirror':
+      return <ProxyMirror form={form} />
     default:
       return null;
   }

web/src/components/Plugin/UI/proxy-mirror.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+import React from 'react';
+import type { FormInstance } from 'antd/es/form';
+import { Form, Input } from 'antd';
+
+type Props = {
+  form: FormInstance;
+};
+
+const FORM_ITEM_LAYOUT = {
+  labelCol: {
+    span: 3,
+  },
+  wrapperCol: {
+    span: 10
+  },
+};
+
+const ProxyMirror: React.FC<Props> = ({ form }) => {
+  return (
+    <Form
+      form={form}
+      {...FORM_ITEM_LAYOUT}
+    >
+      <Form.Item
+        label="host"
+        name="host"
+        tooltip='Specify a mirror service address, e.g. http://127.0.0.1:9797 (address needs to contain schema: http or https, not URI part)'
+      >
+        <Input />
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default ProxyMirror;