Added Copy Button for Lineage ID (#2578)

* added copy button for id Signed-off-by: Amanda Yao <amanda.yao@berkeley.edu> * fixed prettier Signed-off-by: Amanda Yao <amanda.yao@berkeley.edu> --------- Signed-off-by: Amanda Yao <amanda.yao@berkeley.edu>
MarquezProject · Aug 10, 2023 · 37bbd88 · 37bbd88
1 parent 6bfc0d5
commit 37bbd88
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/web/src/components/core/copy/MqCopy.tsx b/web/src/components/core/copy/MqCopy.tsx
@@ -0,0 +1,49 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+
+import { Snackbar, Tooltip } from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import IconButton from '@mui/material/IconButton'
+import React from 'react'
+
+interface MqCopyProps {
+  string: string
+}
+
+const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
+  const [open, setOpen] = React.useState(false)
+  const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpen(false)
+  }
+  return (
+    <>
+      <Tooltip title='Copy'>
+        <IconButton
+          onClick={(event) => {
+            event.stopPropagation()
+            navigator.clipboard.writeText(string)
+            setOpen(true)
+          }}
+          aria-label='copy'
+          size={'small'}
+          color={'primary'}
+        >
+          <ContentCopyIcon fontSize={'small'} />
+        </IconButton>
+      </Tooltip>
+      <Snackbar
+        open={open}
+        autoHideDuration={2000}
+        onClose={handleClose}
+        message={`Copied ${string}`}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      />
+    </>
+  )
+}
+
+export default MqEmpty
diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx
@@ -37,6 +37,7 @@ import MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
 import React, { useEffect, useRef } from 'react'
 import moment from 'moment'
+import MqCopy from '../../components/core/copy/MqCopy'
 
 interface StateProps {
   events: Event[]
@@ -248,7 +249,10 @@ const Events: React.FC<EventsProps> = ({
                           }}
                         >
                           <TableCell align='left'>
-                            <MqText font={'mono'}>{event.run.runId}</MqText>
+                            <Box display={"flex"} alignItems={"center"}>
+                              <MqText font={'mono'}>{event.run.runId}</MqText>
+                              <MqCopy string={event.run.runId}/>
+                            </Box>
                           </TableCell>
                           <TableCell align='left'>
                             <MqStatus