From ff100801c29929b7aff9333cc37b6ca8a7c5861f Mon Sep 17 00:00:00 2001 From: wmdmomo Date: Sat, 24 Jul 2021 13:32:40 +0800 Subject: [PATCH 1/4] feat(plugin): add basic --- web/src/components/Plugin/PluginDetail.tsx | 3 ++- web/src/components/Plugin/UI/plugin.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 41480125e5..882a910c7a 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -107,6 +107,7 @@ const PluginDetail: React.FC = ({ const [UIForm] = Form.useForm(); const data = initialData[name] || {}; const pluginType = pluginList.find((item) => item.name === name)?.originType; + const pluginSchema = pluginList.find((item) => item.name === name)?.schema; const [content, setContent] = useState(JSON.stringify(data, null, 2)); const [monacoMode, setMonacoMode] = useState(monacoModeList.JSON); const modeOptions: { label: string; value: string }[] = [ @@ -411,7 +412,7 @@ const PluginDetail: React.FC = ({ ]} /> - {Boolean(monacoMode === monacoModeList.UIForm) && } + {Boolean(monacoMode === monacoModeList.UIForm) && }
| undefined, form: FormInstance, renderForm: boolean } export const PLUGIN_UI_LIST = ['api-breaker', 'basic-auth', 'cors', 'limit-req', 'limit-conn', 'proxy-mirror', 'referer-restriction', 'limit-count']; -export const PluginForm: React.FC = ({ name, renderForm, form }) => { +export const PluginForm: React.FC = ({ name, schema, renderForm, form }) => { const { formatMessage } = useIntl(); From 631f7b34402fdd5b5676da75bb16d849d47e9d76 Mon Sep 17 00:00:00 2001 From: wmdmomo Date: Sun, 25 Jul 2021 16:07:51 +0800 Subject: [PATCH 2/4] feat(plugin): fix UI referer-restriction --- web/src/components/Plugin/UI/plugin.tsx | 2 +- .../components/Plugin/UI/referer-restriction.tsx | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx index 185d450599..8ef7f6365d 100644 --- a/web/src/components/Plugin/UI/plugin.tsx +++ b/web/src/components/Plugin/UI/plugin.tsx @@ -59,7 +59,7 @@ export const PluginForm: React.FC = ({ name, schema, renderForm, form }) case 'limit-conn': return case 'referer-restriction': - return + return default: return null; } diff --git a/web/src/components/Plugin/UI/referer-restriction.tsx b/web/src/components/Plugin/UI/referer-restriction.tsx index 0e527a1e9b..09b71e6105 100644 --- a/web/src/components/Plugin/UI/referer-restriction.tsx +++ b/web/src/components/Plugin/UI/referer-restriction.tsx @@ -22,6 +22,7 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; type Props = { form: FormInstance; + schema: Record | undefined; }; const FORM_ITEM_LAYOUT = { @@ -45,13 +46,16 @@ const removeBtnStyle = { alignItems: 'center', }; -const RefererRestriction: React.FC = ({ form }) => { +const RefererRestriction: React.FC = ({ form, schema }) => { const { formatMessage } = useIntl() + const properties = schema?.properties + const whiteMinLen = properties.whitelist.minItems + const whiteInit = Array(whiteMinLen).join('.').split('.') return (
{(fields, { add, remove }) => { @@ -76,7 +80,7 @@ const RefererRestriction: React.FC = ({ form }) => { message: formatMessage({ id: 'page.route.form.itemRulesPatternMessage.domain', }), - pattern: new RegExp(/^\*?[0-9a-zA-Z-._]+$/, 'g') + pattern: new RegExp(`${properties.whitelist.items.pattern}`, 'g') }, { required: true, message: `${formatMessage({ id: 'component.global.pleaseEnter' })} whitelist` @@ -86,7 +90,7 @@ const RefererRestriction: React.FC = ({ form }) => { - {fields.length > 1 ? ( + {fields.length > whiteMinLen ? ( { @@ -119,7 +123,7 @@ const RefererRestriction: React.FC = ({ form }) => { tooltip={formatMessage({ id: 'component.pluginForm.referer-restriction.bypass_missing.tooltip' })} valuePropName="checked" > - + ); From c11f0fb2c2c921cf3ff523e178fd021393188172 Mon Sep 17 00:00:00 2001 From: wmdmomo Date: Tue, 27 Jul 2021 23:07:35 +0800 Subject: [PATCH 3/4] feat(plugin): fix variable name --- web/src/components/Plugin/UI/referer-restriction.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/src/components/Plugin/UI/referer-restriction.tsx b/web/src/components/Plugin/UI/referer-restriction.tsx index 09b71e6105..52b4d93e34 100644 --- a/web/src/components/Plugin/UI/referer-restriction.tsx +++ b/web/src/components/Plugin/UI/referer-restriction.tsx @@ -49,8 +49,8 @@ const removeBtnStyle = { const RefererRestriction: React.FC = ({ form, schema }) => { const { formatMessage } = useIntl() const properties = schema?.properties - const whiteMinLen = properties.whitelist.minItems - const whiteInit = Array(whiteMinLen).join('.').split('.') + const allowListMinLength = properties.whitelist.minItems + const whiteInit = Array(allowListMinLength).join('.').split('.') return (
= ({ form, schema }) => { - {fields.length > whiteMinLen ? ( + {fields.length > allowListMinLength && { remove(field.name); }} /> - ) : null} + } ))} From 7ea28125e8dc48fe0e3e0c8122385dbed5179464 Mon Sep 17 00:00:00 2001 From: wmdmomo Date: Tue, 21 Sep 2021 15:26:48 +0800 Subject: [PATCH 4/4] feat(plugin): add test case for referer plugin --- ...oute-with-referer-restriction-form.spec.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/web/cypress/integration/route/create-route-with-referer-restriction-form.spec.js b/web/cypress/integration/route/create-route-with-referer-restriction-form.spec.js index 2e60ba8a58..f4fa677983 100644 --- a/web/cypress/integration/route/create-route-with-referer-restriction-form.spec.js +++ b/web/cypress/integration/route/create-route-with-referer-restriction-form.spec.js @@ -33,6 +33,9 @@ context('Create and delete route with referer-restriction form', () => { deleteAlert: '.ant-modal-body', whitlist: '#whitelist_0', alert: '.ant-form-item-explain-error [role=alert]', + newAdd: '.ant-btn-dashed', + whitlist_1: '#whitelist_1', + passSwitcher: '#bypass_missing', }; const data = { @@ -41,6 +44,9 @@ context('Create and delete route with referer-restriction form', () => { weight: 1, deleteRouteSuccess: 'Delete Route Successfully', submitSuccess: 'Submit Successfully', + wrongIp: 'qq@', + correctIp: 'apisix-dashboard_1.com', + activeClass: 'ant-switch-checked', }; beforeEach(() => { @@ -75,7 +81,8 @@ context('Create and delete route with referer-restriction form', () => { .should('be.visible') .within(() => { cy.get(selector.disabledSwitcher).click(); - cy.get(selector.checkedSwitcher).should('exist'); + cy.get(selector.disabledSwitcher).should('have.class', data.activeClass); + cy.get(selector.passSwitcher).should('not.have.class', data.activeClass); }); // config referer-restriction form without whitelist @@ -90,8 +97,18 @@ context('Create and delete route with referer-restriction form', () => { cy.get(selector.notificationCloseIcon).click(); // config referer-restriction form with whitelist - cy.get(selector.whitlist).type('127.0.0.1'); + cy.get(selector.whitlist).type(data.wrongIp); + cy.get(selector.whitlist).closest('div').next().children('span').should('not.exist'); + cy.get(selector.alert).should('exist'); + cy.get(selector.whitlist).clear().type(data.correctIp); cy.get(selector.alert).should('not.exist'); + + cy.get(selector.newAdd).click(); + cy.get(selector.whitlist).closest('div').next().children('span').should('exist'); + cy.get(selector.whitlist_1).closest('div').next().children('span').should('exist'); + cy.get(selector.whitlist_1).type(data.correctIp); + cy.get(selector.alert).should('not.exist'); + cy.get(selector.disabledSwitcher).click(); cy.get(selector.drawer).within(() => { cy.contains('Submit').click({