Persist tab state in url

Signed-off-by: Tyler Ohlsen <[email protected]>

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

public/pages/workflows/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { Workflows } from './workflows';
+export * from './workflows';

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);
               },
             },
           ]}