FIX: Organize Protected Routes and Fix Routing Issues for Unified Portal (#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
2024-11-12 12:29:46 +05:30
parent e848165604
commit c7ebed4c1d
4 changed files with 96 additions and 103 deletions
--- 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 />;
  }
--- 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>
--- 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>
  );
 }
--- 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) {