Add copy-to-clipboard buttons in RawLogTable for log line data and URLs
#1227
Conversation
🦋 Changeset detectedLatest commit: ce22e35 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
E2E Test Results❌ 2 tests failed • 23 passed • 3 skipped • 365s
|
…le for improved accessibility
…ionality; refactor copy buttons in DBRowTable for improved consistency style: adjust button background color for better visibility
…oved code clarity
…ld interaction and copy functionality
| [styles.wrapped]: wrapLinesEnabled, | ||
| })} | ||
| > | ||
| <Popover width={80} position="top-start" offset={5} opened={opened}> |
There was a problem hiding this comment.
For some reason I get glitches with the popover staying opened, usually when I click on the popover to open a side panel row. Is it because there's a on click trigger we didn't disable?
| const rowWhere = getRowWhere(row); | ||
| const currentUrl = new URL(window.location.href); | ||
| // Add the row identifier as query parameters | ||
| currentUrl.searchParams.set('rowWhere', rowWhere); |
There was a problem hiding this comment.
I think we need to add rowSource here as well, though it works without it. @brandon-pereira I saw you might have touched this recently, any chance you know more? (I know the param existed before you joined, but I've forgotten the context of that param by now!)
|
|
||
| const copyRowData = async () => { | ||
| const rowWhere = getRowWhere(row); | ||
| await navigator.clipboard.writeText(rowWhere); |
There was a problem hiding this comment.
I think we want to copy the row data instead of the rowWhere data imo. Maybe JSON.stringify(row)? (I'm not sure what the row object looks like here, but that seems like a pretty sane behavior)
| cell.getContext(), | ||
| )} | ||
| <div className={styles.fieldTextContainer}> | ||
| <DBRowTableFieldWithPopover |
There was a problem hiding this comment.
For some reason I'm seeing a bug where if I hover over a cell with a popover and then try to scroll rapidly, I get a double scroll bar pop up. This doesn't happen in the main branch so I suspect it's something triggered by this popover. This might be a bit tricky to debug though, I suspect something weird in how heights are being calculated momentarily with the popover?
Kapture.2025-10-01.at.15.35.49.mp4
…mproved layout consistency
Co-authored-by: Mike Shi <[email protected]>
…ithPopover and DBRowTableIconButton components
…esTableChart and DBRowTable components
…s and z-index adjustments
…RowTableFieldWithPopover and SearchPage styles
|
Seeing an issue where the table header goes on top of the modal when open |
| @@ -0,0 +1,132 @@ | |||
| import React, { useRef, useState } from 'react'; | |||
There was a problem hiding this comment.
Love the addition of these components and slowly moving things out of DBRowTable, could we put these components in a folder called DBTable like I did in this PR? https://github.com/hyperdxio/hyperdx/pull/1232/files#diff-4990739d2290c82fba13c3caa553b25a35eadda265e594b9276f3b367fa108c2
We can then drop DBRowTable from the File name.
It will take a while to get some structure, but this could be a first starting point.
…s and field popover
…nd improve button layout
…enhance button titles for clarity
…terPlus with IconFilter
Closes HDX-2436.
This PR adds copy-to-clipboard buttons in
RawLogTablefor log line data and URLs, with improved button styling. It also adds row field buttons.