Bug: Execution Page's back button returns Workflows route from Launch…

… Plan route #patch (#760) * Bug: execution page back button from launch plan Signed-off-by: Frank Flitton <[email protected]> * change style of react import Signed-off-by: Frank Flitton <[email protected]> --------- Signed-off-by: Frank Flitton <[email protected]>
flyteorg · May 17, 2023 · e316bef · e316bef
1 parent 3e8f517
commit e316bef
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 5 deletions.
diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionLink.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionLink.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import classnames from 'classnames';
 import { useCommonStyles } from 'components/common/styles';
 import { WorkflowExecutionIdentifier } from 'models/Execution/types';
-import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { history } from 'routes/history';
@@ -14,20 +14,26 @@ export const WorkflowExecutionLink: React.FC<{
 }> = ({ className, color = 'primary', id }) => {
   const commonStyles = useCommonStyles();
   const {
-    location: { pathname },
+    location: { pathname, hash, search },
   } = history;
   const fromExecutionNav = pathname.split('/').pop() === 'executions';
 
   const linkColor =
     color === 'disabled'
       ? commonStyles.secondaryLink
       : commonStyles.primaryLink;
+
+  // preserve router deep link state
+  const backLink = pathname + search + hash;
+
   return (
     <RouterLink
       className={classnames(linkColor, className)}
-      to={`${Routes.ExecutionDetails.makeUrl(id)}${
-        fromExecutionNav ? '?fromExecutionNav=true' : ''
-      }`}
+      to={{
+        pathname: `${Routes.ExecutionDetails.makeUrl(id)}`,
+        search: fromExecutionNav ? '?fromExecutionNav=true' : '',
+        state: { backLink },
+      }}
     >
       {id.name}
     </RouterLink>

diff --git a/packages/console/src/components/Executions/Tables/test/WorkflowExecutionLink.test.tsx b/packages/console/src/components/Executions/Tables/test/WorkflowExecutionLink.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Router, Route } from 'react-router-dom';
+import { history } from 'routes/history';
+import { WorkflowExecutionIdentifier } from 'models';
+import { fireEvent, render } from '@testing-library/react';
+import { WorkflowExecutionLink } from '../WorkflowExecutionLink';
+
+const testWorkflowId = {
+  name: 'click-me',
+  project: 'test-project',
+  domain: 'test-domain',
+} as WorkflowExecutionIdentifier;
+
+const TestSubjectApp = () => (
+  <div>
+    <Route
+      exact
+      path="/console/projects/flytesnacks/domains/development/executions/:executionId"
+      render={() => (
+        <div>
+          <h1>Welcome</h1>
+        </div>
+      )}
+    />
+    <Route
+      path="/console/projects/flytesnacks/domains/development/launchPlans/:launchPlanName"
+      render={() => (
+        <div>
+          <h1>Dashboard</h1>
+          <WorkflowExecutionLink
+            id={testWorkflowId}
+            className="test-click-me"
+          />
+        </div>
+      )}
+    />
+  </div>
+);
+
+it('should format a backlink on navigation', () => {
+  const initialPathname =
+    '/console/projects/flytesnacks/domains/development/launchPlans/testId';
+  const initialUrl = `${initialPathname}?foo=bar#hash`;
+
+  history.push(initialUrl);
+
+  const testRender = render(
+    <Router history={history}>
+      Foo
+      <TestSubjectApp />
+    </Router>,
+  );
+
+  expect(history.location.pathname).toBe(initialPathname);
+
+  fireEvent.click(testRender.getByText(testWorkflowId.name));
+
+  // Navigated
+  expect(history.location.state?.backLink).toBe(initialUrl);
+});