From 747d10df9719f17776a68f834d8d54fc71aebf02 Mon Sep 17 00:00:00 2001
From: Peizhi Zheng <pzheng16@asu.edu>
Date: Sun, 9 Jan 2022 17:12:02 -0800
Subject: [PATCH] add copy id feature for task tables

---
 ui/src/components/PendingTasksTable.tsx | 68 +++++++++++++++----------
 1 file changed, 42 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx
index 1cd4cc4..0f7f4e9 100644
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/ui/src/components/PendingTasksTable.tsx
@@ -13,7 +13,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import ArchiveIcon from "@material-ui/icons/Archive";
 import DeleteIcon from "@material-ui/icons/Delete";
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
@@ -21,7 +21,15 @@ import React, { useCallback, useState } from "react";
 import { connect, ConnectedProps } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
-import { archiveAllPendingTasksAsync, archivePendingTaskAsync, batchArchivePendingTasksAsync, batchDeletePendingTasksAsync, deleteAllPendingTasksAsync, deletePendingTaskAsync, listPendingTasksAsync } from "../actions/tasksActions";
+import {
+  archiveAllPendingTasksAsync,
+  archivePendingTaskAsync,
+  batchArchivePendingTasksAsync,
+  batchDeletePendingTasksAsync,
+  deleteAllPendingTasksAsync,
+  deletePendingTaskAsync,
+  listPendingTasksAsync,
+} from "../actions/tasksActions";
 import { usePolling } from "../hooks";
 import { taskDetailsPath } from "../paths";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
@@ -30,7 +38,9 @@ import { TableColumn } from "../types/table";
 import { prettifyPayload, uuidPrefix } from "../utils";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TableActions from "./TableActions";
-import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -86,7 +96,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
   const [page, setPage] = useState(0);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
-  
+
   const handlePageChange = (
     event: React.MouseEvent<HTMLButtonElement> | null,
     newPage: number
@@ -287,17 +297,23 @@ function PendingTasksTable(props: Props & ReduxProps) {
 const useRowStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
+    "& #copy-button": {
+      display: "none",
+    },
     "&:hover": {
       boxShadow: theme.shadows[2],
+      "& #copy-button": {
+        display: "inline-block",
+      },
     },
-    "&:hover $copyButton":{
-      display: "inline-block"
+    "&:hover $copyButton": {
+      display: "inline-block",
     },
     "&:hover .MuiTableCell-root": {
       borderBottomColor: theme.palette.background.paper,
     },
   },
-   
+
   actionCell: {
     width: "96px",
   },
@@ -305,16 +321,16 @@ const useRowStyles = makeStyles((theme) => ({
     marginLeft: 3,
     marginRight: 3,
   },
-  idCell:{
+  idCell: {
     width: "200px",
   },
   copyButton: {
-    display: "none"
+    display: "none",
+  },
+  IdGroup: {
+    display: "flex",
+    alignItems: "center",
   },
-  IdGroup:{
-    display:"flex",
-    alignItems:"center",
-  }
 }));
 
 interface RowProps {
@@ -352,19 +368,19 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell component="th" scope="row" className={classes.idCell}>
         <div className={classes.IdGroup}>
-        {uuidPrefix(task.id)}
-        <Tooltip title="Copy full ID to clipboard">
-          <IconButton
-            onClick={(e) => { 
-              e.stopPropagation()
-              navigator.clipboard.writeText(task.id)
-            }}
-            size="small"
-            className={classes.copyButton}
-          >
-            <FileCopyOutlinedIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
         </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>