Merge pull request #97 from FlowTestAI/user-feedbacks

feat: main viewports and logs of each canvas and introduce json editor

Author: jsajal

.changeset/slimy-bottles-taste.md

@@ -0,0 +1,5 @@
+---
+"flowtestai": patch
+---
+
+Maintain state of logs and viewports of each canvas separately. Add Json editor in request and output node. Fix some minor bugs

CONTRIBUTING.md

@@ -42,7 +42,7 @@ pnpm install
 
 ### Implement your changes
 
-This project is a monorepo. The code for the CLI is in the `package/flowtest-cli` directory, (add here learn what flowtest-electron is vs the main src folder)
+This project is a monorepo. FlowTestAI is offered as a local electron desktop app. In lieu of that it has two major components, the main logical part of the application resides in `packages/flowtest-electron` and the renderer (UI) part of the application resides in `src`. We are also actively developing the CLI and it resides in `packages/flowtest-cli` directory.
 
 Here are some useful scripts for when you are developing:
 

package.json

@@ -44,6 +44,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@tippyjs/react": "^4.2.6",
+    "ace-builds": "^1.33.1",
     "allotment": "^1.20.0",
     "autoprefixer": "^10.4.18",
     "axios": "^1.5.1",
@@ -54,6 +55,7 @@
     "notistack": "^3.0.1",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
+    "react-ace": "^11.0.1",
     "react-dom": "^18.2.0",
     "react-edit-text": "^5.1.1",
     "react-icons": "^5.0.1",

packages/flowtest-electron/src/utils/flowparser/parser.js

@@ -153,6 +153,10 @@ const deserialize = (flowData) => {
         textData.graph.metadata.edges[edge.id] = _edge;
       });
     }
+
+    if (flowData.viewport) {
+      textData.graph.metadata.viewport = flowDataCopy.viewport;
+    }
   }
 
   return textData;
@@ -162,6 +166,7 @@ const serialize = (textData) => {
   const flowData = {};
   flowData.nodes = [];
   flowData.edges = [];
+  flowData.viewport = { x: 0, y: 0, zoom: 1 };
 
   // we don't want to modify original object
   const textDataCopy = cloneDeep(textData);
@@ -242,6 +247,10 @@ const serialize = (textData) => {
           ...value,
         });
       });
+
+      if (textDataCopy.graph.metadata.viewport) {
+        flowData.viewport = textDataCopy.graph.metadata.viewport;
+      }
     }
   } else {
     throw new Error('Version not recognized');

packages/flowtest-electron/tests/utils/flowtest-parser.test.js

@@ -253,6 +253,7 @@ describe('FlowTest parser', () => {
           id: 'reactflow__edge-9true-10',
         },
       ],
+      viewport: { x: 0.1, y: 0.2, zoom: 1.9876 },
     };
 
     const textData = deserialize(flowData);
@@ -262,5 +263,6 @@ describe('FlowTest parser', () => {
 
     expect(_flowData.nodes).toEqual(flowData.nodes);
     expect(_flowData.edges).toEqual(flowData.edges);
+    expect(_flowData.viewport).toEqual(flowData.viewport);
   });
 });

pnpm-lock.yaml

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/ext-language_tools';
+
+const JsonEditor = ({ ...props }) => {
+  return (
+    <AceEditor
+      height='inherit'
+      width='inherit'
+      minLines={2}
+      maxLines={props.maxLines || 15}
+      placeholder={props.placeholder || ''}
+      mode='json'
+      theme='github'
+      name={props.name}
+      //onLoad={this.onLoad}
+      onChange={props.onChange}
+      fontSize={14}
+      lineHeight={19}
+      showPrintMargin={true}
+      showGutter={true}
+      highlightActiveLine={true}
+      value={props.value}
+      setOptions={{
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: false,
+        showLineNumbers: true,
+        tabSize: 2,
+      }}
+      readOnly={props.readOnly || false}
+    />
+  );
+};
+
+export default JsonEditor;

src/components/atoms/JsonEditor.js

@@ -4,10 +4,24 @@ import { useTabStore } from 'stores/TabStore';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { isEqual } from 'lodash';
 import { OBJ_TYPES } from 'constants/Common';
+import { compare } from './util';
 
 const tabUnsavedChanges = (tab) => {
-  if (tab.type === OBJ_TYPES.flowtest && tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
-    return true;
+  if (tab.type === OBJ_TYPES.flowtest && tab.flowDataDraft) {
+    const draftNodesSansOutput = tab.flowDataDraft.nodes.map((node) => {
+      if (node.type === 'outputNode' && node.data.output) {
+        const { ['output']: _, ...data } = node.data;
+        return {
+          ...node,
+          data,
+        };
+      }
+      return node;
+    });
+    if (!isEqual(tab.flowData.nodes, draftNodesSansOutput) || !isEqual(tab.flowData.edges, tab.flowDataDraft.edges)) {
+      console.log('Detected unsaved changes: ', compare(tab.flowData, tab.flowDataDraft));
+      return true;
+    }
   } else if (tab.type === OBJ_TYPES.environment && tab.variablesDraft && !isEqual(tab.variables, tab.variablesDraft)) {
     return true;
   } else {

src/components/atoms/Tabs.js

@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { ClockIcon } from '@heroicons/react/24/outline';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
 
 const TimeSelector = ({ optionsData, defaultOptionData, onSelectHandler = () => null }) => {
   return (
     <div className='flex items-center justify-between gap-2 pl-4 outline-none'>
-      <ClockIcon className='w-5 h-5' />
+      <Tippy content='Timeout' placement='top'>
+        <ClockIcon className='w-5 h-5' />
+      </Tippy>
       <select
         onChange={onSelectHandler}
         name='timer-selector'

src/components/atoms/common/TimeSelector.js

@@ -0,0 +1,65 @@
+import _, { isEqual, map } from 'lodash';
+
+export const compare = (a, b) => {
+  const result = {
+    different: [],
+    missing_from_first: [],
+    missing_from_second: [],
+  };
+
+  _.reduce(
+    a,
+    function (result, value, key) {
+      if (Object.prototype.hasOwnProperty.call(b, key)) {
+        if (isEqual(value, b[key])) {
+          return result;
+        } else {
+          if (typeof a[key] != typeof {} || typeof b[key] != typeof {}) {
+            //dead end.
+            result.different.push(key);
+            return result;
+          } else {
+            var deeper = compare(a[key], b[key]);
+            result.different = result.different.concat(
+              map(deeper.different, (sub_path) => {
+                return key + '.' + sub_path;
+              }),
+            );
+
+            result.missing_from_second = result.missing_from_second.concat(
+              map(deeper.missing_from_second, (sub_path) => {
+                return key + '.' + sub_path;
+              }),
+            );
+
+            result.missing_from_first = result.missing_from_first.concat(
+              map(deeper.missing_from_first, (sub_path) => {
+                return key + '.' + sub_path;
+              }),
+            );
+            return result;
+          }
+        }
+      } else {
+        result.missing_from_second.push(key);
+        return result;
+      }
+    },
+    result,
+  );
+
+  _.reduce(
+    b,
+    function (result, value, key) {
+      if (Object.prototype.hasOwnProperty.call(a, key)) {
+        return result;
+      } else {
+        result.missing_from_first.push(key);
+        return result;
+      }
+    },
+    result,
+  );
+
+  return result;
+};