fix: fixed the broken create and import of mocks

ui/src/components/mocks/Import.tsx

@@ -2,8 +2,9 @@ import { ImportOutlined } from '@ant-design/icons';
 import { Button, Drawer } from 'antd';
 import { useState } from 'react';
 import { Create } from './Create';
-import { Record, Mock } from '../../../../src/engine';
+import { Record } from '../../../../src/engine';
 import { useServerState } from '../Provider';
+import { convertRecordToMock } from '../../utils';
 
 export const MockImport = ({ selections = [] }: any) => {
     const disabled = selections.length === 0;
@@ -36,18 +37,9 @@ export const MockImport = ({ selections = [] }: any) => {
 
     const startImport = () => {
         const mocks: Array<any> = selections.map((key: string) => {
-            // TODO: fix later
             // @ts-ignore: ignore for now
             const record: Record = records.find((rec) => rec.key === key);
-            const cleanRequestHeaders = cleanHeaders(record.request.headers || {});
-            const newMock: Mock = {
-                request: Object.assign({}, record.request, { headers: cleanRequestHeaders }),
-                response: record.response,
-            };
-
-            delete newMock.request.time;
-            delete newMock.request.protocol;
-            return newMock;
+            return convertRecordToMock(record);
         });
 
         setToImport(mocks);

ui/src/components/records/RecordRow.tsx

@@ -49,3 +49,5 @@ export const RecordRow = ({ record }: { record: Record }) => {
         </div>
     );
 };
+
+RecordRow.displayName = 'RecordRow';

ui/src/components/records/Records.tsx

@@ -9,6 +9,7 @@ import { MockImport } from '../mocks/Import';
 import { useServerState } from '../Provider';
 import { useEditMocks } from '../mocks/Provider';
 import ViewMock from '../ViewMock';
+import { convertRecordToMock } from '../../utils';
 
 const columns = [
     {
@@ -77,19 +78,14 @@ const cleanupRequest = (req) => {
 
 const ExpandedRow = ({ record }) => {
     const edit = useEditMocks();
-    const { request, response, proxyRequest } = record;
-    const newRequest = cleanupRequest(Object.assign({}, request));
+    const { proxyRequest } = record;
+    const mock = convertRecordToMock(record);
 
     return (
         <Space direction="vertical" style={{ width: '100%' }}>
             <Row justify="space-between">
                 {proxyRequest && (
-                    <Button
-                        type="dashed"
-                        size="small"
-                        onClick={() => edit.create({ request: newRequest, response })}
-                        icon={<PlusCircleFilled />}
-                    >
+                    <Button type="dashed" size="small" onClick={() => edit.create(mock)} icon={<PlusCircleFilled />}>
                         Create Mock
                     </Button>
                 )}
@@ -134,3 +130,5 @@ export const Records = () => {
         </Space>
     );
 };
+
+Records.displayName = 'Records';

ui/src/utils.ts

@@ -0,0 +1,38 @@
+import { Mock, Record } from '../../src/types';
+
+export const convertRecordToMock = (record: Record): Mock => {
+    const USELESS_HEADERS = [
+        'x-forwarded-host',
+        'x-forwarded-proto',
+        'x-forwarded-port',
+        'x-forwarded-for',
+        'connection',
+        'user-agent',
+        'remoteAddress',
+        'content-length',
+        'httpVersion',
+    ];
+
+    const cleanHeaders = (headers: any) => {
+        const newHeader: any = {};
+        Object.entries(headers).forEach(([key, value]: [string, any]) => {
+            if (!USELESS_HEADERS.includes(key)) {
+                newHeader[key] = value;
+            }
+        });
+        return newHeader;
+    };
+
+    const requestHeaders = cleanHeaders(record.request.headers || {});
+    const responseHeaders = cleanHeaders(record.response.headers || {});
+    const mock: Mock = {
+        request: Object.assign({}, record.request, { headers: requestHeaders }),
+        response: Object.assign({}, record.response, { headers: responseHeaders }),
+        limit: 'unlimited',
+        delay: 0,
+    };
+
+    delete mock.request.protocol;
+    delete mock.request.time;
+    return mock;
+};