Refactor Modules component to navigate to a redirect page with the launch URL as a query parameter instead of opening it in a new tab. Add new route for ModuleLaunchRedirect in tenant admin routes for improved URL handling.

src/pages/ModuleLaunchRedirect.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import type { ReactElement } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const ModuleLaunchRedirect = (): ReactElement => {
+  const [searchParams] = useSearchParams();
+  const launchUrl = searchParams.get('url');
+
+  useEffect(() => {
+    if (launchUrl) {
+      // Make a fetch request with custom headers
+      fetch(launchUrl, {
+        method: 'GET',
+        headers: {
+          'bypass-tunnel-reminder': 'true',
+        },
+        credentials: 'include',
+      })
+        .catch(() => {
+          // Ignore fetch errors, we'll still open the URL
+        })
+        .finally(() => {
+          // Open the external URL in a new tab
+          window.open(launchUrl, '_blank', 'noopener,noreferrer');
+        });
+    }
+  }, [launchUrl]);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-sm text-[#6b7280]">Redirecting...</div>
+    </div>
+  );
+};
+
+export default ModuleLaunchRedirect;

src/pages/tenant/Modules.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { ReactElement } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Layout } from '@/components/layout/Layout';
 import {
   StatusBadge,
@@ -27,6 +28,7 @@ const getStatusVariant = (status: string | null): 'success' | 'failure' | 'proce
 };
 
 const Modules = (): ReactElement => {
+  const navigate = useNavigate();
   const { roles, tenantId } = useAppSelector((state) => state.auth);
   // const tenantId = useAppSelector((state) => state.auth.tenantId);
   const [modules, setModules] = useState<AssignedModule[]>([]);
@@ -80,21 +82,9 @@ const Modules = (): ReactElement => {
       const launchTenantId = isSuperAdmin ? tenantId : null;
       const response = await moduleService.launch(moduleId, launchTenantId);
       if (response.success && response.data.launch_url) {
-        // Make a fetch request with custom headers first
+        // Navigate to redirect page with launch URL as query param
-        try {
+        const encodedUrl = encodeURIComponent(response.data.launch_url);
-          await fetch(response.data.launch_url, {
+        navigate(`/tenant/module-launch?url=${encodedUrl}`);
-            method: 'GET',
-            headers: {
-              'bypass-tunnel-reminder': 'true',
-            },
-            credentials: 'include',
-          });
-        } catch (fetchError) {
-          // Ignore fetch errors, we'll still open the URL
-          console.warn('Failed to send header request:', fetchError);
-        }
-        // Open the URL in a new tab
-        window.open(response.data.launch_url, '_blank', 'noopener,noreferrer');
       }
     } catch (err: any) {
       setError(err?.response?.data?.error?.message || 'Failed to launch module');

src/routes/tenant-admin-routes.tsx

@@ -8,6 +8,7 @@ const Settings = lazy(() => import('@/pages/tenant/Settings'));
 const Users = lazy(() => import('@/pages/tenant/Users'));
 const AuditLogs = lazy(() => import('@/pages/tenant/AuditLogs'));
 const Modules = lazy(() => import('@/pages/tenant/Modules'));
+const ModuleLaunchRedirect = lazy(() => import('@/pages/ModuleLaunchRedirect'));
 
 // Loading fallback component
 const RouteLoader = (): ReactElement => (
@@ -54,4 +55,8 @@ export const tenantAdminRoutes: RouteConfig[] = [
     path: '/tenant/settings',
     element: <LazyRoute component={Settings} />,
   },
+  {
+    path: '/tenant/module-launch',
+    element: <LazyRoute component={ModuleLaunchRedirect} />,
+  },
 ];