Dashboard API key copy button (#3450)

* PBENCH-1166 Dashboard API key button
distributed-system-analysis · Jun 7, 2023 · b9aebb4 · b9aebb4
1 parent c810bf1
commit b9aebb4
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 10 deletions.
diff --git a/dashboard/src/assets/constants/copyTextConstants.js b/dashboard/src/assets/constants/copyTextConstants.js
@@ -0,0 +1 @@
+export const SHOW_COPIED_TEXT_MS = 4000;
diff --git a/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx b/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
@@ -0,0 +1,52 @@
+import { Button, Tooltip } from "@patternfly/react-core";
+import React, { useState } from "react";
+
+import { CopyIcon } from "@patternfly/react-icons";
+import { SHOW_COPIED_TEXT_MS } from "assets/constants/copyTextConstants";
+
+const ClipboardCopy = ({ copyText }) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  /* Funcion has to be rewritten by removing document.execCommand() on upgrading to HTTPS */
+  const copyTextToClipboard = async (text) =>
+    "clipboard" in navigator
+      ? await navigator.clipboard.writeText(text)
+      : document.execCommand("copy", true, text);
+
+  // onClick handler function for the copy button
+  const handleCopyClick = () => {
+    // Asynchronously call copyTextToClipboard
+    copyTextToClipboard(copyText)
+      .then(() => {
+        // If successful, update the isCopied state value
+        setIsCopied(true);
+        setTimeout(() => {
+          setIsCopied(false);
+        }, SHOW_COPIED_TEXT_MS);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <div className="key-cell-wrapper">
+      <div className="key-cell">{copyText}</div>
+      <Tooltip
+        aria="none"
+        aria-live="polite"
+        content={isCopied ? "Copied" : "Copy to clipboard"}
+      >
+        <Button
+          variant="plain"
+          className="copy-icon"
+          onClick={() => handleCopyClick(copyText)}
+        >
+          <CopyIcon />
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ClipboardCopy;
diff --git a/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx b/dashboard/src/modules/components/ProfileComponent/KeyListTable.jsx
@@ -1,4 +1,3 @@
-import { Button, ClipboardCopy } from "@patternfly/react-core";
 import {
   TableComposable,
   Tbody,
@@ -9,6 +8,8 @@ import {
 } from "@patternfly/react-table";
 import { useDispatch, useSelector } from "react-redux";
 
+import { Button } from "@patternfly/react-core";
+import ClipboardCopy from "./ClipboardCopy";
 import React from "react";
 import { TrashIcon } from "@patternfly/react-icons";
 import { deleteAPIKey } from "actions/keyManagementActions";
@@ -22,7 +23,6 @@ const KeyListTable = () => {
     created: "Created Date & Time",
     key: "API key",
   };
-
   return (
     <TableComposable aria-label="key list table" isStriped>
       <Thead>
@@ -40,14 +40,8 @@ const KeyListTable = () => {
             <Td dataLabel={columnNames.created}>
               {formatDateTime(item.created)}
             </Td>
-            <Td dataLabel={columnNames.key} className="key-cell">
-              <ClipboardCopy
-                hoverTip="Copy API key"
-                clickTip="Copied"
-                variant="plain"
-              >
-                {item.key}
-              </ClipboardCopy>
+            <Td dataLabel={columnNames.key}>
+              <ClipboardCopy copyText={item.key} />
             </Td>
 
             <Td className="delete-icon-cell">

diff --git a/dashboard/src/modules/components/ProfileComponent/index.less b/dashboard/src/modules/components/ProfileComponent/index.less
@@ -82,6 +82,13 @@
       display: block;
       text-overflow: ellipsis;
     }
+    .key-cell-wrapper {
+      display: flex;
+      .copy-icon {
+        padding-top: 0;
+      }
+    }
+
     .pf-c-clipboard-copy__group {
       input {
         background-color: transparent;