elastic/kibana

[Ingest Manager] Update EuiComboBox to render single select options as plain text

Open

#75,005 opened on Aug 13, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Team:Fleetgood first issue

Description

There are places in Ingest Manager where we use EuiComboBox but only allow a single option to be selected. In these cases, we've been using the "badge" style like this:

image

EUI allows you to render the option as plain text, like this: image

We should update all of the places where we have this "single select" behavior to use plain text. For example, the "namespace" field shown under advanced settings when creating an Agent config / policy has this. I think this also appears in the Add / edit integration workflow. We should be able to find all the places we do this by searching the Ingest Manager codebase for the singleSelection prop.

See the "Single selection" section in the EUI docs for more information.

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactEUIKibana codebase familiarity
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Find all uses of the `singleSelection` prop in the Ingest Manager codebase. Search for `<EuiComboBox singleSelection` in the files under `x pack/plugins/ingest manager/`. For each instance where only one option is selectable, change the `renderOption` prop to use plain text instead of the default badge style. Refer to the EUI documentation on single selection combo boxes for the correct prop to pass. Test that the change works visually and does not break any functionality.