P1, P2 bug fixes for private preview (#1657)

* P1 bug fix for private preview

* Add updated snapshot files

* Fix failing unit test

* Fix unit tests and update snapshot

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx

@@ -102,7 +102,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it("should submit submission", () => {
+  it("should not submit submission if required description field is null", () => {
     const explorer = new Explorer();
     const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
 
@@ -110,12 +110,24 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
     submitButton.simulate("click");
     wrapper.setProps({});
 
+    expect(SubmitFeedback).toHaveBeenCalledTimes(0);
+  });
+
+  it("should submit submission", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
+    const explorer = new Explorer();
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
+
+    const submitButton = wrapper.find("form");
+    submitButton.simulate("submit");
+    wrapper.setProps({});
+
     expect(SubmitFeedback).toHaveBeenCalledTimes(1);
     expect(SubmitFeedback).toHaveBeenCalledWith({
       params: {
         likeQuery: false,
-        generatedQuery: "",
+        generatedQuery: "test query",
-        userPrompt: "",
+        userPrompt: "test prompt",
         description: "",
         contact: getUserEmail(),
       },

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -25,13 +25,23 @@ export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }):
     closeFeedbackModal,
     setHideFeedbackModalForLikedQueries,
   } = useQueryCopilot();
-  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(true);
+  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(false);
   const [description, setDescription] = React.useState<string>("");
   const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
   const [contact, setContact] = React.useState<string>(getUserEmail());
 
+  const handleSubmit = () => {
+    closeFeedbackModal();
+    setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
+    SubmitFeedback({
+      params: { generatedQuery, likeQuery, description, userPrompt, contact },
+      explorer: explorer,
+    });
+  };
+
   return (
     <Modal isOpen={showFeedbackModal}>
+      <form onSubmit={handleSubmit}>
         <Stack style={{ padding: 24 }}>
           <Stack horizontal horizontalAlign="space-between">
             <Text style={{ fontSize: 20, fontWeight: 600, marginBottom: 20 }}>Send feedback to Microsoft</Text>
@@ -96,22 +106,13 @@ export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }):
             />
           )}
           <Stack horizontal horizontalAlign="end">
-          <PrimaryButton
+            <PrimaryButton styles={{ root: { marginRight: 8 } }} type="submit">
-            styles={{ root: { marginRight: 8 } }}
-            onClick={() => {
-              closeFeedbackModal();
-              setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
-              SubmitFeedback({
-                params: { generatedQuery, likeQuery, description, userPrompt, contact },
-                explorer: explorer,
-              });
-            }}
-          >
               Submit
             </PrimaryButton>
             <DefaultButton onClick={() => closeFeedbackModal()}>Cancel</DefaultButton>
           </Stack>
         </Stack>
+      </form>
     </Modal>
   );
 };

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -237,7 +237,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   const showTeachingBubble = (): void => {
     if (!inputEdited.current) {
       setTimeout(() => {
-        if (!inputEdited.current) {
+        if (!inputEdited.current && !isWelcomModalVisible()) {
           toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
@@ -245,6 +245,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     }
   };
 
+  const isWelcomModalVisible = (): boolean => {
+    return localStorage.getItem("hideWelcomeModal") !== "true";
+  };
+
   const clearFeedback = () => {
     resetButtonState();
     resetQueryResults();
@@ -297,7 +301,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             setShowSamplePrompts(true);
           }}
           onKeyDown={(e) => {
-            if (e.key === "Enter") {
+            if (e.key === "Enter" && userPrompt) {
               inputEdited.current = true;
               startGenerateQueryProcess();
             }
@@ -533,7 +537,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             iconProps={{ iconName: "Copy" }}
             style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
           >
-            Copy code
+            Copy query
           </CommandBarButton>
           <CommandBarButton
             onClick={() => {
@@ -542,11 +546,11 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             iconProps={{ iconName: "Delete" }}
             style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
           >
-            Delete code
+            Delete query
           </CommandBarButton>
         </Stack>
       )}
-      <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"} />
+      <WelcomeModal visible={isWelcomModalVisible()} />
       {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
       {query !== "" && query.trim().length !== 0 && (
         <DeletePopup

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -21,8 +21,13 @@ import * as StringUtility from "../../Shared/StringUtility";
 export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: QueryCopilotProps): JSX.Element => {
   const { query, setQuery, selectedQuery, setSelectedQuery, isGeneratingQuery } = useQueryCopilot();
 
-  const cachedCopilotToggleStatus = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotToggleStatus`);
+  const cachedCopilotToggleStatus: string = localStorage.getItem(
-  const [copilotActive, setCopilotActive] = useState<boolean>(StringUtility.toBoolean(cachedCopilotToggleStatus));
+    `${userContext.databaseAccount?.id}-queryCopilotToggleStatus`,
+  );
+  const copilotInitialActive: boolean = cachedCopilotToggleStatus
+    ? StringUtility.toBoolean(cachedCopilotToggleStatus)
+    : true;
+  const [copilotActive, setCopilotActive] = useState<boolean>(copilotInitialActive);
 
   const getCommandbarButtons = (): CommandButtonComponentProps[] => {
     const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
@@ -87,7 +92,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
           <QueryCopilotPromptbar explorer={explorer} toggleCopilot={toggleCopilot}></QueryCopilotPromptbar>
         )}
         <Stack className="tabPaneContentContainer">
-          <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
+          <SplitterLayout percentage={true} vertical={true} primaryIndex={0} primaryMinSize={30} secondaryMinSize={70}>
             <EditorReact
               language={"sql"}
               content={query}

src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap

@@ -17,6 +17,37 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       }
     }
   >
+    <QueryCopilotPromptbar
+      explorer={
+        Explorer {
+          "_isInitializingNotebooks": false,
+          "_resetNotebookWorkspace": [Function],
+          "isFixedCollectionWithSharedThroughputSupported": [Function],
+          "isTabsContentExpanded": [Function],
+          "onRefreshDatabasesKeyPress": [Function],
+          "onRefreshResourcesClick": [Function],
+          "phoenixClient": PhoenixClient {
+            "armResourceId": undefined,
+            "retryOptions": Object {
+              "maxTimeout": 5000,
+              "minTimeout": 5000,
+              "retries": 3,
+            },
+          },
+          "provideFeedbackEmail": [Function],
+          "queriesClient": QueriesClient {
+            "container": [Circular],
+          },
+          "refreshNotebookList": [Function],
+          "resourceTree": ResourceTreeAdapter {
+            "container": [Circular],
+            "copyNotebook": [Function],
+            "parameters": [Function],
+          },
+        }
+      }
+      toggleCopilot={[Function]}
+    />
     <Stack
       className="tabPaneContentContainer"
     >
@@ -25,10 +56,10 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
         onDragEnd={null}
         onDragStart={null}
         onSecondaryPaneSizeChange={null}
-        percentage={false}
+        percentage={true}
         primaryIndex={0}
-        primaryMinSize={100}
+        primaryMinSize={30}
-        secondaryMinSize={200}
+        secondaryMinSize={70}
         vertical={true}
       >
         <EditorReact

src/hooks/useQueryCopilot.ts

@@ -128,7 +128,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
 
   openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) =>
     set({ generatedQuery, likeQuery, userPrompt, showFeedbackModal: true }),
-  closeFeedbackModal: () => set({ generatedQuery: "", likeQuery: false, userPrompt: "", showFeedbackModal: false }),
+  closeFeedbackModal: () => set({ showFeedbackModal: false }),
   setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) =>
     set({ hideFeedbackModalForLikedQueries }),
   refreshCorrelationId: () => set({ correlationId: guid() }),