From 3283d4073bbd60d4040bcbcd63dd3af7791051ad Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <sunghyunkang@microsoft.com>
Date: Mon, 20 Nov 2023 11:20:54 -0600
Subject: [PATCH] Fix P2 bgs

---
 src/Explorer/Explorer.tsx                            |  1 +
 .../__snapshots__/AddCollectionPanel.test.tsx.snap   |  3 ++-
 src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx     |  7 ++++++-
 src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx  | 12 +++++-------
 src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx     |  5 +++--
 src/hooks/useQueryCopilot.ts                         |  4 ++++
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index 3e6b15816..a7d96d85f 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1397,6 +1397,7 @@ export default class Explorer {
     ]);
     useQueryCopilot.getState().setCopilotEnabled(copilotEnabled);
     useQueryCopilot.getState().setCopilotUserDBEnabled(copilotUserDBEnabled);
+    useQueryCopilot.getState().setShowWelcomeModal(window.localStorage.getItem("hideWelcomeModal") !== "true");
   }
 
   public async refreshSampleData(): Promise<void> {
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index 0a19a654b..f529c5b92 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -336,7 +336,8 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
-            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
+ impacting the performance of transactional workloads."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
diff --git a/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
index 58b968621..1bd23ae55 100644
--- a/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
+++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
@@ -1,5 +1,6 @@
 import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
 import Flash from "../../../../images/CopilotFlash.svg";
 import Thumb from "../../../../images/CopilotThumb.svg";
@@ -13,7 +14,11 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
     if (visible) {
       window.localStorage.setItem("hideWelcomeModal", "true");
     }
-  });
+  }, []);
+
+  React.useEffect(() => {
+    useQueryCopilot.getState().setShowWelcomeModal(isModalVisible);
+  }, [isModalVisible]);
 
   return (
     <>
diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index 3cbd8ffed..6275e6ffc 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -72,7 +72,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   containerId,
 }: QueryCopilotPromptProps): JSX.Element => {
   const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
-  const inputEdited = useRef(false);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -110,6 +109,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     errorMessage,
   } = useCopilotStore();
 
+  const inputEdited = useRef(!!userPrompt);
+
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
     setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -274,7 +275,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   const showTeachingBubble = (): void => {
     if (!inputEdited.current) {
       setTimeout(() => {
-        if (!inputEdited.current && !isWelcomModalVisible()) {
+        if (!useQueryCopilot.getState().showWelcomeModal && !userPrompt && !inputEdited.current) {
           toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
@@ -282,10 +283,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     }
   };
 
-  const isWelcomModalVisible = (): boolean => {
-    return localStorage.getItem("hideWelcomeModal") !== "true";
-  };
-
   const clearFeedback = () => {
     resetButtonState();
     resetQueryResults();
@@ -305,6 +302,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
 
   React.useEffect(() => {
     showTeachingBubble();
+    useQueryCopilot.subscribe((state) => state.showWelcomeModal, showTeachingBubble);
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
 
@@ -591,7 +589,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           </CommandBarButton>
         </Stack>
       )}
-      <WelcomeModal visible={isWelcomModalVisible()} />
+      <WelcomeModal visible={useQueryCopilot.getState().showWelcomeModal} />
       {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
       {query !== "" && query.trim().length !== 0 && (
         <DeletePopup
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 990bac5c9..613c9d33c 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -104,12 +104,13 @@ interface IQueryTabStates {
 
 export const QueryTabFunctionComponent = (props: IQueryTabComponentProps): any => {
   const copilotStore = useCopilotStore();
+  const copilotGlobalStore = useQueryCopilot();
   const isSampleCopilotActive = useSelectedNode.getState().isQueryCopilotCollectionSelected();
   const queryTabProps = {
     ...props,
     copilotEnabled:
-      useQueryCopilot().copilotEnabled &&
-      (useQueryCopilot().copilotUserDBEnabled || (isSampleCopilotActive && !!userContext.sampleDataConnectionInfo)),
+      copilotGlobalStore.copilotEnabled &&
+      (copilotGlobalStore.copilotUserDBEnabled || (isSampleCopilotActive && !!userContext.sampleDataConnectionInfo)),
     isSampleCopilotActive: isSampleCopilotActive,
     copilotStore: copilotStore,
   };
diff --git a/src/hooks/useQueryCopilot.ts b/src/hooks/useQueryCopilot.ts
index 5bcbfb861..d4ac1f493 100644
--- a/src/hooks/useQueryCopilot.ts
+++ b/src/hooks/useQueryCopilot.ts
@@ -36,6 +36,7 @@ export interface QueryCopilotState {
   generatedQueryComments: string;
   wasCopilotUsed: boolean;
   showWelcomeSidebar: boolean;
+  showWelcomeModal: boolean;
   showCopilotSidebar: boolean;
   chatMessages: CopilotMessage[];
   shouldIncludeInMessages: boolean;
@@ -77,6 +78,7 @@ export interface QueryCopilotState {
   setGeneratedQueryComments: (generatedQueryComments: string) => void;
   setWasCopilotUsed: (wasCopilotUsed: boolean) => void;
   setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => void;
+  setShowWelcomeModal: (showWelcomeModal: boolean) => void;
   setShowCopilotSidebar: (showCopilotSidebar: boolean) => void;
   setChatMessages: (chatMessages: CopilotMessage[]) => void;
   setShouldIncludeInMessages: (shouldIncludeInMessages: boolean) => void;
@@ -122,6 +124,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   generatedQueryComments: "",
   wasCopilotUsed: false,
   showWelcomeSidebar: true,
+  showWelcomeModal: true,
   showCopilotSidebar: false,
   chatMessages: [],
   shouldIncludeInMessages: true,
@@ -174,6 +177,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   setGeneratedQueryComments: (generatedQueryComments: string) => set({ generatedQueryComments }),
   setWasCopilotUsed: (wasCopilotUsed: boolean) => set({ wasCopilotUsed }),
   setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => set({ showWelcomeSidebar }),
+  setShowWelcomeModal: (showWelcomeModal: boolean) => set({ showWelcomeModal }),
   setShowCopilotSidebar: (showCopilotSidebar: boolean) => set({ showCopilotSidebar }),
   setChatMessages: (chatMessages: CopilotMessage[]) => set({ chatMessages }),
   setShouldIncludeInMessages: (shouldIncludeInMessages: boolean) => set({ shouldIncludeInMessages }),