[Query Copilot] Pass user email to query feedback (#1516)

* Pass user email to query feedback AB#2501550

* Await page.frame

* Make contact no by default

* Add hook to check if it sohuld render the modal in the main component

src/Explorer/QueryCopilot/QueryCopilotFeedbackModal.tsx

@@ -13,6 +13,7 @@ import {
 import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
+import { getUserEmail } from "../../Utils/UserUtils";
 
 export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
   const {
@@ -26,6 +27,7 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
   const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(true);
   const [description, setDescription] = React.useState<string>("");
   const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
+  const [contact, setContact] = React.useState<string>(getUserEmail());
   return (
     <Modal isOpen={showFeedbackModal}>
       <Stack style={{ padding: 24 }}>
@@ -69,7 +71,10 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
             { key: "no", text: "No, do not contact me." },
           ]}
           selectedKey={isContactAllowed ? "yes" : "no"}
-          onChange={(_, option) => setIsContactAllowed(option.key === "yes")}
+          onChange={(_, option) => {
+            setIsContactAllowed(option.key === "yes");
+            setContact(option.key === "yes" ? getUserEmail() : "");
+          }}
         ></ChoiceGroup>
         <Text style={{ fontSize: 12, marginBottom: 14 }}>
           By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your
@@ -92,7 +97,7 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
             onClick={() => {
               closeFeedbackModal();
               setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
-              submitFeedback({ generatedQuery, likeQuery, description, userPrompt });
+              submitFeedback({ generatedQuery, likeQuery, description, userPrompt, contact });
             }}
           >
             Submit

src/Main.tsx

@@ -18,6 +18,7 @@ import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
 import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/QueryCopilotFeedbackModal";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
 import "../images/favicon.ico";
@@ -63,6 +64,7 @@ const App: React.FunctionComponent = () => {
   const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
   const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
+  const shouldShowModal = useQueryCopilot((state) => state.showFeedbackModal);
 
   const config = useConfig();
   const explorer = useKnockoutExplorer(config?.platform);
@@ -126,7 +128,7 @@ const App: React.FunctionComponent = () => {
       {<SQLQuickstartTutorial />}
       {<MongoQuickstartTutorial />}
       {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
-      {<QueryCopilotFeedbackModal />}
+      {shouldShowModal && <QueryCopilotFeedbackModal />}
     </div>
   );
 };

src/Utils/UserUtils.ts

@@ -6,3 +6,9 @@ export const getFullName = (): string => {
   const { name } = decryptJWTToken(authorizationToken);
   return name;
 };
+
+export const getUserEmail = (): string => {
+  const { authorizationToken } = userContext;
+  const { upn } = decryptJWTToken(authorizationToken);
+  return upn;
+};

test/sql/resourceToken.spec.ts

@@ -39,7 +39,7 @@ test("Resource token", async () => {
   await page.type("input[class='inputToken']", resourceTokenConnectionString);
   await page.click("input[value='Connect']");
   await page.waitForSelector("iframe");
-  const explorer = page.frame({
+  const explorer = await page.frame({
     name: "explorer",
   });
   await explorer.textContent(`css=.dataResourceTree >> "${collectionId}"`);