From 43c5f9094ae6c1ca120b8b7f6589648f5c704c2e Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Fri, 23 Sep 2022 12:30:18 -0500
Subject: [PATCH] Tenant details navigation issues fix (#2336)

Fixes issues with Tenant details page navigation

- Back issue between tenant summary & tenants list page
- Not show the selected tab correctly on tenant details after clicking
back on browser's back button

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../Common/VerticalTabs/VerticalTabs.tsx      | 27 ++++++++++++++-----
 .../Tenants/ListTenants/TenantListItem.tsx    |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx b/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx
index 788d20360..a4919cfa4 100644
--- a/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx
+++ b/portal-ui/src/screens/Console/Common/VerticalTabs/VerticalTabs.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Box, Tab, TabProps } from "@mui/material";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import withStyles from "@mui/styles/withStyles";
 import { Theme, useTheme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { useLocation } from "react-router-dom";
 
 export type TabItemProps = {
   tabConfig: TabProps | any;
@@ -91,18 +92,28 @@ const VerticalTabs = ({
   routes,
   isRouteTabs,
 }: VerticalTabsProps) => {
-  const [value, setValue] = React.useState(selectedTab);
-
   const theme = useTheme();
+  const { pathname = "" } = useLocation();
+
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 
-  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue);
-  };
+  const [value, setValue] = useState(selectedTab);
 
   const headerList: TabProps[] = [];
   const contentList: React.ReactNode[] = [];
 
+  useEffect(() => {
+    if (isRouteTabs) {
+      const tabConfigElement = children.find(
+        (item) => item.tabConfig.to === pathname
+      );
+
+      if (tabConfigElement) {
+        setValue(tabConfigElement.tabConfig.value);
+      }
+    }
+  }, [isRouteTabs, children, pathname]);
+
   if (!children) return null;
 
   children.forEach((child) => {
@@ -110,6 +121,10 @@ const VerticalTabs = ({
     contentList.push(child.content);
   });
 
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+  };
+
   return (
     <TabContext value={`${value}`}>
       <Box className={classes.tabsContainer}>
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
index dda6f9a15..d15bf4da6 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
@@ -187,7 +187,7 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
       })
     );
     dispatch(getTenantAsync());
-    navigate(`/namespaces/${tenant.namespace}/tenants/${tenant.name}`);
+    navigate(`/namespaces/${tenant.namespace}/tenants/${tenant.name}/summary`);
   };
 
   return (