feat: receive request for URL and broadcast url change (#1753)

## Description:
as the title says 

## Is this change user facing?
YES

## References (if applicable):
<!-- Add relevant Github Issues, Discord threads, or other helpful
information. -->

---------

Co-authored-by: Tedi Mitiku <tedi.m52@gmail.com>

enclave-manager/web/src/client/constants.ts

@@ -1,19 +1,21 @@
 import { isDefined } from "../utils";
 
-export const KURTOSIS_EM_DEFAULT_HOST = process.env.REACT_APP_KURTOSIS_DEFAULT_HOST || "localhost";
+// Configurable:
+export const KURTOSIS_CLOUD_PROTOCOL = "https";
+export const KURTOSIS_CLOUD_HOST = "cloud.kurtosis.com";
+export const KURTOSIS_CLOUD_CONNECT_PAGE = "connect";
 
+// Cloud
+export const KURTOSIS_CLOUD_UI_URL =
+  process.env.REACT_APP_KURTOSIS_CLOUD_UI_URL || `${KURTOSIS_CLOUD_PROTOCOL}://${KURTOSIS_CLOUD_HOST}`;
+export const KURTOSIS_CLOUD_CONNECT_URL = `${KURTOSIS_CLOUD_PROTOCOL}://${KURTOSIS_CLOUD_HOST}/${KURTOSIS_CLOUD_CONNECT_PAGE}`;
+export const KURTOSIS_PACKAGE_INDEXER_URL =
+  process.env.REACT_APP_KURTOSIS_PACKAGE_INDEXER_URL || `${KURTOSIS_CLOUD_PROTOCOL}://${KURTOSIS_CLOUD_HOST}:9770`;
+
+// EM API
+export const KURTOSIS_EM_DEFAULT_HOST = process.env.REACT_APP_KURTOSIS_DEFAULT_HOST || "localhost";
 export const KURTOSIS_DEFAULT_EM_API_PORT = isDefined(process.env.REACT_APP_KURTOSIS_DEFAULT_EM_API_PORT)
   ? parseInt(process.env.REACT_APP_KURTOSIS_DEFAULT_EM_API_PORT)
   : 8081;
-
 export const KURTOSIS_EM_API_DEFAULT_URL =
   process.env.REACT_APP_KURTOSIS_DEFAULT_URL || `http://${KURTOSIS_EM_DEFAULT_HOST}:${KURTOSIS_DEFAULT_EM_API_PORT}`;
-
-export const KURTOSIS_CLOUD_HOST = "cloud.kurtosis.com";
-export const KURTOSIS_CLOUD_CONNECT_PAGE = "connect";
-export const KURTOSIS_CLOUD_UI_URL = process.env.REACT_APP_KURTOSIS_CLOUD_UI_URL || `https://${KURTOSIS_CLOUD_HOST}`;
-
-export const KURTOSIS_CLOUD_CONNECT_URL = `https://${KURTOSIS_CLOUD_HOST}/${KURTOSIS_CLOUD_CONNECT_PAGE}`;
-
-export const KURTOSIS_PACKAGE_INDEXER_URL =
-  process.env.REACT_APP_KURTOSIS_PACKAGE_INDEXER_URL || `https://${KURTOSIS_CLOUD_HOST}:9770`;

enclave-manager/web/src/client/enclaveManager/KurtosisClient.ts

@@ -53,6 +53,20 @@ export abstract class KurtosisClient {
     this.baseApplicationUrl = childUrl;
     console.log("cloudUrl", this.cloudUrl);
     console.log("baseApplicationUrl", this.baseApplicationUrl);
+    this.getParentRequestedRoute();
+  }
+
+  getParentRequestedRoute() {
+    const splits = this.cloudUrl.pathname.split("/enclave-manager");
+    if (splits[1]) {
+      console.log("splits ", splits[1]);
+      return splits[1];
+    }
+    return undefined;
+  }
+
+  getCloudUrl() {
+    return this.cloudUrl;
   }
 
   isRunningInCloud() {

enclave-manager/web/src/components/LocationBroadcaster.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const LocationBroadcaster = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    const message = { message: "em-ui-location-pathname", value: location.pathname };
+    console.log("Broadcasting message to parent", message);
+    // eslint-disable-next-line no-restricted-globals
+    parent.postMessage(message, "*");
+  }, [location.pathname]);
+
+  return <></>;
+};

enclave-manager/web/src/components/LocationListener.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useKurtosisClient } from "../client/enclaveManager/KurtosisClientContext";
+
+export const LocationListener = () => {
+  const client = useKurtosisClient();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (client.getCloudUrl()) {
+      console.log(client.getParentRequestedRoute());
+      const route = client.getParentRequestedRoute();
+      if (route) navigate(route);
+    }
+  }, [client.getCloudUrl()]);
+
+  return <></>;
+};

enclave-manager/web/src/emui/App.tsx

@@ -8,6 +8,8 @@ import {
 import { AppLayout } from "../components/AppLayout";
 import { CreateEnclave } from "../components/enclaves/CreateEnclave";
 import { KurtosisThemeProvider } from "../components/KurtosisThemeProvider";
+import { LocationBroadcaster } from "../components/LocationBroadcaster";
+import { LocationListener } from "../components/LocationListener";
 import { catalogRoutes } from "./catalog/CatalogRoutes";
 import { enclaveRoutes } from "./enclaves/EnclaveRoutes";
 import { Navbar } from "./Navbar";
@@ -37,6 +39,8 @@ const KurtosisRouter = () => {
               <AppLayout Nav={<Navbar baseApplicationUrl={kurtosisClient.getBaseApplicationUrl()} />}>
                 <Outlet />
                 <CreateEnclave />
+                <LocationBroadcaster />
+                <LocationListener />
               </AppLayout>
             ),
             children: [

enclave-manager/web/src/emui/enclaves/enclave/service/logs/ServiceLogs.tsx

@@ -67,7 +67,7 @@ export const ServiceLogs = ({ enclave, service }: ServiceLogsProps) => {
         throw error;
       }
     };
-    reTryCatch(callback, 100);
+    reTryCatch(callback, 25);
     return () => {
       canceled = true;
       abortController.abort();

engine/server/webapp/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "./static/js/main.079973fb.js",
+    "main.js": "./static/js/main.bb9ebbb3.js",
     "index.html": "./index.html",
-    "main.079973fb.js.map": "./static/js/main.079973fb.js.map"
+    "main.bb9ebbb3.js.map": "./static/js/main.bb9ebbb3.js.map"
   },
   "entrypoints": [
-    "static/js/main.079973fb.js"
+    "static/js/main.bb9ebbb3.js"
   ]
 }

engine/server/webapp/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.079973fb.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.bb9ebbb3.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>