Corrected alignment of the OnBoard page to accommodate various screen sizes

frontend/src/components/helpers/auth/RequireAuth.js

@@ -1,6 +1,9 @@
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 
-import { getOrgNameFromPathname } from "../../../helpers/GetStaticData";
+import {
+  getOrgNameFromPathname,
+  onboardCompleted,
+} from "../../../helpers/GetStaticData";
 import { useSessionStore } from "../../../store/session-store";
 
 const RequireAuth = () => {
@@ -9,14 +12,20 @@ const RequireAuth = () => {
   const isLoggedIn = sessionDetails?.isLoggedIn;
   const orgName = sessionDetails?.orgName;
   const pathname = location?.pathname;
+  const adapters = sessionDetails?.adapters;
   const currOrgName = getOrgNameFromPathname(pathname);
 
+  let navigateTo = `/${orgName}/onboard`;
+  if (onboardCompleted(adapters)) {
+    navigateTo = `/${orgName}/etl`;
+  }
+
   if (!isLoggedIn) {
     return <Navigate to="/landing" state={{ from: location }} replace />;
   }
 
   if (currOrgName !== orgName) {
-    return <Navigate to={`/${orgName}/onboard`} />;
+    return <Navigate to={navigateTo} />;
   }
 
   return <Outlet />;

frontend/src/components/helpers/auth/RequireGuest.js

@@ -1,17 +1,22 @@
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 
-import { publicRoutes } from "../../../helpers/GetStaticData";
+import { publicRoutes, onboardCompleted } from "../../../helpers/GetStaticData";
 import { useSessionStore } from "../../../store/session-store";
 
 const RequireGuest = () => {
   const { sessionDetails } = useSessionStore();
+  const { orgName, adapters } = sessionDetails;
   const location = useLocation();
   const pathname = location.pathname;
+  let navigateTo = `/${orgName}/onboard`;
+  if (onboardCompleted(adapters)) {
+    navigateTo = `/${orgName}/etl`;
+  }
 
   return !sessionDetails?.isLoggedIn && publicRoutes.includes(pathname) ? (
     <Outlet />
   ) : (
-    <Navigate to={`/${sessionDetails?.orgName}/onboard`} />
+    <Navigate to={navigateTo} />
   );
 };
 

frontend/src/components/navigations/top-nav-bar/TopNavBar.css

@@ -40,4 +40,17 @@
 .logout-button:active{
     color: inherit !important;
     border-color: transparent !important;
+}
+
+.top-nav-alert-col {
+    display: flex;
+    justify-content: center;
+}
+
+.top-nav-alert-col .top-nav-alert-msg {
+    margin-right: 6px;
+}
+
+.top-nav-alert-col .top-nav-alert-link {
+    text-decoration: underline;
 }

frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx

@@ -8,11 +8,16 @@ import {
   Switch,
   Typography,
 } from "antd";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { MoonIcon, SunIcon, UnstractLogo } from "../../../assets/index.js";
-import { THEME, getBaseUrl } from "../../../helpers/GetStaticData.js";
+import {
+  THEME,
+  getBaseUrl,
+  onboardCompleted,
+} from "../../../helpers/GetStaticData.js";
+import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate.js";
 import useLogout from "../../../hooks/useLogout.js";
 import "../../../layouts/page-layout/PageLayout.css";
 import { useSessionStore } from "../../../store/session-store.js";
@@ -23,13 +28,39 @@ import "./TopNavBar.css";
 function TopNavBar() {
   const navigate = useNavigate();
   const { sessionDetails } = useSessionStore();
-  const { orgName, adapters } = sessionDetails;
+  const { orgName } = sessionDetails;
   const updateSessionDetails = useSessionStore(
     (state) => state.updateSessionDetails
   );
   const baseUrl = getBaseUrl();
   const onBoardUrl = baseUrl + `/${orgName}/onboard`;
   const logout = useLogout();
+  const axiosPrivate = useAxiosPrivate();
+  const [showOnboardBanner, setShowOnboardBanner] = useState(false);
+
+  useEffect(() => {
+    getAdapters();
+  }, []);
+
+  const getAdapters = () => {
+    const requestOptions = {
+      method: "GET",
+      url: `/api/v1/unstract/${sessionDetails?.orgId}/adapter/`,
+    };
+
+    axiosPrivate(requestOptions)
+      .then((res) => {
+        const data = res?.data;
+        const adapterTypes = [
+          ...new Set(data?.map((obj) => obj.adapter_type.toLowerCase())),
+        ];
+        if (!onboardCompleted(adapterTypes)) {
+          setShowOnboardBanner(true);
+        }
+      })
+      .catch((err) => {})
+      .finally(() => {});
+  };
 
   // Dropdown items
   const items = [
@@ -86,29 +117,33 @@ function TopNavBar() {
 
   return (
     <Row align="middle" className="topNav">
-      <Col span={8}>
+      <Col span={4}>
         <UnstractLogo className="topbar-logo" />
       </Col>
-      <Col span={8}>
-        {adapters.length < 3 && (
+      <Col span={16} className="top-nav-alert-col">
+        {showOnboardBanner && (
           <Alert
             type="error"
-            message="Your setup process is incomplete. Now, that's a bummer!"
-            showIcon
-            action={
-              <a
-                href={onBoardUrl}
-                size="small"
-                type="text"
-                style={{ textDecoration: "underline" }}
-              >
-                Complete it to start using Unstract.
-              </a>
+            message={
+              <>
+                <span className="top-nav-alert-msg">
+                  Your setup process is incomplete. Now, that&apos;s a bummer!
+                </span>
+                <a
+                  href={onBoardUrl}
+                  size="small"
+                  type="text"
+                  className="top-nav-alert-link"
+                >
+                  Complete it to start using Unstract
+                </a>
+              </>
             }
+            showIcon
           />
         )}
       </Col>
-      <Col span={8}>
+      <Col span={4}>
         <Row justify="end" align="middle">
           <Col>
             <Switch

frontend/src/components/onboard/OnBoard.jsx

@@ -8,12 +8,13 @@ import BgShape from "../../assets/bg_shape.svg";
 import ConnectEmbedding from "../../assets/connect_embedding.svg";
 import ConnectLLM from "../../assets/connect_llm.svg";
 import ConnectVectorDb from "../../assets/connect_vector_db.svg";
+import { onboardCompleted } from "../../helpers/GetStaticData.js";
 import { useSessionStore } from "../../store/session-store.js";
 import { AddSourceModal } from "../input-output/add-source-modal/AddSourceModal.jsx";
 import { CustomButton } from "../widgets/custom-button/CustomButton.jsx";
+import "./onBoard.css";
 const { Content } = Layout;
 
-import "./onBoard.css";
 function OnBoard() {
   const navigate = useNavigate();
   const { sessionDetails } = useSessionStore();
@@ -22,12 +23,12 @@ function OnBoard() {
   const [editItemId, setEditItemId] = useState(null);
   const [type, setType] = useState(null);
   const homePageUrl = `/${orgName}/etl`;
-
+  const [adaptersList, setAdaptersList] = useState(adapters || []);
   useEffect(() => {
-    if (adapters?.length >= 3) {
+    if (onboardCompleted(adaptersList)) {
       navigate(homePageUrl);
     }
-  }, []);
+  }, [adaptersList]);
 
   const steps = [
     {
@@ -62,7 +63,8 @@ function OnBoard() {
   };
 
   const addNewItem = (row, isEdit) => {
-    navigate(0);
+    const newAdapter = row?.adapter_type.toLowerCase();
+    setAdaptersList([...adaptersList, newAdapter]);
   };
 
   return (
@@ -101,7 +103,7 @@ function OnBoard() {
                     </Space>
                   </Col>
                   <Col span={4} align="center" justify="center">
-                    {adapters?.includes(step.type) ? (
+                    {adaptersList?.includes(step.type) ? (
                       <div>
                         <CheckCircleFilled className="configured-icon" />
                         <span className="configured-text">Configured</span>

frontend/src/components/onboard/onBoard.css

@@ -4,13 +4,31 @@
   margin-top: 50px;
 }
 
+@media screen and (max-height: 900px) {
+  .onboard-content {
+    margin-top: 30px;
+  }
+}
+
 .uppercase-text {
   text-transform: uppercase;
   color: #0C355A;
   font-family: 'SF Pro Text', sans-serif;
   margin-bottom: 50px;
 }
 
+@media screen and (max-height: 900px) {
+  .uppercase-text {
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (max-height: 900px) {
+  h1 {
+    font-size: 1.2rem;
+  }
+}
+
 .text-title-style {
   color: #0C355A;
   font-family: 'SF Pro Text', sans-serif;
@@ -44,6 +62,13 @@
     margin-bottom: 50px;
 }
 
+@media screen and (max-height: 900px) {
+  .landing-logo {
+    height: 30px;
+    margin-bottom: 10px;
+  }
+}
+
 .circle {
   position: absolute;
   left: 0%;
@@ -70,6 +95,12 @@
   margin-top: 25px;
 }
 
+@media screen and (max-height: 900px) {
+  .later-div-style {
+    margin-top: 10px;
+  }
+}
+
 .svg-container {
   position: relative;
   width: 100px;
@@ -99,4 +130,37 @@
 .configured-text {
   margin-left: 8px;
   vertical-align: middle;
+}
+
+@media screen and (max-height: 900px) {
+  .ant-space .ant-space-item .ant-card {
+    padding: 6px;
+  }
+}
+
+@media screen and (max-height: 900px) {
+  .card-style {
+    width: 940px;
+    margin-bottom: 5px;
+  }
+}
+
+@media screen and (max-height: 720px) and (max-width: 1280px){
+  .card-style {
+    width: 1200px;
+    margin-bottom: 5px;
+  }
+}
+
+@media screen and (max-height: 780px) and (max-width: 1024px){
+  .card-style {
+    width: 940px;
+    margin-bottom: 5px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .ant-space .ant-space-item .ant-card .ant-card-body {
+    padding: 10px;
+  }
 }

frontend/src/helpers/GetStaticData.js

@@ -318,6 +318,18 @@ const displayPromptResult = (output) => {
   }
 };
 
+const onboardCompleted = (adaptersList) => {
+  if (!Array.isArray(adaptersList)) {
+    return false;
+  }
+  const MANDATORY_ADAPTERS = ["llm", "vector_db", "embedding"];
+  if (MANDATORY_ADAPTERS.length !== adaptersList.length) {
+    return false;
+  }
+  adaptersList = adaptersList.map((element) => element.toLowerCase());
+  return MANDATORY_ADAPTERS.every((value) => adaptersList.includes(value));
+};
+
 export {
   CONNECTOR_TYPE_MAP,
   O_AUTH_PROVIDERS,
@@ -333,6 +345,7 @@ export {
   getTimeForLogs,
   handleException,
   listOfAppDeployments,
+  onboardCompleted,
   promptStudioUpdateStatus,
   promptType,
   publicRoutes,