feat(plugin): allowing referer-restriction to dynamically adapt to the BE rules

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({

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

@@ -74,7 +74,7 @@ export const PluginForm: React.FC<Props> = ({ name, schema, renderForm, form })
     case 'limit-conn':
       return <LimitConn form={form} />;
     case 'referer-restriction':
-      return <RefererRestriction form={form} />;
+      return <RefererRestriction form={form} schema={schema} />
     default:
       return null;
   }

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<string, any> | undefined;
 };
 
 const FORM_ITEM_LAYOUT = {
@@ -46,10 +47,17 @@ const removeBtnStyle = {
   alignItems: 'center',
 };
 
-const RefererRestriction: React.FC<Props> = ({ form }) => {
-  const { formatMessage } = useIntl();
+const RefererRestriction: React.FC<Props> = ({ form, schema }) => {
+  const { formatMessage } = useIntl()
+  const properties = schema?.properties
+  const allowListMinLength = properties.whitelist.minItems
+  const whiteInit = Array(allowListMinLength).join('.').split('.')
   return (
-    <Form form={form} {...FORM_ITEM_LAYOUT} initialValues={{ whitelist: [''] }}>
+    <Form
+      form={form}
+      {...FORM_ITEM_LAYOUT}
+      initialValues={{ whitelist: whiteInit }}
+    >
       <Form.List name="whitelist">
         {(fields, { add, remove }) => {
           return (
@@ -73,33 +81,28 @@ const RefererRestriction: React.FC<Props> = ({ form }) => {
                         validateTrigger={['onChange', 'onBlur', 'onClick']}
                         noStyle
                         required
-                        rules={[
-                          {
-                            message: formatMessage({
-                              id: 'page.route.form.itemRulesPatternMessage.domain',
-                            }),
-                            pattern: new RegExp(/^\*?[0-9a-zA-Z-._]+$/, 'g'),
-                          },
-                          {
-                            required: true,
-                            message: `${formatMessage({
-                              id: 'component.global.pleaseEnter',
-                            })} whitelist`,
-                          },
-                        ]}
+                        rules={[{
+                          message: formatMessage({
+                            id: 'page.route.form.itemRulesPatternMessage.domain',
+                          }),
+                          pattern: new RegExp(`${properties.whitelist.items.pattern}`, 'g')
+                        }, {
+                          required: true,
+                          message: `${formatMessage({ id: 'component.global.pleaseEnter' })} whitelist`
+                        }]}
                       >
                         <Input />
                       </Form.Item>
                     </Col>
                     <Col style={{ ...removeBtnStyle, marginLeft: -10 }}>
-                      {fields.length > 1 ? (
+                      {fields.length > allowListMinLength &&
                         <MinusCircleOutlined
                           className="dynamic-delete-button"
                           onClick={() => {
                             remove(field.name);
                           }}
                         />
-                      ) : null}
+                      }
                     </Col>
                   </Row>
                 ))}
@@ -129,7 +132,7 @@ const RefererRestriction: React.FC<Props> = ({ form }) => {
         })}
         valuePropName="checked"
       >
-        <Switch />
+        <Switch defaultChecked={properties.bypass_missing.default} />
       </Form.Item>
     </Form>
   );