Skip to content

GlFilteredSearch: Improve option interactions

Mark Florianrequested to merge
filtered-search-misc-fixes into main

What does this MR do?

Generally refactors and improves the option rendering and interactivity. See the GitLab integration MR as well.

chore(GlFilteredSearch): Use boolean for default operator

This doesn't change any behaviour. It's just odd to use a string representation for a boolean.

chore(GlFilteredSearch): Make values and titles in options different

This makes it easier to spot if we're not treating values and titles properly. For instance, using the value as the title, or vice versa.

docs(GlFilteredSearch): Recommend index in suggestion keys

This also fixes a story which exhibited the incorrect behaviour. To reproduce it before this commit:

  1. Go to the "With Multi Select" story.
  2. Backspace into the "Assignee" token until only a "b" remains, and only the "User Beta" option is visible.
  3. Backspace once more, to display all the other user options.
  4. Press DownArrow once, and observe "User Beta" is selected.
  5. Press DownArrow once, and observe "User Alpha" is selected.
  6. Press DownArrow once, and observe "User Gamma" is selected.

With this commit, the order of the last three steps is now the correct "User Alpha", "User Beta", "User Gamma".

chore(GlFilteredSearch): Use async in Jest tests

Improves readability.

chore(GlFilteredSearch): Refactor Cypress tests

Improves readability.

refactor(GlFilteredSearch): Improve suggestion selection logic

This rewrites the suggestion selection tracking logic, and adds two test cases:

  • One is a regression test, as it fails on the previous implementation.
  • The other just increases test coverage for the new implementation.

This new implementation seems a bit over-engineered at first, but isn't really, since it makes it easier to switch to purely cyclic selection in future. That is, not allowing deselection of options via the arrow keys. This will be needed for the upcoming work to stop treating spaces specially.

See #2159 (closed) and !3226 (closed) for more detail.

feat(GlFilteredSearch): Improve option interactions

This changes several aspects of options lists:

  • The first static option which case-insensitively contains the given non-empty text is now selected automatically. This includes token options of a search term, which previously were only selected when the entire value was typed out. Custom token components which use the suggestions slot are not affected.
  • Static options can now be rendered with a custom component by providing a component property on them. This keeps the information about how to display the option near the option definition.
  • Token options (i.e., when choosing the type of token) can now be rendered with a custom component by providing an optionComponent property to the token definition in GlFilteredSearch's available-tokens prop.
  • Token option rendering is now delegated to GlFilteredSearchTokenSegment via its options prop, deduplicating some display logic.
  • The complete event emitted by a title segment now passes the token type instead of its title. This is more consistent with other complete events in the component tree, as type is designed to be a unique value, whereas title is designed to be a user-facing string.
  • GlFilteredSearchTokenSegment's optionTextField prop now defaults to title instead of value.

This also reverts !3274 (merged) and !3318 (merged) (see below).

BREAKING CHANGE: GlFilteredSearch/GlFilteredSearchTerm's title slots and GlFilteredSearchToken's title-option slot have been removed. Similar functionality is available by setting the optionComponent property on the given token object passed to GlFilteredSearch's available-tokens prop. The component will be given an option prop, which will be the option object representing the token.

Part of #2159 (closed).

Screenshots

While this MR is mostly refactoring (working towards #2159 (closed)), it does have some visible changes:

Before After
simplescreenrecorder-2023-04-01_01.18.02 simplescreenrecorder-2023-04-01_01.17.14
simplescreenrecorder-2023-04-01_16.39.54 simplescreenrecorder-2023-04-01_16.39.00

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.
Edited by Mark Florian

Merge request reports