Merge pull request #146 from onattech/Pipeline_UI_Improvements

Pipeline UI improvements
dataplane-app · Mar 3, 2022 · 577e7d5 · 577e7d5
2 parents a73c1aa + 9890dab
commit 577e7d5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/frontend/src/components/TableContent/PipelineTable/index.jsx b/frontend/src/components/TableContent/PipelineTable/index.jsx
@@ -111,7 +111,6 @@ const PipelineTable = ({ data, filter, setPipelineCount, environmentID }) => {
             <Box component="table" mt={4} width="100%" {...getTableProps()}>
                 <Box component="tbody" display="flex" sx={{ flexDirection: 'column' }} {...getTableBodyProps()}>
                     {rows.map((row, i) => {
-                        console.log(row);
                         prepareRow(row);
                         return (
                             <Box

diff --git a/frontend/src/pages/Flow.jsx b/frontend/src/pages/Flow.jsx
@@ -59,13 +59,17 @@ export const edgeTypes = {
 const useAddUpdatePipelineFlowfunc = () => {
     // GraphQL hook
     const addUpdatePipelineFlow = useAddUpdatePipelineFlow();
+
     // URI parameter
     const { pipelineId } = useParams();
 
+    // React router
+    const history = useHistory();
+
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
     // Update pipeline flow
-    return async (rawInput, environmentID) => {
+    return async (rawInput, environmentID, pipeline) => {
         // Prepare input to match the structure in the backend
         const input = prepareInputForBackend(rawInput);
 
@@ -78,6 +82,7 @@ const useAddUpdatePipelineFlowfunc = () => {
             response.errors.map((err) => enqueueSnackbar(err.message + ': update flow failed', { variant: 'error' }));
         } else {
             enqueueSnackbar('Success', { variant: 'success' });
+            history.push({ pathname: `/pipelines/view/${pipelineId}`, state: pipeline });
         }
     };
 };
@@ -93,18 +98,12 @@ const Flow = () => {
     const authState = useGlobalAuthState();
     const jwt = authState.authToken.get();
 
-    // Ref for scroll to top
-    const scrollRef = useRef(null);
-
-    // URI parameter
-    const { pipelineId } = useParams();
-
     useEffect(() => {
         if (!pipeline || Object.keys(pipeline).length === 0) {
             history.push('/');
             return null;
         }
-        scrollRef.current.parentElement.scrollIntoView();
+        document.querySelector('#root div').scrollTo(0, 0);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -240,11 +239,10 @@ const Flow = () => {
         if (reactFlowInstance) {
             const flowElements = reactFlowInstance.toObject();
             FlowState.elements.set([...flowElements.elements]);
-            updatePipelineFlow(flowElements.elements, Environment.id.get());
+            updatePipelineFlow(flowElements.elements, Environment.id.get(), pipeline);
             FlowState.isEditorPage.set(false);
             FlowState.selectedElement.set(null);
             RunState.run_id.set(0);
-            history.push({ pathname: `/pipelines/view/${pipelineId}`, state: pipeline });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [reactFlowInstance, jwt]);
@@ -298,7 +296,7 @@ const Flow = () => {
     };
 
     return (
-        <Box className="page" height="calc(100vh - 100px)" minHeight="min-content" ref={scrollRef}>
+        <Box className="page" height="calc(100vh - 100px)" minHeight="min-content">
             <Box ref={offsetRef}>
                 <Grid container alignItems="center" justifyContent="space-between" wrap="nowrap">
                     <Box display="flex">

diff --git a/frontend/src/pages/Pipelines.jsx b/frontend/src/pages/Pipelines.jsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Typography, TextField, MenuItem, Button, Drawer } from '@mui/material';
+import { Box, Grid, Typography, Button, Drawer } from '@mui/material';
 import Search from '../components/Search';
 import CustomChip from '../components/CustomChip';
 import PipelineTable from '../components/TableContent/PipelineTable';
@@ -7,7 +7,7 @@ import PipelinePageItem from '../components/MoreInfoContent/PipelinePageItem';
 import { useGlobalEnvironmentState } from '../components/EnviromentDropdown';
 import AddPipelineDrawer from '../components/DrawerContent/AddPipelineDrawer';
 import { useGetPipelines } from '../graphql/getPipelines';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { useGlobalFlowState } from './Flow';
 import { useGlobalRunState } from './View/useWebSocket';
@@ -28,9 +28,6 @@ const Pipelines = () => {
     const [filter, setFilter] = useState();
     const [pipelineCount, setPipelineCount] = useState();
 
-    // Ref for scroll to top
-    const scrollRef = useRef(null);
-
     // Custom GraphQL hook
     const getPipelines = useGetPipelines_(setPipelines, Environment.id.get());
 
@@ -50,13 +47,13 @@ const Pipelines = () => {
             triggerDelete: 1,
         });
         RunState.set({});
-        scrollRef.current.parentElement.scrollIntoView();
+        document.querySelector('#root div').scrollTo(0, 0);
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [Environment.id.get()]);
 
     return (
-        <Box className="page" position="relative" ref={scrollRef}>
+        <Box className="page" position="relative">
             <Box sx={{ width: { xl: '85%' } }}>
                 <Grid container alignItems="center" justifyContent="space-between">
                     <Box>

diff --git a/frontend/src/pages/View/index.jsx b/frontend/src/pages/View/index.jsx
@@ -39,7 +39,6 @@ const View = () => {
     //Offset states and refs
     const [offsetHeight, setOffsetHeight] = useState(0);
     const offsetRef = useRef(null);
-    const scrollRef = useRef(null);
 
     useEffect(() => {
         setOffsetHeight(offsetRef.current.clientHeight);
@@ -68,7 +67,7 @@ const View = () => {
             history.push('/');
             return null;
         }
-        scrollRef.current.parentElement.scrollIntoView();
+        document.querySelector('#root div').scrollTo(0, 0);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -128,7 +127,7 @@ const View = () => {
     };
 
     return (
-        <Box className="page" height="calc(100vh - 100px)" minHeight="min-content" ref={scrollRef}>
+        <Box className="page" height="calc(100vh - 100px)" minHeight="min-content">
             <Box ref={offsetRef}>
                 <Grid container alignItems="center" justifyContent="space-between" wrap="nowrap">
                     <Box display="flex" alignItems="center">
@@ -180,6 +179,9 @@ const View = () => {
                             onMoveEnd={onMoveEnd}
                             nodeTypes={nodeTypes}
                             elements={elements}
+                            nodesDraggable={false}
+                            nodesConnectable={false}
+                            preventScrolling={false}
                             onLoad={onLoad}
                             onConnect={onConnect}
                             onConnectStart={onConnectStart}