Copilot user db (#1672)

* Implement copilot for user database * Fix minor bugs * fix bugs * Add user database copilot * Add placeholder text on copilot * Add AFEC adn killswitch * Add new v2 sampledatabase endpoint * Add telemetry * fix telemetry bug * Add query edited telemetry * add authorization header * Add back to the staging env for phoenix * point to stage for phoenix * Preview commit for test env * Preview link for staging * change the staging url * fix lint, unit tests * fix lint, unit tests * fix formatting
2026-01-23 03:34:16 +00:00 · 2023-11-09 11:55:25 -06:00
parent a5e1b37ba6
commit 0e124f4881
38 changed files with 911 additions and 252 deletions
--- a/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx
+++ b/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx
@@ -1,10 +1,10 @@
 import { Checkbox, ChoiceGroup, DefaultButton, IconButton, PrimaryButton, TextField } from "@fluentui/react";
 import Explorer from "Explorer/Explorer";
 import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
+import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { getUserEmail } from "Utils/UserUtils";
 import { shallow } from "enzyme";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";

 jest.mock("Utils/UserUtils");
@@ -13,21 +13,49 @@ jest.mock("Utils/UserUtils");
 jest.mock("Explorer/QueryCopilot/Shared/QueryCopilotClient");
 SubmitFeedback as jest.Mock;

+jest.mock("Explorer/QueryCopilot/QueryCopilotContext");
+const mockUseCopilotStore = useCopilotStore as jest.Mock;
+const mockReturnValue = {
+  generatedQuery: "test query",
+  userPrompt: "test prompt",
+  likeQuery: false,
+  showFeedbackModal: false,
+  closeFeedbackModal: jest.fn,
+  setHideFeedbackModalForLikedQueries: jest.fn,
+};
+
 describe("Query Copilot Feedback Modal snapshot test", () => {
  beforeEach(() => {
+    mockUseCopilotStore.mockReturnValue(mockReturnValue);
    jest.clearAllMocks();
  });
  it("shoud render and match snapshot", () => {
-    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
-
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    mockUseCopilotStore.mockReturnValue({
+      ...mockReturnValue,
+      showFeedbackModal: true,
+    });
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    expect(wrapper.props().isOpen).toBeTruthy();
    expect(wrapper).toMatchSnapshot();
  });

  it("should close on cancel click", () => {
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    const cancelButton = wrapper.find(IconButton);
    cancelButton.simulate("click");
@@ -38,7 +66,14 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should get user unput", () => {
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );
    const testUserInput = "test user input";

    const userInput = wrapper.find(TextField).first();
@@ -49,7 +84,14 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should record user contact choice no", () => {
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );
    const contactAllowed = wrapper.find(ChoiceGroup);

    contactAllowed.simulate("change", {}, { key: "no" });
@@ -60,7 +102,14 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should record user contact choice yes", () => {
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );
    const contactAllowed = wrapper.find(ChoiceGroup);

    contactAllowed.simulate("change", {}, { key: "yes" });
@@ -71,7 +120,14 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should not render dont show again button", () => {
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    const dontShowAgain = wrapper.find(Checkbox);

@@ -80,8 +136,19 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should render dont show again button and check it ", () => {
-    useQueryCopilot.getState().openFeedbackModal("test query", true, "test prompt");
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    mockUseCopilotStore.mockReturnValue({
+      ...mockReturnValue,
+      showFeedbackModal: true,
+      likeQuery: true,
+    });
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    const dontShowAgain = wrapper.find(Checkbox);
    dontShowAgain.simulate("change", {}, true);
@@ -92,7 +159,14 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should cancel submission", () => {
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={new Explorer()}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    const cancelButton = wrapper.find(DefaultButton);
    cancelButton.simulate("click");
@@ -104,7 +178,14 @@ describe("Query Copilot Feedback Modal snapshot test", () => {

  it("should not submit submission if required description field is null", () => {
    const explorer = new Explorer();
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={explorer}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    const submitButton = wrapper.find(PrimaryButton);
    submitButton.simulate("click");
@@ -114,9 +195,15 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
  });

  it("should submit submission", () => {
-    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
    const explorer = new Explorer();
-    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
+    const wrapper = shallow(
+      <QueryCopilotFeedbackModal
+        explorer={explorer}
+        databaseId="CopilotUserDb"
+        containerId="CopilotUserContainer"
+        mode="User"
+      />,
+    );

    const submitButton = wrapper.find("form");
    submitButton.simulate("submit");
@@ -124,6 +211,9 @@ describe("Query Copilot Feedback Modal snapshot test", () => {

    expect(SubmitFeedback).toHaveBeenCalledTimes(1);
    expect(SubmitFeedback).toHaveBeenCalledWith({
+      containerId: "CopilotUserContainer",
+      databaseId: "CopilotUserDb",
+      mode: "User",
      params: {
        likeQuery: false,
        generatedQuery: "test query",
--- a/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx
+++ b/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx
@@ -11,12 +11,22 @@ import {
  TextField,
 } from "@fluentui/react";
 import Explorer from "Explorer/Explorer";
+import { useCopilotStore } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
 import { getUserEmail } from "../../../Utils/UserUtils";

-export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }): JSX.Element => {
+export const QueryCopilotFeedbackModal = ({
+  explorer,
+  databaseId,
+  containerId,
+  mode,
+}: {
+  explorer: Explorer;
+  databaseId: string;
+  containerId: string;
+  mode: string;
+}): JSX.Element => {
  const {
    generatedQuery,
    userPrompt,
@@ -24,7 +34,7 @@ export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }):
    showFeedbackModal,
    closeFeedbackModal,
    setHideFeedbackModalForLikedQueries,
-  } = useQueryCopilot();
+  } = useCopilotStore();
  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(false);
  const [description, setDescription] = React.useState<string>("");
  const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
@@ -35,7 +45,10 @@ export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }):
    setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
    SubmitFeedback({
      params: { generatedQuery, likeQuery, description, userPrompt, contact },
-      explorer: explorer,
+      explorer,
+      databaseId,
+      containerId,
+      mode: mode,
    });
  };

--- a/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
+++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
@@ -1,7 +1,6 @@
 import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
 import React from "react";
-import Database from "../../../../images/CopilotDatabase.svg";
 import Flash from "../../../../images/CopilotFlash.svg";
 import Thumb from "../../../../images/CopilotThumb.svg";
 import CoplilotWelcomeIllustration from "../../../../images/CopliotWelcomeIllustration.svg";
@@ -23,8 +22,10 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
        onDismiss={hideModal}
        isBlocking={false}
        styles={{
-          scrollableContent: {
-            minHeight: 680,
+          main: {
+            maxHeight: 530,
+            borderRadius: 10,
+            overflow: "hidden",
          },
        }}
      >
@@ -52,7 +53,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
          </Stack>
          <Stack horizontalAlign="center">
            <Stack.Item align="center" style={{ textAlign: "center" }}>
-              <Text className="title bold">Welcome to Copilot in Azure Cosmos DB (Private Preview)</Text>
+              <Text className="title bold">Welcome to Copilot in Azure Cosmos DB</Text>
            </Stack.Item>
            <Stack.Item align="center" className="text">
              <Stack horizontal>
@@ -69,7 +70,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
              <Text>
                Ask Copilot to generate a query by describing the query in your words.
                <br />
-                <Link target="_blank" href="https://aka.ms/cdb-copilot-learn-more">
+                <Link target="_blank" href="https://aka.ms/CopilotInAzureCDBDocs">
                  Learn more
                </Link>
              </Text>
@@ -87,31 +88,11 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                </StackItem>
              </Stack>
              <Text>
-                AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
+                AI-generated content can have mistakes. Make sure it is accurate and appropriate before executing the
+                query.
                <br />
                <Link target="_blank" href="https://aka.ms/cdb-copilot-preview-terms">
-                  Read preview terms
-                </Link>
-              </Text>
-            </Stack.Item>
-            <Stack.Item align="center" className="text">
-              <Stack horizontal>
-                <StackItem align="start" className="imageTextPadding">
-                  <Image src={Database} />
-                </StackItem>
-                <StackItem align="start">
-                  <Text className="bold">
-                    Query Copilot works on a sample database.
-                    <br />
-                  </Text>
-                </StackItem>
-              </Stack>
-              <Text>
-                While in Private Preview, Query Copilot is setup to work on sample database we have configured for you
-                at no cost.
-                <br />
-                <Link target="_blank" href="https://aka.ms/cdb-copilot-learn-more">
-                  Learn more
+                  Read our preview terms here
                </Link>
              </Text>
            </Stack.Item>
--- a/src/Explorer/QueryCopilot/Modal/snapshots/QueryCopilotFeedbackModal.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/Modal/snapshots/QueryCopilotFeedbackModal.test.tsx.snap
@@ -291,21 +291,6 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
         
        for more information.
      </Text>
-      <StyledCheckboxBase
-        checked={false}
-        label="Don't show me this next time"
-        onChange={[Function]}
-        styles={
-          Object {
-            "label": Object {
-              "paddingLeft": 0,
-            },
-            "root": Object {
-              "marginBottom": 14,
-            },
-          }
-        }
-      />
      <Stack
        horizontal={true}
        horizontalAlign="end"
--- a/src/Explorer/QueryCopilot/Modal/snapshots/WelcomeModal.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/Modal/snapshots/WelcomeModal.test.tsx.snap
@@ -8,8 +8,10 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
    onDismiss={[Function]}
    styles={
      Object {
-        "scrollableContent": Object {
-          "minHeight": 680,
+        "main": Object {
+          "borderRadius": 10,
+          "maxHeight": 530,
+          "overflow": "hidden",
        },
      }
    }
@@ -76,7 +78,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
          <Text
            className="title bold"
          >
-            Welcome to Copilot in Azure Cosmos DB (Private Preview)
+            Welcome to Copilot in Azure Cosmos DB
          </Text>
        </StackItem>
        <StackItem
@@ -109,7 +111,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
            Ask Copilot to generate a query by describing the query in your words.
            <br />
            <StyledLinkBase
-              href="https://aka.ms/cdb-copilot-learn-more"
+              href="https://aka.ms/CopilotInAzureCDBDocs"
              target="_blank"
            >
              Learn more
@@ -143,50 +145,13 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
            </StackItem>
          </Stack>
          <Text>
-            AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
+            AI-generated content can have mistakes. Make sure it is accurate and appropriate before executing the query.
            <br />
            <StyledLinkBase
              href="https://aka.ms/cdb-copilot-preview-terms"
              target="_blank"
            >
-              Read preview terms
-            </StyledLinkBase>
-          </Text>
-        </StackItem>
-        <StackItem
-          align="center"
-          className="text"
-        >
-          <Stack
-            horizontal={true}
-          >
-            <StackItem
-              align="start"
-              className="imageTextPadding"
-            >
-              <Image
-                src={Object {}}
-              />
-            </StackItem>
-            <StackItem
-              align="start"
-            >
-              <Text
-                className="bold"
-              >
-                Query Copilot works on a sample database.
-                <br />
-              </Text>
-            </StackItem>
-          </Stack>
-          <Text>
-            While in Private Preview, Query Copilot is setup to work on sample database we have configured for you at no cost.
-            <br />
-            <StyledLinkBase
-              href="https://aka.ms/cdb-copilot-learn-more"
-              target="_blank"
-            >
-              Learn more
+              Read our preview terms here
            </StyledLinkBase>
          </Text>
        </StackItem>