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

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

@@ -1,39 +1,81 @@
-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" }}
+      <Stack
-      horizontal
+        style={{ margin: "15px 0px 0px 0px", padding: "5px", display: "flex", justifyContent: "space-between" }}
-      verticalAlign="center"
+        horizontal
-    >
+        verticalAlign="center"
-      <Stack horizontal verticalAlign="center">
+      >
-        <Image src={CopilotIcon} />
+        <Stack horizontal verticalAlign="center">
-        <Text style={{ marginLeft: "5px", fontWeight: "bold" }}>Copilot</Text>
+          <Image src={CopilotIcon} />
-        <Text
+          <Text style={{ marginLeft: "5px", fontWeight: "bold" }}>Copilot</Text>
-          style={{
+          <Text
-            background: "#f0f0f0",
+            style={{
-            fontSize: "10px",
+              background: "#f0f0f0",
-            padding: "2px 4px",
+              fontSize: "10px",
-            marginLeft: "5px",
+              padding: "2px 4px",
-            borderRadius: "8px",
+              marginLeft: "5px",
-          }}
+              borderRadius: "8px",
-        >
+            }}
-          Preview
+          >
-        </Text>
+            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" }}
+          title="Exit"
+          ariaLabel="Exit"
+          style={{ color: "#424242", verticalAlign: "middle" }}
+        />
       </Stack>
-      <IconButton
+      {getDeleteHistoryModal()}
-        onClick={() => setShowCopilotSidebar(false)}
+    </>
-        iconProps={{ iconName: "Cancel" }}
-        title="Exit"
-        ariaLabel="Exit"
-        style={{ color: "#424242", verticalAlign: "middle" }}
-      />
-    </Stack>
   );
 };

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

@@ -1,64 +1,158 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header snapshot test should close on button click  1`] = `
-<Stack
+<Fragment>
-  horizontal={true}
-  style={
-    Object {
-      "display": "flex",
-      "justifyContent": "space-between",
-      "margin": "15px 0px 0px 0px",
-      "padding": "5px",
-    }
-  }
-  verticalAlign="center"
->
   <Stack
     horizontal={true}
-    verticalAlign="center"
-  >
-    <Image
-      src={Object {}}
-    />
-    <Text
-      style={
-        Object {
-          "fontWeight": "bold",
-          "marginLeft": "5px",
-        }
-      }
-    >
-      Copilot
-    </Text>
-    <Text
-      style={
-        Object {
-          "background": "#f0f0f0",
-          "borderRadius": "8px",
-          "fontSize": "10px",
-          "marginLeft": "5px",
-          "padding": "2px 4px",
-        }
-      }
-    >
-      Preview
-    </Text>
-  </Stack>
-  <CustomizedIconButton
-    ariaLabel="Exit"
-    iconProps={
-      Object {
-        "iconName": "Cancel",
-      }
-    }
-    onClick={[Function]}
     style={
       Object {
-        "color": "#424242",
+        "display": "flex",
-        "verticalAlign": "middle",
+        "justifyContent": "space-between",
+        "margin": "15px 0px 0px 0px",
+        "padding": "5px",
       }
     }
-    title="Exit"
+    verticalAlign="center"
-  />
+  >
-</Stack>
+    <Stack
+      horizontal={true}
+      verticalAlign="center"
+    >
+      <Image
+        src={Object {}}
+      />
+      <Text
+        style={
+          Object {
+            "fontWeight": "bold",
+            "marginLeft": "5px",
+          }
+        }
+      >
+        Copilot
+      </Text>
+      <Text
+        style={
+          Object {
+            "background": "#f0f0f0",
+            "borderRadius": "8px",
+            "fontSize": "10px",
+            "marginLeft": "5px",
+            "padding": "2px 4px",
+          }
+        }
+      >
+        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={
+        Object {
+          "iconName": "Cancel",
+        }
+      }
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#424242",
+          "verticalAlign": "middle",
+        }
+      }
+      title="Exit"
+    />
+  </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>
 `;