From 5f10ba885f45f974694f8e97b13448ea51c80788 Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Mon, 5 Jun 2023 17:15:03 +0530
Subject: [PATCH 1/3] PBENCH-1166 Dashboard API key button

---
 .../src/assets/constants/copyTextConstants.js |  1 +
 .../ProfileComponent/ClipboardCopy.jsx        | 54 +++++++++++++++++++
 .../ProfileComponent/KeyListTable.jsx         | 14 ++---
 .../components/ProfileComponent/index.less    |  7 +++
 4 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 dashboard/src/assets/constants/copyTextConstants.js
 create mode 100644 dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx

diff --git a/dashboard/src/assets/constants/copyTextConstants.js b/dashboard/src/assets/constants/copyTextConstants.js
new file mode 100644
index 0000000000..7d6dd97419
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..559d9d3d24
--- /dev/null
+++ b/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
@@ -0,0 +1,54 @@
+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);
+
+  const copyTextToClipboard = async (text) => {
+    if ("clipboard" in navigator) {
+      return await navigator.clipboard.writeText(text);
+    } else {
+      return 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
index 587ed5fcfa..b592e94d8a 100644
--- 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
index 3d6121eace..88834aecee 100644
--- 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;

From be354099f3b34c6ebf7c2096eae33f5056ac89c0 Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Tue, 6 Jun 2023 16:04:23 +0530
Subject: [PATCH 2/3] review comments

---
 .../modules/components/ProfileComponent/ClipboardCopy.jsx | 8 +++-----
 .../src/modules/components/ProfileComponent/index.less    | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx b/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
index 559d9d3d24..662e689fac 100644
--- a/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
+++ b/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
@@ -8,11 +8,9 @@ const ClipboardCopy = ({ copyText }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   const copyTextToClipboard = async (text) => {
-    if ("clipboard" in navigator) {
-      return await navigator.clipboard.writeText(text);
-    } else {
-      return document.execCommand("copy", true, text);
-    }
+    "clipboard" in navigator
+      ? await navigator.clipboard.writeText(text)
+      : document.execCommand("copy", true, text);
   };
 
   // onClick handler function for the copy button
diff --git a/dashboard/src/modules/components/ProfileComponent/index.less b/dashboard/src/modules/components/ProfileComponent/index.less
index 88834aecee..8de9cd371a 100644
--- a/dashboard/src/modules/components/ProfileComponent/index.less
+++ b/dashboard/src/modules/components/ProfileComponent/index.less
@@ -88,7 +88,7 @@
         padding-top: 0;
       }
     }
-    
+
     .pf-c-clipboard-copy__group {
       input {
         background-color: transparent;

From 7573220a6dc48a920baad44c49bb9bb1fd18bf95 Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Wed, 7 Jun 2023 16:10:12 +0530
Subject: [PATCH 3/3] review comments

---
 .../src/modules/components/ProfileComponent/ClipboardCopy.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx b/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
index 662e689fac..6db6d68a7e 100644
--- a/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
+++ b/dashboard/src/modules/components/ProfileComponent/ClipboardCopy.jsx
@@ -7,11 +7,11 @@ import { SHOW_COPIED_TEXT_MS } from "assets/constants/copyTextConstants";
 const ClipboardCopy = ({ copyText }) => {
   const [isCopied, setIsCopied] = useState(false);
 
-  const copyTextToClipboard = async (text) => {
+  /* 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 = () => {