Display full runID and check icon when copied

Signed-off-by: Willy Lulciuc <willy.lulciuc@gmail.com>

Author: wslulciuc

web/src/components/core/copy/MqCopy.tsx

@@ -1,6 +1,7 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
+import { Check } from '@mui/icons-material'
 import { Snackbar } from '@mui/material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import IconButton from '@mui/material/IconButton'
@@ -13,6 +14,7 @@ interface MqCopyProps {
 
 const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
   const [open, setOpen] = React.useState(false)
+  const [hasCopied, setHasCopied] = React.useState(false)
   const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
     if (reason === 'clickaway') {
       return
@@ -28,12 +30,13 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
             event.stopPropagation()
             navigator.clipboard.writeText(string)
             setOpen(true)
+            setHasCopied(true)
           }}
           aria-label='copy'
           size={'small'}
           color={'primary'}
         >
-          <ContentCopyIcon fontSize={'small'} />
+          {hasCopied ? <Check fontSize={'small'} /> : <ContentCopyIcon fontSize={'small'} />}
         </IconButton>
       </MQTooltip>
       <Snackbar

web/src/components/datasets/DatasetVersions.tsx

@@ -92,11 +92,7 @@ const DatasetVersions: FunctionComponent<DatasetVersionsProps & DispatchProps> =
             <ArrowBackIosRounded fontSize={'small'} />
           </IconButton>
         </Box>
-        <DatasetInfo
-          dataset={dataset}
-          datasetFields={infoView.fields}
-          facets={infoView.facets}
-        />
+        <DatasetInfo dataset={dataset} datasetFields={infoView.fields} facets={infoView.facets} />
       </>
     )
   }

web/src/components/jobs/Runs.tsx

@@ -24,6 +24,7 @@ import { formatUpdatedAt } from '../../helpers'
 import { runStateColor } from '../../helpers/nodes'
 import { stopWatchDuration } from '../../helpers/time'
 import { useTheme } from '@emotion/react'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqCode from '../core/code/MqCode'
 import MqCopy from '../core/copy/MqCopy'
 import MqEmpty from '../core/empty/MqEmpty'
@@ -156,7 +157,11 @@ const Runs: FunctionComponent<RunsProps & DispatchProps> = (props) => {
               >
                 <TableCell align='left'>
                   <Box display={'flex'} alignItems={'center'}>
-                    {run.id.substring(0, 8)}...
+                    <MQTooltip title={run.id}>
+                      <Box>
+                        <MqText font={'mono'}>{run.id.substring(0, 8)}...</MqText>
+                      </Box>
+                    </MQTooltip>
                     <MqCopy string={run.id} />
                   </Box>
                 </TableCell>

web/src/routes/events/Events.tsx

@@ -296,7 +296,13 @@ const Events: React.FC<EventsProps> = ({
                         >
                           <TableCell align='left'>
                             <Box display={'flex'} alignItems={'center'}>
-                              <MqText font={'mono'}>{event.run.runId.substring(0, 8)}...</MqText>
+                              <MQTooltip title={event.run.runId}>
+                                <Box>
+                                  <MqText font={'mono'}>
+                                    {event.run.runId.substring(0, 8)}...
+                                  </MqText>
+                                </Box>
+                              </MQTooltip>
                               <MqCopy string={event.run.runId} />
                             </Box>
                           </TableCell>