[Time to Visualize] Add visualizations to dashboard from save modal #83140

poffdeluxe · 2020-11-11T02:21:37Z

Summary

Implements #79925

This PR allows for visualizations to be saved directly to dashboards as by-value embeddables.

Add "double-wide" / right options prop to the saved objects modal for extended options
New save flow is only available if by-value embeddables feature flag is enabled
New flow does not appear or get activated if user is editing the visualization within another app's editing flow (For example, if user is on a dashboard and edits a visualization in the panel)
New flow allows user to search existing dashboards to place visualization
- The Dashboard Picker component is available as a standalone component for future use
New flow allows user to save new visualization on a new dashboard
New flow is deactivated if editing an existing visualization and "Save as new copy" is deactivated. The dashboard options are re-enabled if the visualization is being saved as copy

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
Documentation was added for features that require explanation or tutorials
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

src/plugins/dashboard/config.ts

src/plugins/visualize/public/application/components/visualize_listing.tsx

src/plugins/saved_objects/public/save_modal/saved_object_save_modal_dashboard.tsx

poffdeluxe · 2020-11-11T02:34:05Z

src/plugins/saved_objects/public/save_modal/saved_object_save_modal_dashboard.tsx

+
+  const { documentInfo, savedObjectsClient } = props;
+
+  const fetchDashboards = useCallback(


could probably do with some debouncing here if we're going to call this when a user is typing

ryankeairns · 2020-11-11T14:43:30Z

Really great start here! 🥇

The overall experience is feeling good, and we can iterate on the flow for existing visualizations. It may be too presumptive defaulting to 'Save as new visualization', but I'm curious to hear how others feel.

Design-wise it's also in good shape, and I'm happy to help sand off edges once you're ready.

ryankeairns · 2020-11-12T17:36:42Z

@poffdeluxe

@gchaps and I reviewed the copy and came up with the following:

Tooltip

3rd radio button & button label

AlonaNadler · 2020-11-18T23:04:46Z

👏 👏
The new visualize module works really really well, it’s fantastic!! The transition from visualize to dashboard new/existing is great and will help users avoid moving explicitly between apps

Few issues I saw (probably small bugs):

If I unlink from the library, edit in Lens, make changes and click save and return. Even though the panel is not tied to the library the changes are applied to the library copy

When selecting a new dashboard it was unclear that it doesn’t sve the dashboard. I think since I enter the name of the object I thought the dashboard was also saved. Eventually, I lost work. Not sure if you have an idea on how to solve it or whether we should give it move time to learn if it is a real issue. In the past, we discussed a pop that suggests saving before moving from the dashboard
2 cases where I lost something I just added to the dashboard:
lost 1:

lost2:

poffdeluxe · 2020-11-19T20:37:00Z

@AlonaNadler Thanks for all this feedback! For the unlinking issue, that looks like it's an issue even in master. Looking into it. The two lost examples seem to both be cases where the embeddable gets added to the dashboard but the dashboard doesn't get saved. I just pushed a change so that when you go to the dashboard, the dashboard is put into its "edit state" to prompt the user to save the new embeddable to the dashboard.

When selecting a new dashboard it was unclear that it doesn’t sve the dashboard. I think since I enter the name of the object I thought the dashboard was also saved. Eventually, I lost work. Not sure if you have an idea on how to solve it or whether we should give it move time to learn if it is a real issue. In the past, we discussed a pop that suggests saving before moving from the dashboard

I spoke to @ThomThomson briefly about this today and I think there are some additional dashboard changes coming soon that will warn a dashboard user if they have those unsaved changes. I think just having this pop up will really alleviate those issues you're seeing

ThomThomson · 2020-11-19T21:15:57Z

Can confirm that the unlink issue is present in Master. I have filed an issue for it #83864 and will fix it asap.

flash1293 · 2020-12-04T15:00:18Z

On editing an existing visualization and unchecking "Save as new visualization", the button still says "Save and add to library"

That's a little confusing IMHO because it's already added to the library. What about just using "Save" here.

This is just my personal opinion, I'm sure it has been discussed, but I still wanted to mention it: I think it's a little too aggressive in pushing for dashboard first to default to save an existing "Library" vis to a dashboard instead of updating the existing library vis. At this point it seems like the user is updating an existing vis on purpose, so IMHO it should default to just save it.

ryankeairns · 2020-12-04T15:36:07Z

That's a little confusing IMHO because it's already added to the library. What about just using "Save" here.

This is just my personal opinion, I'm sure it has been discussed, but I still wanted to mention it: I think it's a little too aggressive in pushing for dashboard first to default to save an existing "Library" vis to a dashboard instead of updating the existing library vis. At this point it seems like the user is updating an existing vis on purpose, so IMHO it should default to just save it.

+1 to both of these suggestions.

flash1293

Lens code looks pretty good to me already, just left a small comment

flash1293 · 2020-12-04T15:34:57Z

x-pack/plugins/lens/public/app_plugin/tags_saved_object_save_modal_dashboard_wrapper.tsx

+  onSave: (props: OnSaveProps & { dashboardId?: string | null; newTags?: string[] }) => void;
+};
+
+export const TagEnhancedSavedObjectSaveModalDashboard: FC<TagEnhancedSavedObjectSaveModalDashboardProps> = ({


This file shares a lot of code with x-pack/plugins/lens/public/app_plugin/tags_saved_object_save_modal_origin_wrapper.tsx - can we somehow unify them?

I thought about that, for sure. My biggest concern is I kinda want to make it easy to back out of changes if we have to end up deciding to make big adjustments to the time-to-visualize flow after we release. I can def go either way here, though.

I see, then let’s move the “renderModal” logic into a separate component which calls the respective modal in the right scenarios. This keeps that stuff out of the app component (it already way too big anyway) and doesn’t over-abstract stuff which will likely change in the future.

…thout specifying dashboard

poffdeluxe · 2020-12-04T21:30:22Z

Thanks for the feedback y'all!

@ThomThomson @flash1293 @ryankeairns I made some changes to the behavior based on feedback:

If you're editing an existing visualization, it defaults the "copy on save" to false and the button's text will just read "Save"
If you're editing an existing visualization and you turn copy on save to true, then the adding to library text will then save "Save and Add to Library"

Also, fixed a bug where you could click save when saving to an existing dashboard without specifying a dashboard to save to

poffdeluxe · 2020-12-07T15:32:48Z

@elasticmachine merge upstream

ryankeairns

This turned out really nice, works as expected, and it will certainly help people understand the library/Dashboard-first approach 👏

src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss

src/plugins/visualize/public/application/components/visualize_listing.scss

…fdeluxe/kibana into feature/visualize-users-to-dashboard

tylersmalley

✔️ limits change.

flash1293

The Lens part looks mostly good to me, I'm going to approve to unblock this PR.

However I noticed one weird case in the flow (not sure whether expected).

Edit an embedded Lens vis by clicking "Edit panel" from the dashboard
The breadcrumb says "Dashboard / Visualize / < name >"
Save the visualization to the library via "Save as"
Now the breadcrumb says "Visualize / < name >" - to me this looks like the connection to the dashboard has been severed and I'm in "Library mode" now, but that's not the case, because...
If i'm hitting save again it tries to save it to the dashboard again, probably because it still remembers the originating app

Not necessarily a bug, but it struck me as weird.

src/plugins/visualize/public/application/components/visualize_listing.tsx

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

ThomThomson · 2020-12-08T17:41:23Z

@flash1293, looks like this edge case is also in master. Not sure when this started happening, but I remember it working properly back when Lens by Value was written. I've written a one line fix for it. Not the most elegant thing in the world, but it fixes the issue:

#85309

…fdeluxe/kibana into feature/visualize-users-to-dashboard

kibanamachine · 2020-12-08T20:47:48Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 3054ab9

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	458	460	+2
`presentationUtil`	-	18	+18
total			+20

Async chunks

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

id	before	after	diff
`dashboard`	196.9KB	197.0KB	+52.0B
`lens`	1004.0KB	1012.0KB	+8.0KB
`visualize`	127.6KB	130.8KB	+3.1KB
total			+11.2KB

Distributable file count

id	before	after	diff
`default`	46923	47690	+767
`oss`	27565	27572	+7

Page load bundle

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

id	before	after	diff
`lens`	52.9KB	53.1KB	+243.0B
`presentationUtil`	-	25.3KB	+25.3KB
`savedObjects`	80.0KB	81.0KB	+1022.0B
`visualize`	40.1KB	40.4KB	+243.0B
total			+26.8KB

History

💛 Build #92796 was flaky 227ae92
💚 Build #92563 succeeded c3d4eae
💔 Build #92559 failed f46b6c2
💛 Build #92382 was flaky cbf6283
💔 Build #92125 failed cd22ea0

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

…83140) (#85345) Co-authored-by: Ryan Keairns <contactryank@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> # Conflicts: # packages/kbn-optimizer/limits.yml

poffdeluxe commented Nov 11, 2020

View reviewed changes

src/plugins/dashboard/config.ts Outdated Show resolved Hide resolved

poffdeluxe commented Nov 11, 2020

View reviewed changes

src/plugins/visualize/public/application/components/visualize_listing.tsx Outdated Show resolved Hide resolved

poffdeluxe commented Nov 11, 2020

View reviewed changes

src/plugins/saved_objects/public/save_modal/saved_object_save_modal_dashboard.tsx Outdated Show resolved Hide resolved

poffdeluxe commented Nov 11, 2020

View reviewed changes

poffdeluxe force-pushed the feature/visualize-users-to-dashboard branch from dfcbeb6 to 933a784 Compare November 17, 2020 21:31

poffdeluxe force-pushed the feature/visualize-users-to-dashboard branch from 9d24e74 to 3fa09f4 Compare November 20, 2020 20:35

poffdeluxe added 16 commits November 30, 2020 13:19

wip

984adbb

First pass at dashboard redirect

0aace28

Fix bad rebase

38b7417

i18n and tooltip

2af3d97

Add Lens support for dashboard save flow

4972c9f

Fix conditional double-wide saved object modal render

166cf3c

Set edit mode when receiving incoming embeddable

a26180b

Cleanup

6a69b45

Reverting by value change

4305db6

First pass at new plugin

64fd264

additional updates

9eecc87

Updating some docs

0603fd7

fix i18n

093b939

adding limits for new plugin

60046af

Fix i18n

a67ec4a

remove lint file

89d934d

poffdeluxe force-pushed the feature/visualize-users-to-dashboard branch from 8c25ee5 to 89d934d Compare November 30, 2020 19:20

ryankeairns mentioned this pull request Nov 30, 2020

[Discuss] Lens, Dashboard-first, and Navigational Search #84523

Closed

Update placement of save new in save modal

8d25301

flash1293 reviewed Dec 4, 2020

View reviewed changes

Update save behavior when editing existing visualization, Fix save wi…

cd22ea0

…thout specifying dashboard

Merge branch 'master' into feature/visualize-users-to-dashboard

cbf6283

ryankeairns approved these changes Dec 7, 2020

View reviewed changes

src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss Outdated Show resolved Hide resolved

src/plugins/visualize/public/application/components/visualize_listing.scss Outdated Show resolved Hide resolved

poffdeluxe added 3 commits December 7, 2020 16:39

Refactor save modal for lens

dba4e7f

Merge branch 'feature/visualize-users-to-dashboard' of github.com:pof…

f46b6c2

…fdeluxe/kibana into feature/visualize-users-to-dashboard

Fix type and add newlines

c3d4eae

tylersmalley approved these changes Dec 7, 2020

View reviewed changes

flash1293 approved these changes Dec 8, 2020

View reviewed changes

gchaps reviewed Dec 8, 2020

View reviewed changes

src/plugins/visualize/public/application/components/visualize_listing.tsx Outdated Show resolved Hide resolved

Update copy on visualize listing

227ae92

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

poffdeluxe added 2 commits December 8, 2020 13:04

Clarification

8fdb80f

Merge branch 'feature/visualize-users-to-dashboard' of github.com:pof…

3054ab9

…fdeluxe/kibana into feature/visualize-users-to-dashboard

poffdeluxe merged commit 8467b89 into elastic:master Dec 8, 2020

poffdeluxe deleted the feature/visualize-users-to-dashboard branch December 8, 2020 21:39

poffdeluxe mentioned this pull request Dec 8, 2020

[7.x] [Time to Visualize] Add visualizations to dashboard from save modal (#83140) #85345

Merged

ryankeairns mentioned this pull request Dec 9, 2020

[Time to visualize] Copy panel from one dashboard to another dashboard #69423

Closed

poffdeluxe mentioned this pull request Dec 9, 2020

[Time to Visualize] Hide new visualize flow banner until feature flag change #85477

Merged

This was referenced Dec 9, 2020

[Discuss][Time to Visualize] Browser / Hash History Conflict #85493

Closed

[Time to Visualize] Transition Embeddable State Transfer to Session Storage #85688

Merged

poffdeluxe mentioned this pull request Dec 15, 2020

[Dashboard] Prompt Visualize users to start with Dashboard #79925

Closed

ThomThomson mentioned this pull request Jan 15, 2021

[Time to Visualize] Enable by Default #88390

Merged

3 tasks

ryankeairns mentioned this pull request Mar 12, 2021

[Time to Visualize] Update save modal with discrete library option #94526

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Time to Visualize] Add visualizations to dashboard from save modal #83140

[Time to Visualize] Add visualizations to dashboard from save modal #83140

poffdeluxe commented Nov 11, 2020 •

edited

Loading

poffdeluxe Nov 11, 2020

ryankeairns commented Nov 11, 2020

ryankeairns commented Nov 12, 2020

AlonaNadler commented Nov 18, 2020

poffdeluxe commented Nov 19, 2020

ThomThomson commented Nov 19, 2020

flash1293 commented Dec 4, 2020 •

edited

Loading

ryankeairns commented Dec 4, 2020

flash1293 left a comment

flash1293 Dec 4, 2020

poffdeluxe Dec 4, 2020

flash1293 Dec 4, 2020

poffdeluxe commented Dec 4, 2020

poffdeluxe commented Dec 7, 2020

ryankeairns left a comment

tylersmalley left a comment

flash1293 left a comment •

edited

Loading

ThomThomson commented Dec 8, 2020

kibanamachine commented Dec 8, 2020


		const { documentInfo, savedObjectsClient } = props;

		const fetchDashboards = useCallback(

[Time to Visualize] Add visualizations to dashboard from save modal #83140

[Time to Visualize] Add visualizations to dashboard from save modal #83140

Conversation

poffdeluxe commented Nov 11, 2020 • edited Loading

Summary

Checklist

For maintainers

poffdeluxe Nov 11, 2020

Choose a reason for hiding this comment

ryankeairns commented Nov 11, 2020

ryankeairns commented Nov 12, 2020

Tooltip

3rd radio button & button label

AlonaNadler commented Nov 18, 2020

poffdeluxe commented Nov 19, 2020

ThomThomson commented Nov 19, 2020

flash1293 commented Dec 4, 2020 • edited Loading

ryankeairns commented Dec 4, 2020

flash1293 left a comment

Choose a reason for hiding this comment

flash1293 Dec 4, 2020

Choose a reason for hiding this comment

poffdeluxe Dec 4, 2020

Choose a reason for hiding this comment

flash1293 Dec 4, 2020

Choose a reason for hiding this comment

poffdeluxe commented Dec 4, 2020

poffdeluxe commented Dec 7, 2020

ryankeairns left a comment

Choose a reason for hiding this comment

tylersmalley left a comment

Choose a reason for hiding this comment

flash1293 left a comment • edited Loading

Choose a reason for hiding this comment

ThomThomson commented Dec 8, 2020

kibanamachine commented Dec 8, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

Page load bundle

History

poffdeluxe commented Nov 11, 2020 •

edited

Loading

flash1293 commented Dec 4, 2020 •

edited

Loading

flash1293 left a comment •

edited

Loading