fix: ui loading wrong mocks

sayjava · Oct 25, 2021 · a7c0ae6 · a7c0ae6
1 parent d4bd313
commit a7c0ae6
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 134 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -1,8 +1,7 @@
-const { description } = require('../../package')
-const { version } = require('../../package')
+const { description } = require('../../package');
+const { version } = require('../../package');
 
 module.exports = {
-
     base: '/deputy/',
 
     /**
@@ -22,7 +21,7 @@ module.exports = {
     head: [
         ['meta', { name: 'theme-color', content: '#3eaf7c' }],
         ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
-        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
+        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
     ],
 
     /**
@@ -45,33 +44,24 @@ module.exports = {
             },
             {
                 text: 'Guide',
-                link: '/guide'
+                link: '/guide',
             },
             {
                 text: 'Assertions',
-                link: '/assertions'
+                link: '/assertions',
             },
             {
                 text: 'API',
-                link: '/api'
-            }
+                link: '/api',
+            },
         ],
-        sidebar: [
-            '/',
-            '/start',
-            '/guide',
-            '/assertions',
-            '/api',
-        ]
+        sidebar: ['/', '/start', '/guide', '/assertions', '/api'],
     },
 
     /**
      * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
      */
-    plugins: [
-        '@vuepress/plugin-back-to-top',
-        '@vuepress/plugin-medium-zoom',
-    ],
+    plugins: ['@vuepress/plugin-back-to-top', '@vuepress/plugin-medium-zoom'],
 
-    evergreen: true
-}
+    evergreen: true,
+};
diff --git a/mocks/hello_world.yml b/mocks/hello_world.yml
@@ -1,4 +1,4 @@
 - request:
-    path: /who-am-i
+      path: /who-am-i
   response:
-    body: I am deputy, an HTTP Mocking Server
+      body: I am deputy, an HTTP Mocking Server
diff --git a/mocks/mocks.yml b/mocks/mocks.yml
@@ -1,18 +1,18 @@
 - name: Successful todo
   id: first_behavior
   request:
-    path: "/todo/[0-9]+"
-    method: (GET|POST|DELETE|PUT)
+      path: '/todo/[0-9]+'
+      method: (GET|POST|DELETE|PUT)
   response:
-    body:
-      id: 2
-      text: The todo body
-      
+      body:
+          id: 2
+          text: The todo body
+
 - name: Failed todo
   id: last_behavior
   request:
-    path: "/customer"
-    method: (GET|POST|DELETE|PUT)
+      path: '/customer'
+      method: (GET|POST|DELETE|PUT)
   response:
-    statusCode: 500
-    body: Server blew up
+      statusCode: 500
+      body: Server blew up
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="Deputy Server" content="deputy server" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="Deputy Server" content="deputy server" />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -22,13 +21,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Deputy Server</title>
-</head>
+        <title>Deputy Server</title>
+    </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -37,7 +36,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>
+    --></body>
+</html>
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -1,40 +1,40 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .create-code-view .CodeMirror {

diff --git a/ui/src/components/mocks/Create.tsx b/ui/src/components/mocks/Create.tsx
@@ -1,35 +1,48 @@
 import { Alert, Button, notification, Space } from 'antd';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import Editor from '@monaco-editor/react';
 import Yaml from 'yaml';
 import { mock as mockApi } from '../../api';
 
 export const Create = ({ onDone, mock }: { onDone: any; mock: any }) => {
     const [error, setError] = useState<any>(null);
     const api = mockApi();
+    const editorRef = useRef(null);
 
-    let yamlValue = typeof mock !== 'string' ? Yaml.stringify(mock, { sortMapEntries: false }) : mock;
+    const editorOptions = {
+        minimap: {
+            enabled: false,
+        },
+        lineSuggest: {
+            enabled: true,
+        },
+        smoothScrolling: true,
+    };
 
-    const onCodeChange = (value: any) => {
-        yamlValue = value;
+    const handleEditorDidMount = (editor) => {
+        const yamlValue = typeof mock !== 'string' ? Yaml.stringify(mock, { sortMapEntries: false }) : mock;
+        editorRef.current = editor;
+        editor.setValue(yamlValue);
+        editor.setScrollPosition({ scrollTop: 0, scrollLeft: 0 });
     };
 
     const createMock = async () => {
         setError(null);
         try {
             let description = 'Mock created';
-            const mocks = Yaml.parse(yamlValue);
+            const editorValue = editorRef.current.getValue();
+            const mocks = Yaml.parse(editorValue);
 
             if (!Array.isArray(mocks)) {
                 if (mocks.id) {
-                    await api.update(yamlValue);
+                    await api.update(editorValue);
                     description = `${mocks.request.path} updated`;
                 } else {
-                    await api.create(yamlValue);
+                    await api.create(editorValue);
                     description = `${mocks.request.path} created`;
                 }
             } else {
-                await api.create(yamlValue);
+                await api.create(editorValue);
                 description = `${mocks.length} mocks successfully created`;
             }
 
@@ -51,12 +64,11 @@ export const Create = ({ onDone, mock }: { onDone: any; mock: any }) => {
                 {error && <Alert type="error" message="Mock Error" description={error.toString()} />}
                 <Editor
                     height="60vh"
-                    value={yamlValue}
-                    onChange={onCodeChange}
+                    onMount={handleEditorDidMount}
                     theme="vs-dark"
                     path="mocks.yml"
                     language="yaml"
-                    options={{ minimap: { enabled: false } }}
+                    options={editorOptions}
                 />
                 <Button type="primary" onClick={createMock}>
                     Save

diff --git a/ui/src/components/records/Records.tsx b/ui/src/components/records/Records.tsx
@@ -1,5 +1,5 @@
-import { Space, Table, Tooltip, Alert, Button, Row, Tag } from 'antd';
-import { ApiOutlined, PlusCircleFilled } from '@ant-design/icons';
+import { Space, Table, Alert, Button, Row, Tag } from 'antd';
+import { PlusCircleFilled } from '@ant-design/icons';
 import { Record } from '../../../../src/engine';
 import { RequestPath } from './RequestPath';
 import { StatusCode } from './StatusCode';
@@ -80,7 +80,6 @@ const ExpandedRow = ({ record }) => {
 
                 <ViewMock record={record} />
             </Row>
-
             <RecordRow record={record} />
         </Space>
     );

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -1,13 +1,11 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+        'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -5,10 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/ui/src/reportWebVitals.ts b/ui/src/reportWebVitals.ts
@@ -1,15 +1,15 @@
 import { ReportHandler } from 'web-vitals';
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry);
+            getFID(onPerfEntry);
+            getFCP(onPerfEntry);
+            getLCP(onPerfEntry);
+            getTTFB(onPerfEntry);
+        });
+    }
 };
 
 export default reportWebVitals;