[Dashboard] Panel toolbar #83342

cqliu1 · 2020-11-12T21:00:23Z

Summary

~~Blocked by #82909.~~
Closes #82906.
Related to #85666.

This adds a toolbar below the search bar and filter bar in Dashboard for creating new panels and adding existing embeddables.

The Create panel (previously Create new) button triggers the visualize modal for creating new visualizations.

The Add from library/Library (previously New) button triggers the embeddable flyout for adding Saved Object backed embeddables.

Notable changes:

The dashboard title will no longer say Editing <dashboard-name> in edit mode. It will just say the title, i.e. New Dashboard or New Dashboard (unsaved)
Adds storybook support for dashboard

Note: This PR is based off #82909. View the last commit f0e731b (#83342) to see the diff for changes relevant to this PR.

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
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

ryankeairns · 2020-11-19T21:43:05Z

Opened an initial design PR - cqliu1#15

As we continue down this path, we'll consider better alignment with the Lens toolbar. As it stands, the button sizes are smaller in Dashboard, we use a primary button, etc., but the rest didn't feel right for Dashboard at this juncture. Once we add more features - especially button groups - we can seek stronger alignment.

elasticmachine · 2020-12-10T02:03:59Z

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

darnautov

ML changes LGTM

jbudz

operations - storybook aliases LGTM

ryankeairns

Looks great!
Double checked the CSS, all still valid.
The button labels were reviewed by Gail ++

cqliu1 · 2020-12-10T19:37:36Z

...lugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx

-              <FormattedMessage id="embeddableApi.addPanel.Title" defaultMessage="Add panels" />
+              <FormattedMessage
+                id="embeddableApi.addPanel.Title"
+                defaultMessage="Add from library"


@elastic/kibana-app-services This is the only change I made to the embeddable plugin which updates the title of the add panel flyout to align with the rename of the button in Dashboard to Add from library.

kibanamachine · 2020-12-10T23:25:28Z

⏳ Build in-progress, with failures

continuous-integration/kibana-ci/pull-request
Commit: 3fd042bcf13df975647088a4852bf37d30940f6b
This comment will update when the build is complete

Failed CI Steps

Jest Unit Tests

History

💔 Build #93341 failed f0e731bfbdd097449c49430ac13882d8c41acf40
💔 Build #93297 failed fee1659a92aa611f98f5f96af621cf50241d993d
💔 Build #93250 failed 7745a663be560720de6aff686130b5c667865d9d
💔 Build #92900 failed 1d9fcf713b8dccd99537accb8fe2a8a701e15688
💔 Build #92159 failed 6058a4f4807d2bb22b11230447c596deb05d0638

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

Hide panel toolbar in view mode Update empty panel copy Added buttons to empty prompt Update copy Update toolbar and empty panel styles Fixed some tests Fixed conflict Updated snapshots Removed unused import Added stories Added storyshot test Updated snapshots

ThomThomson

This is all looking great to me! Tested locally in chrome and everything seems to work as expected.

Not necessarily something to do in this PR, but I've opened up a conversation about the top nav here: #85666 (comment)

ThomThomson · 2020-12-14T23:16:03Z

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

-                }
-                showLinkToVisualize={isEditMode}
-                onVisualizeClick={this.createNewEmbeddable}
+                onLinkClick={() => this.props.switchViewMode?.(ViewMode.EDIT)}


I'm glad this PR removes the 'Create New' button from the empty screen - and the new design is looking great! If at all possible, maybe in a followup, it would also be great to remove the 'switchViewMode` behaviour. This method is injected in a non-standard way and is the only place where the dashboard state manager is coupled with the dashboard container.

ThomThomson · 2020-12-14T23:18:59Z

src/plugins/dashboard/public/application/top_nav/panel_toolbar/panel_toolbar.tsx

+  onLibraryClick: () => void;
+}
+
+export const PanelToolbar: FC<Props> = ({ onAddPanelClick, onLibraryClick }) => (


This is looking good! Can't wait until we standardize this in the Presentation Team plugin

…-panel-toolbar

cqliu1 · 2020-12-16T00:12:28Z

@elasticmachine merge upstream

kibanamachine · 2020-12-16T02:27:31Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 3970db9

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	186	197	+11

Async chunks

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

id	before	after	diff
`dashboard`	186.1KB	190.8KB	+4.7KB

Distributable file count

id	before	after	diff
`default`	47266	48027	+761
`oss`	27861	27862	+1

Page load bundle

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

id	before	after	diff
`dashboard`	336.1KB	333.5KB	-2.5KB
`embeddable`	228.8KB	228.8KB	+6.0B
total			-2.5KB

History

💔 Build #94718 failed 53598e4
💔 Build #94768 failed 609a0e6
💚 Build #94620 succeeded 5f89239
💚 Build #94084 succeeded 001b335
💚 Build #93741 succeeded 11c71ccdd5846a83403e0e879c92ed15b7b08920

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

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

cqliu1 added the WIP Work in progress label Nov 12, 2020

cqliu1 force-pushed the dashboard/add-panel-toolbar branch 3 times, most recently from ba7dfe1 to f22ab6d Compare November 18, 2020 19:28

cqliu1 force-pushed the dashboard/add-panel-toolbar branch 2 times, most recently from 15ee66f to 5a5a604 Compare November 25, 2020 17:45

cqliu1 force-pushed the dashboard/add-panel-toolbar branch from 01fec0f to 8e66f2a Compare November 30, 2020 21:25

ryankeairns mentioned this pull request Dec 2, 2020

[Canvas] Move app menu into new stacked header #77954

Closed

5 tasks

cqliu1 force-pushed the dashboard/add-panel-toolbar branch 4 times, most recently from fee1659 to f0e731b Compare December 10, 2020 02:01

cqliu1 marked this pull request as ready for review December 10, 2020 02:03

cqliu1 requested review from a team as code owners December 10, 2020 02:03

cqliu1 added review and removed WIP Work in progress labels Dec 10, 2020

darnautov approved these changes Dec 10, 2020

View reviewed changes

botelastic bot added the Feature:Embedding Embedding content via iFrame label Dec 10, 2020

jbudz approved these changes Dec 10, 2020

View reviewed changes

ryankeairns approved these changes Dec 10, 2020

View reviewed changes

cqliu1 commented Dec 10, 2020

View reviewed changes

cqliu1 force-pushed the dashboard/add-panel-toolbar branch from f0e731b to 3fd042b Compare December 10, 2020 23:11

cqliu1 added v7.11.0 v8.0.0 labels Dec 10, 2020

cqliu1 added 2 commits December 14, 2020 09:33

Updated snapshots

001b335

cqliu1 force-pushed the dashboard/add-panel-toolbar branch from 11c71cc to 001b335 Compare December 14, 2020 16:33

ThomThomson approved these changes Dec 14, 2020

View reviewed changes

mattkime approved these changes Dec 15, 2020

View reviewed changes

cqliu1 and others added 3 commits December 15, 2020 10:56

Merge branch 'master' into dashboard/add-panel-toolbar

5f89239

Merge branch 'master' of github.com:elastic/kibana into dashboard/add…

53598e4

…-panel-toolbar

Merge branch 'master' into dashboard/add-panel-toolbar

609a0e6

Merge branch 'master' into dashboard/add-panel-toolbar

3970db9

cqliu1 merged commit 92a805f into elastic:master Dec 16, 2020

cqliu1 deleted the dashboard/add-panel-toolbar branch December 16, 2020 02:30

cqliu1 mentioned this pull request Dec 16, 2020

[7.x] [Dashboard] Panel toolbar (#83342) #86074

Merged

cqliu1 added a commit to cqliu1/kibana that referenced this pull request Dec 16, 2020

[Dashboard] Panel toolbar (elastic#83342)

83c06fa

Co-authored-by: Kibana Machine <[email protected]>

cqliu1 added a commit that referenced this pull request Dec 16, 2020

[7.x] [Dashboard] Panel toolbar (#83342) (#86074)

32eeff2

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

nreese mentioned this pull request Nov 2, 2022

[Dashboard] Redesign Add Panel Experience #144418

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] Panel toolbar #83342

[Dashboard] Panel toolbar #83342

cqliu1 commented Nov 12, 2020 •

edited

Loading

ryankeairns commented Nov 19, 2020 •

edited

Loading

elasticmachine commented Dec 10, 2020

darnautov left a comment

jbudz left a comment

ryankeairns left a comment

cqliu1 Dec 10, 2020

kibanamachine commented Dec 10, 2020

ThomThomson left a comment •

edited

Loading

ThomThomson Dec 14, 2020

ThomThomson Dec 14, 2020

cqliu1 commented Dec 16, 2020

kibanamachine commented Dec 16, 2020

[Dashboard] Panel toolbar #83342

[Dashboard] Panel toolbar #83342

Conversation

cqliu1 commented Nov 12, 2020 • edited Loading

Summary

Checklist

For maintainers

ryankeairns commented Nov 19, 2020 • edited Loading

elasticmachine commented Dec 10, 2020

darnautov left a comment

Choose a reason for hiding this comment

jbudz left a comment

Choose a reason for hiding this comment

ryankeairns left a comment

Choose a reason for hiding this comment

cqliu1 Dec 10, 2020

Choose a reason for hiding this comment

kibanamachine commented Dec 10, 2020

⏳ Build in-progress, with failures

Failed CI Steps

History

ThomThomson left a comment • edited Loading

Choose a reason for hiding this comment

ThomThomson Dec 14, 2020

Choose a reason for hiding this comment

ThomThomson Dec 14, 2020

Choose a reason for hiding this comment

cqliu1 commented Dec 16, 2020

kibanamachine commented Dec 16, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

Page load bundle

History

cqliu1 commented Nov 12, 2020 •

edited

Loading

ryankeairns commented Nov 19, 2020 •

edited

Loading

ThomThomson left a comment •

edited

Loading