From 4417e1f204ed709790179de4e96b8a843ea937ab Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 5 Oct 2023 16:31:45 -0700
Subject: [PATCH] Persist tab state in url

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 public/app.tsx                       |  5 ++-
 public/pages/workflows/index.ts      |  2 +-
 public/pages/workflows/workflows.tsx | 46 +++++++++++++++++++++++++---
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/public/app.tsx b/public/app.tsx
index 89839bcd..393a0145 100644
--- a/public/app.tsx
+++ b/public/app.tsx
@@ -12,6 +12,7 @@ import {
   Workflows,
   WorkflowDetail,
   WorkflowDetailRouterProps,
+  WorkflowsRouterProps,
 } from './pages';
 
 interface Props extends RouteComponentProps {}
@@ -61,7 +62,9 @@ export const AiFlowDashboardsApp = (props: Props) => {
         />
         <Route
           path={APP_PATH.WORKFLOWS}
-          render={(routeProps: RouteComponentProps) => <Workflows />}
+          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
+            <Workflows {...routeProps} />
+          )}
         />
         {/* Defaulting to Overview page */}
         <Route
diff --git a/public/pages/workflows/index.ts b/public/pages/workflows/index.ts
index 047a1868..32172f02 100644
--- a/public/pages/workflows/index.ts
+++ b/public/pages/workflows/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { Workflows } from './workflows';
+export * from './workflows';
diff --git a/public/pages/workflows/workflows.tsx b/public/pages/workflows/workflows.tsx
index fd1c3be8..c79a8736 100644
--- a/public/pages/workflows/workflows.tsx
+++ b/public/pages/workflows/workflows.tsx
@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { RouteComponentProps, useLocation } from 'react-router-dom';
 import {
   EuiPageHeader,
   EuiTitle,
@@ -12,20 +13,55 @@ import {
   EuiPageContent,
   EuiSpacer,
 } from '@elastic/eui';
+import queryString from 'query-string';
+import { useSelector } from 'react-redux';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 import { WorkflowList } from './workflow_list';
 import { NewWorkflow } from './new_workflow';
+import { AppState } from '../../store';
+
+export interface WorkflowsRouterProps {}
+
+interface WorkflowsProps extends RouteComponentProps<WorkflowsRouterProps> {}
 
 enum WORKFLOWS_TAB {
   MANAGE = 'manage',
   CREATE = 'create',
 }
 
-export function Workflows() {
-  const [selectedTabId, setSelectedTabId] = useState<WORKFLOWS_TAB>(
-    WORKFLOWS_TAB.MANAGE
-  );
+const ACTIVE_TAB_PARAM = 'active_tab';
+
+function replaceActiveTab(activeTab: string, props: WorkflowsProps) {
+  props.history.replace({
+    ...history,
+    search: queryString.stringify({
+      [ACTIVE_TAB_PARAM]: activeTab,
+    }),
+  });
+}
+
+export function Workflows(props: WorkflowsProps) {
+  const { workflows } = useSelector((state: AppState) => state.workflows);
+
+  const tabFromUrl = queryString.parse(useLocation().search)[
+    ACTIVE_TAB_PARAM
+  ] as WORKFLOWS_TAB;
+  const [selectedTabId, setSelectedTabId] = useState<WORKFLOWS_TAB>(tabFromUrl);
+
+  // If there is no selected tab, default to a tab depending on if user
+  // has existing created workflows or not.
+  useEffect(() => {
+    if (!selectedTabId) {
+      if (workflows?.length > 0) {
+        setSelectedTabId(WORKFLOWS_TAB.MANAGE);
+        replaceActiveTab(WORKFLOWS_TAB.MANAGE, props);
+      } else {
+        setSelectedTabId(WORKFLOWS_TAB.CREATE);
+        replaceActiveTab(WORKFLOWS_TAB.CREATE, props);
+      }
+    }
+  }, [selectedTabId, workflows]);
 
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
@@ -46,6 +82,7 @@ export function Workflows() {
               isSelected: selectedTabId === WORKFLOWS_TAB.MANAGE,
               onClick: () => {
                 setSelectedTabId(WORKFLOWS_TAB.MANAGE);
+                replaceActiveTab(WORKFLOWS_TAB.MANAGE, props);
               },
             },
             {
@@ -54,6 +91,7 @@ export function Workflows() {
               isSelected: selectedTabId === WORKFLOWS_TAB.CREATE,
               onClick: () => {
                 setSelectedTabId(WORKFLOWS_TAB.CREATE);
+                replaceActiveTab(WORKFLOWS_TAB.CREATE, props);
               },
             },
           ]}