From b85b954ce7f4e52a250988ee0f140b00979cb811 Mon Sep 17 00:00:00 2001
From: Willy Lulciuc <willy@datakin.com>
Date: Tue, 22 Oct 2024 14:11:15 -0700
Subject: [PATCH] Display full `runID` and check icon when copied (#2940)

Signed-off-by: Willy Lulciuc <willy.lulciuc@gmail.com>
---
 web/src/components/core/copy/MqCopy.tsx         | 5 ++++-
 web/src/components/datasets/DatasetVersions.tsx | 6 +-----
 web/src/components/jobs/Runs.tsx                | 7 ++++++-
 web/src/routes/events/Events.tsx                | 8 +++++++-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/src/components/core/copy/MqCopy.tsx b/web/src/components/core/copy/MqCopy.tsx
index ce62eecf31..66bc6aeea6 100644
--- a/web/src/components/core/copy/MqCopy.tsx
+++ b/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
diff --git a/web/src/components/datasets/DatasetVersions.tsx b/web/src/components/datasets/DatasetVersions.tsx
index c78ed5a8ab..30506086d1 100644
--- a/web/src/components/datasets/DatasetVersions.tsx
+++ b/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} />
       </>
     )
   }
diff --git a/web/src/components/jobs/Runs.tsx b/web/src/components/jobs/Runs.tsx
index 07ecffa2a5..847e8267cf 100644
--- a/web/src/components/jobs/Runs.tsx
+++ b/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>
diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx
index 34d0dd8de1..30326545e0 100644
--- a/web/src/routes/events/Events.tsx
+++ b/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>