Feature/ns to gw redirect (#1162)

* fix some capitlization

* fix no gw redirect handling and add toast

Author: rustyjux

e2e/cypress/tests/20-gateways/01-list.ts

@@ -47,6 +47,12 @@ describe('My Gateways list page', () => {
     });
   })
 
+  it('Verify redirect to My Gateways page if no gateway selected', () => {
+    cy.visit(ns.detailPath)
+    cy.wait(2000)
+    cy.verifyToastMessage('First select a Gateway to view that page')
+  })
+
   it('Check Gateway link goes to details page', () => {  
     cy.visit(ns.listPath)
     cy.get(`[data-testid="ns-list-activate-link-${gateways["namespace1"].gatewayId + '-' + customId}"]`).click()

src/nextapp/components/no-gateway-redirect/gateway-toast-handler.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useToast } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+
+const GatewayToastHandler = () => {
+  const toast = useToast();
+  const router = useRouter();
+
+  React.useEffect(() => {
+    const handleRouteChange = () => {
+      const showToast = localStorage.getItem('showNoGatewayToast');
+      if (showToast === 'true') {
+        toast.closeAll();
+        toast({
+          title: `First select a Gateway to view that page`,
+          status: 'error',
+          isClosable: true,
+          duration: 5000,
+        });
+        localStorage.removeItem('showNoGatewayToast');
+      }
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [toast, router]);
+
+  return null;
+};
+
+export default GatewayToastHandler;

src/nextapp/components/no-gateway-redirect/no-gateway-redirect.tsx

@@ -5,14 +5,41 @@ import { useAuth } from '@/shared/services/auth';
 const NoGatewayRedirect = () => {
   const router = useRouter();
   const { user } = useAuth();
-  const hasNamespace = !!user?.namespace;
+  const [isChecking, setIsChecking] = React.useState(true);
 
   React.useEffect(() => {
-    if (!hasNamespace) {
-      router.push('/manager/gateways/list');
-    }
-  }, [hasNamespace]);
-  return null
+    const checkNamespaceAndRedirect = async () => {
+      // Wait for a short period to ensure user data is loaded
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      
+      setIsChecking(false);
+
+      if (!user?.namespace) {        
+        try {
+          // Set localStorage item to show toast
+          await new Promise<void>((resolve, reject) => {
+            try {
+              localStorage.setItem('showNoGatewayToast', 'true');
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          });
+          await router.push('/manager/gateways/list');
+        } catch (error) {
+          console.error('Error during redirect process:', error);
+        }
+      }
+    };
+
+    checkNamespaceAndRedirect();
+  }, [user, router]);
+
+  if (isChecking) {
+    return null; // could return a loading indicator
+  }
+
+  return null;
 };
 
-export default NoGatewayRedirect;
+export default NoGatewayRedirect;

src/nextapp/pages/_app.tsx

@@ -31,6 +31,7 @@ import '@/shared/styles/global.css';
 import { AppWrapper } from './context';
 import '../../mocks';
 import CompleteProfile from '@/components/complete-profile';
+import GatewayToastHandler from '@/components/no-gateway-redirect/gateway-toast-handler';
 
 const footerItems = [
   { href: 'http://www2.gov.bc.ca/gov/content/home', text: 'Home' },
@@ -122,6 +123,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                 }}
               >
                 <AppWrapper router={router}>
+                  <GatewayToastHandler />
                   <Component {...pageProps} />
                 </AppWrapper>
               </Box>

src/nextapp/pages/manager/gateways/list.tsx

@@ -106,7 +106,7 @@ const MyGatewaysPage: React.FC = () => {
   const handleNamespaceChange = React.useCallback(
     (namespace: Namespace) => async () => {
       toast({
-        title: `Switching to gateway: ${namespace.displayName}`,
+        title: `Switching to Gateway: ${namespace.displayName}`,
         status: 'info',
         isClosable: true,
       });
@@ -116,15 +116,15 @@ const MyGatewaysPage: React.FC = () => {
         toast.closeAll();
         client.invalidateQueries();
         toast({
-          title: `Switched to gateway: ${namespace.displayName}`,
+          title: `Switched to Gateway: ${namespace.displayName}`,
           status: 'success',
           isClosable: true,
         });
         await router.push('/manager/gateways/detail');
       } catch (err) {
         toast.closeAll();
         toast({
-          title: 'Unable to switch gateways',
+          title: 'Unable to switch Gateways',
           status: 'error',
           isClosable: true,
         });
@@ -264,11 +264,11 @@ const MyGatewaysPage: React.FC = () => {
           </Flex>
           {isSuccess &&
             (namespaceSearchResults.length === 1 ? (
-              <Text mb={4}>{namespaceSearchResults.length} gateway</Text>
+              <Text mb={4}>{namespaceSearchResults.length} Gateway</Text>
             ) : (
-              <Text mb={4}>{namespaceSearchResults.length} gateways</Text>
+              <Text mb={4}>{namespaceSearchResults.length} Gateways</Text>
             ))}
-          {isLoading && <Text mb={4}>Loading gateways...</Text>}
+          {isLoading && <Text mb={4}>Loading Gateways...</Text>}
           {isError && <Text mb={4}>Gateways failed to load</Text>}
           {isSuccess && (
             <>