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

[mattrunyon]

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 77.63819% with 89 lines in your changes missing coverage. Please review.
✅ Project coverage is 44.28%. Comparing base (5ef19c2) to head (03b6783).
⚠️ Report is 14 commits behind head on main.

Files with missing lines	Patch %	Lines
...g-builder/sortable-tree/SortableTreeDndContext.tsx	56.00%	33 Missing ⚠️
packages/components/src/popper/Popper.tsx	12.00%	22 Missing ⚠️
...ering-builder/sortable-tree/keyboardCoordinates.ts	0.00%	14 Missing ⚠️
...ity-ordering-builder/VisibilityOrderingBuilder.tsx	93.22%	8 Missing ⚠️
...ar/visibility-ordering-builder/SearchWithModal.tsx	94.59%	6 Missing ⚠️
packages/iris-grid/src/IrisGrid.tsx	0.00%	2 Missing ⚠️
...ty-ordering-builder/sortable-tree/SortableTree.tsx	92.00%	2 Missing ⚠️
...bility-ordering-builder/sortable-tree/TreeItem.tsx	85.71%	1 Missing ⚠️
...bility-ordering-builder/sortable-tree/utilities.ts	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2555      +/-   ##
==========================================
- Coverage   44.34%   44.28%   -0.06%     
==========================================
  Files         764      768       +4     
  Lines       43043    43367     +324     
  Branches    11049    10973      -76     
==========================================
+ Hits        19086    19206     +120     
- Misses      23941    24145     +204     
  Partials       16       16              

Flag	Coverage Δ
unit	44.28% <77.63%> (-0.06%)	⬇️

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

[vbabich]

One small issue: when I drop the item after dragging, it transitions back to its original position with a fade-out, not where I'm dropping it.

dnd.mov

[mattrunyon]

@vbabich I also noticed that, but checked without this change and it seems to be an issue caused by the React 18 upgrade. Couldn't find anything on the dnd-kit GitHub about it

[dsmmcken]

Approved for behaviour.