chore: improve Upstream/CodeMirror (#1707)

apache · Apr 7, 2021 · 2c158a1 · 2c158a1
1 parent d5a46a8
commit 2c158a1
Show file tree

Hide file tree

Showing 21 changed files with 272 additions and 173 deletions.
diff --git a/web/cypress/fixtures/export-route-dataset.json b/web/cypress/fixtures/export-route-dataset.json
@@ -38,6 +38,7 @@
                 "weight": 1
               }
             ],
+            "retries": 1,
             "timeout": {
               "connect": 6,
               "read": 6,
@@ -89,6 +90,7 @@
                 "weight": 1
               }
             ],
+            "retries": 1,
             "timeout": {
               "connect": 6,
               "read": 6,
@@ -139,6 +141,7 @@
                 "weight": 1
               }
             ],
+            "retries": 1,
             "timeout": {
               "connect": 6,
               "read": 6,

diff --git a/web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js b/web/cypress/integration/rawDataEditor/test-rawDataEditor.spec.js
@@ -35,10 +35,9 @@ context('Test RawDataEditor', () => {
     menuList.forEach(function (item) {
       cy.visit('/');
       cy.contains(item).click();
-      cy.contains('Create with Editor').click();
+      cy.contains('Raw Data Editor').click();
       const data = dateset[item];
 
-      // create with editor
       cy.window().then(({ codemirror }) => {
         if (codemirror) {
           codemirror.setValue(JSON.stringify(data));

diff --git a/web/cypress/integration/upstream/create_and_delete_upstream.spec.js b/web/cypress/integration/upstream/create_and_delete_upstream.spec.js
@@ -74,9 +74,9 @@ context('Create and Delete Upstream', () => {
     cy.get(this.domSelector.description).type(this.data.description);
 
     // change upstream type to chash, todo: optimize the search method
-    cy.get('[title=roundrobin]').click();
+    cy.get('[title="Round Robin"]').click();
     cy.get(this.domSelector.upstreamType).within(() => {
-      cy.contains('chash').click();
+      cy.contains('CHash').click();
     });
     cy.get('#hash_on').click();
     cy.get(this.domSelector.upstreamType).within(() => {

diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
@@ -87,24 +87,24 @@ const PluginDetail: React.FC<Props> = ({
   readonly = false,
   maskClosable = true,
   initialData = {},
-  onClose = () => {},
-  onChange = () => {},
+  onClose = () => { },
+  onChange = () => { },
 }) => {
   const { formatMessage } = useIntl();
   enum codeMirrorModeList {
-    Json = 'Json',
-    Yaml = 'Yaml',
+    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,
+    codeMirrorModeList.JSON,
   );
   const modeOptions = [
-    { label: codeMirrorModeList.Json, value: codeMirrorModeList.Json },
-    { label: codeMirrorModeList.Yaml, value: codeMirrorModeList.Yaml },
+    { label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON },
+    { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML },
   ];
 
   useEffect(() => {
@@ -160,8 +160,8 @@ 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);
+      case codeMirrorModeList.JSON: {
+        const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
 
         if (error) {
           notification.error({
@@ -176,7 +176,7 @@ const PluginDetail: React.FC<Props> = ({
         );
         break;
       }
-      case codeMirrorModeList.Yaml: {
+      case codeMirrorModeList.YAML: {
         const { data: jsonData, error } = json2yaml(ref.current.editor.getValue());
 
         if (error) {
@@ -250,7 +250,7 @@ const PluginDetail: React.FC<Props> = ({
                 onClick={() => {
                   try {
                     const editorData =
-                      codeMirrorMode === codeMirrorModeList.Json
+                      codeMirrorMode === codeMirrorModeList.JSON
                         ? JSON.parse(ref.current?.editor.getValue())
                         : yaml2json(ref.current?.editor.getValue(), false).data;
                     validateData(name, editorData).then((value) => {
@@ -320,7 +320,7 @@ const PluginDetail: React.FC<Props> = ({
               {formatMessage({ id: 'component.global.document' })}
             </Button>,
             <Select
-              defaultValue={codeMirrorModeList.Json}
+              defaultValue={codeMirrorModeList.JSON}
               value={codeMirrorMode}
               options={modeOptions}
               onChange={(value: PluginComponent.CodeMirrorMode) => {
@@ -338,6 +338,7 @@ const PluginDetail: React.FC<Props> = ({
             ref.current = codemirror;
             if (codemirror) {
               // NOTE: for debug & test
+              // @ts-ignore
               window.codemirror = codemirror.editor;
             }
           }}

diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts
@@ -30,5 +30,5 @@ declare namespace PluginComponent {
 
   type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin';
 
-  type CodeMirrorMode = 'Json' | 'Yaml';
+  type CodeMirrorMode = 'JSON' | 'YAML';
 }
diff --git a/web/src/components/RawDataEditor/RawDataEditor.tsx b/web/src/components/RawDataEditor/RawDataEditor.tsx
@@ -34,29 +34,29 @@ type Props = {
 };
 
 enum codeMirrorModeList {
-  Json = 'Json',
-  Yaml = 'Yaml',
+  JSON = 'JSON',
+  YAML = 'YAML',
 }
 
 const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data = {}, onClose = () => { }, onSubmit = () => { } }) => {
   const ref = useRef<any>(null);
   const { formatMessage } = useIntl();
   const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
-    codeMirrorModeList.Json,
+    codeMirrorModeList.JSON,
   );
 
   useEffect(() => {
-    setCodeMirrorMode(codeMirrorModeList.Json);
+    setCodeMirrorMode(codeMirrorModeList.JSON);
   }, [visible])
 
   const modeOptions = [
-    { label: codeMirrorModeList.Json, value: codeMirrorModeList.Json },
-    { label: codeMirrorModeList.Yaml, value: codeMirrorModeList.Yaml },
+    { label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON },
+    { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML },
   ];
 
   const handleModeChange = (value: PluginComponent.CodeMirrorMode) => {
     switch (value) {
-      case codeMirrorModeList.Json: {
+      case codeMirrorModeList.JSON: {
         const { data: yamlData, error } = yaml2json(ref.current.editor.getValue(), true);
 
         if (error) {
@@ -72,12 +72,12 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
         );
         break;
       }
-      case codeMirrorModeList.Yaml: {
+      case codeMirrorModeList.YAML: {
         const { data: jsonData, error } = json2yaml(ref.current.editor.getValue());
 
         if (error) {
           notification.error({
-            message: 'Invalid Json data',
+            message: 'Invalid JSON data',
           });
           return;
         }
@@ -109,7 +109,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
   return (
     <>
       <Drawer
-        title={formatMessage({ id: 'component.rawDataEditor.title' })}
+        title={formatMessage({ id: 'component.global.data.editor' })}
         placement="right"
         width={700}
         visible={visible}
@@ -126,7 +126,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
                 onClick={() => {
                   try {
                     const editorData =
-                      codeMirrorMode === codeMirrorModeList.Json
+                      codeMirrorMode === codeMirrorModeList.JSON
                         ? JSON.parse(ref.current?.editor.getValue())
                         : yaml2json(ref.current?.editor.getValue(), false).data;
                     onSubmit(editorData);
@@ -159,7 +159,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               Document
             </Button>,
             <Select
-              defaultValue={codeMirrorModeList.Json}
+              defaultValue={codeMirrorModeList.JSON}
               value={codeMirrorMode}
               options={modeOptions}
               onChange={(value: PluginComponent.CodeMirrorMode) => {
@@ -192,6 +192,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
             ref.current = codemirror;
             if (codemirror) {
               // NOTE: for debug & test
+              // @ts-ignore
               window.codemirror = codemirror.editor;
             }
           }}

diff --git a/web/src/components/RawDataEditor/locales/en-US.ts b/web/src/components/RawDataEditor/locales/en-US.ts
@@ -16,5 +16,4 @@
  */
 export default {
   'component.rawDataEditor.tip': "Don't support edit mode currently",
-  'component.rawDataEditor.title': 'Raw Data Editor',
 };
diff --git a/web/src/components/RawDataEditor/locales/zh-CN.ts b/web/src/components/RawDataEditor/locales/zh-CN.ts
@@ -16,5 +16,4 @@
  */
 export default {
   'component.rawDataEditor.tip': '目前暂不支持编辑',
-  'component.rawDataEditor.title': '元数据编辑器',
 };