diff --git a/frontend/src/components/helpers/auth/RequireAuth.js b/frontend/src/components/helpers/auth/RequireAuth.js index 584884cf86..01e222d96e 100644 --- a/frontend/src/components/helpers/auth/RequireAuth.js +++ b/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 ; } if (currOrgName !== orgName) { - return ; + return ; } return ; diff --git a/frontend/src/components/helpers/auth/RequireGuest.js b/frontend/src/components/helpers/auth/RequireGuest.js index 71bc242d93..2c5bf77e3e 100644 --- a/frontend/src/components/helpers/auth/RequireGuest.js +++ b/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) ? ( ) : ( - + ); }; diff --git a/frontend/src/components/navigations/top-nav-bar/TopNavBar.css b/frontend/src/components/navigations/top-nav-bar/TopNavBar.css index 6a09d4035a..9506f67a90 100644 --- a/frontend/src/components/navigations/top-nav-bar/TopNavBar.css +++ b/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; } \ No newline at end of file diff --git a/frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx b/frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx index 9bfec966a5..b647072e4b 100644 --- a/frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx +++ b/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 ( - + - - {adapters.length < 3 && ( + + {showOnboardBanner && ( - Complete it to start using Unstract. - + message={ + <> + + Your setup process is incomplete. Now, that's a bummer! + + + Complete it to start using Unstract + + } + showIcon /> )} - + { - 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() { - {adapters?.includes(step.type) ? ( + {adaptersList?.includes(step.type) ? (
Configured diff --git a/frontend/src/components/onboard/onBoard.css b/frontend/src/components/onboard/onBoard.css index 1d96ca99f6..2944ac3d8b 100644 --- a/frontend/src/components/onboard/onBoard.css +++ b/frontend/src/components/onboard/onBoard.css @@ -4,6 +4,12 @@ margin-top: 50px; } +@media screen and (max-height: 900px) { + .onboard-content { + margin-top: 30px; + } +} + .uppercase-text { text-transform: uppercase; color: #0C355A; @@ -11,6 +17,18 @@ 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; + } } \ No newline at end of file diff --git a/frontend/src/helpers/GetStaticData.js b/frontend/src/helpers/GetStaticData.js index 7b683313b8..1ebea1065e 100644 --- a/frontend/src/helpers/GetStaticData.js +++ b/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,