Merge branch 'master' into users/v-prklepic/V2deleteHistoryButton

src/Explorer/QueryCopilot/V2/Header/Header.tsx

@@ -1,12 +1,44 @@
-import { IconButton, Image, Stack, Text } from "@fluentui/react";
+import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
 import CopilotIcon from "../../../../../images/CopilotSidebarLogo.svg";
 
 export const Header: React.FC = (): JSX.Element => {
-  const { setShowCopilotSidebar } = useQueryCopilot();
+  const { setShowCopilotSidebar, chatMessages, setChatMessages, setShowExplanationBubble } = useQueryCopilot();
+  const [showDeleteHistoryModal, setShowDeleteHistoryModal] = React.useState(false);
+
+  const getDeleteHistoryModal = () => {
+    return (
+      <Modal isOpen={showDeleteHistoryModal} styles={{ main: { minHeight: "122px", minWidth: "480px" } }}>
+        <Stack style={{ padding: "16px 24px", height: "auto" }}>
+          <Text style={{ height: 24, fontSize: "18px" }}>
+            <b>Delete chat history?</b>
+          </Text>
+          <Text style={{ marginTop: 10, marginBottom: 20 }}>
+            This action will clear all chat history. Are you sure you want to continue?
+          </Text>
+          <Stack horizontal tokens={{ childrenGap: 10 }} horizontalAlign="start">
+            <PrimaryButton
+              style={{ padding: "0px 20px", height: 24 }}
+              onClick={() => {
+                setChatMessages([]);
+                setShowExplanationBubble(false);
+                setShowDeleteHistoryModal(false);
+              }}
+            >
+              Continue
+            </PrimaryButton>
+            <DefaultButton style={{ padding: "0px 20px", height: 24 }} onClick={() => setShowDeleteHistoryModal(false)}>
+              Close
+            </DefaultButton>
+          </Stack>
+        </Stack>
+      </Modal>
+    );
+  };
 
   return (
+    <>
       <Stack
         style={{ margin: "15px 0px 0px 0px", padding: "5px", display: "flex", justifyContent: "space-between" }}
         horizontal
@@ -27,6 +59,14 @@ export const Header: React.FC = (): JSX.Element => {
             Preview
           </Text>
         </Stack>
+        <IconButton
+          onClick={() => setShowDeleteHistoryModal(true)}
+          iconProps={{ iconName: "History" }}
+          title="Delete history"
+          ariaLabel="Delete history"
+          style={{ color: "#424242", verticalAlign: "middle" }}
+          disabled={chatMessages.length === 0}
+        />
         <IconButton
           onClick={() => setShowCopilotSidebar(false)}
           iconProps={{ iconName: "Cancel" }}
@@ -35,5 +75,7 @@ export const Header: React.FC = (): JSX.Element => {
           style={{ color: "#424242", verticalAlign: "middle" }}
         />
       </Stack>
+      {getDeleteHistoryModal()}
+    </>
   );
 };

src/Explorer/QueryCopilot/V2/Header/__snapshots__/Header.test.tsx.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header snapshot test should close on button click  1`] = `
-<Stack
+<Fragment>
+  <Stack
     horizontal={true}
     style={
       Object {
@@ -12,7 +13,7 @@ exports[`Header snapshot test should close on button click  1`] = `
       }
     }
     verticalAlign="center"
->
+  >
     <Stack
       horizontal={true}
       verticalAlign="center"
@@ -44,6 +45,23 @@ exports[`Header snapshot test should close on button click  1`] = `
         Preview
       </Text>
     </Stack>
+    <CustomizedIconButton
+      ariaLabel="Delete history"
+      disabled={true}
+      iconProps={
+        Object {
+          "iconName": "History",
+        }
+      }
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#424242",
+          "verticalAlign": "middle",
+        }
+      }
+      title="Delete history"
+    />
     <CustomizedIconButton
       ariaLabel="Exit"
       iconProps={
@@ -60,5 +78,81 @@ exports[`Header snapshot test should close on button click  1`] = `
       }
       title="Exit"
     />
-</Stack>
+  </Stack>
+  <Modal
+    isOpen={true}
+    styles={
+      Object {
+        "main": Object {
+          "minHeight": "122px",
+          "minWidth": "480px",
+        },
+      }
+    }
+  >
+    <Stack
+      style={
+        Object {
+          "height": "auto",
+          "padding": "16px 24px",
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "fontSize": "18px",
+            "height": 24,
+          }
+        }
+      >
+        <b>
+          Delete chat history?
+        </b>
+      </Text>
+      <Text
+        style={
+          Object {
+            "marginBottom": 20,
+            "marginTop": 10,
+          }
+        }
+      >
+        This action will clear all chat history. Are you sure you want to continue?
+      </Text>
+      <Stack
+        horizontal={true}
+        horizontalAlign="start"
+        tokens={
+          Object {
+            "childrenGap": 10,
+          }
+        }
+      >
+        <CustomizedPrimaryButton
+          onClick={[Function]}
+          style={
+            Object {
+              "height": 24,
+              "padding": "0px 20px",
+            }
+          }
+        >
+          Continue
+        </CustomizedPrimaryButton>
+        <CustomizedDefaultButton
+          onClick={[Function]}
+          style={
+            Object {
+              "height": 24,
+              "padding": "0px 20px",
+            }
+          }
+        >
+          Close
+        </CustomizedDefaultButton>
+      </Stack>
+    </Stack>
+  </Modal>
+</Fragment>
 `;