feat: add basic-auth UI Form

web/cypress/fixtures/selector.json

@@ -82,5 +82,7 @@
   "twentyPerPage": "[title=\"20 / page\"]",
   "pageList": ".ant-table-pagination-right",
   "pageTwo": ".ant-pagination-item-2",
-  "pageTwoActived": ".ant-pagination-item-2.ant-pagination-item-active"
+  "pageTwoActived": ".ant-pagination-item-2.ant-pagination-item-active",
+  "selectDropdown": ".ant-select-dropdown",
+  "codeMirrorMode":"[data-cy='code-mirror-mode']"
 }

web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js

@@ -35,6 +35,14 @@ context('Delete Plugin List with the Drawer', () => {
       cy.get('button').click({ force: true });
     });
 
+    cy.get(this.domSelector.codeMirrorMode).invoke('text').then(text => {
+      if (text === 'UIForm') {
+        cy.get(this.domSelector.codeMirrorMode).click();
+        cy.get(this.domSelector.selectDropdown).should('be.visible');
+        cy.get( this.domSelector.selectDropdown + " [label=JSON]" ).click();
+      }
+    });
+
     cy.get(this.domSelector.drawer).should('be.visible').within(() => {
       cy.get(this.domSelector.disabledSwitcher).click();
       cy.get(this.domSelector.checkedSwitcher).should('exist');

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

@@ -39,13 +39,14 @@ context('Create Configure and Delete PluginTemplate', () => {
       force: true
     });
     cy.focused(this.domSelector.drawer).should('exist');
-    cy.get(this.domSelector.drawer, {
-      timeout
-    }).within(() => {
-      cy.get(this.domSelector.disabledSwitcher).click({
-        force: true,
-      });
+
+    cy.get(this.domSelector.codeMirrorMode).click();
+    cy.get(this.domSelector.selectDropdown).should('be.visible');
+    cy.get( this.domSelector.selectDropdown + " [label=JSON]" ).click();
+    cy.get(this.domSelector.disabledSwitcher).click({
+      force: true,
     });
+
     cy.contains('Submit').click();
     cy.contains('Next').click();
     cy.contains('Submit').click();

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

@@ -84,6 +84,10 @@ context('Create and Delete Route', () => {
       cy.get(this.domSelector.checkedSwitcher).should('exist');
     });
 
+    cy.get(this.domSelector.codeMirrorMode).click();
+    cy.get(this.domSelector.selectDropdown).should('be.visible');
+    cy.get( this.domSelector.selectDropdown + " [label=JSON]" ).click();
+
     cy.contains('button', 'Submit').click();
     cy.get(this.domSelector.drawer, { timeout }).should('not.exist');
 

web/cypress/integration/service/create-edit-delete-service.spec.js

@@ -47,6 +47,9 @@ context('Create and Delete Service ', () => {
       cy.get(this.domSelector.checkedSwitcher).should('exist');
     });
 
+    cy.get(this.domSelector.codeMirrorMode).click();
+    cy.get(this.domSelector.selectDropdown).should('be.visible');
+    cy.get( this.domSelector.selectDropdown + " [label=JSON]" ).click();
     cy.contains('button', 'Submit').click();
     cy.get(this.domSelector.drawer, { timeout }).should('not.exist');
 

web/cypress/support/commands.js

@@ -34,16 +34,18 @@ Cypress.Commands.add('login', () => {
 
 Cypress.Commands.add('configurePlugins', (cases) => {
   const timeout = 300;
-  const domSelectors = {
+  const domSelector = {
     name: '[data-cy-plugin-name]',
     parents: '.ant-card-bordered',
     drawer_wrap: '.ant-drawer-content-wrapper',
     drawer: '.ant-drawer-content',
     switch: '#disable',
     close: '.anticon-close',
+    selectDropdown: '.ant-select-dropdown',
+    codeMirrorMode:'[data-cy="code-mirror-mode"]'
   };
 
-  cy.get(domSelectors.name, { timeout }).then(function (cards) {
+  cy.get(domSelector.name, { timeout }).then(function (cards) {
     [...cards].forEach((card) => {
       const name = card.innerText;
       const pluginCases = cases[name] || [];
@@ -54,17 +56,17 @@ Cypress.Commands.add('configurePlugins', (cases) => {
         }
 
         cy.contains(name)
-          .parents(domSelectors.parents)
+          .parents(domSelector.parents)
           .within(() => {
             cy.contains('Enable').click({
               force: true,
             });
           });
 
         // NOTE: wait for the Drawer to appear on the DOM
-        cy.focused(domSelectors.drawer).should('exist');
-        cy.get(domSelectors.drawer, { timeout }).within(() => {
-          cy.get(domSelectors.switch).click({
+        cy.focused(domSelector.drawer).should('exist');
+        cy.get(domSelector.drawer, { timeout }).within(() => {
+          cy.get(domSelector.switch).click({
             force: true,
           });
         });
@@ -73,26 +75,35 @@ Cypress.Commands.add('configurePlugins', (cases) => {
           if (codemirror) {
             codemirror.setValue(JSON.stringify(data));
           }
-          cy.get(domSelectors.drawer).should('exist');
-          cy.get(domSelectors.drawer, { timeout }).within(() => {
+          cy.get(domSelector.drawer).should('exist');
+
+          cy.get(domSelector.codeMirrorMode).invoke('text').then(text => {
+            if (text === 'UIForm') {
+              cy.get(domSelector.codeMirrorMode).click();
+              cy.get(domSelector.selectDropdown).should('be.visible');
+              cy.get(domSelector.selectDropdown + " [label=JSON]" ).click();
+            }
+          });
+
+          cy.get(domSelector.drawer, { timeout }).within(() => {
             cy.contains('Submit').click({
               force: true,
             });
-            cy.get(domSelectors.drawer).should('not.exist');
+            cy.get(domSelector.drawer).should('not.exist');
           });
         });
 
         if (shouldValid === true) {
-          cy.get(domSelectors.drawer).should('not.exist');
+          cy.get(domSelector.drawer).should('not.exist');
         } else if (shouldValid === false) {
           cy.get(this.domSelector.notification).should('contain', 'Invalid plugin data');
 
-          cy.get(domSelectors.close).should('be.visible').click({
+          cy.get(domSelector.close).should('be.visible').click({
             force: true,
             multiple: true,
           });
 
-          cy.get(domSelectors.drawer, { timeout })
+          cy.get(domSelector.drawer, { timeout })
             .invoke('show')
             .within(() => {
               cy.contains('Cancel').click({

web/src/components/Plugin/PluginDetail.tsx

@@ -38,6 +38,7 @@ import addFormats from 'ajv-formats';
 
 import { fetchSchema } from './service';
 import { json2yaml, yaml2json } from '../../helpers';
+import { PluginForm, PLUGIN_UI_LIST } from './UI'
 
 type Props = {
   name: string;
@@ -94,8 +95,10 @@ const PluginDetail: React.FC<Props> = ({
   enum codeMirrorModeList {
     JSON = 'JSON',
     YAML = 'YAML',
+    UIForm = 'UIForm'
   }
   const [form] = Form.useForm();
+  const [UIForm] = Form.useForm();
   const ref = useRef<any>(null);
   const data = initialData[name] || {};
   const pluginType = pluginList.find((item) => item.name === name)?.type;
@@ -107,11 +110,19 @@ const PluginDetail: React.FC<Props> = ({
     { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML },
   ];
 
+  if (PLUGIN_UI_LIST.includes(name)) {
+    modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm })
+  }
+
   useEffect(() => {
     form.setFieldsValue({
       disable: initialData[name] && !initialData[name].disable,
       scope: 'global',
     });
+    if (PLUGIN_UI_LIST.includes(name)) {
+      setCodeMirrorMode(codeMirrorModeList.UIForm);
+      UIForm.setFieldsValue(initialData[name]);
+    };
   }, []);
 
   const validateData = (pluginName: string, value: PluginComponent.Data) => {
@@ -161,23 +172,30 @@ const PluginDetail: React.FC<Props> = ({
   const handleModeChange = (value: PluginComponent.CodeMirrorMode) => {
     switch (value) {
       case codeMirrorModeList.JSON: {
-        const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
-
-        if (error) {
-          notification.error({
-            message: 'Invalid Yaml data',
-          });
-          return;
+        if (codeMirrorMode === 'YAML') {
+          const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
+          if (error) {
+            notification.error({
+              message: 'Invalid Yaml data',
+            });
+            return;
+          }
+          ref.current.editor.setValue(
+            js_beautify(yamlData, {
+              indent_size: 2,
+            }),
+          );
+        } else {
+          ref.current.editor.setValue(
+            js_beautify(JSON.stringify(UIForm.getFieldsValue()), {
+              indent_size: 2,
+            }),
+          );
         }
-        ref.current.editor.setValue(
-          js_beautify(yamlData, {
-            indent_size: 2,
-          }),
-        );
         break;
       }
       case codeMirrorModeList.YAML: {
-        const { data: jsonData, error } = json2yaml(ref.current.editor.getValue());
+        const { data: jsonData, error } = json2yaml(codeMirrorMode === 'JSON' ? ref.current.editor.getValue() : JSON.stringify(UIForm.getFieldsValue()));
 
         if (error) {
           notification.error({
@@ -188,11 +206,28 @@ const PluginDetail: React.FC<Props> = ({
         ref.current.editor.setValue(jsonData);
         break;
       }
+
+      case codeMirrorModeList.UIForm: {
+        if (codeMirrorMode === 'JSON') {
+          UIForm.setFieldsValue(JSON.parse(ref.current.editor.getValue()));
+        } else {
+          const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
+          if (error) {
+            notification.error({
+              message: 'Invalid Yaml data',
+            });
+            return;
+          }
+          UIForm.setFieldsValue(JSON.parse(yamlData));
+        }
+        break;
+      }
       default:
         break;
     }
     setCodeMirrorMode(value);
   };
+
   const formatCodes = () => {
     try {
       if (ref.current) {
@@ -249,10 +284,15 @@ const PluginDetail: React.FC<Props> = ({
                 type="primary"
                 onClick={() => {
                   try {
-                    const editorData =
-                      codeMirrorMode === codeMirrorModeList.JSON
-                        ? JSON.parse(ref.current?.editor.getValue())
-                        : yaml2json(ref.current?.editor.getValue(), false).data;
+                    let editorData;
+                    if (codeMirrorMode === 'JSON') {
+                      editorData = JSON.parse(ref.current?.editor.getValue());
+                    } else if (codeMirrorMode === 'YAML') {
+                      editorData = yaml2json(ref.current?.editor.getValue(), false).data;
+                    } else {
+                      editorData = UIForm.getFieldsValue();
+                    }
+
                     validateData(name, editorData).then((value) => {
                       onChange({ formData: form.getFieldsValue(), codemirrorData: value });
                     });
@@ -333,7 +373,8 @@ const PluginDetail: React.FC<Props> = ({
             </Button>,
           ]}
         />
-        <CodeMirror
+        {Boolean(codeMirrorMode === 'UIForm') && <PluginForm name={name} form={UIForm} />}
+        <div style={{ display: codeMirrorMode === 'UIForm' ? 'none' : 'unset' }}><CodeMirror
           ref={(codemirror) => {
             ref.current = codemirror;
             if (codemirror) {
@@ -350,8 +391,8 @@ const PluginDetail: React.FC<Props> = ({
             lineNumbers: true,
             showCursorWhenSelecting: true,
             autofocus: true,
-          }}
-        />
+          }} />
+        </div>
       </Drawer>
     </>
   );

web/src/components/Plugin/UI/basic-auth.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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;
+  ref?: any;
+};
+
+export const FORM_ITEM_LAYOUT = {
+  labelCol: {
+    span: 4,
+  },
+  wrapperCol: {
+    span: 8
+  },
+};
+
+const BasicAuth: React.FC<Props> = ({ form }) => {
+  return (
+    <Form
+      form={form}
+      {...FORM_ITEM_LAYOUT}
+    >
+      <Form.Item
+        label="username"
+        required
+        name="username"
+      >
+        <Input></Input>
+      </Form.Item>
+      <Form.Item
+        label="password"
+        name="password"
+        required
+      >
+        <Input></Input>
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default BasicAuth;

web/src/components/Plugin/UI/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+export { PLUGIN_UI_LIST, PluginForm } from './plugin';