fix(Plugin): use codemirror instead of form in plugin module

web/config/config.ts

@@ -61,5 +61,5 @@ export default defineConfig({
   manifest: {
     basePath: '/',
   },
-  outputPath: '../output/html'
+  outputPath: '../output/html',
 });

web/package.json

@@ -60,6 +60,7 @@
     "@api7-dashboard/ui": "^1.0.3",
     "@rjsf/antd": "2.2.0",
     "@rjsf/core": "2.2.0",
+    "@uiw/react-codemirror": "^3.0.1",
     "antd": "^4.4.0",
     "classnames": "^2.2.6",
     "dayjs": "1.8.28",

web/src/components/Plugin/CodeMirrorDrawer.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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, { useRef } from 'react';
+import { Drawer, Button, notification } from 'antd';
+import CodeMirror from '@uiw/react-codemirror';
+
+type Props = {
+  visible?: boolean;
+  data?: object;
+  readonly?: boolean;
+  onClose?: () => void;
+  onSubmit?: (data: object) => void;
+};
+
+const CodeMirrorDrawer: React.FC<Props> = ({
+  visible = false,
+  readonly = false,
+  data = {},
+  onClose,
+  onSubmit,
+}) => {
+  const ref = useRef<any>(null);
+  return (
+    <Drawer
+      visible={visible}
+      width={500}
+      onClose={onClose}
+      footer={
+        !readonly && (
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Button onClick={onClose}>Cancel</Button>
+            <Button
+              type="primary"
+              style={{ marginRight: 8, marginLeft: 8 }}
+              onClick={() => {
+                try {
+                  if (onSubmit) {
+                    onSubmit(JSON.parse(ref.current?.editor.getValue()));
+                  }
+                } catch (error) {
+                  notification.error({
+                    message: 'Invalid JSON data',
+                  });
+                }
+              }}
+            >
+              Submit
+            </Button>
+          </div>
+        )
+      }
+    >
+      <CodeMirror
+        ref={ref}
+        value={JSON.stringify(data, null, 2)}
+        options={{
+          mode: 'json-ld',
+          readOnly: readonly ? 'nocursor' : '',
+          lineWrapping: true,
+          lineNumbers: true,
+          showCursorWhenSelecting: true,
+          autofocus: true,
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default CodeMirrorDrawer;

web/src/components/Plugin/IconFont.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 { createFromIconfontCN } from '@ant-design/icons';
+
+// NOTE: Icons from AliCDN https://www.iconfont.cn/manage/index
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2088089_a3klmsocd15.js',
+});
+
+export default IconFont;

web/src/components/Plugin/PluginPage.tsx

@@ -0,0 +1,189 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { Anchor, Layout, Switch, Card, Tooltip, Button, notification, Avatar } from 'antd';
+import { SettingFilled } from '@ant-design/icons';
+import { PanelSection } from '@api7-dashboard/ui';
+import { validate } from 'json-schema';
+
+import { fetchSchema, getList } from './service';
+import { PLUGIN_MAPPER_SOURCE } from './data';
+import CodeMirrorDrawer from './CodeMirrorDrawer';
+
+type Props = {
+  readonly?: boolean;
+  initialData?: PluginComponent.Data;
+  schemaType?: PluginComponent.Schema;
+  onChange?: (data: PluginComponent.Data) => void;
+};
+
+const PanelSectionStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 33.333333%)',
+  gridRowGap: 15,
+  gridColumnGap: 10,
+  width: 'calc(100% - 20px)',
+};
+
+const { Sider, Content } = Layout;
+
+// NOTE: use this flag as plugin's name to hide drawer
+const NEVER_EXIST_PLUGIN_FLAG = 'NEVER_EXIST_PLUGIN_FLAG';
+
+const PluginPage: React.FC<Props> = ({
+  readonly = false,
+  initialData = {},
+  schemaType = '',
+  onChange = () => {},
+}) => {
+  const [pluginList, setPlugin] = useState<PluginComponent.Meta[][]>([]);
+  const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);
+
+  useEffect(() => {
+    getList().then(setPlugin);
+  }, []);
+
+  return (
+    <>
+      <style>{`
+        .ant-avatar > img {
+          object-fit: contain;
+        }
+        .ant-avatar {
+          background-color: transparent;
+        }
+        .ant-avatar.ant-avatar-icon {
+          font-size: 32px;
+        }
+      `}</style>
+      <Layout>
+        <Sider theme="light">
+          <Anchor offsetTop={150}>
+            {pluginList.map((plugins) => {
+              const { category } = plugins[0];
+              return (
+                <Anchor.Link
+                  href={`#plugin-category-${category}`}
+                  title={category}
+                  key={category}
+                />
+              );
+            })}
+          </Anchor>
+        </Sider>
+        <Content style={{ padding: '0 10px', backgroundColor: '#fff', minHeight: 1400 }}>
+          {pluginList.map((plugins) => {
+            const { category } = plugins[0];
+            return (
+              <PanelSection
+                title={category}
+                key={category}
+                style={PanelSectionStyle}
+                id={`plugin-category-${category}`}
+              >
+                {plugins.map((item) => (
+                  <Card
+                    key={item.name}
+                    title={[
+                      item.avatar && (
+                        <Avatar
+                          icon={item.avatar}
+                          className="plugin-avatar"
+                          style={{
+                            marginRight: 5,
+                          }}
+                        />
+                      ),
+                      <a
+                        href={`https://github.com/apache/apisix/blob/master/doc/plugins/${item.name}.md`}
+                        style={{ color: 'inherit' }}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {item.name}
+                      </a>,
+                    ]}
+                    style={{ height: 66 }}
+                    extra={[
+                      <Tooltip title="Setting" key={`plugin-card-${item.name}-extra-tooltip-2`}>
+                        <Button
+                          disabled={PLUGIN_MAPPER_SOURCE[item.name]?.noConfiguration}
+                          shape="circle"
+                          icon={<SettingFilled />}
+                          style={{ marginRight: 10, marginLeft: 10 }}
+                          size="middle"
+                          onClick={() => {
+                            setName(item.name);
+                          }}
+                        />
+                      </Tooltip>,
+                      <Switch
+                        defaultChecked={initialData[item.name] && !initialData[item.name].disable}
+                        disabled={readonly}
+                        onChange={(isChecked) => {
+                          if (isChecked) {
+                            setName(item.name);
+                            onChange({
+                              ...initialData,
+                              [item.name]: { ...initialData[item.name], disable: false },
+                            });
+                          } else {
+                            onChange({
+                              ...initialData,
+                              [item.name]: { ...initialData[item.name], disable: true },
+                            });
+                          }
+                        }}
+                        key={Math.random().toString(36).substring(7)}
+                      />,
+                    ]}
+                  />
+                ))}
+              </PanelSection>
+            );
+          })}
+        </Content>
+      </Layout>
+      <CodeMirrorDrawer
+        visible={name !== NEVER_EXIST_PLUGIN_FLAG}
+        data={initialData[name]}
+        readonly={readonly}
+        onClose={() => {
+          setName(NEVER_EXIST_PLUGIN_FLAG);
+        }}
+        onSubmit={(value) => {
+          fetchSchema(name, schemaType).then((schema) => {
+            const { valid, errors } = validate(value, schema);
+            if (valid) {
+              onChange({ ...initialData, [name]: { ...value, disable: false } });
+              setName(NEVER_EXIST_PLUGIN_FLAG);
+              return;
+            }
+            errors?.forEach((item) => {
+              notification.error({
+                message: 'Invalid plugin data',
+                description: item.message,
+              });
+            });
+          });
+        }}
+      />
+    </>
+  );
+};
+
+export default PluginPage;