From e316beff83d6b363aa2285bbc06864172c823f9f Mon Sep 17 00:00:00 2001
From: Frank Flitton <fflitton@gmail.com>
Date: Wed, 17 May 2023 13:26:02 -0700
Subject: [PATCH] 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 <fflitton@gmail.com>

* change style of react import

Signed-off-by: Frank Flitton <fflitton@gmail.com>

---------

Signed-off-by: Frank Flitton <fflitton@gmail.com>
---
 .../Tables/WorkflowExecutionLink.tsx          | 16 +++--
 .../test/WorkflowExecutionLink.test.tsx       | 60 +++++++++++++++++++
 2 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 packages/console/src/components/Executions/Tables/test/WorkflowExecutionLink.test.tsx

diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionLink.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionLink.tsx
index 6c02ece66..b9e7029dd 100644
--- 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,7 +14,7 @@ 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';
 
@@ -22,12 +22,18 @@ export const WorkflowExecutionLink: React.FC<{
     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
new file mode 100644
index 000000000..a2730194f
--- /dev/null
+++ 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);
+});