Merge pull request #2398 from automatisch/AUT-1341

feat: preserve query params when navigating back to flow page from flow editor

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

@@ -8,7 +8,7 @@ import Snackbar from '@mui/material/Snackbar';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import * as React from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import { ReactFlowProvider } from 'reactflow';
 
 import Can from 'components/Can';
@@ -32,6 +32,7 @@ const useNewFlowEditor = process.env.REACT_APP_USE_NEW_FLOW_EDITOR === 'true';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
+  const { state } = useLocation();
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: updateFlow } = useUpdateFlow(flowId);
@@ -81,7 +82,7 @@ export default function EditorLayout() {
             <IconButton
               size="small"
               component={Link}
-              to={URLS.FLOWS}
+              to={state?.from || URLS.FLOWS}
               data-test="editor-go-back-button"
             >
               <ArrowBackIosNewIcon fontSize="small" />

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

@@ -3,7 +3,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useQueryClient } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 
 import Can from 'components/Can';
 import FlowFolderChangeDialog from 'components/FlowFolderChangeDialog';
@@ -17,6 +17,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useIsCurrentUserAdmin from 'hooks/useIsCurrentUserAdmin';
 
 function ContextMenu(props) {
+  const location = useLocation();
   const { flowId, onClose, anchorEl, onDuplicateFlow, appKey } = props;
 
   const [showFlowFolderChangeDialog, setShowFlowFolderChangeDialog] =
@@ -120,6 +121,9 @@ function ContextMenu(props) {
               disabled={!allowed}
               component={Link}
               to={URLS.FLOW(flowId)}
+              state={{
+                from: `${location.pathname}${location.search}${location.hash}`,
+              }}
             >
               {formatMessage('flow.view')}
             </MenuItem>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import IconButton from '@mui/material/IconButton';
 import CardActionArea from '@mui/material/CardActionArea';
@@ -34,6 +34,7 @@ function getFlowStatusColor(status) {
 }
 
 function FlowRow(props) {
+  const location = useLocation();
   const formatMessage = useFormatMessage();
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -63,6 +64,9 @@ function FlowRow(props) {
           component={Link}
           to={URLS.FLOW(flow.id)}
           data-test="card-action-area"
+          state={{
+            from: `${location.pathname}${location.search}${location.hash}`,
+          }}
         >
           <CardContent>
             <Apps direction="row" gap={1} sx={{ gridArea: 'apps' }}>