add copy id feature for task tables

This commit is contained in:
Peizhi Zheng 2022-01-09 17:12:02 -08:00 committed by Ken Hibino
parent 609b319a9e
commit 747d10df97

View File

@ -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: {
@ -287,11 +297,17 @@ 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"
display: "inline-block",
},
"&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper,
@ -309,12 +325,12 @@ const useRowStyles = makeStyles((theme) => ({
width: "200px",
},
copyButton: {
display: "none"
display: "none",
},
IdGroup: {
display: "flex",
alignItems: "center",
}
},
}));
interface RowProps {
@ -356,8 +372,8 @@ function Row(props: RowProps) {
<Tooltip title="Copy full ID to clipboard">
<IconButton
onClick={(e) => {
e.stopPropagation()
navigator.clipboard.writeText(task.id)
e.stopPropagation();
navigator.clipboard.writeText(task.id);
}}
size="small"
className={classes.copyButton}