diff --git a/src/components/QueryHistory.tsx b/src/components/QueryHistory.tsx index 954aa14..fb112ed 100644 --- a/src/components/QueryHistory.tsx +++ b/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 = ({ const items = history.map((q) => { return { query: q.substr(0, 100), + actions: ["copy"], }; }); @@ -27,13 +35,61 @@ const QueryHistory: FC = ({ 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) => ( + copyQuery(history[index])} + /> + ), + }; + + const renderHistoryEntry = ( + item?: any, + index?: number, + column?: IColumn + ): ReactNode => { + if (!column || !item) return <>; + + return ( + <> + {column.key === "query" ? ( + <> + + {item.query} + + + ) : ( + item.actions.map((a: keyof typeof historyActions) => { + return historyActions[a](index || 0); + }) + )} + + ); + }; + return ( @@ -41,6 +97,7 @@ const QueryHistory: FC = ({ items={items} columns={columns} selectionMode={SelectionMode.none} + onRenderItemColumn={renderHistoryEntry} /> );