[Discover] Show "unsaved changes" label when in unsaved state of saved search

[kertal]

For iterating on the redesign of Discover, we need to change the UI for resetting the search, when a saved search is loaded

This link should be replaced by

• A badge displayed in Discover's top navigation menu, similar like displayed on a dashboard
• The badge should provide the functionality of resetting the loaded search to it's original state in a tooltip that looks like this (for the start I'd suggest just the single reset link)
  

This new badge can take advantage of hasChanged$ observable of the DiscoverSavedSearchContainer.

kibana/src/plugins/discover/public/application/main/services/discover_saved_search_container.ts

Line 69 in d974446

getHasChanged$: () => BehaviorSubject<boolean>;

Originally the link is displayed when a saved search is loaded, no matter if it was modified, or not.

[kertal]

dear @elastic/kibana-design just wanted to know if it's fine we use the Dashboard style of showing "Unsaved changes" in Discover once we are able to do this

[andreadelrio]

dear @elastic/kibana-design just wanted to know if it's fine we use the Dashboard style of showing "Unsaved changes" in Discover once we are able to do this

@kertal I think it's ok to follow the same thing that Dashboard is doing including the confirmation modal when attempting to leave the page.

[kertal]

thx @andreadelrio , let's first take care of the "Unsaved changes" badge. The confirmation modal could be done in a follow up, also needs much more changes.

[MichaelMarcialis]

While this is probably not the best venue and should likely be discussed as a separate issue, I wanted to mention a thought I had here for the sake of visibility. It's always struck me as a odd to have this "Unsaved changes" badge in Dashboards that isn't in close proximity to the save action or the dashboard name. Instead, it's floating in an arbitrary location in the second Kibana header bar. The badge and its placement also doesn't scale down very elegantly at smaller viewport sizes.

Given that we already enable/disable the save button when checking for a dirty state, perhaps we could consider replacing the current badge pattern with a simple dot icon next to the saved object name in the breadcrumbs to indicate a dirty state. This dot-next-to-name pattern is something that is used fairly consistently in a variety of software, and would allow the dirty state to be represented in a much more meaningful location, while also being less obtrusive and scale down better. Thoughts?

[kertal]

While this is probably not the best venue and should likely be discussed as a separate issue, I wanted to mention a thought I had here for the sake of visibility. It's always struck me as a odd to have this "Unsaved changes" badge in Dashboards that isn't in close proximity to the save action or the dashboard name. Instead, it's floating in an arbitrary location in the second Kibana header bar. The badge and its placement also doesn't scale down very elegantly at smaller viewport sizes.

Given that we already enable/disable the save button when checking for a dirty state, perhaps we could consider replacing the current badge pattern with a simple dot icon next to the saved object name in the breadcrumbs to indicate a dirty state. This dot-next-to-name pattern is something that is used fairly consistently in a variety of software, and would allow the dirty state to be represented in a much more meaningful location, while also being less obtrusive and scale down better. Thoughts?

I do agree there'S room for improvement. In case we change it, we should apply it also in Dashboard. I like the idea of moving the indicator to the left side, so it's better linke with the name of the saved search. One thing that comes to my mind, that it's maybe a bit to subtile compared to the badge.

I'd like to add an additional design challenge. When you load a saved search, there's button displayed to reset it / undo changes. It would also be an opportunity to move that button up, because it's located where the histogram is, why : because it was "always like that", which is never a good answer. FYI @andreadelrio

[andreadelrio]

Bit of a sidenote but thought of this after reading Michael's suggestion. @kertal how do the Session buttons (check and clock icons I believe) come into play here if at all? Just wondering if it might be confusing to have those icons next to the "unsaved changes" indicator that Michael is proposing.

[kertal]

Bit of a sidenote but thought of this after reading Michael's suggestion. @kertal how do the Session buttons (check and clock icons I believe) come into play here if at all? Just wondering if it might be confusing to have those icons next to the "unsaved changes" indicator that Michael is proposing.

Yes, good call, that's definitely something to consider, and a source for confusion, that's why it ain't an easy task for changes in this area

[kertal]

with the upcoming Discover redesign we should take care of that, to get rid of the "Reset search" link

[MichaelMarcialis]

Bit of a sidenote but thought of this after reading Michael's suggestion. @kertal how do the Session buttons (check and clock icons I believe) come into play here if at all? Just wondering if it might be confusing to have those icons next to the "unsaved changes" indicator that Michael is proposing.

@andreadelrio: Just now realizing I never responded to this! You raise a good point. I tried to account for this in my suggestion by having the unsaved changes dot appear within the container of the last breadcrumb item, which at least provides some visual separation between the other icons (check and clock). Would that help to alleviate the concern?

[kertal]

@MichaelMarcialis @andreadelrio until we find a final solution for this, would it be ok to align to the dashboard solution, because it wouldn't be too much effort and already beneficial to have an indication for unsaved changes like this. In a follow up we could aim for a bigger change (which we should)