[Controls] Field first control creation #131461

Heenawter · 2022-05-03T20:19:23Z

Summary

In the old way of creating controls, users had to first select the type of control they wanted to create, which would then filter the list of available fields to those that were supported - this is what we will call type-first control creation. However, in our user testing, we found that users were more likely to have a field-first control creation in mind - that is, they knew what field they wanted to create a control for, but they didn't know which control type to pick and they were confused about why their desired field wasn't showing up in the field list.

Field first creation

This PR introduces a new field-first control approach - when creating a control, the user simply needs to select a field and the corresponding supported control type will be automatically picked for them. Note that, because only options lists and range sliders are supported and they have no crossover in field types, there is only ever one available control type for each field - however, if more control types are introduced in the future that allow for an overlap in supported field types, we will need to allow users to select one of the supported control types as a secondary step.

2022-05-09_FieldFirstCreation.mp4

Field first replace

As a benefit, when combined with the ability to change the types of controls that was introduced in this PR, the overall user experience for both creating and editing existing controls is significantly improved.

2022-05-10_FieldFirstReplace.mp4

Flaky Test Runner

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

test/functional/page_objects/dashboard_page_controls.ts

…-ref HEAD~1..HEAD --fix'

elasticmachine · 2022-05-16T18:44:24Z

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

ThomThomson

Overall, this is pretty much exactly the way we spoke about it, but with a really elegant implementation. I left a few tiny nits, and one change for readability / efficiency with the react state management.

I tested this locally as well and everything works great!

src/plugins/controls/common/types.ts

ThomThomson · 2022-05-17T19:31:53Z

src/plugins/controls/public/control_group/control_group_strings.ts

@@ -56,6 +64,10 @@ export const ControlGroupStrings = {
      i18n.translate('controls.controlGroup.manageControl.widthInputTitle', {
        defaultMessage: 'Control size',
      }),
+    getControlSettingsTitle: () =>
+      i18n.translate('controls.controlGroup.manageControl.controlSettingsTitle', {
+        defaultMessage: 'Control settings',


I wonder if we should use the friendly name of the selected Control Type here, so it would read Options List settings or Range slider settings

Great point! @andreadelrio what are your thoughts?

I'm thinking if we need to show that label at all? Label and Width are settings too right so no need to have a separate section for (other) settings? or are you trying to keep the toggle for width under Minimum width and so you need a heading for the rest of the settings?

@andreadelrio Yeah, it seemed to me like grouping the type-specific control settings with the Minimum width settings was confusing - so either the type-specific settings should go above the Minimum width (which would cause shifting when switching between Options list and Range slider fields) or I think these type-specific settings should have their own label.

What do you think, though?

I think we could either group them under something like Additional settings? or give each toggle its own title so something like:

Multiple selections

Allow multiple selections in dropdown

Timeout

Run past timeout

What do you think @KOTungseth ?

I like Additional settings but definitely interested in hearing @KOTungseth's thoughts! :)

src/plugins/controls/public/control_group/editor/control_editor.tsx

src/plugins/controls/public/control_types/options_list/options_list_editor_options.tsx

src/plugins/controls/public/control_types/options_list/options_list_embeddable.tsx

src/plugins/controls/public/types.ts

test/functional/page_objects/dashboard_page_controls.ts

…trol-creation_2022-05-02

andreadelrio · 2022-05-18T03:09:32Z

I'm not a big fan of starting the form in a warning state. I would like to hear what folks think about auto selecting the first field in the field list instead.

andreadelrio

This is a huge improvement! My feedback UI wise is to add an EuiSpacer above Delete control. We usually keep "dangerous" actions a bit separated from the rest. It looks a bit tight down there at the moment.

Heenawter · 2022-05-18T15:43:25Z

I would like to hear what folks think about auto selecting the first field in the field list instead.

I actually thought about that, but ended up going with not for now just to make it super transparent on how the control types are being controlled. @ThomThomson What do you think?

My feedback UI wise is to add an EuiSpacer above Delete control

@andreadelrio I added <EuiSpacer size="l"/> right before the Delete control button as part of fixing some merge conflicts yesterday, so that should already be covered! Possible you had a slightly old version where I forgot to add it :)

andreadelrio

Thanks for making those changes. 🎉 LGTM

Heenawter · 2022-05-18T23:14:10Z

Just for the sake of a public follow up, these are the final changes that were made with @andreadelrio's feedback:

The default state when creating a new control was improved to no longer include an "error" state:
The type-specific control settings are now called "Additional settings" instead of "Control settings":

kibana-ci · 2022-05-19T16:12:00Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`controls`	169	167	-2

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`controls`	207	199	-8

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`controls`	424.1KB	426.6KB	+2.5KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`controls`	6	7	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`controls`	31.9KB	28.7KB	-3.2KB

Unknown metric groups

API count

id	before	after	diff
`controls`	213	205	-8

History

💔 Build #45964 failed f306785
💚 Build #45543 succeeded c200b09
💔 Build #45536 failed e95afac
💔 Build #45523 failed c0feed0
💚 Build #45066 succeeded 2e7d2ef

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

cc @Heenawter

Heenawter self-assigned this May 3, 2022

Heenawter changed the title ~~Field first control creation 2022 05 02~~ [Controls] Field first control creation May 9, 2022

Heenawter force-pushed the field-first-control-creation_2022-05-02 branch 6 times, most recently from 5df9bae to afbbb78 Compare May 12, 2022 23:50

Heenawter commented May 16, 2022

View reviewed changes

test/functional/page_objects/dashboard_page_controls.ts Show resolved Hide resolved

Heenawter and others added 9 commits May 16, 2022 08:50

Field first *creation*

45a4397

Field first *editing*

afcac67

Add support for custom control options

e032a2f

Add i18n

2aaeba9

Make field picker accept predicate again + clean up imports

57d1280

Fix functional tests

5433c55

Attempt 1 at case sensitivity

839a1f2

Works both ways

0156e9e

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

aaf7ac4

…-ref HEAD~1..HEAD --fix'

Heenawter force-pushed the field-first-control-creation_2022-05-02 branch 3 times, most recently from 35c6160 to 826b447 Compare May 16, 2022 16:54

Heenawter force-pushed the field-first-control-creation_2022-05-02 branch 5 times, most recently from 0852350 to a4d516a Compare May 16, 2022 17:54

Heenawter marked this pull request as ready for review May 16, 2022 18:44

Heenawter requested a review from a team as a code owner May 16, 2022 18:44

Heenawter force-pushed the field-first-control-creation_2022-05-02 branch from a4d516a to e9e175e Compare May 16, 2022 18:59

Clean up code

2e7d2ef

Heenawter force-pushed the field-first-control-creation_2022-05-02 branch from e9e175e to 2e7d2ef Compare May 16, 2022 19:00

andreadelrio self-requested a review May 17, 2022 04:53

ThomThomson approved these changes May 17, 2022

View reviewed changes

Heenawter added 3 commits May 17, 2022 14:43

Merge branch 'main' of github.com:elastic/kibana into field-first-con…

c0feed0

…trol-creation_2022-05-02

Use React useMemo to calculate field registry

e95afac

Fix functional tests

c200b09

andreadelrio requested changes May 18, 2022

View reviewed changes

Fix default state + control settings label

f306785

andreadelrio self-requested a review May 18, 2022 22:56

andreadelrio approved these changes May 18, 2022

View reviewed changes

Heenawter and others added 2 commits May 19, 2022 08:41

Merge branch 'main' into field-first-control-creation_2022-05-02

0334364

Fix functional tests

f8b6027

Heenawter enabled auto-merge (squash) May 19, 2022 15:35

Heenawter merged commit 8de3401 into elastic:main May 19, 2022

Heenawter deleted the field-first-control-creation_2022-05-02 branch May 19, 2022 16:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Controls] Field first control creation #131461

[Controls] Field first control creation #131461

Heenawter commented May 3, 2022 •

edited

Loading

elasticmachine commented May 16, 2022

ThomThomson left a comment

ThomThomson May 17, 2022

Heenawter May 17, 2022

andreadelrio May 18, 2022

Heenawter May 18, 2022

andreadelrio May 18, 2022

Heenawter May 18, 2022

andreadelrio commented May 18, 2022

andreadelrio left a comment

Heenawter commented May 18, 2022 •

edited

Loading

andreadelrio left a comment

Heenawter commented May 18, 2022 •

edited

Loading

kibana-ci commented May 19, 2022

API count

[Controls] Field first control creation #131461

[Controls] Field first control creation #131461

Conversation

Heenawter commented May 3, 2022 • edited Loading

Summary

Field first creation

Field first replace

Flaky Test Runner

Checklist

For maintainers

elasticmachine commented May 16, 2022

ThomThomson left a comment

Choose a reason for hiding this comment

ThomThomson May 17, 2022

Choose a reason for hiding this comment

Heenawter May 17, 2022

Choose a reason for hiding this comment

andreadelrio May 18, 2022

Choose a reason for hiding this comment

Heenawter May 18, 2022

Choose a reason for hiding this comment

andreadelrio May 18, 2022

Choose a reason for hiding this comment

Heenawter May 18, 2022

Choose a reason for hiding this comment

andreadelrio commented May 18, 2022

andreadelrio left a comment

Choose a reason for hiding this comment

Heenawter commented May 18, 2022 • edited Loading

andreadelrio left a comment

Choose a reason for hiding this comment

Heenawter commented May 18, 2022 • edited Loading

kibana-ci commented May 19, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

History

Heenawter commented May 3, 2022 •

edited

Loading

Heenawter commented May 18, 2022 •

edited

Loading

Heenawter commented May 18, 2022 •

edited

Loading