[Input Controls] Options List Embeddable, Factory & Frame

[ThomThomson]

Summary

This PR is a follow-up to #103512, which is intended to be merged into master.

This re-creates the options list component as an embeddable, with a couple notable improvements over the initial design

• The embeddable takes an async fetchData method, which is passed in. In storybook this is a stub, and it can be replaced with a real implementation inside of Kibana.
• Embeddable input works as a public facing API only, where the component manages its own internal state for things like available options, searching, and selection.
• The storybook implementation and the embeddable are totally separated now, such that no POC code will leak into the implementation.
• Most design ideas from Design comments for initial OptionsList ThomThomson/kibana#8 have been implemented

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

@elasticmachine merge upstream

[ryankeairns]

Andrea is out this week. Is it safe to assume we can merge this, from a design perspective, and come back to additional tweaks after this is merged? From what I understood, this was big step along an iterative journey. (i.e. I'm considering just hitting approve for the SCSS changes)

[ThomThomson]

@elasticmachine merge upstream

[ThomThomson]

@ryankeairns, I was also out last week, but yes I believe now that the design PR has been merged in, this should be safe to merge from a design perspective! I will ask @andreadelrio to review & triple-check that though.

[andreadelrio]

@ryankeairns, I was also out last week, but yes I believe now that the design PR has been merged in, this should be safe to merge from a design perspective! I will ask @andreadelrio to review & triple-check that though.

@ThomThomson This is looking good to me. I have a related PR up on the EUI repo fixing the issue of hiding the count when no selections have been made.

[poffdeluxe]

Looks good overall! Few small questions but the storybook demo is very neat! My one other thought is about where this lives. Is its home presentation util plugin permanently or is this where the POC is kinda being worked on and built out?

[poffdeluxe]

nit: the two line if-else here is a little hard to read but that might just be me

[ThomThomson]

Yeah, some braces here might help readability!

[poffdeluxe]

Is this id correct? I can't find a reference to it in this PR

[ThomThomson]

Looks like that's a leftover from copying from the EUI examples - will remove!

[kibanamachine]

💛 Build succeeded, but was flaky

• continuous-integration/kibana-ci/pull-request

• Commit: 606555f

• Storybooks Preview

• Flaky suites:

  • xpack-kibana-ciGroup13

---

Test Failures

Kibana Pipeline / general / X-Pack Detection Engine API Integration Tests.x-pack/test/detection_engine_api_integration/security_and_spaces/tests/exception_operators_data_types/text·ts.detection engine api security and spaces enabled Detection exceptions data types and operators Rule exception operators for data type text "is not" operator will return 0 results if it cannot find what it is excluding

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 2 times on tracked branches: https://github.com/elastic/kibana/issues/107911

[00:00:00]       │
[00:00:00]         └-: detection engine api security and spaces enabled
[00:00:00]           └-> "before all" hook in "detection engine api security and spaces enabled"
[00:00:00]           └-: 
[00:00:00]             └-> "before all" hook in ""
[00:00:00]             └-: Detection exceptions data types and operators
[00:00:00]               └-> "before all" hook in "Detection exceptions data types and operators"
[00:00:00]               └-: 
[00:00:00]                 └-> "before all" hook in ""
[00:00:00]                 └-: Rule exception operators for data type text
[00:00:00]                   └-> "before all" hook in "Rule exception operators for data type text"
[00:00:00]                   └-: "is not" operator
[00:00:00]                     └-> "before all" hook for "will return 0 results if it cannot find what it is excluding"
[00:00:00]                     └-> will return 0 results if it cannot find what it is excluding
[00:00:00]                       └-> "before each" hook: global before each for "will return 0 results if it cannot find what it is excluding"
[00:00:00]                       └-> "before each" hook for "will return 0 results if it cannot find what it is excluding"
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.siem-signals-default-migration-cleanup]
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.c.m.MetadataIndexTemplateService] [node-01] adding index template [.siem-signals-default] for index patterns [.siem-signals-default-*]
[00:00:00]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.siem-signals-default-000001] creating index, cause [api], templates [.siem-signals-default], shards [1]/[1]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.siem-signals-default-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.siem-signals-default-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] in policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.lists-default]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.siem-signals-default-000001] from [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] to [{"phase":"hot","action":"rollover","name":"check-rollover-ready"}] in policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.items-default]
[00:00:00]                         │ info [o.e.c.m.MetadataIndexTemplateService] [node-01] adding template [.lists-default] for index patterns [.lists-default-*]
[00:00:00]                         │ info [o.e.c.m.MetadataIndexTemplateService] [node-01] adding template [.items-default] for index patterns [.items-default-*]
[00:00:00]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.lists-default-000001] creating index, cause [api], templates [.lists-default], shards [1]/[1]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.lists-default-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [.lists-default]
[00:00:00]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.items-default-000001] creating index, cause [api], templates [.items-default], shards [1]/[1]
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.lists-default-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] in policy [.lists-default]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Loading "mappings.json"
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Loading "data.json"
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.items-default-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [.items-default]
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.lists-default-000001] from [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] to [{"phase":"hot","action":"rollover","name":"check-rollover-ready"}] in policy [.lists-default]
[00:00:01]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [text] creating index, cause [api], templates [], shards [1]/[1]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Created index "text"
[00:00:01]                         │ debg [x-pack/test/functional/es_archives/rule_exceptions/text] "text" settings {"index":{"number_of_replicas":"1","number_of_shards":"1"}}
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.items-default-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] in policy [.items-default]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Indexed 4 docs into "text"
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.items-default-000001] from [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] to [{"phase":"hot","action":"rollover","name":"check-rollover-ready"}] in policy [.items-default]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Loading "mappings.json"
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Loading "data.json"
[00:00:01]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [text_no_spaces] creating index, cause [api], templates [], shards [1]/[1]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Created index "text_no_spaces"
[00:00:01]                         │ debg [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] "text_no_spaces" settings {"index":{"number_of_replicas":"1","number_of_shards":"1"}}
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Indexed 4 docs into "text_no_spaces"
[00:00:01]                       │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/zYro7t7gTj-KP1nukWW05w] update_mapping [_doc]
[00:00:06]                       │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/zYro7t7gTj-KP1nukWW05w] update_mapping [_doc]
[00:00:07]                       │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/zYro7t7gTj-KP1nukWW05w] update_mapping [_doc]
[00:00:10]                       │ proc [kibana]   log   [18:09:45.678] [info][eventLog][plugins] event logged: {"@timestamp":"2021-08-10T18:09:45.676Z","event":{"provider":"alerting","action":"execute-start","kind":"alert","category":["siem"],"start":"2021-08-10T18:09:45.676Z"},"kibana":{"saved_objects":[{"rel":"primary","type":"alert","id":"221150c0-fa06-11eb-bc55-dfca44238504","type_id":"siem.signals"}],"task":{"scheduled":"2021-08-10T18:09:45.394Z","schedule_delay":282000000},"server_uuid":"5b2de169-2785-441b-ae8c-186a1936b17d"},"rule":{"id":"221150c0-fa06-11eb-bc55-dfca44238504","license":"basic","category":"siem.signals","ruleset":"siem"},"message":"alert execution start: \"221150c0-fa06-11eb-bc55-dfca44238504\"","ecs":{"version":"1.8.0"}}
[00:00:11]                       │ proc [kibana]   log   [18:09:46.490] [info][eventLog][plugins] event logged: {"@timestamp":"2021-08-10T18:09:45.676Z","event":{"provider":"alerting","action":"execute","kind":"alert","category":["siem"],"start":"2021-08-10T18:09:45.676Z","outcome":"failure","end":"2021-08-10T18:09:46.489Z","duration":813000000,"reason":"execute"},"kibana":{"saved_objects":[{"rel":"primary","type":"alert","id":"221150c0-fa06-11eb-bc55-dfca44238504","type_id":"siem.signals"}],"task":{"scheduled":"2021-08-10T18:09:45.394Z","schedule_delay":282000000},"alerting":{"status":"error"},"server_uuid":"5b2de169-2785-441b-ae8c-186a1936b17d"},"rule":{"id":"221150c0-fa06-11eb-bc55-dfca44238504","license":"basic","category":"siem.signals","ruleset":"siem"},"message":"alert execution failure: siem.signals:221150c0-fa06-11eb-bc55-dfca44238504: 'Signal Testing Query'","error":{"message":"[siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1]: version_conflict_engine_exception: [version_conflict_engine_exception] Reason: [siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1]"},"ecs":{"version":"1.8.0"}}
[00:00:11]                       │ proc [kibana]   log   [18:09:46.508] [error][alerting][plugins] Executing Alert default:siem.signals:221150c0-fa06-11eb-bc55-dfca44238504 has resulted in Error: [siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1]: version_conflict_engine_exception: [version_conflict_engine_exception] Reason: [siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1], caused by: ""
[00:01:44]                       └- ✖ fail: detection engine api security and spaces enabled  Detection exceptions data types and operators  Rule exception operators for data type text "is not" operator will return 0 results if it cannot find what it is excluding
[00:01:44]                       │      Error: timed out waiting for function condition to be true within waitForRuleSuccessOrStatus
[00:01:44]                       │       at /dev/shm/workspace/parallel/20/kibana/x-pack/test/detection_engine_api_integration/utils.ts:785:9
[00:01:44]                       │ 
[00:01:44]                       │ 

Stack Trace

Error: timed out waiting for function condition to be true within waitForRuleSuccessOrStatus
    at /dev/shm/workspace/parallel/20/kibana/x-pack/test/detection_engine_api_integration/utils.ts:785:9

---

Metrics [docs]

✅ unchanged

History

• 💚 Build #143710 succeeded 60c9d56
• 💚 Build #142083 succeeded a3578dc
• 💔 Build #142075 failed be63947
• 💚 Build #141436 succeeded 99f020a
• 💔 Build #141385 failed 3caa0e6

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[ryankeairns]

Looks great and works as expected!

Note to future selves:

• add ability to clear options
• add ability to view only selected options
• add option to limit input width (i.e. so 1 input doesn't go full width)