ISSUE #5719 - Tabular view: bulk update - selection column #5743
Conversation
…pened in sidebar
…to tickets table context
…oved from the table
There was a problem hiding this comment.
Pull request overview
This PR implements bulk update functionality for the tabular view by adding a selection column with checkboxes, enabling users to select multiple tickets for bulk operations.
Key changes:
- Added a fixed selection column with checkboxes for individual ticket selection and a header checkbox for select/deselect all
- Introduced state management for selected ticket IDs in the context, with automatic cleanup when templates change or containers/federations are removed
- Added a temporary bulk edit button that logs selected ticket IDs to the console
Reviewed changes
Copilot reviewed 14 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| ticketsTableContext.tsx | Added state management for selected ticket IDs and temporary bulk edit handler |
| ticketsTableSelectionColumn.component.tsx | New component implementing the selection column with checkboxes |
| ticketsTableSelectionColumn.styles.ts | Styling for the selection column and checkboxes |
| ticketsTableSelectionColumn.helper.ts | Defines the fixed width constant for the selection column |
| ticketsTableGroup.component.tsx | Integrated selection column into the table layout |
| ticketsTableRow.styles.ts | Removed top-left border radius to accommodate selection column styling |
| ticketsTableHeaders.styles.ts | Changed header width from fit-content to 100% for proper alignment |
| newTicketRowButton.styles.ts | Added offset to account for selection column positioning |
| newTicketRowButton.component.tsx | Adjusted width calculation to include selection column |
| ticketsTable.helper.ts | Exported row height constant for reuse |
| ticketsTable.component.tsx | Added logic to remove selected IDs when containers/federations are removed and integrated bulk edit button |
| bulkEditButton.component.tsx | New temporary component for testing bulk edit functionality |
| tableIcon.styles.ts | Adjusted gear icon position to account for selection column |
| resizableTableCell.component.tsx | Made name prop optional and added alwaysVisible prop for non-movable cells |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const onBulkEdit = () => { | ||
| // eslint-disable-next-line no-console | ||
| console.log('Editting these ids...', selectedIds); |
There was a problem hiding this comment.
Corrected spelling of 'Editting' to 'Editing'.
| console.log('Editting these ids...', selectedIds); | |
| console.log('Editing these ids...', selectedIds); |
| type SelectionRowType = { | ||
| ticketId: string; | ||
| selected: boolean; | ||
| onCheck: (e: any, ticketId: string) => void; |
There was a problem hiding this comment.
The parameter type any should be replaced with a more specific type such as React.MouseEvent<HTMLButtonElement> or React.ChangeEvent<HTMLInputElement> to maintain type safety.
| import { HTMLAttributes } from 'react'; | ||
| import { ResizableTableContext } from '../resizableTableContext'; | ||
| import { Item } from './resizableTableCell.styles'; | ||
| import { useContextWithCondition } from '@/v5/helpers/contextWithCondition/contextWithCondition.hooks'; |
There was a problem hiding this comment.
Somthing weird happens. When selecting a model qith 10k+ tickets if I scroll a little it starts like shuffling or scrolling by itself:
Recording.2025-11-27.171222.mp4
| onClick?: () => void; | ||
| }; | ||
| export const ResizableTableCell = ({ name, ...props }: ResizableTableCellProps) => { | ||
| export const ResizableTableCell = ({ name, alwaysVisible, ...props }: ResizableTableCellProps) => { |
There was a problem hiding this comment.
couldnt you just re-use <Item />?
| setSelectedIds(selectedIds.filter((id) => id !== ticketId)); | ||
| }, [selectedIds]); | ||
|
|
||
| const onCheckAll = (e) => { |
There was a problem hiding this comment.
It takes an unusual amount amount of time when deselecting. When selecting all its instant and when deselecting all it takes a couple of seconds.
This fixes #5719
Description