From 963f2180b5111486e78e7d3fd38a6d5c26ef96b9 Mon Sep 17 00:00:00 2001
From: Savas Vedova <savas@stormkit.io>
Date: Wed, 4 Dec 2024 18:26:38 +0300
Subject: [PATCH] feat: implement copy functionality for api keys

---
 .../config/_components/TabAPIKey.spec.tsx     |  3 +-
 .../[env-id]/config/_components/TabAPIKey.tsx | 93 +++++++++++--------
 2 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.spec.tsx b/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.spec.tsx
index 27fe5607..df33fd69 100644
--- a/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.spec.tsx
+++ b/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.spec.tsx
@@ -64,7 +64,8 @@ describe("~/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.t
       expect(wrapper.getByText("CI")).toBeTruthy();
     });
 
-    fireEvent.click(wrapper.getAllByLabelText("Remove API Key").at(1)!);
+    fireEvent.click(wrapper.getByLabelText("expand-9868814106"));
+    fireEvent.click(wrapper.getByText("Delete"));
 
     await waitFor(() => {
       expect(wrapper.getByText("Confirm action")).toBeTruthy();
diff --git a/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.tsx b/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.tsx
index 31223a37..fb2c8a71 100644
--- a/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.tsx
+++ b/src/pages/apps/[id]/environments/[env-id]/config/_components/TabAPIKey.tsx
@@ -1,10 +1,12 @@
 import { useState } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
 import Button from "@mui/lab/LoadingButton";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import Snackbar from "@mui/material/Snackbar";
 import DeleteIcon from "@mui/icons-material/Delete";
 import Card from "~/components/Card";
 import CardHeader from "~/components/CardHeader";
@@ -23,6 +25,7 @@ interface Props {
 }
 
 export default function TabAPIKey({ app, environment: env }: Props) {
+  const [clicked, setClicked] = useState<string>();
   const [isVisible, setIsVisible] = useState<string>("");
   const [refreshToken, setRefreshToken] = useState<number>();
   const [success, setSuccess] = useState(false);
@@ -85,7 +88,39 @@ export default function TabAPIKey({ app, environment: env }: Props) {
 
       <Box>
         {keys.map(apiKey => (
-          <CardRow key={apiKey.token}>
+          <CardRow
+            key={apiKey.token}
+            menuLabel={`expand-${apiKey.id}`}
+            menuItems={[
+              {
+                text: "Copy to Clipboard",
+                icon: <ContentCopyIcon />,
+                onClick: () => {
+                  setClicked(apiKey.id);
+                  navigator.clipboard.writeText(apiKey.token);
+                },
+              },
+              {
+                text: "Toggle visibility",
+                icon:
+                  isVisible === apiKey.id ? (
+                    <VisibilityIcon />
+                  ) : (
+                    <VisibilityOffIcon />
+                  ),
+                onClick: () => {
+                  setIsVisible(isVisible === apiKey.id ? "" : apiKey.id);
+                },
+              },
+              {
+                text: "Delete",
+                icon: <DeleteIcon />,
+                onClick: () => {
+                  setApiKeyToDelete(apiKey);
+                },
+              },
+            ]}
+          >
             <Box
               sx={{
                 display: "flex",
@@ -105,41 +140,6 @@ export default function TabAPIKey({ app, environment: env }: Props) {
                   {isVisible === apiKey.id ? apiKey.token : "*".repeat(32)}
                 </Box>
               </Box>
-              <Box>
-                <IconButton
-                  title="Toggle visibility"
-                  size="small"
-                  sx={{
-                    scale: "0.9",
-                    opacity: 0.5,
-                    ":hover": { opacity: 1 },
-                  }}
-                  onClick={() => {
-                    setIsVisible(isVisible === apiKey.id ? "" : apiKey.id);
-                  }}
-                >
-                  {isVisible === apiKey.id ? (
-                    <VisibilityIcon />
-                  ) : (
-                    <VisibilityOffIcon />
-                  )}
-                </IconButton>
-                <IconButton
-                  title="Remove API Key"
-                  aria-label="Remove API Key"
-                  size="small"
-                  sx={{
-                    scale: "0.9",
-                    opacity: 0.5,
-                    ":hover": { opacity: 1 },
-                  }}
-                  onClick={() => {
-                    setApiKeyToDelete(apiKey);
-                  }}
-                >
-                  <DeleteIcon />
-                </IconButton>
-              </Box>
             </Box>
           </CardRow>
         ))}
@@ -180,7 +180,8 @@ export default function TabAPIKey({ app, environment: env }: Props) {
               .then(() => {
                 setRefreshToken(Date.now());
               })
-              .catch(() => {
+              .catch(e => {
+                console.log(e);
                 setError("Something went wrong while deleting the API key.");
               })
               .finally(() => {
@@ -195,6 +196,22 @@ export default function TabAPIKey({ app, environment: env }: Props) {
           this key, it will stop working.
         </ConfirmModal>
       )}
+      {clicked && (
+        <Snackbar
+          color="success"
+          open
+          autoHideDuration={5000}
+          onClose={() => {
+            setClicked(undefined);
+          }}
+          message={
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              <CheckCircleIcon color="success" sx={{ mr: 1 }} />
+              API Key copied to clipboard successfully
+            </Box>
+          }
+        />
+      )}
     </Card>
   );
 }