From 04dbf92a37aa2557abd50fbaaa977fd0bb0a4676 Mon Sep 17 00:00:00 2001
From: stdavis <stdavis@utah.gov>
Date: Thu, 16 May 2024 12:48:21 -0600
Subject: [PATCH] feat(developer): add copy to clipboard to keys table and key
 page

Closes #276
---
 .../src/components/CopyToClipboard.jsx        |  2 +-
 src/developer/src/components/page/Key.jsx     |  4 +++-
 src/developer/src/components/page/Keys.jsx    | 21 ++++++-------------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/developer/src/components/CopyToClipboard.jsx b/src/developer/src/components/CopyToClipboard.jsx
index b169b18e..3569cd11 100644
--- a/src/developer/src/components/CopyToClipboard.jsx
+++ b/src/developer/src/components/CopyToClipboard.jsx
@@ -21,8 +21,8 @@ export default function CopyToClipboard({ text, className }) {
     <CopyToClipboard_lib
       text={text}
       className={twMerge(
-        className,
         'h-8 cursor-pointer hover:text-wavy-400 dark:hover:text-mustard-500',
+        className,
       )}
       onCopy={() => setCopied(true)}
     >
diff --git a/src/developer/src/components/page/Key.jsx b/src/developer/src/components/page/Key.jsx
index 67c66288..03ac4c46 100644
--- a/src/developer/src/components/page/Key.jsx
+++ b/src/developer/src/components/page/Key.jsx
@@ -25,6 +25,7 @@ import { useRef } from 'react';
 import { useLoaderData, useNavigate, useParams } from 'react-router-dom';
 import { useFirestore, useFunctions } from 'reactfire';
 import { timeSince } from '../../../functions/time';
+import CopyToClipboard from '../CopyToClipboard';
 import EditableText from '../EditableText';
 import Button, { RouterButtonLink } from '../design-system/Button';
 import Card from '../design-system/Card';
@@ -200,9 +201,10 @@ export const Component = () => {
           <div>
             <h2
               id="key-creation"
-              className="uppercase text-wavy-600 dark:text-wavy-200"
+              className="flex items-center uppercase text-wavy-600 dark:text-wavy-200"
             >
               {key}
+              <CopyToClipboard text={key} className="ml-1 inline" />
             </h2>
             <p className="text-wavy-400">
               {status === 'pending' ? 'fetching metadata...' : data?.pattern}
diff --git a/src/developer/src/components/page/Keys.jsx b/src/developer/src/components/page/Keys.jsx
index b833f77b..79af44d1 100644
--- a/src/developer/src/components/page/Keys.jsx
+++ b/src/developer/src/components/page/Keys.jsx
@@ -1,9 +1,9 @@
-import { InformationCircleIcon } from '@heroicons/react/20/solid';
 import { useQuery } from '@tanstack/react-query';
 import { createColumnHelper } from '@tanstack/react-table';
 import { httpsCallable } from 'firebase/functions';
 import { Link, useLoaderData } from 'react-router-dom';
 import { useFunctions } from 'reactfire';
+import CopyToClipboard from '../CopyToClipboard';
 import Button, { RouterButtonLink } from '../design-system/Button';
 import Spinner from '../design-system/Spinner';
 import Table from '../design-system/Table';
@@ -54,20 +54,11 @@ const columns = [
   // }),
   columnHelper.accessor('action', {
     header: null,
-    cell: (info) => {
-      return (
-        <div className="flex justify-end">
-          <InformationCircleIcon
-            className="h-6 cursor-pointer text-fuchsia-600 hover:text-fuchsia-900"
-            onClick={(event) => {
-              event.stopPropagation();
-
-              console.log(info.row.getValue('key'));
-            }}
-          />
-        </div>
-      );
-    },
+    cell: (info) => (
+      <div className="flex justify-end">
+        <CopyToClipboard text={info.row.getValue('key')} className="h-6" />
+      </div>
+    ),
   }),
 ];