[Canvas] Use compressed forms in sidebar #49419

ryankeairns · 2019-10-25T21:34:54Z

Summary

By using compressed form styles in the sidebar, element settings become more discoverable as less inputs move off the screen. To further simply this work area, help text has been moved to icon tooltips, amd text copy (including callouts, titles, etc.) has been edited to be more concise.

Other small UX improvements were made along the way, particularly within the Data tab (selecting datasources). This includes not only improved form layouts, but re-ordered fields, new card designs, additional contextual help (e.g. link to ES SQL docs) and more.

Previews

Follow-up PRs

There are a few things that I'd like to tackle subsequent to this PR:

For dropdown filters: convert text inputs with 'Set' buttons to select dropdowns
For progress elements: create a new argType to handle background color and weight in a single form row
Show all optional panels; remove the 'plus sign' button interaction
An EUI PR to tweak the input background colors/borders to achieve more contrast (they were designed with a pure white background, we are using a slightly gray background)

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-10-25T21:34:56Z

Pinging @elastic/kibana-canvas (Team:Canvas)

elasticmachine · 2019-10-25T23:32:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 4142db6

ryankeairns · 2019-10-29T15:07:01Z

Moving this out of draft, but I will need some help sorting out the functional tests.

elasticmachine · 2019-10-29T15:47:19Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 6b8daf1

elasticmachine · 2019-10-29T16:25:07Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 6f3296b

elasticmachine · 2019-10-29T18:04:09Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 5c45dfa

elasticmachine · 2019-10-29T18:54:11Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 255ddcd

poffdeluxe

Just some very minor stuff -- seems good overall! Haven't had a chance to test locally though

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js

x-pack/legacy/plugins/canvas/i18n/expression_types.ts

x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss

x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js

elasticmachine · 2019-10-30T14:27:17Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 66442f3

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js

elasticmachine · 2019-10-31T15:57:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 4928bf6

elasticmachine · 2019-10-31T18:04:29Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 921ecc1

x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx

elasticmachine · 2019-11-01T19:34:24Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: e6e9fa2

cqliu1

LGTM 👍 Thanks for taking care of those missing i18n things I mentioned. I pulled up all the args and datasource, and the compressed forms look so sleek!

elasticmachine · 2019-11-11T17:21:32Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: d96d75a

elasticmachine · 2019-11-11T17:47:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: d96d75a

elasticmachine · 2019-11-12T18:05:09Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 400e3bc

ryankeairns · 2019-11-14T11:22:28Z

jenkins test this

elasticmachine · 2019-11-14T12:25:09Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 400e3bc

elasticmachine · 2019-11-15T15:59:07Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 0abc87f

elasticmachine · 2019-11-15T17:07:55Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: dbcd09d

* compressed sidebar design * add back metric help, style no datasource msg * re-style remove button * re-style element status section * remove unused component import * update storyshots * clean up unused i18n values * address feedback * address i81n feedback * update storyshot * convert string to i18n * style grouped sidebar messages * update storyshots

…her [skip ci] * upstream/master: (54 commits) allows plugins to define validation schema for "enabled" flag (elastic#50286) Add retry to find.existsByDisplayedByCssSelector (elastic#48734) [i18n] integrate latest translations (elastic#50864) ui/resize_checker 👉 src/plugins/kibana_utils (elastic#44750) Fix @reach/router types (elastic#50863) [ML] Adding ML node warning to overview and analytics pages (elastic#50766) Bump storybook dependencies (elastic#50752) [APM Replace usage of idx with optional chaining (elastic#50849) [SIEM] Fix eslint errors (elastic#49713) Improve "Browser client is out of date" error message (elastic#50296) [SIEM][Detection Engine] REST API improvements and changes from UI/UX feedback (elastic#50797) Move @kbn/es-query into data plugin - es-query folder (elastic#50182) Index Management new platform migration (elastic#49359) Increase retry for cloud snapshot to finish (elastic#50781) Removing EuiCode from inside EuiPanel (elastic#50683) [SIEM] Tests for search_after and bulk index (elastic#50129) Make babel understand TypeScript 3.7 syntax (elastic#50772) Fixing mocha tests and broken password change status codes (elastic#50704) [Canvas] Use compressed forms in sidebar (elastic#49419) Add labels to shell scripts in Jenkins (elastic#49657) ...

bhavyarm · 2020-01-20T19:25:40Z

@ryankeairns how do I test this PR please? Thanks!

ryankeairns added release_note:enhancement Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas v7.6.0 labels Oct 25, 2019

ryankeairns marked this pull request as ready for review October 29, 2019 15:06

ryankeairns requested review from a team as code owners October 29, 2019 15:06

ryankeairns force-pushed the rk/43807-canvas-compressed branch from ca2e9e0 to 6f3296b Compare October 29, 2019 15:08

ryankeairns added the review label Oct 29, 2019

poffdeluxe approved these changes Oct 29, 2019

View reviewed changes

cqliu1 reviewed Oct 30, 2019

View reviewed changes

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx Outdated Show resolved Hide resolved

cqliu1 reviewed Oct 30, 2019

View reviewed changes

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js Outdated Show resolved Hide resolved

ryankeairns force-pushed the rk/43807-canvas-compressed branch from 4928bf6 to 921ecc1 Compare October 31, 2019 16:46

cqliu1 reviewed Oct 31, 2019

View reviewed changes

x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx Outdated Show resolved Hide resolved

cqliu1 self-requested a review November 1, 2019 19:52

cqliu1 approved these changes Nov 1, 2019

View reviewed changes

ryankeairns requested a review from snide November 11, 2019 14:36

ryankeairns force-pushed the rk/43807-canvas-compressed branch from e6e9fa2 to d96d75a Compare November 11, 2019 14:46

ryankeairns force-pushed the rk/43807-canvas-compressed branch from d96d75a to 400e3bc Compare November 12, 2019 17:12

ryankeairns added 12 commits November 15, 2019 08:34

compressed sidebar design

86078b5

add back metric help, style no datasource msg

dbaa39b

re-style remove button

8485dba

re-style element status section

9f9f7a5

remove unused component import

3a80c67

update storyshots

823e62d

clean up unused i18n values

c0605b5

address feedback

73842cd

address i81n feedback

10ae5ca

update storyshot

0cce134

convert string to i18n

7fd5679

style grouped sidebar messages

0abc87f

ryankeairns force-pushed the rk/43807-canvas-compressed branch from 400e3bc to 0abc87f Compare November 15, 2019 14:41

update storyshots

dbcd09d

ryankeairns merged commit 69431b5 into elastic:master Nov 15, 2019

ryankeairns mentioned this pull request Nov 15, 2019

[7.x] [Canvas] Use compressed forms in sidebar (#49419) #50800

Merged

ryankeairns mentioned this pull request Dec 10, 2019

[Canvas] Compress Canvas side panel inputs #43807

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Canvas] Use compressed forms in sidebar #49419

[Canvas] Use compressed forms in sidebar #49419

ryankeairns commented Oct 25, 2019 •

edited

Loading

elasticmachine commented Oct 25, 2019

elasticmachine commented Oct 25, 2019

ryankeairns commented Oct 29, 2019

elasticmachine commented Oct 29, 2019

elasticmachine commented Oct 29, 2019

elasticmachine commented Oct 29, 2019

elasticmachine commented Oct 29, 2019

poffdeluxe left a comment

elasticmachine commented Oct 30, 2019

elasticmachine commented Oct 31, 2019

elasticmachine commented Oct 31, 2019

elasticmachine commented Nov 1, 2019

cqliu1 left a comment

elasticmachine commented Nov 11, 2019

elasticmachine commented Nov 11, 2019

elasticmachine commented Nov 12, 2019

ryankeairns commented Nov 14, 2019

elasticmachine commented Nov 14, 2019

elasticmachine commented Nov 15, 2019

elasticmachine commented Nov 15, 2019

bhavyarm commented Jan 20, 2020

[Canvas] Use compressed forms in sidebar #49419

[Canvas] Use compressed forms in sidebar #49419

Conversation

ryankeairns commented Oct 25, 2019 • edited Loading

Summary

Previews

Follow-up PRs

Checklist

For maintainers

elasticmachine commented Oct 25, 2019

elasticmachine commented Oct 25, 2019

💔 Build Failed

ryankeairns commented Oct 29, 2019

elasticmachine commented Oct 29, 2019

💔 Build Failed

elasticmachine commented Oct 29, 2019

💔 Build Failed

elasticmachine commented Oct 29, 2019

💔 Build Failed

elasticmachine commented Oct 29, 2019

💚 Build Succeeded

poffdeluxe left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 30, 2019

💚 Build Succeeded

elasticmachine commented Oct 31, 2019

💔 Build Failed

elasticmachine commented Oct 31, 2019

💚 Build Succeeded

elasticmachine commented Nov 1, 2019

💚 Build Succeeded

cqliu1 left a comment

Choose a reason for hiding this comment

elasticmachine commented Nov 11, 2019

💔 Build Failed

elasticmachine commented Nov 11, 2019

💔 Build Failed

elasticmachine commented Nov 12, 2019

💔 Build Failed

ryankeairns commented Nov 14, 2019

elasticmachine commented Nov 14, 2019

💔 Build Failed

elasticmachine commented Nov 15, 2019

💔 Build Failed

elasticmachine commented Nov 15, 2019

💚 Build Succeeded

bhavyarm commented Jan 20, 2020

ryankeairns commented Oct 25, 2019 •

edited

Loading