[Query Copilot] Sample Prompt implementation and other (#1489)

* Sample Prompts and ComboBox implementation

* Adding DeletePopup and SamplePrompts

* Implementation of Delete/Copy code buttons

* Adjusted changes based on the comments for Modal

* Reverded implementation of inline prompt

* Updated function

* Replacing const to function

* Unused icons deleted

* Comments removed

* Additional styling based on designs

* Test snapshots

* Implementation of popup for copying code

* Tests updated/added

* Background color changed

* Resolving lint issue

* CopyPopup snapshot updated

* Merged with master

* Implementations fixed based on comments

* Test Snapshots updated

* Query copilot updated

* Resolving minor bug with Delete popup

---------

Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com>

src/Explorer/QueryCopilot/Popup/CopyPopup.test.tsx

@@ -0,0 +1,11 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { any } from "underscore";
+import { CopyPopup } from "./CopyPopup";
+
+describe("Copy Popup snapshot test", () => {
+  it("should render when showCopyPopup is true", () => {
+    const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={() => any} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/Popup/CopyPopup.tsx

@@ -0,0 +1,63 @@
+import { IconButton, Image, Stack, Text } from "@fluentui/react";
+import React, { Dispatch, SetStateAction } from "react";
+import Success from "../../../../images/successfulPopup.svg";
+
+export const CopyPopup = ({
+  showCopyPopup,
+  setShowCopyPopup,
+}: {
+  showCopyPopup: boolean;
+  setShowCopyPopup: Dispatch<SetStateAction<boolean>>;
+}): JSX.Element => {
+  const closePopup = () => {
+    setShowCopyPopup(false);
+  };
+
+  return showCopyPopup ? (
+    <Stack
+      style={{
+        position: "fixed",
+        width: 345,
+        height: 66,
+        padding: 10,
+        gap: 5,
+        top: 75,
+        right: 20,
+        background: "#FFFFFF",
+        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
+      }}
+    >
+      <Stack
+        horizontal
+        verticalAlign="center"
+        style={{ display: "flex", justifyContent: "space-between", padding: "5px, 2px, 0px, 0px" }}
+      >
+        <Stack horizontal verticalAlign="center" style={{ display: "flex", gap: 10 }}>
+          <Image style={{ width: 15, height: 15 }} src={Success} />
+          <Text>
+            <b>Code copied successfully</b>
+          </Text>
+        </Stack>
+        <IconButton
+          styles={{
+            root: {
+              border: "none",
+              backgroundColor: "transparent",
+              padding: 0,
+              selectors: {
+                "&:focus": {
+                  outline: "none",
+                },
+              },
+            },
+          }}
+          iconProps={{ iconName: "Cancel" }}
+          onClick={closePopup}
+        />
+      </Stack>
+      <Text style={{ marginTop: -10 }}>The query has been copied to the clipboard</Text>
+    </Stack>
+  ) : (
+    <></>
+  );
+};

src/Explorer/QueryCopilot/Popup/DeletePopup.test.tsx

@@ -0,0 +1,11 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { any } from "underscore";
+import { DeletePopup } from "./DeletePopup";
+
+describe("Delete Popup snapshot test", () => {
+  it("should render when showDeletePopup is true", () => {
+    const wrapper = shallow(<DeletePopup showDeletePopup={true} setShowDeletePopup={() => any} setQuery={() => any} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/Popup/DeletePopup.tsx

@@ -0,0 +1,38 @@
+import { DefaultButton, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
+import React, { Dispatch, SetStateAction } from "react";
+
+export const DeletePopup = ({
+  showDeletePopup,
+  setShowDeletePopup,
+  setQuery,
+}: {
+  showDeletePopup: boolean;
+  setShowDeletePopup: Dispatch<SetStateAction<boolean>>;
+  setQuery: Dispatch<SetStateAction<string>>;
+}): JSX.Element => {
+  const deleteCode = () => {
+    setQuery("");
+    setShowDeletePopup(false);
+  };
+
+  return (
+    <Modal isOpen={showDeletePopup} styles={{ main: { minHeight: "122px", minWidth: "880px" } }}>
+      <Stack style={{ padding: "16px 24px", height: "auto" }}>
+        <Text style={{ height: 24, fontSize: "18px" }}>
+          <b>Delete code?</b>
+        </Text>
+        <Text style={{ marginTop: 10, marginBottom: 20 }}>
+          This will clear the query from the query builder pane along with all comments and also reset the prompt pane
+        </Text>
+        <Stack horizontal tokens={{ childrenGap: 10 }} horizontalAlign="start">
+          <PrimaryButton style={{ padding: "0px 20px", height: 24 }} onClick={deleteCode}>
+            Delete
+          </PrimaryButton>
+          <DefaultButton style={{ padding: "0px 20px", height: 24 }} onClick={() => setShowDeletePopup(false)}>
+            Close
+          </DefaultButton>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};

src/Explorer/QueryCopilot/Popup/__snapshots__/CopyPopup.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] = `
+<Stack
+  style={
+    Object {
+      "background": "#FFFFFF",
+      "boxShadow": "0 2px 6px rgba(0, 0, 0, 0.16)",
+      "gap": 5,
+      "height": 66,
+      "padding": 10,
+      "position": "fixed",
+      "right": 20,
+      "top": 75,
+      "width": 345,
+    }
+  }
+>
+  <Stack
+    horizontal={true}
+    style={
+      Object {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "padding": "5px, 2px, 0px, 0px",
+      }
+    }
+    verticalAlign="center"
+  >
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "display": "flex",
+          "gap": 10,
+        }
+      }
+      verticalAlign="center"
+    >
+      <Image
+        src=""
+        style={
+          Object {
+            "height": 15,
+            "width": 15,
+          }
+        }
+      />
+      <Text>
+        <b>
+          Code copied successfully
+        </b>
+      </Text>
+    </Stack>
+    <CustomizedIconButton
+      iconProps={
+        Object {
+          "iconName": "Cancel",
+        }
+      }
+      onClick={[Function]}
+      styles={
+        Object {
+          "root": Object {
+            "backgroundColor": "transparent",
+            "border": "none",
+            "padding": 0,
+            "selectors": Object {
+              "&:focus": Object {
+                "outline": "none",
+              },
+            },
+          },
+        }
+      }
+    />
+  </Stack>
+  <Text
+    style={
+      Object {
+        "marginTop": -10,
+      }
+    }
+  >
+    The query has been copied to the clipboard
+  </Text>
+</Stack>
+`;

src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete Popup snapshot test should render when showDeletePopup is true 1`] = `
+<Modal
+  isOpen={true}
+  styles={
+    Object {
+      "main": Object {
+        "minHeight": "122px",
+        "minWidth": "880px",
+      },
+    }
+  }
+>
+  <Stack
+    style={
+      Object {
+        "height": "auto",
+        "padding": "16px 24px",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "fontSize": "18px",
+          "height": 24,
+        }
+      }
+    >
+      <b>
+        Delete code?
+      </b>
+    </Text>
+    <Text
+      style={
+        Object {
+          "marginBottom": 20,
+          "marginTop": 10,
+        }
+      }
+    >
+      This will clear the query from the query builder pane along with all comments and also reset the prompt pane
+    </Text>
+    <Stack
+      horizontal={true}
+      horizontalAlign="start"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <CustomizedPrimaryButton
+        onClick={[Function]}
+        style={
+          Object {
+            "height": 24,
+            "padding": "0px 20px",
+          }
+        }
+      >
+        Delete
+      </CustomizedPrimaryButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "height": 24,
+            "padding": "0px 20px",
+          }
+        }
+      >
+        Close
+      </CustomizedDefaultButton>
+    </Stack>
+  </Stack>
+</Modal>
+`;