From f08dc25711fa06e7b5e05acaad167a4ff7db8e6d Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Fri, 24 May 2024 11:48:57 +0100
Subject: [PATCH] feat: introduce style and behavior improvements

---
 .../ChooseAppAndEventSubstep/index.jsx        |  2 +
 .../ChooseConnectionSubstep/index.jsx         |  1 +
 .../ControlledAutocomplete/index.jsx          |  3 +
 .../CustomOptions.jsx                         |  1 +
 .../src/components/EditorNew/EditorNew.jsx    | 38 ++++++++----
 .../EditorNew/FlowStepNode/FlowStepNode.jsx   | 58 ++++++++++---------
 .../EditorNew/FlowStepNode/style.js           | 14 +++++
 .../EditorNew/InvisibleNode/InvisibleNode.jsx | 13 +----
 .../web/src/components/EditorNew/style.js     | 13 +++++
 .../src/components/EditorNew/useAutoLayout.js |  2 -
 .../EditorNew/useScrollBoundries.js           | 13 +++++
 .../web/src/components/InputCreator/index.jsx |  1 +
 .../web/src/components/PowerInput/index.jsx   | 10 ++++
 13 files changed, 116 insertions(+), 53 deletions(-)
 create mode 100644 packages/web/src/components/EditorNew/FlowStepNode/style.js
 create mode 100644 packages/web/src/components/EditorNew/style.js
 create mode 100644 packages/web/src/components/EditorNew/useScrollBoundries.js

diff --git a/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx b/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
index 92295fee..17712178 100644
--- a/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
+++ b/packages/web/src/components/ChooseAppAndEventSubstep/index.jsx
@@ -165,6 +165,7 @@ function ChooseAppAndEventSubstep(props) {
             value={getOption(appOptions, step.appKey) || null}
             onChange={onAppChange}
             data-test="choose-app-autocomplete"
+            componentsProps={{ popper: { className: 'nowheel' } }}
           />
 
           {step.appKey && (
@@ -227,6 +228,7 @@ function ChooseAppAndEventSubstep(props) {
                 value={getOption(actionOrTriggerOptions, step.key) || null}
                 onChange={onEventChange}
                 data-test="choose-event-autocomplete"
+                componentsProps={{ popper: { className: 'nowheel' } }}
               />
             </Box>
           )}
diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.jsx b/packages/web/src/components/ChooseConnectionSubstep/index.jsx
index 7efa1e77..7b776705 100644
--- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx
+++ b/packages/web/src/components/ChooseConnectionSubstep/index.jsx
@@ -240,6 +240,7 @@ function ChooseConnectionSubstep(props) {
             onChange={handleChange}
             loading={isAppConnectionsLoading}
             data-test="choose-connection-autocomplete"
+            componentsProps={{ popper: { className: 'nowheel' } }}
           />
 
           <Button
diff --git a/packages/web/src/components/ControlledAutocomplete/index.jsx b/packages/web/src/components/ControlledAutocomplete/index.jsx
index a88d5038..0ade2237 100644
--- a/packages/web/src/components/ControlledAutocomplete/index.jsx
+++ b/packages/web/src/components/ControlledAutocomplete/index.jsx
@@ -32,9 +32,11 @@ function ControlledAutocomplete(props) {
     ...autocompleteProps
   } = props;
   let dependsOnValues = [];
+
   if (dependsOn?.length) {
     dependsOnValues = watch(dependsOn);
   }
+
   React.useEffect(() => {
     const hasDependencies = dependsOnValues.length;
     const allDepsSatisfied = dependsOnValues.every(Boolean);
@@ -44,6 +46,7 @@ function ControlledAutocomplete(props) {
       resetField(name);
     }
   }, dependsOnValues);
+
   return (
     <Controller
       rules={{ required }}
diff --git a/packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx b/packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx
index e0d74725..bf3c3748 100644
--- a/packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx
+++ b/packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx
@@ -47,6 +47,7 @@ const CustomOptions = (props) => {
           },
         },
       ]}
+      className="nowheel"
     >
       <Paper elevation={5} sx={{ width: '100%' }}>
         <Tabs
diff --git a/packages/web/src/components/EditorNew/EditorNew.jsx b/packages/web/src/components/EditorNew/EditorNew.jsx
index 31220a31..4ced1c15 100644
--- a/packages/web/src/components/EditorNew/EditorNew.jsx
+++ b/packages/web/src/components/EditorNew/EditorNew.jsx
@@ -8,9 +8,11 @@ import { Stack } from '@mui/material';
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
 
 import { useAutoLayout } from './useAutoLayout';
+import { useScrollBoundries } from './useScrollBoundries';
 import FlowStepNode from './FlowStepNode/FlowStepNode';
 import Edge from './Edge/Edge';
 import InvisibleNode from './InvisibleNode/InvisibleNode';
+import { EditorWrapper } from './style';
 
 const nodeTypes = { flowStep: FlowStepNode, invisible: InvisibleNode };
 
@@ -32,6 +34,7 @@ const EditorNew = ({ flow }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   useAutoLayout();
+  useScrollBoundries();
 
   const onConnect = useCallback(
     (params) => setEdges((eds) => addEdge(params, eds)),
@@ -125,6 +128,7 @@ const EditorNew = ({ flow }) => {
     (flow, prevNodes) => {
       const newNodes = flow.steps.map((step, index) => {
         const node = prevNodes?.find(({ id }) => id === step.id);
+        const collapsed = currentStepId !== step.id;
         return {
           id: step.id,
           type: 'flowStep',
@@ -132,11 +136,12 @@ const EditorNew = ({ flow }) => {
             x: node ? node.position.x : 0,
             y: node ? node.position.y : 0,
           },
+          zIndex: collapsed ? 0 : 1,
           data: {
             step,
             index: index,
             flowId: flow.id,
-            collapsed: currentStepId !== step.id,
+            collapsed,
             openNextStep: openNextStep(flow.steps[index + 1]),
             onOpen: () => setCurrentStepId(step.id),
             onClose: () => setCurrentStepId(null),
@@ -178,15 +183,31 @@ const EditorNew = ({ flow }) => {
     [setNodes],
   );
 
+  const updateEdgesData = useCallback(
+    (flow) => {
+      setEdges((edges) =>
+        edges.map((edge) => {
+          return {
+            ...edge,
+            data: { ...edge.data, flowId: flow.id, flowActive: flow.active },
+          };
+        }),
+      );
+    },
+    [setEdges],
+  );
+
   useEffect(() => {
     setNodes(
       nodes.map((node) => {
         if (node.type === 'flowStep') {
+          const collapsed = currentStepId !== node.data.step.id;
           return {
             ...node,
+            zIndex: collapsed ? 0 : 1,
             data: {
               ...node.data,
-              collapsed: currentStepId !== node.data.step.id,
+              collapsed,
             },
           };
         }
@@ -204,19 +225,12 @@ const EditorNew = ({ flow }) => {
       setEdges(newEdges);
     } else {
       updateNodesData(flow.steps);
+      updateEdgesData(flow);
     }
   }, [flow]);
 
   return (
-    <Stack
-      direction="column"
-      sx={{
-        flexGrow: 1,
-        '& > div': {
-          flexGrow: 1,
-        },
-      }}
-    >
+    <EditorWrapper direction="column">
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -233,7 +247,7 @@ const EditorNew = ({ flow }) => {
         zoomOnDoubleClick={false}
         panActivationKeyCode={null}
       />
-    </Stack>
+    </EditorWrapper>
   );
 };
 
diff --git a/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx b/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx
index 2b173dcb..bd2abd5f 100644
--- a/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx
+++ b/packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import FlowStep from 'components/FlowStep';
 import { StepPropType } from 'propTypes/propTypes';
 
+import { NodeWrapper, NodeInnerWrapper } from './style.js';
+
 function FlowStepNode({
   data: {
     step,
@@ -19,35 +21,37 @@ function FlowStepNode({
   },
 }) {
   return (
-    <Box
-      maxWidth={900}
-      width="100vw"
+    <NodeWrapper
       className="nodrag"
-      sx={{ visibility: layouted ? 'visible' : 'hidden' }}
+      sx={{
+        visibility: layouted ? 'visible' : 'hidden',
+      }}
     >
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-      <FlowStep
-        step={step}
-        index={index + 1}
-        collapsed={collapsed}
-        onOpen={onOpen}
-        onClose={onClose}
-        onChange={onChange}
-        flowId={flowId}
-        onContinue={openNextStep}
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-    </Box>
+      <NodeInnerWrapper>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+        <FlowStep
+          step={step}
+          index={index + 1}
+          collapsed={collapsed}
+          onOpen={onOpen}
+          onClose={onClose}
+          onChange={onChange}
+          flowId={flowId}
+          onContinue={openNextStep}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </NodeInnerWrapper>
+    </NodeWrapper>
   );
 }
 
diff --git a/packages/web/src/components/EditorNew/FlowStepNode/style.js b/packages/web/src/components/EditorNew/FlowStepNode/style.js
new file mode 100644
index 00000000..f5d11366
--- /dev/null
+++ b/packages/web/src/components/EditorNew/FlowStepNode/style.js
@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const NodeWrapper = styled(Box)(({ theme }) => ({
+  width: '100vw',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: theme.spacing(0, 2.5),
+}));
+
+export const NodeInnerWrapper = styled(Box)(({ theme }) => ({
+  maxWidth: 900,
+  flex: 1,
+}));
diff --git a/packages/web/src/components/EditorNew/InvisibleNode/InvisibleNode.jsx b/packages/web/src/components/EditorNew/InvisibleNode/InvisibleNode.jsx
index f9db694f..2d04d452 100644
--- a/packages/web/src/components/EditorNew/InvisibleNode/InvisibleNode.jsx
+++ b/packages/web/src/components/EditorNew/InvisibleNode/InvisibleNode.jsx
@@ -10,19 +10,8 @@ function InvisibleNode() {
       className="nodrag"
       sx={{ visibility: 'hidden' }}
     >
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
+      <Handle type="target" position={Position.Top} isConnectable={false} />
       Invisible node
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
     </Box>
   );
 }
diff --git a/packages/web/src/components/EditorNew/style.js b/packages/web/src/components/EditorNew/style.js
new file mode 100644
index 00000000..d55ce0a0
--- /dev/null
+++ b/packages/web/src/components/EditorNew/style.js
@@ -0,0 +1,13 @@
+import { Stack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const EditorWrapper = styled(Stack)(({ theme }) => ({
+  flexGrow: 1,
+  '& > div': {
+    flexGrow: 1,
+  },
+
+  '& .react-flow__pane, & .react-flow__node': {
+    cursor: 'auto !important',
+  },
+}));
diff --git a/packages/web/src/components/EditorNew/useAutoLayout.js b/packages/web/src/components/EditorNew/useAutoLayout.js
index d97bab87..7e6a9b23 100644
--- a/packages/web/src/components/EditorNew/useAutoLayout.js
+++ b/packages/web/src/components/EditorNew/useAutoLayout.js
@@ -9,8 +9,6 @@ const getLayoutedElements = (nodes, edges) => {
   graph.setGraph({
     rankdir: 'TB',
     marginy: 60,
-    marginx: 60,
-    universalSep: true,
     ranksep: 64,
   });
   edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
diff --git a/packages/web/src/components/EditorNew/useScrollBoundries.js b/packages/web/src/components/EditorNew/useScrollBoundries.js
new file mode 100644
index 00000000..e6c00014
--- /dev/null
+++ b/packages/web/src/components/EditorNew/useScrollBoundries.js
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useViewport, useReactFlow } from 'reactflow';
+
+export const useScrollBoundries = () => {
+  const { setViewport } = useReactFlow();
+  const { x, y, zoom } = useViewport();
+
+  useEffect(() => {
+    if (y > 0) {
+      setViewport({ x, y: 0, zoom });
+    }
+  }, [y]);
+};
diff --git a/packages/web/src/components/InputCreator/index.jsx b/packages/web/src/components/InputCreator/index.jsx
index ff2d60b8..613244cf 100644
--- a/packages/web/src/components/InputCreator/index.jsx
+++ b/packages/web/src/components/InputCreator/index.jsx
@@ -80,6 +80,7 @@ export default function InputCreator(props) {
             disabled={disabled}
             showOptionValue={showOptionValue}
             shouldUnregister={shouldUnregister}
+            componentsProps={{ popper: { className: 'nowheel' } }}
           />
         )}
 
diff --git a/packages/web/src/components/PowerInput/index.jsx b/packages/web/src/components/PowerInput/index.jsx
index 0c828c0b..15b69298 100644
--- a/packages/web/src/components/PowerInput/index.jsx
+++ b/packages/web/src/components/PowerInput/index.jsx
@@ -17,6 +17,7 @@ import { StepExecutionsContext } from 'contexts/StepExecutions';
 import Popper from './Popper';
 import { processStepWithExecutions } from './data';
 import { ChildrenWrapper, FakeInput, InputLabelWrapper } from './style';
+
 const PowerInput = (props) => {
   const { control } = useFormContext();
   const {
@@ -31,33 +32,41 @@ const PowerInput = (props) => {
   } = props;
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
+
   const renderElement = React.useCallback(
     (props) => <Element {...props} />,
     [],
   );
+
   const [editor] = React.useState(() => customizeEditor(createEditor()));
+
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
+
   const disappearSuggestionsOnShift = (event) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
   };
+
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
   }, [priorStepsWithExecutions]);
+
   const handleBlur = React.useCallback(
     (value) => {
       onBlur?.(value);
     },
     [onBlur],
   );
+
   const handleVariableSuggestionClick = React.useCallback(
     (variable) => {
       insertVariable(editor, variable, stepsWithVariables);
     },
     [stepsWithVariables],
   );
+
   return (
     <Controller
       rules={{ required }}
@@ -127,6 +136,7 @@ const PowerInput = (props) => {
                 anchorEl={editorRef.current}
                 data={stepsWithVariables}
                 onSuggestionClick={handleVariableSuggestionClick}
+                className="nowheel"
               />
 
               <FormHelperText variant="outlined">{description}</FormHelperText>