Names have been added to the buttons in query copilot page with suggestions

src/Explorer/Explorer.tsx

@@ -1397,7 +1397,6 @@ 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> {

src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -336,8 +336,7 @@ 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}

src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx

@@ -1,6 +1,5 @@
 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";
@@ -14,11 +13,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
     if (visible) {
       window.localStorage.setItem("hideWelcomeModal", "true");
     }
-  }, []);
-
-  React.useEffect(() => {
-    useQueryCopilot.getState().setShowWelcomeModal(isModalVisible);
-  }, [isModalVisible]);
+  });
 
   return (
     <>

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -35,7 +35,7 @@ import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopil
 import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/SamplePrompts/SamplePrompts";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { userContext } from "UserContext";
-import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React, { useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
@@ -72,6 +72,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   containerId,
 }: QueryCopilotPromptProps): JSX.Element => {
   const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
+  const inputEdited = useRef(false);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -109,8 +110,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     errorMessage,
   } = useCopilotStore();
 
-  const inputEdited = useRef(!!userPrompt);
-
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
     setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -275,7 +274,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   const showTeachingBubble = (): void => {
     if (!inputEdited.current) {
       setTimeout(() => {
-        if (!useQueryCopilot.getState().showWelcomeModal && !userPrompt && !inputEdited.current) {
+        if (!inputEdited.current && !isWelcomModalVisible()) {
           toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
@@ -283,6 +282,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     }
   };
 
+  const isWelcomModalVisible = (): boolean => {
+    return localStorage.getItem("hideWelcomeModal") !== "true";
+  };
+
   const clearFeedback = () => {
     resetButtonState();
     resetQueryResults();
@@ -302,7 +305,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
 
   React.useEffect(() => {
     showTeachingBubble();
-    useQueryCopilot.subscribe(showTeachingBubble, (state: QueryCopilotState) => state.showWelcomeModal);
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
 
@@ -372,6 +374,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
         )}
         <IconButton
           iconProps={{ iconName: "Send" }}
+          aria-label="Send"
           disabled={isGeneratingQuery || !userPrompt.trim()}
           style={{ marginLeft: 8 }}
           onClick={() => startGenerateQueryProcess()}
@@ -548,6 +551,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           )}
           <IconButton
             id="likeBtn"
+            aria-label="Like"
             style={{ marginLeft: 20 }}
             iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
             onClick={() => {
@@ -560,6 +564,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           />
           <IconButton
             style={{ margin: "0 10px" }}
+            aria-label="Dislike"
             iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
             onClick={() => {
               if (!dislikeQuery) {
@@ -589,7 +594,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           </CommandBarButton>
         </Stack>
       )}
-      <WelcomeModal visible={useQueryCopilot.getState().showWelcomeModal} />
+      <WelcomeModal visible={isWelcomModalVisible()} />
       {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
       {query !== "" && query.trim().length !== 0 && (
         <DeletePopup

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -104,13 +104,12 @@ interface IQueryTabStates {
 
 export const QueryTabFunctionComponent = (props: IQueryTabComponentProps): any => {
   const copilotStore = useCopilotStore();
-  const copilotGlobalStore = useQueryCopilot();
   const isSampleCopilotActive = useSelectedNode.getState().isQueryCopilotCollectionSelected();
   const queryTabProps = {
     ...props,
     copilotEnabled:
-      copilotGlobalStore.copilotEnabled &&
-      (copilotGlobalStore.copilotUserDBEnabled || (isSampleCopilotActive && !!userContext.sampleDataConnectionInfo)),
+      useQueryCopilot().copilotEnabled &&
+      (useQueryCopilot().copilotUserDBEnabled || (isSampleCopilotActive && !!userContext.sampleDataConnectionInfo)),
     isSampleCopilotActive: isSampleCopilotActive,
     copilotStore: copilotStore,
   };

src/hooks/useQueryCopilot.ts

@@ -36,7 +36,6 @@ export interface QueryCopilotState {
   generatedQueryComments: string;
   wasCopilotUsed: boolean;
   showWelcomeSidebar: boolean;
-  showWelcomeModal: boolean;
   showCopilotSidebar: boolean;
   chatMessages: CopilotMessage[];
   shouldIncludeInMessages: boolean;
@@ -78,7 +77,6 @@ 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;
@@ -124,7 +122,6 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   generatedQueryComments: "",
   wasCopilotUsed: false,
   showWelcomeSidebar: true,
-  showWelcomeModal: true,
   showCopilotSidebar: false,
   chatMessages: [],
   shouldIncludeInMessages: true,
@@ -177,7 +174,6 @@ 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 }),