fix(frontend): onboarding bug (#2655)

# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
QuivrHQ · Jun 10, 2024 · e631fa8 · e631fa8
1 parent 9d1b291
commit e631fa8
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx
@@ -11,6 +11,7 @@ import { UploadDocumentModal } from "@/lib/components/UploadDocumentModal/Upload
 import { MessageInfoBox } from "@/lib/components/ui/MessageInfoBox/MessageInfoBox";
 import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
 import { SearchBar } from "@/lib/components/ui/SearchBar/SearchBar";
+import { useOnboardingContext } from "@/lib/context/OnboardingProvider/hooks/useOnboardingContext";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 import { useUserData } from "@/lib/hooks/useUserData";
@@ -27,6 +28,7 @@ const Search = (): JSX.Element => {
     useBrainCreationContext();
   const { userIdentityData } = useUserData();
   const { isDarkMode } = useUserSettingsContext();
+  const { isBrainCreated } = useOnboardingContext();
 
   useEffect(() => {
     if (userIdentityData) {
@@ -84,6 +86,7 @@ const Search = (): JSX.Element => {
       </div>
       {!isBrainCreationModalOpened &&
         !userIdentityData?.onboarded &&
+        !isBrainCreated &&
         !!isUserDataFetched && (
           <div className={styles.onboarding_overlay}>
             <div className={styles.main_message_wrapper}>

diff --git a/frontend/lib/components/AddBrainModal/components/BrainRecapStep/BrainRecapStep.tsx b/frontend/lib/components/AddBrainModal/components/BrainRecapStep/BrainRecapStep.tsx
@@ -7,6 +7,7 @@ import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
 import { TextAreaInput } from "@/lib/components/ui/TextAreaInput/TextAreaInput";
 import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
 import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
+import { useOnboardingContext } from "@/lib/context/OnboardingProvider/hooks/useOnboardingContext";
 import { useUserData } from "@/lib/hooks/useUserData";
 
 import { BrainRecapCard } from "./BrainRecapCard/BrainRecapCard";
@@ -24,6 +25,7 @@ export const BrainRecapStep = (): JSX.Element => {
   const { updateUserIdentity } = useUserApi();
   const { userIdentityData } = useUserData();
   const { openedConnections } = useFromConnectionsContext();
+  const { setIsBrainCreated } = useOnboardingContext();
 
   const feed = async (): Promise<void> => {
     if (!userIdentityData?.onboarded) {
@@ -120,9 +122,12 @@ export const BrainRecapStep = (): JSX.Element => {
           iconName="add"
           onClick={async () => {
             await feed();
+            setIsBrainCreated(true);
           }}
           disabled={
-            knowledgeToFeed.length === 0 && !userIdentityData?.onboarded
+            knowledgeToFeed.length === 0 &&
+            !userIdentityData?.onboarded &&
+            !openedConnections.length
           }
           isLoading={creating}
           important={true}

diff --git a/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss b/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss
@@ -8,6 +8,10 @@
   padding-inline: Spacings.$spacing08;
   height: 100%;
 
+  .tutorial {
+    padding-bottom: Spacings.$spacing05;
+  }
+
   .feed_brain {
     display: flex;
     flex-direction: column;

diff --git a/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.tsx b/frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.tsx
@@ -45,11 +45,13 @@ export const FeedBrainStep = (): JSX.Element => {
   const renderFeedBrain = () => (
     <>
       {!userIdentityData?.onboarded && (
-        <MessageInfoBox type="tutorial">
-          <span>
-            Upload documents or add URLs to add knowledges to your brain.
-          </span>
-        </MessageInfoBox>
+        <div className={styles.tutorial}>
+          <MessageInfoBox type="tutorial">
+            <span>
+              Upload documents or add URLs to add knowledges to your brain.
+            </span>
+          </MessageInfoBox>
+        </div>
       )}
       <div className={styles.feed_brain}>
         <span className={styles.title}>Feed your brain</span>

diff --git a/frontend/lib/context/OnboardingProvider/Onboarding-provider.tsx b/frontend/lib/context/OnboardingProvider/Onboarding-provider.tsx
@@ -5,6 +5,8 @@ import { useUserData } from "@/lib/hooks/useUserData";
 export type OnboardingContextType = {
   isOnboardingModalOpened: boolean;
   setIsOnboardingModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
+  isBrainCreated: boolean;
+  setIsBrainCreated: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const OnboardingContext = createContext<
@@ -17,6 +19,7 @@ export const OnboardingProvider = ({
   children: React.ReactNode;
 }): JSX.Element => {
   const [isOnboardingModalOpened, setIsOnboardingModalOpened] = useState(false);
+  const [isBrainCreated, setIsBrainCreated] = useState(false);
   const { userIdentityData } = useUserData();
 
   useEffect(() => {
@@ -30,6 +33,8 @@ export const OnboardingProvider = ({
       value={{
         isOnboardingModalOpened,
         setIsOnboardingModalOpened,
+        isBrainCreated,
+        setIsBrainCreated,
       }}
     >
       {children}