feat: DH-18960: Improve column selection functionality for large tables

[mattrunyon]

Haven't added unit tests yet (and not sure how in depth they can be because you can't really test the drag interactions with Jest/JSDom)

Can maybe add a few e2e tests, but I have concerns about them being flaky as the other drag and drop tests have been flaky in the past.

Things I tested

• Focusing search opens the search modal and keeps focus on the input. Selection in the bottom list is cleared.
• The modal does not overflow the bottom of the screen, but scrolls internally
• Resizing the grid panel also updates the search modal size/position
• Clicking outside of the modal (except a resize handle and the input) closes the modal
• Pressing escape closes the modal
  • When input is focused
  • When modal is focused (Ctrl+Click an item)
• Clicking on the input or typing re-opens the modal
• Searching updates the matching items
• Clicking an item in the modal closes the modal, selects and scrolls to the item in the main list
• If there are multiple matching items, a "Select Matching" button appears as a footer (always visible). It selects all matching items and closes the modal.
• Ctrl+Click and Shift+Click work in the search modal. Note you must hold ctrl/shift for the first item click
  • When there are multiple items selected, a "Select Group" button appears in addition to the "Select Matching" button. This closes the modal (the items are already selected in the underlying list)
• You can drag an item out of the search modal and move it around the underlying list. You can drop in the list.
• You can Ctrl/Shift+Click multiple items in the search modal, then drag any of the selected items to move the entire selection
• Groups appear flattened in the modal
• If you disable "Show hidden items", those items still appear in the search modal
  • If you click one of those hidden items, the modal is closed, the column is marked visible, and scrolled to in the list
  • If you drag one of those hidden items, the column is marked visible and drag and drop works.
• If you drag a group item out of the modal, the whole group is dragged
• Very long column names are truncated

Probably some other things I'm forgetting, but it should be pretty robust

[codecov]

Codecov Report

❌ Patch coverage is 50.42493% with 175 lines in your changes missing coverage. Please review.
✅ Project coverage is 43.94%. Comparing base (5ef19c2) to head (a3791e0).
⚠️ Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...ar/visibility-ordering-builder/SearchWithModal.tsx	37.25%	63 Missing and 1 partial ⚠️
...g-builder/sortable-tree/SortableTreeDndContext.tsx	56.16%	32 Missing ⚠️
...ity-ordering-builder/VisibilityOrderingBuilder.tsx	66.29%	30 Missing ⚠️
packages/components/src/popper/Popper.tsx	15.00%	17 Missing ⚠️
...ering-builder/sortable-tree/keyboardCoordinates.ts	0.00%	14 Missing ⚠️
...sidebar/visibility-ordering-builder/SearchItem.tsx	18.18%	9 Missing ⚠️
...ty-ordering-builder/sortable-tree/SortableTree.tsx	84.00%	4 Missing ⚠️
packages/iris-grid/src/IrisGrid.tsx	0.00%	2 Missing ⚠️
...bility-ordering-builder/sortable-tree/TreeItem.tsx	71.42%	2 Missing ⚠️
...bility-ordering-builder/sortable-tree/utilities.ts	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2555      +/-   ##
==========================================
- Coverage   44.34%   43.94%   -0.40%     
==========================================
  Files         764      766       +2     
  Lines       43043    43182     +139     
  Branches    11049    10923     -126     
==========================================
- Hits        19086    18975     -111     
- Misses      23941    24190     +249     
- Partials       16       17       +1     

Flag	Coverage Δ
unit	43.94% <50.42%> (-0.40%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dsmmcken]

1. "select matching" not scrolling into view first selected option
2. "select matching" does not unhide selection
3. enter key doesn't select first item

Thoughts on should the column order in the popover be sorted or something?

Weird state where menu doesn't close:

• open popover
• click focus out of browser window to desktop
• click focus back onto window, by clicking onto table
• drag an item, and menu is stuck open