FIX: Organize Protected Routes and Fix Routing Issues for Unified Por…

…tal (#836) * Display UnstractAndLlmWhispererLogo in login page, if available * Refactor import of WhispererLogo to point to new path * Refactored routes and fixed related bugs * Rename logo name
Zipstack · Nov 12, 2024 · c7ebed4 · c7ebed4
1 parent e848165
commit c7ebed4
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 103 deletions.
diff --git a/frontend/src/components/helpers/auth/PersistentLogin.js b/frontend/src/components/helpers/auth/PersistentLogin.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 
 import useSessionValid from "../../../hooks/useSessionValid";
 import { useSessionStore } from "../../../store/session-store";
@@ -9,8 +9,15 @@ import { PromptRun } from "../../custom-tools/prompt-card/PromptRun";
 
 let selectedProductStore;
 let selectedProduct;
+let setSelectedProduct;
+let SELECTED_PRODUCT;
+let PRODUCT_NAMES = {};
 try {
   selectedProductStore = require("../../../plugins/llm-whisperer/store/select-product-store.js");
+  SELECTED_PRODUCT =
+    require("../../../plugins/llm-whisperer/helper").SELECTED_PRODUCT;
+  PRODUCT_NAMES =
+    require("../../../plugins/llm-whisperer/helper").PRODUCT_NAMES;
 } catch {
   // Ignore if hook not available
 }
@@ -19,16 +26,23 @@ function PersistentLogin() {
   const [isLoading, setIsLoading] = useState(true);
   const { sessionDetails } = useSessionStore();
   const checkSessionValidity = useSessionValid();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const selectedProductQueryParam = queryParams.get(SELECTED_PRODUCT);
 
   try {
     if (selectedProductStore?.useSelectedProductStore) {
       selectedProduct = selectedProductStore?.useSelectedProductStore(
         (state) => state?.selectedProduct
       );
+      setSelectedProduct = selectedProductStore.useSelectedProductStore(
+        (state) => state?.setSelectedProduct
+      );
     }
   } catch (error) {
     // Do nothing
   }
+
   useEffect(() => {
     let isMounted = true;
 
@@ -50,6 +64,15 @@ function PersistentLogin() {
     return () => (isMounted = false);
   }, [selectedProduct]);
 
+  useEffect(() => {
+    if (
+      selectedProductQueryParam &&
+      Object.values(PRODUCT_NAMES).includes(selectedProductQueryParam)
+    ) {
+      setSelectedProduct(selectedProductQueryParam);
+    }
+  }, [selectedProductQueryParam]);
+
   if (isLoading) {
     return <GenericLoader />;
   }

diff --git a/frontend/src/components/log-in/Login.jsx b/frontend/src/components/log-in/Login.jsx
@@ -5,56 +5,24 @@ import logo from "../../assets/UnstractLogoBlack.svg";
 import loginRightBanner from "../../assets/login-right-panel.svg";
 import { getBaseUrl } from "../../helpers/GetStaticData";
 import "./Login.css";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
 
 let LoginForm = null;
 let UnstractCloudLogo;
-let PRODUCT_NAMES = {};
-let SELECTED_PRODUCT;
-let selectedProductStore;
-let setSelectedProduct;
 try {
   LoginForm = require("../../plugins/login-form/LoginForm").LoginForm;
   UnstractCloudLogo =
     require("../../plugins/assets/llmWhisperer/index.js").UnstractCloudLogo;
-  PRODUCT_NAMES = require("../../plugins/llm-whisperer/helper").PRODUCT_NAMES;
-  SELECTED_PRODUCT =
-    require("../../plugins/llm-whisperer/helper").SELECTED_PRODUCT;
-  selectedProductStore = require("../../plugins/llm-whisperer/store/select-product-store.js");
 } catch {
   // The components will remain null of it is not available
 }
 
 function Login() {
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const selectedProduct = queryParams.get(SELECTED_PRODUCT);
   const baseUrl = getBaseUrl();
   const newURL = baseUrl + "/api/v1/login";
   const handleLogin = () => {
     window.location.href = newURL;
   };
 
-  try {
-    if (selectedProductStore?.useSelectedProductStore) {
-      setSelectedProduct = selectedProductStore.useSelectedProductStore(
-        (state) => state?.setSelectedProduct
-      );
-    }
-  } catch (error) {
-    // Do nothing
-  }
-
-  useEffect(() => {
-    if (
-      selectedProduct &&
-      Object.values(PRODUCT_NAMES).includes(selectedProduct)
-    ) {
-      setSelectedProduct(selectedProduct);
-    }
-  }, [selectedProduct]);
-
   return (
     <div className="login-main">
       <Row>

diff --git a/frontend/src/routes/Router.jsx b/frontend/src/routes/Router.jsx
@@ -12,43 +12,16 @@ import { RequireAuth } from "../components/helpers/auth/RequireAuth.js";
 import { ToolIdePage } from "../pages/ToolIdePage.jsx";
 import { OutputAnalyzerPage } from "../pages/OutputAnalyzerPage.jsx";
 
-let TrialRoutes;
-let ManualReviewPage;
-let SimpleManualReviewPage;
-let ReviewLayout;
 let PublicPromptStudioHelper;
-let PaymentSuccessful;
-let SelectProduct;
-
-try {
-  TrialRoutes =
-    require("../plugins/subscription/trial-page/TrialEndPage.jsx").TrialEndPage;
-} catch (err) {
-  // Do nothing, Not-found Page will be triggered.
-}
-
-try {
-  PaymentSuccessful =
-    require("../plugins/payment-successful/PaymentSuccessful.jsx").PaymentSuccessful;
-} catch (err) {
-  // Do nothing, Not-found Page will be triggered.
-}
 
-try {
-  ManualReviewPage =
-    require("../plugins/manual-review/page/ManualReviewPage.jsx").ManualReviewPage;
-  ReviewLayout =
-    require("../plugins/manual-review/review-layout/ReviewLayout.jsx").ReviewLayout;
-  SimpleManualReviewPage =
-    require("../plugins/manual-review/page/simple/SimpleManualReviewPage.jsx").SimpleManualReviewPage;
-} catch (err) {
-  // Do nothing, Not-found Page will be triggered.
-}
 // Import pages/components related to Simple Prompt Studio.
 let SimplePromptStudioHelper;
 let SimplePromptStudio;
 let SpsLanding;
 let SpsUpload;
+let TrialRoutes;
+let PaymentSuccessful;
+let SelectProduct;
 try {
   SimplePromptStudioHelper =
     require("../plugins/simple-prompt-studio/SimplePromptStudioHelper.jsx").SimplePromptStudioHelper;
@@ -82,6 +55,21 @@ try {
 } catch (err) {
   // Do nothing, Not-found Page will be triggered.
 }
+
+try {
+  TrialRoutes =
+    require("../plugins/subscription/trial-page/TrialEndPage.jsx").TrialEndPage;
+} catch (err) {
+  // Do nothing, Not-found Page will be triggered.
+}
+
+try {
+  PaymentSuccessful =
+    require("../plugins/payment-successful/PaymentSuccessful.jsx").PaymentSuccessful;
+} catch (err) {
+  // Do nothing, Not-found Page will be triggered.
+}
+
 function Router() {
   const MainAppRoute = useMainAppRoutes();
   return (
@@ -125,48 +113,25 @@ function Router() {
 
         {/* protected routes */}
         <Route path="setOrg" element={<SetOrgPage />} />
-        <Route path="">{MainAppRoute}</Route>
-        {llmWhispererRouter && (
-          <Route path="llm-whisperer">{llmWhispererRouter()}</Route>
-        )}
         <Route path="" element={<RequireAuth />}>
-          {ReviewLayout && ManualReviewPage && (
-            <Route path=":orgName" element={<ReviewLayout />}>
-              <Route
-                path="review"
-                element={<ManualReviewPage type="review" />}
-              ></Route>
-              <Route
-                path="simple_review/review"
-                element={<SimpleManualReviewPage type="simple_review" />}
-              ></Route>
-              <Route
-                path="simple_review/approve"
-                element={<SimpleManualReviewPage type="simple_approve" />}
-              ></Route>
-              <Route
-                path="review/download_and_sync"
-                element={<ManualReviewPage type="download" />}
-              />
-              <Route
-                path="review/approve"
-                element={<ManualReviewPage type="approve" />}
-              />
-            </Route>
+          <Route path="">{MainAppRoute}</Route>
+          {llmWhispererRouter && (
+            <Route path="llm-whisperer">{llmWhispererRouter()}</Route>
+          )}
+          {TrialRoutes && (
+            <Route path="/trial-expired" element={<TrialRoutes />} />
+          )}
+          {SelectProduct && (
+            <Route path="selectProduct" element={<SelectProduct />} />
+          )}
+          {PaymentSuccessful && (
+            <Route path="/payment/success" element={<PaymentSuccessful />} />
           )}
         </Route>
-        {TrialRoutes && (
-          <Route path="/trial-expired" element={<TrialRoutes />} />
-        )}
-        <Route path="*" element={<NotFound />} />
       </Route>
+
+      <Route path="*" element={<NotFound />} />
       <Route path="oauth-status" element={<OAuthStatus />} />
-      {SelectProduct && (
-        <Route path="selectProduct" element={<SelectProduct />} />
-      )}
-      {PaymentSuccessful && (
-        <Route path="/payment/success" element={<PaymentSuccessful />} />
-      )}
     </Routes>
   );
 }

diff --git a/frontend/src/routes/useMainAppRoutes.js b/frontend/src/routes/useMainAppRoutes.js
@@ -20,7 +20,6 @@ import { CustomToolsHelper } from "../components/helpers/custom-tools/CustomTool
 import { ToolIdePage } from "../pages/ToolIdePage.jsx";
 import { OutputAnalyzerPage } from "../pages/OutputAnalyzerPage.jsx";
 import { deploymentTypes } from "../helpers/GetStaticData.js";
-import { RequireAuth } from "../components/helpers/auth/RequireAuth.js";
 
 let RequirePlatformAdmin;
 let PlatformAdminPage;
@@ -30,6 +29,9 @@ let ChatAppLayout;
 let ManualReviewSettings;
 let OnboardProduct;
 let PRODUCT_NAMES = {};
+let ManualReviewPage;
+let SimpleManualReviewPage;
+let ReviewLayout;
 
 try {
   RequirePlatformAdmin =
@@ -66,9 +68,20 @@ try {
   // Do nothing.
 }
 
+try {
+  ManualReviewPage =
+    require("../plugins/manual-review/page/ManualReviewPage.jsx").ManualReviewPage;
+  ReviewLayout =
+    require("../plugins/manual-review/review-layout/ReviewLayout.jsx").ReviewLayout;
+  SimpleManualReviewPage =
+    require("../plugins/manual-review/page/simple/SimpleManualReviewPage.jsx").SimpleManualReviewPage;
+} catch (err) {
+  // Do nothing, Not-found Page will be triggered.
+}
+
 function useMainAppRoutes() {
   const routes = (
-    <Route path="" element={<RequireAuth />}>
+    <>
       <Route path=":orgName" element={<FullPageLayout />}>
         <Route path="onboard" element={<OnBoardPage />} />
       </Route>
@@ -140,7 +153,31 @@ function useMainAppRoutes() {
           </Route>
         )}
       </Route>
-    </Route>
+      {ReviewLayout && ManualReviewPage && (
+        <Route path=":orgName" element={<ReviewLayout />}>
+          <Route
+            path="review"
+            element={<ManualReviewPage type="review" />}
+          ></Route>
+          <Route
+            path="simple_review/review"
+            element={<SimpleManualReviewPage type="simple_review" />}
+          ></Route>
+          <Route
+            path="simple_review/approve"
+            element={<SimpleManualReviewPage type="simple_approve" />}
+          ></Route>
+          <Route
+            path="review/download_and_sync"
+            element={<ManualReviewPage type="download" />}
+          />
+          <Route
+            path="review/approve"
+            element={<ManualReviewPage type="approve" />}
+          />
+        </Route>
+      )}
+    </>
   );
 
   if (OnboardProduct && Object.keys(PRODUCT_NAMES)?.length) {