[Lookout UI] Adding Copy All Button to Job ID Column#4648
[Lookout UI] Adding Copy All Button to Job ID Column#4648mauriceyap merged 13 commits intoarmadaproject:masterfrom
Conversation
8049d81 to
478366a
Compare
| textOverflow: "ellipsis", | ||
| whiteSpace: "nowrap", | ||
| overflow: "hidden", | ||
| <div |
There was a problem hiding this comment.
This change has removed the conditional check for header.column.getCanSort(). The <TableSortLabel> component is now rendered unconditionally for all columns, including non-sortable ones. Please could you restore the conditional rendering so that <TableSortLabel> is only used when header.column.getCanSort() returns true?
| style={{ | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| alignItems: "center", | ||
| gap: 6, | ||
| whiteSpace: "nowrap", | ||
| }} |
There was a problem hiding this comment.
I think we still need overflow: 'hidden' here to prevent potential layout issues when content overflows e.g. long header text. Was there a visual reason why you removed this?
There was a problem hiding this comment.
The goal was to make sure that the copy button did not disappear when then column was resized to minimized width. Was able to restore coverflow hidden in this commit
| // job ID copy values | ||
| const isJobIdColumn = header.column.id === StandardColumnId.JobID | ||
| const jobsTable = header.getContext().table | ||
| const visibleRows = jobsTable.getRowModel().rows | ||
| const visibleRowsExist = visibleRows.length > 0 | ||
| const allJobIds = visibleRows | ||
| .map((row) => row.original.jobId) | ||
| .filter(Boolean) | ||
| const copyContent = allJobIds.join(", ") |
There was a problem hiding this comment.
This is logically correct, but I think this would be slightly cleaner
| // job ID copy values | |
| const isJobIdColumn = header.column.id === StandardColumnId.JobID | |
| const jobsTable = header.getContext().table | |
| const visibleRows = jobsTable.getRowModel().rows | |
| const visibleRowsExist = visibleRows.length > 0 | |
| const allJobIds = visibleRows | |
| .map((row) => row.original.jobId) | |
| .filter(Boolean) | |
| const copyContent = allJobIds.join(", ") | |
| const copyContent = header.column.id === StandardColumnId.JobID | |
| ? header.getContext().table.getRowModel().rows | |
| .map((row) => row.original.jobId) | |
| .filter(Boolean) | |
| .join(", ") | |
| : "" |
| const remainingWidth = totalWidth - resizerWidth - borderWidth | ||
|
|
||
| // job ID copy values | ||
| const isJobIdColumn = header.column.id === StandardColumnId.JobID |
There was a problem hiding this comment.
This would be better if it were a configuration value in GET_JOB_COLUMNS() in internal/lookoutui/src/common/jobsTableColumns.tsx - perhaps:
accessorColumn({
id: StandardColumnId.JobID,
// ...
additionalMetadata: {
// ...
allowCopyColumn: true,
}
})
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
) Adds a button in the jobID column of the Lookout UI to copy all visible Job IDs on the current page. This eliminates the need for users to copy IDs individually. I made minor changes to the HeaderTableCell attributes to ensure that the button remains visible when the column is resized to the minimum width. --------- Signed-off-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai> Co-authored-by: Sigele Nickerson-Adams <sigele.nickerson-adams@nmc2.ai>
What type of PR is this?
Feature
What this PR does / why we need it
This PR adds a button in the jobID column of the Lookout UI to copy all visible Job IDs on the current page. This eliminates the need for users to copy IDs individually. I made minor changes to the HeaderTableCell attributes to ensure that the button remains visible when the column is resized to the minimum width.
Which issue(s) this PR fixes
Fixes #
Special notes for your reviewer