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

.actions/ASF-Release.cfg

@@ -78,6 +78,7 @@ web/src/e2e/__mocks__/antd-pro-merge-less.js
 web/src/e2e/baseLayout.e2e.js
 web/src/pages/404.tsx
 web/src/service-worker.js
+web/src/libs/iconfont.js
 api/build-tools/json.lua
 
 # Skip files containing Apache 2.0 License

web/config/config.ts

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

web/package.json

@@ -55,14 +55,15 @@
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-layout": "^6.0.0",
     "@ant-design/pro-table": "2.6.3",
-    "@api7-dashboard/plugin": "^1.0.15",
     "@api7-dashboard/pluginchart": "^1.0.14",
     "@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",
+    "js-beautify": "^1.13.0",
     "json-schema": "0.2.5",
     "lodash": "^4.17.11",
     "moment": "^2.25.3",
@@ -87,6 +88,7 @@
     "@types/express": "^4.17.0",
     "@types/history": "^4.7.2",
     "@types/jest": "^26.0.0",
+    "@types/js-beautify": "^1.13.1",
     "@types/lodash": "^4.14.144",
     "@types/node-forge": "0.9.3",
     "@types/qs": "^6.5.3",

web/src/app.tsx

@@ -26,6 +26,8 @@ import RightContent from '@/components/RightContent';
 import Footer from '@/components/Footer';
 import { queryCurrent } from '@/services/user';
 import { getMenuData, errorHandler } from '@/helpers';
+
+import './libs/iconfont';
 import defaultSettings from '../config/defaultSettings';
 
 export async function getInitialState(): Promise<{

web/src/iconfont.ts → web/src/components/IconFont/IconFont.tsx

@@ -14,11 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createFromIconfontCN } from '@ant-design/icons';
+import React from 'react';
 
-// NOTE: 增加新图标时，请访问 https://www.iconfont.cn/manage/index 进行图标管理
-const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_1918158_alfpv3n06l6.js',
-});
+type Props = {
+  name: string;
+};
+
+/**
+ * Icon Font
+ * https://www.iconfont.cn/help/detail?helptype=code
+ */
+const IconFont: React.FC<Props> = ({ name }) => (
+  <svg className="icon" aria-hidden="true">
+    <use xlinkHref={`#${name}`} />
+  </svg>
+);
 
 export default IconFont;

web/src/components/IconFont/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+export { default } from './IconFont';

web/src/components/Plugin/CodeMirrorDrawer.tsx

@@ -0,0 +1,142 @@
+/*
+ * 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, PageHeader } from 'antd';
+import CodeMirror from '@uiw/react-codemirror';
+import { js_beautify } from 'js-beautify';
+import { LinkOutlined } from '@ant-design/icons';
+
+type Props = {
+  name: string;
+  visible?: boolean;
+  data?: object;
+  readonly?: boolean;
+  onClose?: () => void;
+  onSubmit?: (data: object) => void;
+};
+
+const CodeMirrorDrawer: React.FC<Props> = ({
+  name,
+  visible = false,
+  readonly = false,
+  data = {},
+  onClose,
+  onSubmit,
+}) => {
+  const ref = useRef<any>(null);
+
+  const formatCodes = () => {
+    try {
+      if (ref.current) {
+        ref.current.editor.setValue(
+          js_beautify(ref.current.editor.getValue(), {
+            indent_size: 2,
+          }),
+        );
+      }
+    } catch (error) {
+      notification.error({
+        message: 'Format failed',
+      });
+    }
+  };
+
+  return (
+    <>
+      <style>
+        {`
+        .ant-drawer-body {
+          padding: 0;
+        }
+        .ant-page-header.ant-page-header-compact {
+          height: 100%;
+        }
+        .ant-page-header-content {
+          height: 95%;
+        }
+      `}
+      </style>
+      <Drawer
+        title="Plugin Data Editor"
+        visible={visible}
+        width={500}
+        maskClosable={false}
+        destroyOnClose
+        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>
+          )
+        }
+      >
+        <PageHeader
+          title=""
+          subTitle={`Current Plugin: ${name}`}
+          ghost={false}
+          extra={[
+            <Button
+              type="default"
+              icon={<LinkOutlined />}
+              onClick={() => {
+                window.open(`https://github.com/apache/apisix/blob/master/doc/plugins/${name}.md`);
+              }}
+            >
+              Document
+            </Button>,
+            <Button type="primary" onClick={formatCodes}>
+              Format
+            </Button>,
+          ]}
+        >
+          <CodeMirror
+            ref={ref}
+            value={JSON.stringify(data, null, 2)}
+            options={{
+              mode: 'json-ld',
+              readOnly: readonly ? 'nocursor' : '',
+              lineWrapping: true,
+              lineNumbers: true,
+              showCursorWhenSelecting: true,
+              autofocus: true,
+            }}
+          />
+        </PageHeader>
+      </Drawer>
+    </>
+  );
+};
+
+export default CodeMirrorDrawer;