Background

Per #99018, there are several places in Fleet / Integrations UI where our usage of EuiComboBox is problematic for a few reasons:

• It is difficult to edit values. If users need to change just a small part of the value, they'll need to delete the entire value and retype it.
• Users can't copy the values because selecting the text causes the input to enter a :focus state. Small point, but this can be frustrating.
• The text is small and can be hard to read. For longer values, the text truncates and the full value cannot be seen.
• The order of the values has significance, and there is no way to change the order without deleting values and retyping.

EuiComboBox appears in Fleet Settings for Fleet Server hosts and Elasticsearch hosts as well as the Edit Integration pages for fields that accept multiple values. The task for this issue is to update our usage with a new pattern that was created in the design issue linked above.

Proposed Solution

Figma file
Figma prototype

The new pattern uses a traditional text input with a button, "add row", which allows users to specify additional inputs. When multiple inputs exist, an "x" button icon appears on the right side of the input which allows users to remove the input. Additionally, when the order of the values is important, a "drag" icon can appear on the left side which allows users to rearrange the order via drag and drop interaction. Assuming we develop this is as shared component, I imagine it will have some of the following props:

• compressed -> boolean (changes the size of the input)
• sortable -> boolean (determines whether the inputs can be dragged and rearranged)
• label -> string (the name of the input group, i.e. "Fleet Server hosts" or "Paths")
• helpText -> ReactNode (for help text and links to more information)

Additional notes:

• See screenshots below + Figma file for spacing considerations.
• Use EuiEmptyButton size="xs" flush="left" for the "add row" button
• Form validation should place a message below the associated text input (example shown in GIF above).

Fleet Settings

• Unrelated to this component / pattern, but the flyout should now use EuiPanels to segment the different sections of the of flyout.
• Fleet Settings should use the sortable option so users can control the order of the values with drag and drop.
• The inputs should use the compressed size
• Help text appears above the form input. Use EuiText size="xs" color="subdued"
• To match the style of the label, you can mimic EuiText size="xs" with an <h4>

Edit Integration Page

• The inputs should use the default size (not compressed)
• Help text isn't necessary here since it is already provided by the 2 column described form group