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;
@@ -88,10 +89,21 @@ const PluginDetail: React.FC<Props> = ({
   onChange = () => {},
 }) => {
   const { formatMessage } = useIntl();
+  enum codeMirrorModeList {
+    Json = 'Json',
+    Yaml = 'Yaml',
+  }
   const [form] = Form.useForm();
   const ref = useRef<any>(null);
   const data = initialData[name] || {};
   const pluginType = pluginList.find((item) => item.name === name)?.type;
+  const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
+    codeMirrorModeList.Json,
+  );
+  const modeOptions = [
+    { label: codeMirrorModeList.Json, value: codeMirrorModeList.Json },
+    { label: codeMirrorModeList.Yaml, value: codeMirrorModeList.Yaml },
+  ];
 
   useEffect(() => {
     form.setFieldsValue({
@@ -144,7 +156,41 @@ const PluginDetail: React.FC<Props> = ({
       });
     });
   };
+  const handleModeChange = (value: PluginComponent.CodeMirrorMode) => {
+    switch (value) {
+      case codeMirrorModeList.Json: {
+        const { data: yamlData , error } = yaml2json(ref.current.editor.getValue(), true);
+
+        if (error) {
+          notification.error({
+            message: 'Invalid Yaml data',
+          });
+          return;
+        }
+        ref.current.editor.setValue(
+          js_beautify(yamlData, {
+            indent_size: 2,
+          }),
+        );
+        break;
+      }
+      case codeMirrorModeList.Yaml: {
+        const { data: jsonData, error } = json2yaml(ref.current.editor.getValue());
 
+        if (error) {
+          notification.error({
+            message: 'Invalid Json data',
+          });
+          return;
+        }
+        ref.current.editor.setValue(jsonData);
+        break;
+      }
+      default:
+        break;
+    }
+    setCodeMirrorMode(value);
+  };
   const formatCodes = () => {
     try {
       if (ref.current) {
@@ -200,7 +246,10 @@ const PluginDetail: React.FC<Props> = ({
                 type="primary"
                 onClick={() => {
                   try {
-                    const editorData = JSON.parse(ref.current?.editor.getValue());
+                    const editorData =
+                      codeMirrorMode === codeMirrorModeList.Json
+                        ? JSON.parse(ref.current?.editor.getValue())
+                        : yaml2json(ref.current?.editor.getValue(), false).data;
                     validateData(name, editorData).then((value) => {
                       onChange({ formData: form.getFieldsValue(), codemirrorData: value });
                     });
@@ -258,20 +307,25 @@ const PluginDetail: React.FC<Props> = ({
               icon={<LinkOutlined />}
               onClick={() => {
                 if (name.startsWith('serverless')) {
-                  window.open(
-                    'https://apisix.apache.org/docs/apisix/plugins/serverless',
-                  );
+                  window.open('https://apisix.apache.org/docs/apisix/plugins/serverless');
                 } else {
-                  window.open(
-                    `https://apisix.apache.org/docs/apisix/plugins/${name}`,
-                  );
+                  window.open(`https://apisix.apache.org/docs/apisix/plugins/${name}`);
                 }
               }}
               key={1}
             >
               Document
             </Button>,
-            <Button type="primary" onClick={formatCodes} key={2}>
+            <Select
+              defaultValue={codeMirrorModeList.Json}
+              value={codeMirrorMode}
+              options={modeOptions}
+              onChange={(value: PluginComponent.CodeMirrorMode) => {
+                handleModeChange(value);
+              }}
+              data-cy='code-mirror-mode'
+            ></Select>,
+            <Button type="primary" onClick={formatCodes} key={3}>
               Format
             </Button>,
           ]}
@@ -286,7 +340,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';
@@ -131,6 +133,46 @@ 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): { data: string; error: boolean } => {
+  try {
+    return {
+      data: yaml.dump(JSON.parse(jsonStr)),
+      error: false,
+    };
+  } catch (err) {
+    return {
+      data: '',
+      error: true,
+    };
+  }
+};
+
+/**
+ * Transform yaml string to json
+ * @param yamlStr
+ * @param returnString true for json string , false for json object
+ */
+export const yaml2json = (
+  yamlStr: string,
+  returnString: boolean,
+): { data: any; error: boolean } => {
+  try {
+    return {
+      data: returnString ? JSON.stringify(YAML.parse(yamlStr)) : YAML.parse(yamlStr),
+      error: false,
+    };
+  } catch (err) {
+    return {
+      data: '',
+      error: true,
+    };
+  }
+};
+
 export const transformLableValueToKeyValue = (data: string[]) => {
   return (data || []).map((item) => {
     const index = item.indexOf(':');