Feat/unified dev portal (#582)

* added pages for llm-whisperer * added app selector * select product integration * added switcher and refactored router * code refactor * router code refactor * removed logs * added payment successful page * hided onboard component * sonar fixes * code refactor * code refactor * fixed hook conditionally call * fixed select product in router * sonar and platform dropdown fix * added gtm and recapcha package back * moved assets to cloud * removed unused props * removed mrq related options in llm-whisperer * removed cloud related files in public * Frictionless-Onboarding-Improvements * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * adapter call fix * typo fix on file name select-product-store.js * added arg REACT_APP_STRIPE_PUBLISHABLE_KEY in frontend docker build * fixed manual review router * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * added optional chaning on app deployment * reverted chages related to frontend env * fixed login glitch * fixed login glitch * fixed product redirect issue * atomic transactions related changes reverted back in v1 * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * reverted atomic related change in account urls * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Signed-off-by: jagadeeswaran-zipstack <[email protected]> Co-authored-by: Ritwik G <[email protected]> Co-authored-by: Jaseem Jas <[email protected]> Co-authored-by: Athul <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Jaseem <[email protected]> Co-authored-by: Athul <[email protected]>
Zipstack · Oct 9, 2024 · 0902291 · 0902291
1 parent 7faa562
commit 0902291
Show file tree

Hide file tree

Showing 16 changed files with 489 additions and 252 deletions.
diff --git a/docker/dockerfiles/frontend.Dockerfile b/docker/dockerfiles/frontend.Dockerfile
@@ -1,5 +1,6 @@
 FROM node:16 AS builder
 
+# Build-time environment variables
 ENV BUILD_CONTEXT_PATH frontend
 ENV REACT_APP_BACKEND_URL ""
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@rjsf/core": "^5.8.1",
     "@rjsf/utils": "^5.8.1",
     "@rjsf/validator-ajv8": "^5.8.1",
+    "@stripe/stripe-js": "^4.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Unstract"
-    />
+    <meta name="description" content="Unstract" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Unstract</title>
   </head>

diff --git a/frontend/src/components/helpers/auth/RequireAuth.js b/frontend/src/components/helpers/auth/RequireAuth.js
@@ -15,6 +15,13 @@ try {
 } catch {
   // The component will remain null of it is not available
 }
+let selectedProductStore;
+let isLlmWhisperer;
+try {
+  selectedProductStore = require("../../../plugins/llm-whisperer/store/select-product-store.js");
+} catch {
+  // do nothing
+}
 
 const RequireAuth = () => {
   const { sessionDetails } = useSessionStore();
@@ -24,7 +31,18 @@ const RequireAuth = () => {
   const orgName = sessionDetails?.orgName;
   const pathname = location?.pathname;
   const adapters = sessionDetails?.adapters;
-  const currOrgName = getOrgNameFromPathname(pathname);
+  try {
+    isLlmWhisperer =
+      selectedProductStore.useSelectedProductStore(
+        (state) => state?.selectedProduct
+      ) === "llm-whisperer";
+  } catch (error) {
+    // Do nothing
+  }
+  const currOrgName = getOrgNameFromPathname(
+    pathname,
+    isLlmWhisperer !== undefined ? !isLlmWhisperer : null
+  );
 
   useEffect(() => {
     if (!sessionDetails?.isLoggedIn) {
@@ -35,7 +53,9 @@ const RequireAuth = () => {
   }, [sessionDetails]);
 
   let navigateTo = `/${orgName}/onboard`;
-  if (onboardCompleted(adapters)) {
+  if (isLlmWhisperer) {
+    navigateTo = `/llm-whisperer/${orgName}/playground`;
+  } else if (onboardCompleted(adapters)) {
     navigateTo = `/${orgName}/tools`;
   }
   if (

diff --git a/frontend/src/components/helpers/auth/RequireGuest.js b/frontend/src/components/helpers/auth/RequireGuest.js
@@ -2,14 +2,32 @@ import { Navigate, Outlet, useLocation } from "react-router-dom";
 
 import { publicRoutes, onboardCompleted } from "../../../helpers/GetStaticData";
 import { useSessionStore } from "../../../store/session-store";
+let selectedProductStore;
+let isLlmWhisperer;
+try {
+  selectedProductStore = require("../../../plugins/llm-whisperer/store/select-product-store.js");
+} catch {
+  // do nothing
+}
 
 const RequireGuest = () => {
   const { sessionDetails } = useSessionStore();
   const { orgName, adapters } = sessionDetails;
   const location = useLocation();
   const pathname = location.pathname;
+  try {
+    isLlmWhisperer =
+      selectedProductStore.useSelectedProductStore(
+        (state) => state?.selectedProduct
+      ) === "llm-whisperer";
+  } catch (error) {
+    // Do nothing
+  }
+
   let navigateTo = `/${orgName}/onboard`;
-  if (onboardCompleted(adapters)) {
+  if (isLlmWhisperer) {
+    navigateTo = `/llm-whisperer/${orgName}/playground`;
+  } else if (onboardCompleted(adapters)) {
     navigateTo = `/${orgName}/tools`;
   }
   if (

diff --git a/frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx b/frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx
@@ -24,12 +24,23 @@ try {
   // Plugin unavailable.
 }
 
+let sideMenu;
+try {
+  sideMenu = require("../../../plugins/hooks/useSideMenu");
+} catch (err) {
+  // Plugin unavailable.
+}
+
 const SideNavBar = ({ collapsed }) => {
   const navigate = useNavigate();
   const { sessionDetails } = useSessionStore();
   const { orgName, flags } = sessionDetails;
+  let menu;
+  if (sideMenu) {
+    menu = sideMenu.useSideMenu();
+  }
 
-  const data = [
+  const data = menu || [
     {
       id: 1,
       mainTitle: "MANAGE",
@@ -144,8 +155,8 @@ const SideNavBar = ({ collapsed }) => {
     },
   ];
 
-  if (getMenuItem && flags.app_deployment) {
-    data[0].subMenu.splice(1, 0, getMenuItem.default(orgName));
+  if (getMenuItem && flags?.app_deployment) {
+    data[0]?.subMenu?.splice(1, 0, getMenuItem?.default(orgName));
   }
 
   return (

diff --git a/frontend/src/components/navigations/top-nav-bar/TopNavBar.css b/frontend/src/components/navigations/top-nav-bar/TopNavBar.css
@@ -70,3 +70,8 @@
   font-weight: 600;
   margin-left: 10px;
 }
+
+.platform-switch-container {
+  display: flex;
+  align-items: center;
+}