From ff100801c29929b7aff9333cc37b6ca8a7c5861f Mon Sep 17 00:00:00 2001
From: wmdmomo <wangpersist@163.com>
Date: Sat, 24 Jul 2021 13:32:40 +0800
Subject: [PATCH 1/2] 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<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}
diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx
index 0d1a2b67b2..185d450599 100644
--- a/web/src/components/Plugin/UI/plugin.tsx
+++ b/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();
 

From 102c929a170cdf279767b46b62cbd97cc98ffa16 Mon Sep 17 00:00:00 2001
From: wmdmomo <wangpersist@163.com>
Date: Sat, 24 Jul 2021 13:50:20 +0800
Subject: [PATCH 2/2] feat(plugin): fix UI limit-req

---
 web/src/components/Plugin/UI/limit-req.tsx | 14 ++++++++------
 web/src/components/Plugin/UI/plugin.tsx    |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/components/Plugin/UI/limit-req.tsx b/web/src/components/Plugin/UI/limit-req.tsx
index 58b3cb2a0f..7f106a4554 100644
--- a/web/src/components/Plugin/UI/limit-req.tsx
+++ b/web/src/components/Plugin/UI/limit-req.tsx
@@ -21,6 +21,7 @@ import { useIntl } from 'umi';
 
 type Props = {
   form: FormInstance;
+  schema: Record<string, any> | undefined;
   ref?: any;
 };
 
@@ -33,8 +34,9 @@ export const FORM_ITEM_LAYOUT = {
   },
 };
 
-const LimitReq: React.FC<Props> = ({ form }) => {
+const LimitReq: React.FC<Props> = ({ form, schema }) => {
   const { formatMessage } = useIntl();
+  const propertires = schema?.properties;
   return (
     <Form
       form={form}
@@ -50,7 +52,7 @@ const LimitReq: React.FC<Props> = ({ form }) => {
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rate.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
-        <InputNumber min={1} required />
+        <InputNumber min={propertires.rate.exclusiveMinimum} required />
       </Form.Item>
       <Form.Item
         label="burst"
@@ -62,7 +64,7 @@ const LimitReq: React.FC<Props> = ({ form }) => {
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.burst.tooltip' })}
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
-        <InputNumber min={0} required />
+        <InputNumber min={propertires.burst.minimum} required />
       </Form.Item>
       <Form.Item
         label="key"
@@ -75,7 +77,7 @@ const LimitReq: React.FC<Props> = ({ form }) => {
         validateTrigger={['onChange', 'onBlur', 'onClick']}
       >
         <Select>
-          {["remote_addr", "server_addr", "http_x_real_ip", "http_x_forwarded_for", "consumer_name"].map(item => {
+          {propertires.key.enum.map((item: string) => {
             return <Select.Option value={item} key={item}>{item}</Select.Option>
           })}
         </Select>
@@ -83,10 +85,10 @@ const LimitReq: React.FC<Props> = ({ form }) => {
       <Form.Item
         label="rejected_code"
         name="rejected_code"
-        initialValue={503}
+        initialValue={propertires.rejected_code.default}
         tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rejected_code.tooltip' })}
       >
-        <InputNumber min={200} max={599} />
+        <InputNumber min={propertires.rejected_code.minimum} max={propertires.rejected_code.maximum} />
       </Form.Item>
     </Form>
   );
diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx
index 185d450599..d937e2e025 100644
--- a/web/src/components/Plugin/UI/plugin.tsx
+++ b/web/src/components/Plugin/UI/plugin.tsx
@@ -53,7 +53,7 @@ export const PluginForm: React.FC<Props> = ({ name, schema, renderForm, form })
     case 'cors':
       return <Cors form={form} />
     case 'limit-req':
-      return <LimitReq form={form} />
+      return <LimitReq form={form} schema={schema} />
     case 'proxy-mirror':
       return <ProxyMirror form={form} />
     case 'limit-conn':