Skip to content

Improve search box for filter dropdowns on vulnerability page

Daniel Tian requested to merge 284471-focus-filter-search-on-dropdown-open into master

What does this MR do?

On the vulnerability report for a project, there are filter dropdowns that lets the user filter the vulnerability list:

ksnip_20210122-134615

This MR does the following:

1. When the dropdown is opened, auto focus on the search box if there is one:

Before After
Peek_2021-02-24_22-48 Peek_2021-02-24_22-47

This matches the behavior of other dropdowns-with-search in GitLab, for example the label selector on the issue page:

ksnip_20210224-235357

2. Change the placeholder text in the dropdown's search box from Filter... to Search.

This matches the placeholder text used in other dropdowns in GitLab (see above screenshot).

3. Emit dropdown-show and dropdown-hide events when the dropdown is opened/closed.

This lets the parent component that uses filter-body.vue to respond to the dropdown opening and closing. These events aren't used in this MR, but will be used in a subsequent MR, so this is preparation work.

4. Hide the autocomplete for the search box.

The autocomplete list hides the dropdown items:

ksnip_20210225-005929

5. Make the search box always show at the top instead of scrolling.

Before After
Peek_2021-02-25_02-20 Peek_2021-02-25_02-19

How to test locally

  1. Follow these steps to populate the vulnerability report: https://gitlab.com/-/snippets/1956676
  2. Open ee/app/assets/javascripts/security_dashboard/components/filters/standard_filter.vue and change :show-search-box="showSearchBox" to :show-search-box="true". By default the search box is only shown if there are 20 items or more, this forces it to always show:
<template>
  <filter-body
    ...
    :show-search-box="true"
  >

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Related to #284471 (closed)

Edited by Daniel Tian

Merge request reports