[Dashboard] Add reset button #154872

Heenawter · 2023-04-12T20:06:15Z

Summary

This PR adds a reset button to the dashboard top navigation in both edit and view mode - when clicked, if the dashboard has unsaved changes, it will revert the dashboard to the last saved state:

Screen.Recording.2023-04-18.at.4.24.27.PM.mov

Note
The above video contains some old copy for the modals. Please refer to "All copy changes" below to see the updated copy.

Note that, by adding more buttons to the top nav bar, we are increasing the risk of someone hitting this accessibility issue (where the breadcrumbs get completely overlapped before the browser is small enough for the navigation to collapse) - this will either be addressed on the Shared UX side or will be addressed as part of our nav bar redesign 👍

All Copy Changes

Listing Page

Before After
Dashboard - Edit Mode

Before After
Dashboard - View Mode

Before After

N/A since you couldn't discard changes from view mode previously

Flaky Test Runner

test/functional/apps/dashboard/group1/dashboard_unsaved_state.ts
test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts

Checklist

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) (Refer above)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

Heenawter · 2023-04-17T19:59:41Z

src/plugins/dashboard/public/dashboard_container/state/dashboard_container_reducers.ts

-    state.explicitInput = state.componentState.lastSavedInput;
+    state.explicitInput = {
+      ...state.componentState.lastSavedInput,
+      viewMode: state.explicitInput.viewMode, // keep current view mode when resetting


It is possible for a view view mode to be included in a dashboard's saved input - for example, in the sample dashboards, their imported state is in view mode which meant that hitting the "reset" would actually flip them from edit mode into view mode (since this is included as part of the last saved input). This line ensures that view mode is ignored when resetting to the last saved input.

Heenawter · 2023-04-17T20:00:03Z

...dable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx

+        onClose: (overlayRef) => {
+          if (overlayTracker) overlayTracker.clearOverlays();
+          overlayRef.close();
+        },


This fixes a small bug I discovered with the panel settings flyout where, if you closed the flyout by clicking outside of the flyout rather than via the "Close" buttons, hasOverlays remains true and so a bunch of items in the top nav bar stayed disabled.

Before

After

…-button_2023-04-12

gchaps · 2023-04-19T20:11:38Z

Some minor edits to the 2 Reset modals.

Listing page and Dashboard edit mode

Title: Reset dashboard?
Description: All unsaved changes will be lost.
Button: Reset dashboard

Dashboard view mode

Title: Reset dashboard?
Description: This dashboard will return to tis last saved state. You might lose changes to filters and queries.
Button: Reset dashboard

…-button_2023-04-12

kibana-ci · 2023-04-20T17:46:36Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 9f51d45

Failed CI Steps

FTR Configs #38

Test Failures

[job] [logs] FTR Configs #38 / cases security and spaces enabled: trial Common delete_cases alerts security_solution removes multiple cases from the alert schema when deleting multiple cases

Metrics [docs]

Async chunks

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

id	before	after	diff
`dashboard`	433.3KB	433.9KB	+584.0B

Page load bundle

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

id	before	after	diff
`embeddable`	75.7KB	75.7KB	+44.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`securitySolution`	394	397	+3

Total ESLint disabled count

id	before	after	diff
`securitySolution`	474	477	+3

History

💔 Build #121640 failed 29a06ab
💔 Build #120908 failed 9c6c5ac
💔 Build #120902 failed a04a9bd
💚 Build #120767 succeeded 322378b
💔 Build #120479 failed 717d39c039adb02b68f81cbb299a586f6d54824b
💔 Build #120456 failed 6cca8ed6511a76089f71886e9f8035cc6cbd0108

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

cc @Heenawter @gchaps

Heenawter · 2023-04-20T18:00:51Z

src/plugins/dashboard/public/dashboard_listing/_dashboard_listing_strings.ts

+          defaultMessage: `All unsaved changes will be lost.`,
+        })
+      : i18n.translate('dashboard.resetChangesConfirmModal.resetChangesDescription', {
+          defaultMessage: `This dashboard will return to its last saved state.  You might lose changes to filters and queries.`,


@cqliu1 Brought up a good point that this could be rephrased to be something like "This dashboard will return to its last saved state. You might lose changes to things like filters and queries." to make it less explicit - after all, you could lose changes to control selections (which kinda fall in to the "filters" bucket) or maps zoom/positioning, but it's hard to call out those things specifically without potentially causing confusion.

Not sure we want to hold up this PR on a small copy change, but throwing it out there 💃

elasticmachine · 2023-04-20T18:01:02Z

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

jsanz · 2023-04-21T08:42:13Z

I like the new copy changes, they are concise and better to understand. Great work 👏

ThomThomson

Everything LGTM! Tested functionality in Chrome and looked through code. Nice functional test changes, and glad to see the copy changes to standardize us on reset rather than discard.

Closes elastic#132457 ## Summary This PR adds a reset button to the dashboard top navigation in both edit and view mode - when clicked, if the dashboard has unsaved changes, it will revert the dashboard to the last saved state: https://user-images.githubusercontent.com/8698078/232918433-97bac4b0-7472-49e9-9eb3-2cb7c9e6edf6.mov > **Note** > The above video contains some old copy for the modals. Please refer to "All copy changes" below to see the updated copy. Note that, by adding more buttons to the top nav bar, we are increasing the risk of someone hitting [this accessibility issue](elastic#154414) (where the breadcrumbs get completely overlapped before the browser is small enough for the navigation to collapse) - this will either be addressed on the Shared UX side or will be addressed as part of our [nav bar redesign](elastic#154945) 👍 ### All Copy Changes - **Listing Page** | Before | After | |--------|-------| | ![Screenshot 2023-04-18 at 4 29 10 PM](https://user-images.githubusercontent.com/8698078/232919138-7be86e97-ebb4-48a9-b8b1-0b970131aa37.png) | ![image](https://user-images.githubusercontent.com/8698078/232919166-b7bc7b55-5074-485d-ad0a-2fb695367538.png) | | ![image](https://user-images.githubusercontent.com/8698078/232920038-6c8c463e-0c7d-49e7-99c8-86b2ae611844.png) | ![image](https://user-images.githubusercontent.com/8698078/233412233-a785d99d-9d07-4ee5-a121-646bbd839f7c.png) | - **Dashboard - _Edit Mode_** | Before | After | |--------|-------| | ![image](https://user-images.githubusercontent.com/8698078/232920992-2d1b61f4-dff2-4bdd-854b-9cd6fcae07ce.png) | ![image](https://user-images.githubusercontent.com/8698078/233412732-254a9503-5526-44bc-a2e0-067f8800ad26.png) | - **Dashboard - _View Mode_** | Before | After | |--------|-------| | N/A since you couldn't discard changes from view mode previously | ![image](https://user-images.githubusercontent.com/8698078/233413029-9a6b4256-3002-48c5-8620-7596d8f08153.png) | ### Flaky Test Runner - `test/functional/apps/dashboard/group1/dashboard_unsaved_state.ts` <a href="https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2144"><img src="https://user-images.githubusercontent.com/8698078/232622312-8532bc7e-a699-45ee-862d-739d116c5dba.png"></a> - `test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts` <a href="https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2143"><img src="https://user-images.githubusercontent.com/8698078/232615061-f01439e8-3a69-4190-8b6f-1926e1fa776a.png"></a> ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) (Refer above) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

## Summary Adds the docs for the following 8.8 Presentation docs: - Unified dashboard settings: #153862 Docs preview: https://kibana_157765.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#add-dashboard-settings - Add reset button: #154872 Docs preview: https://kibana_157765.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#reset-the-dashboard --------- Co-authored-by: Nick Peihl <[email protected]> Co-authored-by: Hannah Mudge <[email protected]>

## Summary Adds the docs for the following 8.8 Presentation docs: - Unified dashboard settings: elastic#153862 Docs preview: https://kibana_157765.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#add-dashboard-settings - Add reset button: elastic#154872 Docs preview: https://kibana_157765.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#reset-the-dashboard --------- Co-authored-by: Nick Peihl <[email protected]> Co-authored-by: Hannah Mudge <[email protected]> (cherry picked from commit 0689c63)

# Backport This will backport the following commits from `main` to `8.8`: - [[DOCS] Adds the presentation 8.8 docs (#157765)](#157765)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kaarina Tungseth <[email protected]>

## Summary Adds the docs for the following 8.8 Presentation docs: - Unified dashboard settings: #153862 Docs preview: https://kibana_157765.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#add-dashboard-settings - Add reset button: #154872 Docs preview: https://kibana_157765.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#reset-the-dashboard --------- Co-authored-by: Nick Peihl <[email protected]> Co-authored-by: Hannah Mudge <[email protected]>

Heenawter self-assigned this Apr 12, 2023

Heenawter force-pushed the dashboard-reset-button_2023-04-12 branch 8 times, most recently from 895d062 to c24ceb5 Compare April 13, 2023 22:31

Heenawter added 7 commits April 17, 2023 08:34

Basic reset button

a1e0b3a

Add divider between items

59f9e39

Clean up the implementation of the divider lines

fac881b

Clean up

e90884c

Remove divider from Dashboard top nav + clean up

c70504a

Add reset button to view mode

24294b8

Update copy of modal and button

16c70b1

Heenawter force-pushed the dashboard-reset-button_2023-04-12 branch 2 times, most recently from e69b59d to 3bbdf18 Compare April 17, 2023 19:57

Heenawter commented Apr 17, 2023

View reviewed changes

Heenawter force-pushed the dashboard-reset-button_2023-04-12 branch 3 times, most recently from 717d39c to 48a1c40 Compare April 18, 2023 15:21

Add functional tests

322378b

Heenawter force-pushed the dashboard-reset-button_2023-04-12 branch from 1f33bb3 to 322378b Compare April 18, 2023 15:21

Heenawter added 2 commits April 18, 2023 16:18

Merge branch 'main' of github.com:elastic/kibana into dashboard-reset…

10ac4aa

…-button_2023-04-12

Clean up strings after conflicts

9c6c5ac

Heenawter force-pushed the dashboard-reset-button_2023-04-12 branch from f4d62fe to 9c6c5ac Compare April 18, 2023 22:27

gchaps self-assigned this Apr 19, 2023

Heenawter added 4 commits April 20, 2023 09:30

Fix copy + types

29a06ab

Remove unused translations

c8fbeb5

Clean up

aba508e

Merge branch 'main' of github.com:elastic/kibana into dashboard-reset…

9f51d45

…-button_2023-04-12

Heenawter commented Apr 20, 2023

View reviewed changes

Heenawter marked this pull request as ready for review April 20, 2023 18:00

Heenawter requested a review from a team as a code owner April 20, 2023 18:00

ThomThomson self-requested a review April 21, 2023 14:42

ThomThomson approved these changes Apr 21, 2023

View reviewed changes

botelastic bot added the Feature:Embedding Embedding content via iFrame label Apr 21, 2023

Heenawter merged commit 29ffa17 into elastic:main Apr 21, 2023

Heenawter deleted the dashboard-reset-button_2023-04-12 branch April 21, 2023 15:30

kibanamachine added v8.8.0 backport:skip This commit does not require backporting labels Apr 21, 2023

KOTungseth mentioned this pull request Apr 25, 2023

[DOCS] Add documentation for 8.8 #155793

Closed

19 tasks

KOTungseth mentioned this pull request May 15, 2023

[DOCS] Adds the presentation 8.8 docs #157765

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] Add reset button #154872

[Dashboard] Add reset button #154872

Heenawter commented Apr 12, 2023 •

edited

Loading

Heenawter Apr 17, 2023

Heenawter Apr 17, 2023

gchaps commented Apr 19, 2023

kibana-ci commented Apr 20, 2023

ESLint disabled line counts

Total ESLint disabled count

Heenawter Apr 20, 2023

elasticmachine commented Apr 20, 2023

jsanz commented Apr 21, 2023

ThomThomson left a comment

[Dashboard] Add reset button #154872

[Dashboard] Add reset button #154872

Conversation

Heenawter commented Apr 12, 2023 • edited Loading

Summary

All Copy Changes

Flaky Test Runner

Checklist

For maintainers

Heenawter Apr 17, 2023

Choose a reason for hiding this comment

Heenawter Apr 17, 2023

Choose a reason for hiding this comment

gchaps commented Apr 19, 2023

kibana-ci commented Apr 20, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

Heenawter Apr 20, 2023

Choose a reason for hiding this comment

elasticmachine commented Apr 20, 2023

jsanz commented Apr 21, 2023

ThomThomson left a comment

Choose a reason for hiding this comment

Heenawter commented Apr 12, 2023 •

edited

Loading