Embedded Cluster: Improve UX for license installation process (#4799)

web/src/Root.tsx

@@ -55,6 +55,7 @@ import AppSnapshots from "@components/snapshots/AppSnapshots";
 import AppSnapshotRestore from "@components/snapshots/AppSnapshotRestore";
 import EmbeddedClusterViewNode from "@components/apps/EmbeddedClusterViewNode";
 import UpgradeStatusModal from "@components/modals/UpgradeStatusModal";
+import AppLoading from "@components/apps/AppLoading";
 
 // react-query client
 const queryClient = new QueryClient();
@@ -573,6 +574,7 @@ const Root = () => {
                   />
                 }
               />
+              <Route path="/cluster/loading" element={<AppLoading />} />
               <Route path="/install-with-helm" element={<InstallWithHelm />} />
               <Route
                 path="/restore"

web/src/components/UploadLicenseFile.tsx

@@ -133,7 +133,10 @@ const UploadLicenseFile = (props: Props) => {
     if (appsListLength > 0 && isEmbeddedCluster) {
       navigate(`/app/${appSlugFromMetadata}`, { replace: true });
     }
-  }, [props.appsListLength]);
+    if (appsListLength === 0 && isEmbeddedCluster) {
+      navigate(`/cluster/loading`, { replace: true });
+    }
+  }, [props.appsListLength, props.isEmbeddedCluster]);
 
   const exchangeRliFileForLicense = async (content: string) => {
     return new Promise((resolve, reject) => {

web/src/components/apps/AppDetailPage.tsx

@@ -99,8 +99,10 @@ function AppDetailPage(props: Props) {
     // navigate to first app if available
     if (appsList && appsList?.length > 0) {
       navigate(`/app/${appsList[0].slug}`, { replace: true });
-    } else if (Utilities.isLoggedIn()) {
+    } else if (Utilities.isLoggedIn() && !props.isEmbeddedCluster) {
       navigate("/upload-license", { replace: true });
+    } else if (Utilities.isLoggedIn() && props.isEmbeddedCluster) {
+      navigate("/cluster/loading", { replace: true });
     } else {
       navigate("/secure-console", { replace: true });
     }

web/src/components/apps/AppLoading.tsx

@@ -0,0 +1,27 @@
+import { useApps } from "@features/App";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const AppLoading = () => {
+  const navigate = useNavigate();
+
+  const { data: appsData } = useApps({ refetchInterval: 3000 });
+
+  const { apps: appsList } = appsData || {};
+
+  useEffect(() => {
+    // if no apps are present, return
+    if (appsList?.length === 0) {
+      return;
+    } else {
+      navigate("/");
+    }
+  }, [appsData]);
+  return (
+    <div className="flex justifyContent--center alignItems--center tw-h-full">
+      <p>Waiting for license to install...</p>
+    </div>
+  );
+};
+
+export default AppLoading;