Sitewide search

EuiSelectableTemplateSitewide is an opinionated wrapper around EuiSelectable to provide a reusable template across the Elastic products that will share the same global search capabilities. It creates the search input that triggers a popover containing the list of options.

Basic setup

Search input

The search ability of EuiSelectable is still hooked up to the options provided. It will highlight the portion of the label that matches the search string.

note

The demo showcases the possibility to allow a keyboard shortcut (command + K) to trigger the search input focus, but the template does not come with this ability.

Popover

The popover itself allows you to display a popoverTitle node, popoverFooter node, or pass any of the popoverProps to the EuiPopover component.

Selection

The options themselves are simply rendered as list items with no interactive behavior like buttons or links. You must handle the interaction when the component passes back the altered array of options with the selected option having checked: 'on'.

Popover toggle and responsiveness

The default display is to render the search input inline which triggers a popover with the results. Or you can decide to trigger the whole selectable component from a single button. By passing your own button to popoverButton, the component will use this to trigger the popover, putting the search inside.

This is a great way to handle reducing the size of the component for smaller screens. The component offers a helper prop called popoverButtonBreakpoints which will only render the popoverButton if the window size matches named breakpoint(s).

Loading...

Options

The options are the most opinionated portion of the template. Their display is determined by the props passed in and extends the normal EuiSelectable.option type. All parts are optional with the exception of the label (A).

B

A. LabelD. MetaDeploymentDefault display

C

Code snippet

const options: EuiSelectableTemplateSitewideOption[] = [
  {
    label: 'Label',
    icon: {
      type: 'logoKibana'
    }
    avatar: {
      name: 'Default',
    },
    meta: [
      {
        text: 'Meta',
        type: 'application',
      },
      {
        text: 'Deployment',
        type: 'deployment',
      },
      {
        text: 'Default display',
      },
    ],
  },
]

• label (required): The name of the item itself. By default, the search box will only use this to match the search term against, but you can supply a separate searchableLabel that combines the label and meta data to search on.
• icon: Only display the solution or application's logo when the option links to the application itself (Dashboard app) and not lower-level items such as individual dashboards. Size and color are predetermined but can be overridden.
• avatar: Represents the Kibana Space that the item is located in, if multiple spaces are present. Type and size are predetermined but can be overridden.
• meta: This bottom line should only contain items if the option is a lower-level item (individual dashboard). The display of which defaults to simple text, but if you pass one of the predetermined types, they will be styled according to the design pattern.

note

The demo shows how you can temporarily replace the icon for a subset of options to display a short list of recently viewed options.