Skip to content

Display full runID and check icon when copied #2940

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 22, 2024
Merged

Display full runID and check icon when copied #2940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion web/src/components/core/copy/MqCopy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand All @@ -28,12 +30,13 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
event.stopPropagation()
navigator.clipboard.writeText(string)
setOpen(true)
setHasCopied(true)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would we also want to revert the icon back say 3s after clicking via a setTimeout?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sorry I missed this, I'll do it right now. @wslulciuc I think the general consensus is that we should do this because that's how this feature works most of the time.

}}
aria-label='copy'
size={'small'}
color={'primary'}
>
<ContentCopyIcon fontSize={'small'} />
{hasCopied ? <Check fontSize={'small'} /> : <ContentCopyIcon fontSize={'small'} />}
</IconButton>
</MQTooltip>
<Snackbar
Expand Down
6 changes: 1 addition & 5 deletions web/src/components/datasets/DatasetVersions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
</>
)
}
Expand Down
7 changes: 6 additions & 1 deletion web/src/components/jobs/Runs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion web/src/routes/events/Events.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading