Added Copy Button for Lineage ID

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

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