From dd807d32a379171692709a30404e8627ab7b8de0 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 16:25:41 +0800 Subject: [PATCH 01/14] feat: add basic-auth UI Form --- web/src/components/Plugin/PluginDetail.tsx | 83 +++++++++++++++------ web/src/components/Plugin/UI/basic-auth.tsx | 59 +++++++++++++++ web/src/components/Plugin/UI/index.ts | 17 +++++ web/src/components/Plugin/UI/plugin.tsx | 36 +++++++++ web/src/components/Plugin/typing.d.ts | 2 +- 5 files changed, 175 insertions(+), 22 deletions(-) create mode 100644 web/src/components/Plugin/UI/basic-auth.tsx create mode 100644 web/src/components/Plugin/UI/index.ts create mode 100644 web/src/components/Plugin/UI/plugin.tsx diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 8c3eac7220..cc0605004e 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/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 = ({ enum codeMirrorModeList { JSON = 'JSON', YAML = 'YAML', + UIForm = 'UIForm' } const [form] = Form.useForm(); + const [UIForm] = Form.useForm(); const ref = useRef(null); const data = initialData[name] || {}; const pluginType = pluginList.find((item) => item.name === name)?.type; @@ -107,11 +110,19 @@ const PluginDetail: React.FC = ({ { 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 = ({ 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 = ({ 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 = ({ 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 = ({ , ]} /> - } +
{ ref.current = codemirror; if (codemirror) { @@ -350,11 +391,11 @@ const PluginDetail: React.FC = ({ lineNumbers: true, showCursorWhenSelecting: true, autofocus: true, - }} - /> + }} /> +
); }; -export default PluginDetail; +export default PluginDetail; \ No newline at end of file diff --git a/web/src/components/Plugin/UI/basic-auth.tsx b/web/src/components/Plugin/UI/basic-auth.tsx new file mode 100644 index 0000000000..f1cbd8bbc1 --- /dev/null +++ b/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 = ({ form }) => { + return ( +
+ + + + + + +
+ ); +} + +export default BasicAuth; \ No newline at end of file diff --git a/web/src/components/Plugin/UI/index.ts b/web/src/components/Plugin/UI/index.ts new file mode 100644 index 0000000000..8da266b584 --- /dev/null +++ b/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'; diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx new file mode 100644 index 0000000000..d7cce25676 --- /dev/null +++ b/web/src/components/Plugin/UI/plugin.tsx @@ -0,0 +1,36 @@ +/* + * 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 { FormInstance } from 'antd/es/form'; + +import BasicAuth from './basic-auth' + +type Props = { + name: string, + form: FormInstance +} + +export const PLUGIN_UI_LIST = ['basic-auth',]; + +export const PluginForm: React.FC = ({ name, form }) => { + switch (name) { + case 'basic-auth': + return + default: + return null; + } +} \ No newline at end of file diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts index 79dda497ce..420d3a338c 100644 --- a/web/src/components/Plugin/typing.d.ts +++ b/web/src/components/Plugin/typing.d.ts @@ -30,5 +30,5 @@ declare namespace PluginComponent { type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin'; - type CodeMirrorMode = 'JSON' | 'YAML'; + type CodeMirrorMode = 'JSON' | 'YAML'| 'UIForm'; } From 62619d7435d40a038355730776133cd7c9601992 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 16:28:34 +0800 Subject: [PATCH 02/14] feat: update --- web/src/components/Plugin/PluginDetail.tsx | 2 +- web/src/components/Plugin/UI/basic-auth.tsx | 2 +- web/src/components/Plugin/UI/plugin.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index cc0605004e..4c7ac21929 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -398,4 +398,4 @@ const PluginDetail: React.FC = ({ ); }; -export default PluginDetail; \ No newline at end of file +export default PluginDetail; diff --git a/web/src/components/Plugin/UI/basic-auth.tsx b/web/src/components/Plugin/UI/basic-auth.tsx index f1cbd8bbc1..5fc11d0994 100644 --- a/web/src/components/Plugin/UI/basic-auth.tsx +++ b/web/src/components/Plugin/UI/basic-auth.tsx @@ -56,4 +56,4 @@ const BasicAuth: React.FC = ({ form }) => { ); } -export default BasicAuth; \ No newline at end of file +export default BasicAuth; diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx index d7cce25676..da29328681 100644 --- a/web/src/components/Plugin/UI/plugin.tsx +++ b/web/src/components/Plugin/UI/plugin.tsx @@ -33,4 +33,4 @@ export const PluginForm: React.FC = ({ name, form }) => { default: return null; } -} \ No newline at end of file +} From 7e92854a4b053dbd64b8267f853524aacf9fcb4c Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 16:49:44 +0800 Subject: [PATCH 03/14] fix: pluginTemplate CI --- .../create-edit-delete-plugin-template.spec.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js index d3ea3c4558..2dd1da7334 100644 --- a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js +++ b/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("[data-cy='code-mirror-mode']").click(); + cy.get('.ant-select-dropdown').should('be.visible'); + cy.get(".ant-select-dropdown [label=JSON]").click(); + cy.get(this.domSelector.disabledSwitcher).click({ + force: true, }); + cy.contains('Submit').click(); cy.contains('Next').click(); cy.contains('Submit').click(); From d56d310b6df55de13244aaf6891564fbaf329d33 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 16:55:22 +0800 Subject: [PATCH 04/14] feat: update route ci --- .../route/create-edit-duplicate-delete-route.spec.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js index 85aad6f2e7..ea5ca95ad3 100644 --- a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js +++ b/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("[data-cy='code-mirror-mode']").click(); + cy.get('.ant-select-dropdown').should('be.visible'); + cy.get(".ant-select-dropdown [label=JSON]").click(); + cy.contains('button', 'Submit').click(); cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); From 5c2f0812da12094478ca1f9264655497cfa8239f Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 16:57:11 +0800 Subject: [PATCH 05/14] feat: update service ci --- .../integration/service/create-edit-delete-service.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/cypress/integration/service/create-edit-delete-service.spec.js b/web/cypress/integration/service/create-edit-delete-service.spec.js index 52b63c3f99..96add4da3b 100644 --- a/web/cypress/integration/service/create-edit-delete-service.spec.js +++ b/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("[data-cy='code-mirror-mode']").click(); + cy.get('.ant-select-dropdown').should('be.visible'); + cy.get(".ant-select-dropdown [label=JSON]").click(); cy.contains('button', 'Submit').click(); cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); From 132dcf4005739d7e6be139d0b0b1ef5be708c82d Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 17:56:43 +0800 Subject: [PATCH 06/14] fix: plugin ci --- .../plugin/create-delete-in-drawer-plugin.spec.js | 8 ++++++++ web/cypress/support/commands.js | 9 +++++++++ 2 files changed, 17 insertions(+) diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js index a6e7b4cbdf..246ab493cb 100644 --- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js +++ b/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("[data-cy='code-mirror-mode']").invoke('text').then(text => { + if (text === 'UIForm') { + cy.get("[data-cy='code-mirror-mode']").click(); + cy.get(".ant-select-dropdown").should('be.visible'); + cy.get(".ant-select-dropdown [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'); diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js index 59e8ad5b0d..14176b166e 100644 --- a/web/cypress/support/commands.js +++ b/web/cypress/support/commands.js @@ -74,6 +74,15 @@ Cypress.Commands.add('configurePlugins', (cases) => { codemirror.setValue(JSON.stringify(data)); } cy.get(domSelectors.drawer).should('exist'); + + cy.get("[data-cy='code-mirror-mode']").invoke('text').then(text => { + if (text === 'UIForm') { + cy.get("[data-cy='code-mirror-mode']").click(); + cy.get(".ant-select-dropdown").should('be.visible'); + cy.get(".ant-select-dropdown [label=JSON]").click(); + } + }); + cy.get(domSelectors.drawer, { timeout }).within(() => { cy.contains('Submit').click({ force: true, From 59dba3eaec57cc3968dc77a3372d0238b0eef11b Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 18:20:31 +0800 Subject: [PATCH 07/14] fix: fe ci --- web/cypress/fixtures/selector.json | 4 ++- .../create-delete-in-drawer-plugin.spec.js | 8 ++--- ...create-edit-delete-plugin-template.spec.js | 6 ++-- ...create-edit-duplicate-delete-route.spec.js | 6 ++-- .../create-edit-delete-service.spec.js | 6 ++-- web/cypress/support/commands.js | 34 ++++++++++--------- 6 files changed, 34 insertions(+), 30 deletions(-) diff --git a/web/cypress/fixtures/selector.json b/web/cypress/fixtures/selector.json index 71d4b58c51..fca9da2f76 100644 --- a/web/cypress/fixtures/selector.json +++ b/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']" } diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js index 246ab493cb..c0fb9ab7ab 100644 --- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js +++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js @@ -35,11 +35,11 @@ context('Delete Plugin List with the Drawer', () => { cy.get('button').click({ force: true }); }); - cy.get("[data-cy='code-mirror-mode']").invoke('text').then(text => { + cy.get(this.domSelector.codeMirrorMode).invoke('text').then(text => { if (text === 'UIForm') { - cy.get("[data-cy='code-mirror-mode']").click(); - cy.get(".ant-select-dropdown").should('be.visible'); - cy.get(".ant-select-dropdown [label=JSON]").click(); + cy.get(this.domSelector.codeMirrorMode).click(); + cy.get(this.domSelector.selectDropdown).should('be.visible'); + cy.get( this.domSelector.selectDropdown + " [label=JSON]" ).click(); } }); diff --git a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js index 2dd1da7334..b136b9ab3a 100644 --- a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js +++ b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js @@ -40,9 +40,9 @@ context('Create Configure and Delete PluginTemplate', () => { }); cy.focused(this.domSelector.drawer).should('exist'); - cy.get("[data-cy='code-mirror-mode']").click(); - cy.get('.ant-select-dropdown').should('be.visible'); - cy.get(".ant-select-dropdown [label=JSON]").click(); + 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, }); diff --git a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js index ea5ca95ad3..907a3fe4c6 100644 --- a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js +++ b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js @@ -84,9 +84,9 @@ context('Create and Delete Route', () => { cy.get(this.domSelector.checkedSwitcher).should('exist'); }); - cy.get("[data-cy='code-mirror-mode']").click(); - cy.get('.ant-select-dropdown').should('be.visible'); - cy.get(".ant-select-dropdown [label=JSON]").click(); + 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'); diff --git a/web/cypress/integration/service/create-edit-delete-service.spec.js b/web/cypress/integration/service/create-edit-delete-service.spec.js index 96add4da3b..fb96c98c43 100644 --- a/web/cypress/integration/service/create-edit-delete-service.spec.js +++ b/web/cypress/integration/service/create-edit-delete-service.spec.js @@ -47,9 +47,9 @@ context('Create and Delete Service ', () => { cy.get(this.domSelector.checkedSwitcher).should('exist'); }); - cy.get("[data-cy='code-mirror-mode']").click(); - cy.get('.ant-select-dropdown').should('be.visible'); - cy.get(".ant-select-dropdown [label=JSON]").click(); + 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'); diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js index 14176b166e..12610fdb4c 100644 --- a/web/cypress/support/commands.js +++ b/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,7 +56,7 @@ Cypress.Commands.add('configurePlugins', (cases) => { } cy.contains(name) - .parents(domSelectors.parents) + .parents(domSelector.parents) .within(() => { cy.contains('Enable').click({ force: true, @@ -62,9 +64,9 @@ Cypress.Commands.add('configurePlugins', (cases) => { }); // 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,35 +75,35 @@ Cypress.Commands.add('configurePlugins', (cases) => { if (codemirror) { codemirror.setValue(JSON.stringify(data)); } - cy.get(domSelectors.drawer).should('exist'); + cy.get(domSelector.drawer).should('exist'); - cy.get("[data-cy='code-mirror-mode']").invoke('text').then(text => { + cy.get(domSelector.codeMirrorMode).invoke('text').then(text => { if (text === 'UIForm') { - cy.get("[data-cy='code-mirror-mode']").click(); - cy.get(".ant-select-dropdown").should('be.visible'); - cy.get(".ant-select-dropdown [label=JSON]").click(); + cy.get(domSelector.codeMirrorMode).click(); + cy.get(domSelector.selectDropdown).should('be.visible'); + cy.get(domSelector.selectDropdown + " [label=JSON]" ).click(); } }); - cy.get(domSelectors.drawer, { timeout }).within(() => { + 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({ From 0eacc8bfbcdce69a92d8fbbdce3824fc24b36399 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 21:03:22 +0800 Subject: [PATCH 08/14] feat: update --- web/cypress/support/commands.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js index 12610fdb4c..35d223a732 100644 --- a/web/cypress/support/commands.js +++ b/web/cypress/support/commands.js @@ -84,7 +84,7 @@ Cypress.Commands.add('configurePlugins', (cases) => { cy.get(domSelector.selectDropdown + " [label=JSON]" ).click(); } }); - + cy.get(domSelector.drawer, { timeout }).within(() => { cy.contains('Submit').click({ force: true, From 9295fbc6c5b329007b991cce51f3446a988cef53 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Thu, 8 Apr 2021 22:42:15 +0800 Subject: [PATCH 09/14] chore: format codes --- web/cypress/fixtures/selector.json | 2 +- .../create-delete-in-drawer-plugin.spec.js | 18 +++++++++++++----- .../create-edit-delete-plugin-template.spec.js | 2 +- .../create-edit-duplicate-delete-route.spec.js | 2 +- .../service/create-edit-delete-service.spec.js | 2 +- web/cypress/support/commands.js | 4 ++-- web/src/components/Plugin/PluginDetail.tsx | 18 +++++++++--------- 7 files changed, 28 insertions(+), 20 deletions(-) diff --git a/web/cypress/fixtures/selector.json b/web/cypress/fixtures/selector.json index fca9da2f76..306a52dcf0 100644 --- a/web/cypress/fixtures/selector.json +++ b/web/cypress/fixtures/selector.json @@ -84,5 +84,5 @@ "pageTwo": ".ant-pagination-item-2", "pageTwoActived": ".ant-pagination-item-2.ant-pagination-item-active", "selectDropdown": ".ant-select-dropdown", - "codeMirrorMode":"[data-cy='code-mirror-mode']" + "codeMirrorMode": "[data-cy='code-mirror-mode']" } diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js index c0fb9ab7ab..9d04685180 100644 --- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js +++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js @@ -32,14 +32,16 @@ context('Delete Plugin List with the Drawer', () => { cy.contains('Create').click(); cy.contains(this.data.basicAuthPlugin).parents(this.domSelector.pluginCardBordered).within(() => { - cy.get('button').click({ force: true }); + 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.selectDropdown + " [label=JSON]").click(); } }); @@ -49,15 +51,21 @@ context('Delete Plugin List with the Drawer', () => { }); cy.contains('button', 'Submit').click(); - cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); + cy.get(this.domSelector.drawer, { + timeout + }).should('not.exist'); }); it('should delete the plugin with the drawer', function () { cy.visit('/plugin/list'); cy.get(this.domSelector.refresh).click(); cy.contains('button', 'Configure').click(); - cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').click({ force: true }); - cy.contains('button', 'Confirm').click({ force: true }); + cy.get(this.domSelector.drawerFooter).contains('button', 'Delete').click({ + force: true + }); + cy.contains('button', 'Confirm').click({ + force: true + }); cy.get(this.domSelector.empty).should('be.visible'); }); }); diff --git a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js index b136b9ab3a..d2a77a1aef 100644 --- a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js +++ b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js @@ -42,7 +42,7 @@ context('Create Configure and Delete PluginTemplate', () => { 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.selectDropdown + " [label=JSON]").click(); cy.get(this.domSelector.disabledSwitcher).click({ force: true, }); diff --git a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js index 907a3fe4c6..834fa61dd5 100644 --- a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js +++ b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js @@ -86,7 +86,7 @@ context('Create and Delete Route', () => { 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.selectDropdown + " [label=JSON]").click(); cy.contains('button', 'Submit').click(); cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); diff --git a/web/cypress/integration/service/create-edit-delete-service.spec.js b/web/cypress/integration/service/create-edit-delete-service.spec.js index fb96c98c43..36d1c0e068 100644 --- a/web/cypress/integration/service/create-edit-delete-service.spec.js +++ b/web/cypress/integration/service/create-edit-delete-service.spec.js @@ -49,7 +49,7 @@ context('Create and Delete Service ', () => { 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.selectDropdown + " [label=JSON]").click(); cy.contains('button', 'Submit').click(); cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js index 35d223a732..b85faf9654 100644 --- a/web/cypress/support/commands.js +++ b/web/cypress/support/commands.js @@ -42,7 +42,7 @@ Cypress.Commands.add('configurePlugins', (cases) => { switch: '#disable', close: '.anticon-close', selectDropdown: '.ant-select-dropdown', - codeMirrorMode:'[data-cy="code-mirror-mode"]' + codeMirrorMode: '[data-cy="code-mirror-mode"]' }; cy.get(domSelector.name, { timeout }).then(function (cards) { @@ -81,7 +81,7 @@ Cypress.Commands.add('configurePlugins', (cases) => { 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.selectDropdown + " [label=JSON]").click(); } }); diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 4c7ac21929..12b83bd999 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -38,7 +38,7 @@ import addFormats from 'ajv-formats'; import { fetchSchema } from './service'; import { json2yaml, yaml2json } from '../../helpers'; -import { PluginForm, PLUGIN_UI_LIST } from './UI' +import { PluginForm, PLUGIN_UI_LIST } from './UI'; type Props = { name: string; @@ -111,7 +111,7 @@ const PluginDetail: React.FC = ({ ]; if (PLUGIN_UI_LIST.includes(name)) { - modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm }) + modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm }); } useEffect(() => { @@ -172,7 +172,7 @@ const PluginDetail: React.FC = ({ const handleModeChange = (value: PluginComponent.CodeMirrorMode) => { switch (value) { case codeMirrorModeList.JSON: { - if (codeMirrorMode === 'YAML') { + if (codeMirrorMode === codeMirrorModeList.YAML) { const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true); if (error) { notification.error({ @@ -195,7 +195,7 @@ const PluginDetail: React.FC = ({ break; } case codeMirrorModeList.YAML: { - const { data: jsonData, error } = json2yaml(codeMirrorMode === 'JSON' ? ref.current.editor.getValue() : JSON.stringify(UIForm.getFieldsValue())); + const { data: jsonData, error } = json2yaml(codeMirrorMode === codeMirrorModeList.JSON ? ref.current.editor.getValue() : JSON.stringify(UIForm.getFieldsValue())); if (error) { notification.error({ @@ -208,7 +208,7 @@ const PluginDetail: React.FC = ({ } case codeMirrorModeList.UIForm: { - if (codeMirrorMode === 'JSON') { + if (codeMirrorMode === codeMirrorModeList.JSON) { UIForm.setFieldsValue(JSON.parse(ref.current.editor.getValue())); } else { const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true); @@ -285,9 +285,9 @@ const PluginDetail: React.FC = ({ onClick={() => { try { let editorData; - if (codeMirrorMode === 'JSON') { + if (codeMirrorMode === codeMirrorModeList.JSON) { editorData = JSON.parse(ref.current?.editor.getValue()); - } else if (codeMirrorMode === 'YAML') { + } else if (codeMirrorMode === codeMirrorModeList.YAML) { editorData = yaml2json(ref.current?.editor.getValue(), false).data; } else { editorData = UIForm.getFieldsValue(); @@ -373,8 +373,8 @@ const PluginDetail: React.FC = ({ , ]} /> - {Boolean(codeMirrorMode === 'UIForm') && } -
} +
{ ref.current = codemirror; if (codemirror) { From ee2dfb712ae8ea7211683b9a1f283c890458cf05 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Fri, 9 Apr 2021 09:13:37 +0800 Subject: [PATCH 10/14] feat: show empty when no configuration is required --- web/src/components/Plugin/PluginDetail.tsx | 10 ++++------ web/src/components/Plugin/UI/plugin.tsx | 12 ++++++++++-- web/src/locales/en-US/component.ts | 4 +++- web/src/locales/zh-CN/component.ts | 4 +++- 4 files changed, 20 insertions(+), 10 deletions(-) diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 12b83bd999..e72fa4901b 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -337,11 +337,9 @@ const PluginDetail: React.FC = ({ - ) : ( - <>Current plugin: {name} - ) + pluginType === 'auth' && schemaType !== 'consumer' && (codeMirrorMode !== codeMirrorModeList.UIForm) ? ( + + ) : null } ghost={false} extra={[ @@ -373,7 +371,7 @@ const PluginDetail: React.FC = ({ , ]} /> - {Boolean(codeMirrorMode === codeMirrorModeList.UIForm) && } + {Boolean(codeMirrorMode === codeMirrorModeList.UIForm) && }
{ ref.current = codemirror; diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx index da29328681..f13b31ae16 100644 --- a/web/src/components/Plugin/UI/plugin.tsx +++ b/web/src/components/Plugin/UI/plugin.tsx @@ -16,17 +16,25 @@ */ import React from 'react'; import { FormInstance } from 'antd/es/form'; +import { Empty } from 'antd'; +import { useIntl } from 'umi'; import BasicAuth from './basic-auth' type Props = { name: string, - form: FormInstance + form: FormInstance, + renderForm: boolean } export const PLUGIN_UI_LIST = ['basic-auth',]; -export const PluginForm: React.FC = ({ name, form }) => { +export const PluginForm: React.FC = ({ name, renderForm, form }) => { + + const { formatMessage } = useIntl(); + + if (!renderForm) { return }; + switch (name) { case 'basic-auth': return diff --git a/web/src/locales/en-US/component.ts b/web/src/locales/en-US/component.ts index 55b6a8a4ea..53e949695a 100644 --- a/web/src/locales/en-US/component.ts +++ b/web/src/locales/en-US/component.ts @@ -72,5 +72,7 @@ export default { 'component.user.loginByPassword': 'Username & Password', 'component.user.login': 'Login', - 'component.document': 'Document' + 'component.document': 'Document', + + 'component.global.noConfigurationRequired': 'No configuration required', }; diff --git a/web/src/locales/zh-CN/component.ts b/web/src/locales/zh-CN/component.ts index f4171ec256..12b29e1977 100644 --- a/web/src/locales/zh-CN/component.ts +++ b/web/src/locales/zh-CN/component.ts @@ -68,5 +68,7 @@ export default { 'component.user.loginByPassword': '账号密码登录', 'component.user.login': '登录', - 'component.document': '操作手册' + 'component.document': '操作手册', + + 'component.global.noConfigurationRequired': '无需配置', }; From 23fb278ef6f31daa2df8109bec97ad6fa2bff1d2 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Fri, 9 Apr 2021 09:21:58 +0800 Subject: [PATCH 11/14] feat: update ci --- web/cypress/fixtures/selector.json | 3 ++- .../plugin/create-delete-in-drawer-plugin.spec.js | 2 +- .../create-edit-delete-plugin-template.spec.js | 2 +- .../route/create-edit-duplicate-delete-route.spec.js | 2 +- .../integration/service/create-edit-delete-service.spec.js | 2 +- web/cypress/support/commands.js | 5 +++-- 6 files changed, 9 insertions(+), 7 deletions(-) diff --git a/web/cypress/fixtures/selector.json b/web/cypress/fixtures/selector.json index 306a52dcf0..0236d8e1e2 100644 --- a/web/cypress/fixtures/selector.json +++ b/web/cypress/fixtures/selector.json @@ -84,5 +84,6 @@ "pageTwo": ".ant-pagination-item-2", "pageTwoActived": ".ant-pagination-item-2.ant-pagination-item-active", "selectDropdown": ".ant-select-dropdown", - "codeMirrorMode": "[data-cy='code-mirror-mode']" + "codeMirrorMode": "[data-cy='code-mirror-mode']", + "selectJSON":".ant-select-dropdown [label=JSON]" } diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js index 9d04685180..7415b38dda 100644 --- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js +++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js @@ -41,7 +41,7 @@ context('Delete Plugin List with the Drawer', () => { 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.selectJSON).click(); } }); diff --git a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js index d2a77a1aef..f41f54a24e 100644 --- a/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js +++ b/web/cypress/integration/pluginTemplate/create-edit-delete-plugin-template.spec.js @@ -42,7 +42,7 @@ context('Create Configure and Delete PluginTemplate', () => { 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.selectJSON).click(); cy.get(this.domSelector.disabledSwitcher).click({ force: true, }); diff --git a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js index 834fa61dd5..048d489ff6 100644 --- a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js +++ b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js @@ -86,7 +86,7 @@ context('Create and Delete Route', () => { 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.selectJSON).click(); cy.contains('button', 'Submit').click(); cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); diff --git a/web/cypress/integration/service/create-edit-delete-service.spec.js b/web/cypress/integration/service/create-edit-delete-service.spec.js index 36d1c0e068..8c7fa0ac17 100644 --- a/web/cypress/integration/service/create-edit-delete-service.spec.js +++ b/web/cypress/integration/service/create-edit-delete-service.spec.js @@ -49,7 +49,7 @@ context('Create and Delete Service ', () => { 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.selectJSON).click(); cy.contains('button', 'Submit').click(); cy.get(this.domSelector.drawer, { timeout }).should('not.exist'); diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js index b85faf9654..56a39c53d4 100644 --- a/web/cypress/support/commands.js +++ b/web/cypress/support/commands.js @@ -42,7 +42,8 @@ Cypress.Commands.add('configurePlugins', (cases) => { switch: '#disable', close: '.anticon-close', selectDropdown: '.ant-select-dropdown', - codeMirrorMode: '[data-cy="code-mirror-mode"]' + codeMirrorMode: '[data-cy="code-mirror-mode"]', + selectJSON: '.ant-select-dropdown [label=JSON]' }; cy.get(domSelector.name, { timeout }).then(function (cards) { @@ -81,7 +82,7 @@ Cypress.Commands.add('configurePlugins', (cases) => { 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.selectJSON).click(); } }); From 0755b95644671b2291dff3145fed271b64c59c0d Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Fri, 9 Apr 2021 11:22:04 +0800 Subject: [PATCH 12/14] feat: update --- .../create-delete-in-drawer-plugin.spec.js | 2 +- web/cypress/support/commands.js | 2 +- web/src/components/Plugin/PluginDetail.tsx | 18 +++++++++--------- web/src/components/Plugin/typing.d.ts | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js index 7415b38dda..272b06b5a9 100644 --- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js +++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js @@ -38,7 +38,7 @@ context('Delete Plugin List with the Drawer', () => { }); cy.get(this.domSelector.codeMirrorMode).invoke('text').then(text => { - if (text === 'UIForm') { + if (text === 'Form') { cy.get(this.domSelector.codeMirrorMode).click(); cy.get(this.domSelector.selectDropdown).should('be.visible'); cy.get(this.domSelector.selectJSON).click(); diff --git a/web/cypress/support/commands.js b/web/cypress/support/commands.js index 56a39c53d4..d4433390d3 100644 --- a/web/cypress/support/commands.js +++ b/web/cypress/support/commands.js @@ -79,7 +79,7 @@ Cypress.Commands.add('configurePlugins', (cases) => { cy.get(domSelector.drawer).should('exist'); cy.get(domSelector.codeMirrorMode).invoke('text').then(text => { - if (text === 'UIForm') { + if (text === 'Form') { cy.get(domSelector.codeMirrorMode).click(); cy.get(domSelector.selectDropdown).should('be.visible'); cy.get(domSelector.selectJSON).click(); diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index e72fa4901b..5f9e8e937a 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -95,7 +95,7 @@ const PluginDetail: React.FC = ({ enum codeMirrorModeList { JSON = 'JSON', YAML = 'YAML', - UIForm = 'UIForm' + Form = 'Form' } const [form] = Form.useForm(); const [UIForm] = Form.useForm(); @@ -111,7 +111,7 @@ const PluginDetail: React.FC = ({ ]; if (PLUGIN_UI_LIST.includes(name)) { - modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm }); + modeOptions.push({ label: codeMirrorModeList.Form, value: codeMirrorModeList.Form }); } useEffect(() => { @@ -120,7 +120,7 @@ const PluginDetail: React.FC = ({ scope: 'global', }); if (PLUGIN_UI_LIST.includes(name)) { - setCodeMirrorMode(codeMirrorModeList.UIForm); + setCodeMirrorMode(codeMirrorModeList.Form); UIForm.setFieldsValue(initialData[name]); }; }, []); @@ -207,7 +207,7 @@ const PluginDetail: React.FC = ({ break; } - case codeMirrorModeList.UIForm: { + case codeMirrorModeList.Form: { if (codeMirrorMode === codeMirrorModeList.JSON) { UIForm.setFieldsValue(JSON.parse(ref.current.editor.getValue())); } else { @@ -337,7 +337,7 @@ const PluginDetail: React.FC = ({ ) : null } @@ -366,13 +366,13 @@ const PluginDetail: React.FC = ({ }} data-cy='code-mirror-mode' >, - , + ]} /> - {Boolean(codeMirrorMode === codeMirrorModeList.UIForm) && } -
} +
{ ref.current = codemirror; if (codemirror) { diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts index 420d3a338c..c92b882f56 100644 --- a/web/src/components/Plugin/typing.d.ts +++ b/web/src/components/Plugin/typing.d.ts @@ -30,5 +30,5 @@ declare namespace PluginComponent { type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin'; - type CodeMirrorMode = 'JSON' | 'YAML'| 'UIForm'; + type CodeMirrorMode = 'JSON' | 'YAML'| 'Form'; } From b94ac3437f9453648a4db08b111fc4ac0e93a0e8 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Fri, 9 Apr 2021 11:31:58 +0800 Subject: [PATCH 13/14] feat: update --- web/src/components/Plugin/UI/basic-auth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/Plugin/UI/basic-auth.tsx b/web/src/components/Plugin/UI/basic-auth.tsx index 5fc11d0994..8d95aa0bdd 100644 --- a/web/src/components/Plugin/UI/basic-auth.tsx +++ b/web/src/components/Plugin/UI/basic-auth.tsx @@ -40,8 +40,8 @@ const BasicAuth: React.FC = ({ form }) => { > From f5028165b0b9db468922c6a0c175ab8513b31c25 Mon Sep 17 00:00:00 2001 From: litesun <7sunmiao@gmail.com> Date: Fri, 9 Apr 2021 11:38:13 +0800 Subject: [PATCH 14/14] fix: lint --- web/src/components/Plugin/PluginDetail.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 5f9e8e937a..8dbdfe8376 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -95,7 +95,7 @@ const PluginDetail: React.FC = ({ enum codeMirrorModeList { JSON = 'JSON', YAML = 'YAML', - Form = 'Form' + UIForm = 'Form' } const [form] = Form.useForm(); const [UIForm] = Form.useForm(); @@ -111,7 +111,7 @@ const PluginDetail: React.FC = ({ ]; if (PLUGIN_UI_LIST.includes(name)) { - modeOptions.push({ label: codeMirrorModeList.Form, value: codeMirrorModeList.Form }); + modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm }); } useEffect(() => { @@ -120,7 +120,7 @@ const PluginDetail: React.FC = ({ scope: 'global', }); if (PLUGIN_UI_LIST.includes(name)) { - setCodeMirrorMode(codeMirrorModeList.Form); + setCodeMirrorMode(codeMirrorModeList.UIForm); UIForm.setFieldsValue(initialData[name]); }; }, []); @@ -207,7 +207,7 @@ const PluginDetail: React.FC = ({ break; } - case codeMirrorModeList.Form: { + case codeMirrorModeList.UIForm: { if (codeMirrorMode === codeMirrorModeList.JSON) { UIForm.setFieldsValue(JSON.parse(ref.current.editor.getValue())); } else { @@ -337,7 +337,7 @@ const PluginDetail: React.FC = ({ ) : null } @@ -366,13 +366,13 @@ const PluginDetail: React.FC = ({ }} data-cy='code-mirror-mode' >, - ]} /> - {Boolean(codeMirrorMode === codeMirrorModeList.Form) && } -
} +
{ ref.current = codemirror; if (codemirror) {