feat: support yaml to config plugin in plugin config page

web/package.json

@@ -54,8 +54,8 @@
     "@mrblenny/react-flow-chart": "^0.0.14",
     "@rjsf/antd": "2.2.0",
     "@rjsf/core": "2.2.0",
-    "@uiw/react-codemirror": "^3.0.5",
     "@types/js-yaml": "^4.0.0",
+    "@uiw/react-codemirror": "^3.0.5",
     "ajv": "^7.0.3",
     "ajv-formats": "^1.5.1",
     "antd": "^4.4.0",
@@ -82,7 +82,8 @@
     "umi-request": "^1.0.8",
     "url-regex-safe": "^1.0.2",
     "use-merge-value": "^1.0.1",
-    "uuid": "7.0.3"
+    "uuid": "7.0.3",
+    "yaml": "^1.10.0"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",

web/src/components/Plugin/PluginDetail.tsx

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Button,
   notification,
@@ -37,6 +37,7 @@ import type { DefinedError } from 'ajv';
 import addFormats from 'ajv-formats';
 
 import { fetchSchema } from './service';
+import { json2yaml, yaml2json } from '../../helpers';
 
 type Props = {
   name: string;
@@ -92,6 +93,11 @@ const PluginDetail: React.FC<Props> = ({
   const ref = useRef<any>(null);
   const data = initialData[name] || {};
   const pluginType = pluginList.find((item) => item.name === name)?.type;
+  const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>('json');
+  const modeOptions = [
+    { label: 'Json', value: 'json' },
+    { label: 'Yaml', value: 'yaml' },
+  ];
 
   useEffect(() => {
     form.setFieldsValue({
@@ -144,7 +150,24 @@ const PluginDetail: React.FC<Props> = ({
       });
     });
   };
-
+  const handleModeChange = (value: PluginComponent.CodeMirrorMode) => {
+    switch (value){
+      case 'javascript':
+        ref.current.editor.setValue(
+          js_beautify(yaml2json(ref.current.editor.getValue(), true), {
+            indent_size: 2,
+          }),
+        );
+        break;
+      case 'yaml':
+        ref.current.editor.setValue(
+          json2yaml(ref.current.editor.getValue())
+        );
+        break;
+      default: break;
+    }
+    setCodeMirrorMode(value)
+  }
   const formatCodes = () => {
     try {
       if (ref.current) {
@@ -200,7 +223,9 @@ const PluginDetail: React.FC<Props> = ({
                 type="primary"
                 onClick={() => {
                   try {
-                    const editorData = JSON.parse(ref.current?.editor.getValue());
+                    const editorData = codeMirrorMode === 'javascript' ?
+                      JSON.parse(ref.current?.editor.getValue()) :
+                      yaml2json(ref.current?.editor.getValue(), false);
                     validateData(name, editorData).then((value) => {
                       onChange({ formData: form.getFieldsValue(), codemirrorData: value });
                     });
@@ -271,7 +296,10 @@ const PluginDetail: React.FC<Props> = ({
             >
               Document
             </Button>,
-            <Button type="primary" onClick={formatCodes} key={2}>
+            <Select defaultValue="javascript" options={modeOptions} onChange={(value: PluginComponent.CodeMirrorMode) => {
+              handleModeChange(value)
+            }}></Select>,
+            <Button type="primary" onClick={formatCodes} key={3}>
               Format
             </Button>,
           ]}
@@ -286,7 +314,7 @@ const PluginDetail: React.FC<Props> = ({
           }}
           value={JSON.stringify(data, null, 2)}
           options={{
-            mode: 'json-ld',
+            mode: codeMirrorMode,
             readOnly: readonly ? 'nocursor' : '',
             lineWrapping: true,
             lineNumbers: true,

web/src/components/Plugin/typing.d.ts

@@ -29,4 +29,6 @@ declare namespace PluginComponent {
   };
 
   type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin';
+
+  type CodeMirrorMode = 'json' | 'yaml';
 }

web/src/global.less

@@ -102,3 +102,7 @@ ol {
   vertical-align: -0.15em;
   fill: currentColor;
 }
+
+.ant-drawer-body > .ant-page-header {
+  padding: 16px 12px;
+}

web/src/helpers.tsx

@@ -19,6 +19,8 @@ import { notification } from 'antd';
 import type { MenuDataItem } from '@ant-design/pro-layout';
 import { history } from 'umi';
 import moment from 'moment';
+import YAML from 'yaml';
+import yaml from 'js-yaml';
 
 import { codeMessage } from './constants';
 import IconFont from './components/IconFont';
@@ -130,3 +132,20 @@ export const timestampToLocaleString = (timestamp: number) => {
 
   return moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss');
 };
+
+/**
+ * Transform json string to yaml string
+ * @param jsonStr
+ */
+export const json2yaml = (jsonStr: string): string => {
+  return yaml.dump(JSON.parse(jsonStr))
+}
+
+/**
+ * Transform yaml string to json
+ * @param yamlStr
+ * @param returnString true for json string , false for json object
+ */
+export const yaml2json = (yamlStr: string, returnString: boolean): string | Object => {
+  return returnString? JSON.stringify(YAML.parse(yamlStr)): YAML.parse(yamlStr);
+}