fix: fixed the UI Bug and migrated to JSON

src/server/routes/assert.test.ts

@@ -60,7 +60,7 @@ test('return the error from a failed existence verification', async () => {
     );
 });
 
-test('return accepted http 202', async () => {
+test('JSON return accepted http 202', async () => {
     // @ts-ignore: Jest Mock
     fs.readFileSync.mockReturnValueOnce(`
         -   name: test expectations
@@ -82,14 +82,21 @@ test('return accepted http 202', async () => {
     await request(mockServer).post('/tasks').send();
     await request(mockServer).get('/tasks').send();
 
-    const res = await request(apiServer).put('/api/requests/assert').set('content-type', 'application/x-yaml').send(`
-            - request:
-                path: '/tasks'
-                method: 'POST'
-                
-            - request: 
-                path: '/tasks'
-                method: 'GET'                
+    const res = await request(apiServer).put('/api/requests/assert').set('content-type', 'application/json').send(`
+        [
+            {
+                "request": {
+                    "path": "/tasks",
+                    "method": "POST"
+                }
+            },
+            {
+                "request": {
+                    "path": "/tasks",
+                    "method": "GET"
+                }
+            }
+        ]          
         `);
 
     expect(res.status).toBe(202);

src/server/routes/middleware.ts

@@ -15,7 +15,7 @@ export const responseHandler = (req, res) => {
     return res.status(res.locals.code || 200).json(res.locals.body || {});
 };
 
-export const parseBodyHandler = (req, res, next) => {
+export const parseBodyHandler = (req, _, next) => {
     const contentType = req.headers['content-type'] || '';
     if (contentType.includes('application/x-yaml')) {
         try {
@@ -24,6 +24,8 @@ export const parseBodyHandler = (req, res, next) => {
         } catch (error) {
             return next(error);
         }
+    } else {
+        req.payload = req.body;
     }
 
     return next();

ui/src/App.tsx

@@ -30,7 +30,7 @@ const App = () => {
                                 <span style={{ color: 'white', padding: '0 10px' }}>Deputy v{version}</span>
                                 <ServerStatus />
                             </Row>
-                            <Typography.Link href="https://sayjava.github.io/behave/" target="_blank">
+                            <Typography.Link href="https://sayjava.github.io/deputy/" target="_blank">
                                 Docs
                             </Typography.Link>
                         </Row>
@@ -59,7 +59,7 @@ const App = () => {
                             </Space>
                         </div>
                     </Content>
-                    <Footer style={{ textAlign: 'center' }}>Behave UI Server</Footer>
+                    <Footer style={{ textAlign: 'center' }}>Deputy </Footer>
                 </Layout>
             </EditMockProvider>
         </ServerProvider>

ui/src/api.ts

@@ -15,7 +15,7 @@ export const mock = () => {
                 method: 'POST',
                 body: mocks,
                 headers: {
-                    'content-type': 'application/x-yaml',
+                    'content-type': 'application/json',
                 },
             });
 
@@ -31,7 +31,7 @@ export const mock = () => {
                 method: 'DELETE',
                 body: behavior,
                 headers: {
-                    'content-type': 'application/x-yaml',
+                    'content-type': 'application/json',
                 },
             });
 
@@ -47,7 +47,7 @@ export const mock = () => {
                 method: 'PUT',
                 body: behavior,
                 headers: {
-                    'content-type': 'application/x-yaml',
+                    'content-type': 'application/json',
                 },
             });
 

ui/src/components/mocks/Create.tsx

@@ -1,7 +1,6 @@
 import { Alert, Button, notification, Space } from 'antd';
 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 }) => {
@@ -19,19 +18,12 @@ export const Create = ({ onDone, mock }: { onDone: any; mock: any }) => {
         smoothScrolling: true,
     };
 
-    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 editorValue = editorRef.current.getValue();
-            const mocks = Yaml.parse(editorValue);
+            const mocks = JSON.parse(editorValue);
 
             if (!Array.isArray(mocks)) {
                 if (mocks.id) {
@@ -63,12 +55,14 @@ export const Create = ({ onDone, mock }: { onDone: any; mock: any }) => {
             <Space title="New Mock" direction="vertical" size="middle" style={{ width: '100%' }}>
                 {error && <Alert type="error" message="Mock Error" description={error.toString()} />}
                 <Editor
+                    value={JSON.stringify(mock, null, 2)}
                     height="60vh"
-                    onMount={handleEditorDidMount}
                     theme="vs-dark"
-                    path="mocks.yml"
-                    language="yaml"
+                    language="json"
                     options={editorOptions}
+                    onMount={(editor) => {
+                        editorRef.current = editor;
+                    }}
                 />
                 <Button type="primary" onClick={createMock}>
                     Save

ui/src/components/mocks/Export.tsx

@@ -1,16 +1,15 @@
 import { ExportOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
-import Yaml from 'yaml';
 
 import { useServerState } from '../Provider';
 
 export const MockExport = () => {
     const {
         state: { mocks },
     } = useServerState();
-    const fileContent = Yaml.stringify(mocks, { indent: 4, mapAsMap: true });
+    const fileContent = JSON.stringify(mocks, null, 2);
     return (
-        <Button icon={<ExportOutlined />} download="mocks.yml" href={URL.createObjectURL(new Blob([fileContent]))}>
+        <Button icon={<ExportOutlined />} download="mocks.json" href={URL.createObjectURL(new Blob([fileContent]))}>
             Export
         </Button>
     );

ui/src/components/mocks/FileImport.tsx

@@ -29,8 +29,7 @@ export const FileImport = () => {
 
         try {
             const mocks = await (await Promise.all(reads)).join('\n');
-            // @ts-ignore: Missing types ignore
-            create(mocks);
+            create(JSON.parse(mocks));
         } catch (error) {
             notification.error({
                 message: error.toString(),
@@ -44,7 +43,7 @@ export const FileImport = () => {
             <Button icon={<ImportOutlined />} onClick={doImport}>
                 Import
             </Button>
-            <input onChange={onFilesChange} ref={refImport} type="file" style={{ display: 'none' }} accept=".yaml" />
+            <input onChange={onFilesChange} ref={refImport} type="file" style={{ display: 'none' }} accept=".json" />
         </>
     );
 };

ui/src/components/mocks/List.tsx

@@ -4,7 +4,6 @@ import { useServerState } from '../Provider';
 import { CheckOutlined, CloseOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useEditMocks } from './Provider';
 import { mock as api } from '../../api';
-import Yaml from 'yaml';
 import { Create } from './Create';
 
 const noop = () => {};
@@ -41,7 +40,7 @@ const ToggleMock = ({ mock }: { mock: Mock }) => {
             mock.limit = 0;
         }
 
-        await api().update(Yaml.stringify(mock));
+        await api().update(JSON.stringify(mock, null, 2));
     };
 
     return (

ui/src/components/mocks/Mocks.tsx

@@ -57,7 +57,6 @@ export const MocksView = () => {
                     <Row justify="space-between">
                         <Col>
                             <Space>
-                                {/* <NewMock /> */}
                                 <Button
                                     color="blue"
                                     icon={<PlusSquareOutlined />}

ui/src/components/mocks/Provider.tsx

@@ -4,7 +4,6 @@ import { Mock } from '../../../../src/engine';
 import { Create } from './Create';
 import { mock } from '../../api';
 import { nanoid } from 'nanoid';
-import Yaml from 'yaml';
 
 export interface MockState {
     mocks: Array<any>;
@@ -62,7 +61,7 @@ export const EditMockProvider = ({ children }) => {
 
     const deleteMock = async (mock: Mock) => {
         try {
-            await api.delete(Yaml.stringify(mock));
+            await api.delete(JSON.stringify(mock));
             notification.success({
                 message: 'Success',
                 description: `${mock.request.path} deleted`,

ui/src/components/records/Records.tsx

@@ -58,7 +58,7 @@ const columns = [
     },
     {
         title: 'Status',
-        dataIndex: 'request.path',
+        dataIndex: ['request', 'path'],
         width: '10%',
         render: (_: any, record: Record) => <StatusCode record={record} />,
     },