Improve BreadcrumbSelector component

[seancolsen]

Current behavior

• This is the BreadcrumbSelector component:

  

• It is used both for selecting a Schema within the current Database and for selecting a Table or Exploration within the current Schema.

Desired behavior

• It should look more like this mockup:

  

  Specifically...

  • A search input should exist and be focused when the BreadcrumbSelector opens. Search queries should filter the entries across all categories.

  • Entries should highlight the substring of their label which matches the search query.

  • Vertical scrolling should not happen so easily. We'll need to increase max-height somewhere. A good value might be something like calc(100vh - 5em).

• Additionally (not represented in the mockup)

  • If the URL for the entry matches the start of the router's current URL, then the entry should visually indicate that it's active. (It's important to match the start because we want to show the active schema when we're on the Table Page, for example.)

  • An "Add New" option should appear within each category.

    To implement this, I'd recommend starting by changing...

    export type BreadcrumbSelectorData = Map<string, BreadcrumbSelectorEntry[]>;
    

    to...

    interface BreadcrumbSelectorAddNewViaLink {
      type: 'link';
      href: string;
    }
    interface BreadcrumbSelectorAddNewViaButton {
      type: 'button';
      onSubmit: () => Promise<void>;
    }
    interface BreadcrumbSelectorSection {
      entries: BreadcrumbSelectorEntry[];
      addNew?: BreadcrumbSelectorAddNewViaLink | BreadcrumbSelectorAddNewViaButton;
    }
    export type BreadcrumbSelectorData = Map<string, BreadcrumbSelectorSection>;
    

  • When hovered, each Table entry should have an icon button which opens the Record Selector, navigating the user to the Record Page for their selected record. For this, we'll probably want to add the following property to the BreadcrumbSelectorEntry interface:

    interface BreadcrumbSelectorEntry {
      // ...
      button?: { icon: IconProps, label: string, onClick: () => void }
    }
    

It's okay to create small PRs that handle only a portion of these somewhat unrelated improvements.