feat: Update display and implement copy of query from history

Previous queries can now be copied to the clipboard from the history

src/components/QueryHistory.tsx

@@ -1,5 +1,12 @@
-import { DetailsList, Panel, SelectionMode } from "@fluentui/react";
-import React, { FC } from "react";
+import {
+  DetailsList,
+  IColumn,
+  IconButton,
+  Panel,
+  SelectionMode,
+  Stack,
+} from "@fluentui/react";
+import React, { FC, ReactNode } from "react";
 
 interface QueryHistoryProps {
   history: string[];
@@ -15,6 +22,7 @@ const QueryHistory: FC<QueryHistoryProps> = ({
   const items = history.map((q) => {
     return {
       query: q.substr(0, 100),
+      actions: ["copy"],
     };
   });
 
@@ -27,20 +35,69 @@ const QueryHistory: FC<QueryHistoryProps> = ({
       maxWidth: 200,
       isResizable: false,
     },
+    {
+      key: "actions",
+      name: "",
+      fieldName: "actions",
+      minWidth: 10,
+      maxWidth: 100,
+      isResizable: false,
+    },
   ];
 
+  const copyQuery = (query: string) => {
+    navigator.clipboard.writeText(query);
+    onDismiss();
+  };
+
+  const historyActions = {
+    copy: (index: number) => (
+      <IconButton
+        iconProps={{ iconName: "copy" }}
+        key="copy"
+        onClick={() => copyQuery(history[index])}
+      />
+    ),
+  };
+
+  const renderHistoryEntry = (
+    item?: any,
+    index?: number,
+    column?: IColumn
+  ): ReactNode => {
+    if (!column || !item) return <></>;
+
+    return (
+      <>
+        {column.key === "query" ? (
+          <>
+            <Stack verticalAlign="center" style={{ height: "100%" }}>
+              {item.query}
+            </Stack>
+          </>
+        ) : (
+          item.actions.map((a: keyof typeof historyActions) => {
+            return historyActions[a](index || 0);
+          })
+        )}
+      </>
+    );
+  };
+
   return (
     <Panel
       headerText="History"
       isOpen={show}
       onDismiss={onDismiss}
+      className="history-panel"
       // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
       closeButtonAriaLabel="Close"
     >
       <DetailsList
         items={items}
         columns={columns}
         selectionMode={SelectionMode.none}
+        onRenderItemColumn={renderHistoryEntry}
       />
     </Panel>
   );