SearchFactory

Description

The SearchFactory is a UI component factory that constructs the search panel found with the extension's issue page sidebar. In order to quickly locate the desired label, users can search for labels by typing within the search input box. Once the user has found their desired label, they can select or deselect labels by pressing the space key. When the user has finished selecting or deselecting labels, users can press enter to apply the labels that they have selected.

Preview of search panel

Events

Published

• search-bar/apply-selected-labels - published when the user press the enter key to apply selected labels
• search/toggle-select-item - published when the user press space to toggle the selection of the label being searched
• search-bar/escape-key-triggered - published when the user press the escape key within the search input box to close the sidebar

Subscribed

• side-bar-ui/visible - reacts by giving focus to the search input box. The event handler is called handleSideBarVisibleEvent().
• side-bar-ui/hidden - reacts by causing the search input box to lose focus. The event handler is called handleSideBarHiddenEvent().
• selected-label/toggle-select-item-finished - reacts by publishing the search-bar/apply-selected-labels event and clearing the search input box. The event handler is called handleApplyEvent().

Search behaviour

• Users can search for labels by typing a prefix/substring/suffix (Only consecutive letters are considered) of its full label name.
• It is more forgiving towards missing dots and dashes and therefore the label name of a-allocated is matched even though the user enters aallocated. However, it will not be matched with a-allocated if the user enters a#allocated.

Overview of SearchFactory

• You can use the create() function to create a search panel element with event handlers attached.
• Key down events emitted by the search input box when the user types within the search input box are handled by the handleKeyDownEvent() function.
• Input change events emitted by the search input box when the input changes are handled by the handleInputChangeEvent() function.
• The search drop list is populated with matched labels using the populateSearchList() function.
• Click events emitted when a label item within the search drop list is clicked on by the user are handled by the handleListItemClickEvent() function
• In order to show or hide the search drop list, you can call the showSearchList() or hideSearchlist() functions respectively.
• Below is the HTML representation of the element that it creates:

<div class="search-container ui raised segment">...</div>