diff --git a/package.json b/package.json index 3394251..6a2616e 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "express": "^4.16.4", "react": "^16.8.6", "react-chartjs": "^1.2.0", + "react-diff-viewer": "^1.1.0", "react-dom": "^16.8.6", "react-json-view": "^1.19.1", "socket.io": "^2.2.0", diff --git a/src/assets/no-data.svg b/src/assets/no-data.svg index e08b18b..17bf170 100644 --- a/src/assets/no-data.svg +++ b/src/assets/no-data.svg @@ -4,13 +4,13 @@ Created with Sketch. - - - + + + - - + + diff --git a/src/main/components/Button.jsx b/src/main/components/Button.jsx index 80080e5..463db51 100644 --- a/src/main/components/Button.jsx +++ b/src/main/components/Button.jsx @@ -46,6 +46,7 @@ const Button = styled.button` if (props.variation === 'positive') return '0 0 1px 2px #DEF0DB'; return '0 0 1px 2px #96C1E9'; }} + } `; export default Button; diff --git a/src/main/components/DataTree.jsx b/src/main/components/DataTree.jsx index be6c4c8..ea56d5b 100644 --- a/src/main/components/DataTree.jsx +++ b/src/main/components/DataTree.jsx @@ -31,7 +31,7 @@ const DataTree = (props) => { theme='chalk' iconStyle='circle' style={styles} - collapsed={0} + collapsed={2} onAdd={(onAdd) ? changeObject : false} onEdit={(onEdit) ? changeObject : false} onDelete={(onDelete) ? changeObject : false} diff --git a/src/main/components/Mockup.jsx b/src/main/components/Mockup.jsx index 81c4e97..652a00f 100644 --- a/src/main/components/Mockup.jsx +++ b/src/main/components/Mockup.jsx @@ -1,9 +1,11 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import NameForm from './NameForm.jsx'; import MockupName from './MockupName.jsx'; import DataTree from './DataTree.jsx'; import Button from './Button.jsx'; -import AssertionsForm from './AssertionsForm.jsx' +import AssertionsForm from './AssertionsForm.jsx'; +import { TestsContext } from '../testsContext'; + const dataTreeOptions = { onAdd: true, @@ -15,29 +17,45 @@ const dataTreeOptions = { const Mockup = (props) => { const { test, index, saveUpdatedTree } = props; - // State - const [name, setName] = useState(test.name); + const [tests, setTests] = useContext(TestsContext); // Mode controls test assertions and name edit form—it’s set by child components const [mode, setMode] = useState('view'); + function setName(name, testIndex) { + const testsClone = [...tests]; + // This if-statement just makes sure the test name wasn't just whitespace + if (name.replace(/\s/g, '') !== '') testsClone[testIndex].name = name; + else testsClone[testIndex].name = `Test #${testIndex + 1}`; + setTests(testsClone); + } + + function deleteTest(testIndex) { + const testsClone = []; + for (let i = 0; i < tests.length; i += 1) { + if (i !== testIndex) testsClone.push(tests[i]); + } + setTests(testsClone); + } + return (
{mode === 'editName' - ? - : + ? + : } + treeId={index} + data={test.payload} + name={test.name} + options={dataTreeOptions} + saveUpdatedTree={saveUpdatedTree} + /> {mode === 'editAssertions' - ? + ? : } +
); }; diff --git a/src/main/components/NameForm.jsx b/src/main/components/NameForm.jsx index af763ce..4d526f8 100644 --- a/src/main/components/NameForm.jsx +++ b/src/main/components/NameForm.jsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { TestsContext } from '../testsContext'; import InlineForm from './InlineForm.jsx'; import InlineInput from './InlineInput.jsx'; +import Button from './Button.jsx'; // Form styles const Form = styled(InlineForm)` @@ -38,7 +39,7 @@ const NameForm = (props) => { testsCopy[index].name = newName; // Update name in test array, then set mockup “mode” to trigger re-render - setName(newName); + setName(newName, index); setTests(testsCopy); setMode('view'); }; @@ -53,10 +54,11 @@ const NameForm = (props) => { + ); }; diff --git a/src/main/components/RequestBar.jsx b/src/main/components/RequestBar.jsx index 685e5e6..4ef1a54 100644 --- a/src/main/components/RequestBar.jsx +++ b/src/main/components/RequestBar.jsx @@ -107,7 +107,7 @@ const RequestBar = (props) => { }) .then((res) => { setTests([{ - payload: res, status: '', name: '', diff: {}, + payload: res, status: '', name: 'Test #1', diff: {}, }]); setData(res); }); @@ -152,12 +152,12 @@ const RequestBar = (props) => { { (SourceOrDest === 'dest') && } + {data + &&
+ +
+ + +
} + {mockupsListDisplay} - {mockupsListDisplay} ); } diff --git a/src/main/containers/Panels.jsx b/src/main/containers/Panels.jsx index 8669b1c..0276444 100644 --- a/src/main/containers/Panels.jsx +++ b/src/main/containers/Panels.jsx @@ -43,7 +43,7 @@ const Panels = () => { socket.on('post_received', (postedData) => { setData(postedData); setTests([{ - payload: postedData, status: '', name: '', diff: {}, + payload: postedData, status: '', name: 'Test #1', diff: {}, }]); // clear old performance metrics on new post @@ -71,11 +71,12 @@ const Panels = () => { /> setActivePanel('dest')} active={(activePanel === 'dest')} + data={data} fetchTimes={postFetchTimes} - setFetchTimes={setPostFetchTimes} hContentType={hContentType} + onClickFunction={() => setActivePanel('dest')} + setFetchTimes={setPostFetchTimes} /> ); diff --git a/src/main/containers/SourcePanel.jsx b/src/main/containers/SourcePanel.jsx index eb33649..b1839eb 100644 --- a/src/main/containers/SourcePanel.jsx +++ b/src/main/containers/SourcePanel.jsx @@ -13,11 +13,17 @@ const SourcePanel = (props) => { if (active) { return ( - - {datacanvas} - {(fetchTimes.length > 0) - && (fetchTimes.reduce(reducer) > 0) - && } +
+ + {datacanvas} + {(fetchTimes.length > 0) + && (fetchTimes.reduce(reducer) > 0) + && } +
); } diff --git a/src/main/lib/treeView/icons.svg b/src/main/lib/treeView/icons.svg index cc8298a..5595ee5 100755 --- a/src/main/lib/treeView/icons.svg +++ b/src/main/lib/treeView/icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/renderer/Nodatasvg.jsx b/src/renderer/Nodatasvg.jsx index c3549e9..7e8378a 100644 --- a/src/renderer/Nodatasvg.jsx +++ b/src/renderer/Nodatasvg.jsx @@ -2,121 +2,121 @@ import React from 'react'; function Nodatasvg(props) { return ( - - No-Data - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - + + No-Data + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ); }