Merge pull request #1700 from automatisch/AUT-782

feat: make flow editor topbar sticky

packages/web/src/components/EditorLayout/index.jsx

@@ -17,6 +17,7 @@ import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import * as URLS from 'config/urls';
+import { TopBar } from './style';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
@@ -67,60 +68,60 @@ export default function EditorLayout() {
   );
   return (
     <>
-      <Stack direction="column" height="100%">
+      <TopBar
-        <Stack
+        direction="row"
-          direction="row"
+        bgcolor="white"
-          bgcolor="white"
+        justifyContent="space-between"
-          justifyContent="space-between"
+        alignItems="center"
-          alignItems="center"
+        boxShadow={1}
-          boxShadow={1}
+        py={1}
-          py={1}
+        px={1}
-          px={1}
+        className="mui-fixed"
-        >
+      >
-          <Box display="flex" flex={1} alignItems="center">
+        <Box display="flex" flex={1} alignItems="center">
-            <Tooltip
+          <Tooltip
-              placement="right"
+            placement="right"
-              title={formatMessage('flowEditor.goBack')}
+            title={formatMessage('flowEditor.goBack')}
-              disableInteractive
+            disableInteractive
-            >
+          >
-              <IconButton
+            <IconButton
-                size="small"
-                component={Link}
-                to={URLS.FLOWS}
-                data-test="editor-go-back-button"
-              >
-                <ArrowBackIosNewIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-
-            {!loading && (
-              <EditableTypography
-                variant="body1"
-                onConfirm={onFlowNameUpdate}
-                noWrap
-                sx={{ display: 'flex', flex: 1, maxWidth: '50vw', ml: 2 }}
-              >
-                {flow?.name}
-              </EditableTypography>
-            )}
-          </Box>
-
-          <Box pr={1}>
-            <Button
-              variant="contained"
               size="small"
-              onClick={() => onFlowStatusUpdate(!flow.active)}
+              component={Link}
-              data-test={
+              to={URLS.FLOWS}
-                flow?.active ? 'unpublish-flow-button' : 'publish-flow-button'
+              data-test="editor-go-back-button"
-              }
             >
-              {flow?.active
+              <ArrowBackIosNewIcon fontSize="small" />
-                ? formatMessage('flowEditor.unpublish')
+            </IconButton>
-                : formatMessage('flowEditor.publish')}
+          </Tooltip>
-            </Button>
-          </Box>
-        </Stack>
 
+          {!loading && (
+            <EditableTypography
+              variant="body1"
+              onConfirm={onFlowNameUpdate}
+              noWrap
+              sx={{ display: 'flex', flex: 1, maxWidth: '50vw', ml: 2 }}
+            >
+              {flow?.name}
+            </EditableTypography>
+          )}
+        </Box>
+
+        <Box pr={1}>
+          <Button
+            variant="contained"
+            size="small"
+            onClick={() => onFlowStatusUpdate(!flow.active)}
+            data-test={
+              flow?.active ? 'unpublish-flow-button' : 'publish-flow-button'
+            }
+          >
+            {flow?.active
+              ? formatMessage('flowEditor.unpublish')
+              : formatMessage('flowEditor.publish')}
+          </Button>
+        </Box>
+      </TopBar>
+      <Stack direction="column" height="100%">
         <Container maxWidth="md">
           <EditorProvider value={{ readOnly: !!flow?.active }}>
             {!flow && !loading && 'not found'}

packages/web/src/components/EditorLayout/style.js

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+
+export const TopBar = styled(Stack)(({ theme }) => ({
+  zIndex: theme.zIndex.appBar,
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  right: 0,
+}));

packages/web/src/styles/theme.js

@@ -225,7 +225,7 @@ export const defaultTheme = createTheme({
           textDecoration: 'none',
         },
         '#root': {
-          height: '100vh',
+          minHeight: '100vh',
         },
       },
     },
@@ -297,6 +297,6 @@ export const mationTheme = createTheme(
         },
       },
     },
-  })
+  }),
 );
 export default defaultTheme;