WL#17268: Custom component for compartments

Custom Preact component supporting root expansion/collapse, filtering, and result highlighting.

Designed as a reusable solution and currently integrated as the OCI Compartments Selector in the Migration Assistant.

UI design

General

• Visually align with components from the MySQL Shell GUI UI library
• Support default light and dark themes
• Prefer reuse of existing UI library components where possible

Collapsed State (Default)

• Render as a dropdown-style control
• Display a downward arrow indicator on the right
• Open a popup on click
• Truncate deep compartment paths to show only the trailing segment

Expanded State (Popup)

• Display a filter input with a configurable placeholder
• The filter input must be automatically focused
• Automatically scroll the currently selected item into view when opening (for long lists)
• Provide a close (×) icon on the right to dismiss the popup
• Support closing the popup via the ESC key
• Show expand/collapse indicators (right arrows) for tree items with children
• Limit popup height and enable scrolling for long lists

Filtering Behavior

• Filter the tree dynamically as the user types
• Highlight matched text in bold
• Reset all collapse states when filtering begins to ensure matches are visible if their parents were collapsed
• Reset both the filter input and collapse state when the popup is closed