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

web/src/components/Plugin/PluginDetail.tsx

@@ -107,6 +107,7 @@ const PluginDetail: React.FC<Props> = ({
   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<string>(JSON.stringify(data, null, 2));
   const [monacoMode, setMonacoMode] = useState<PluginComponent.MonacoLanguage>(monacoModeList.JSON);
   const modeOptions: { label: string; value: string }[] = [
@@ -411,7 +412,7 @@ const PluginDetail: React.FC<Props> = ({
           </Button>
         ]}
       />
-      {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} form={UIForm} renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')} />}
+      {Boolean(monacoMode === monacoModeList.UIForm) && <PluginForm name={name} schema={pluginSchema} form={UIForm} renderForm={!(pluginType === 'auth' && schemaType !== 'consumer')} />}
       <div style={{ display: monacoMode === monacoModeList.UIForm ? 'none' : 'unset' }}>
         <Editor
           value={content}

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

@@ -30,13 +30,14 @@ import Cors from './cors';
 
 type Props = {
   name: string,
+  schema: Record<string, any> | 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<Props> = ({ name, renderForm, form }) => {
+export const PluginForm: React.FC<Props> = ({ name, schema, renderForm, form }) => {
 
   const { formatMessage } = useIntl();
 
@@ -58,7 +59,7 @@ export const PluginForm: React.FC<Props> = ({ name, 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 = {
@@ -45,13 +46,16 @@ const removeBtnStyle = {
   alignItems: 'center',
 };
 
-const RefererRestriction: React.FC<Props> = ({ form }) => {
+const RefererRestriction: React.FC<Props> = ({ form, schema }) => {
   const { formatMessage } = useIntl()
+  const properties = schema?.properties
+  const whiteMinLen = properties.whitelist.minItems
+  const whiteInit = Array(whiteMinLen).join('.').split('.')
   return (
     <Form
       form={form}
       {...FORM_ITEM_LAYOUT}
-      initialValues={{ whitelist: [''] }}
+      initialValues={{ whitelist: whiteInit }}
     >
       <Form.List name="whitelist">
         {(fields, { add, remove }) => {
@@ -76,7 +80,7 @@ const RefererRestriction: React.FC<Props> = ({ 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<Props> = ({ form }) => {
                       </Form.Item>
                     </Col>
                     <Col style={{ ...removeBtnStyle, marginLeft: -10 }}>
-                      {fields.length > 1 ? (
+                      {fields.length > whiteMinLen ? (
                         <MinusCircleOutlined
                           className="dynamic-delete-button"
                           onClick={() => {
@@ -119,7 +123,7 @@ const RefererRestriction: React.FC<Props> = ({ form }) => {
         tooltip={formatMessage({ id: 'component.pluginForm.referer-restriction.bypass_missing.tooltip' })}
         valuePropName="checked"
       >
-        <Switch />
+        <Switch defaultChecked={properties.bypass_missing.default} />
       </Form.Item>
     </Form >
   );