[Dashboard Usability] Unified dashboard settings #153862

nickpeihl · 2023-03-28T12:51:42Z

Summary

Adds flyout for changing individual dashboard settings such as title, description, tags, and save time with dashboard. This also moves the existing dashboard options (show panel titles, sync colors, use margins, sync cursor, and sync tooltips) into the flyout.

Fixes #144532

Flaky test runner

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 was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

…pts' into unified-dashboard-opts

elasticmachine · 2023-03-28T18:48:40Z

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

nickpeihl · 2023-03-28T18:52:07Z

src/plugins/dashboard/public/dashboard_container/embeddable/api/show_settings.tsx

+  } = this.getReduxEmbeddableTools();
+
+  // TODO Move this action into DashboardContainer.openOverlay
+  dispatch(setHasOverlays(true));


This will disable the Quick save button while the flyout is open. We could move this into DashboardContainer.openOverlay, but we would need to confirm that other flyouts should disable the save button.

nreese

This looks great and is a huge step forward in usability. Great looking functional tests as well.

nreese · 2023-03-28T21:47:50Z

docs/user/dashboard/dashboard.asciidoc

@@ -363,7 +363,7 @@ Apply a set of design options to the entire dashboard.

 . If you're in view mode, click *Edit* in the toolbar.

-. In the toolbar, *Options*, then use the following options:
+. In the toolbar, click *Settings*, to open the *Dashboard settings* flyout, then use the following options:


Something for a follow up PR - rewrite "Apply design options" section into something more appropriate for the new UI, such as "Dashboard settings". Then expand to include all dashboard options

nreese · 2023-03-28T21:53:31Z

src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts

-    description: i18n.translate('dashboard.topNave.optionsConfigDescription', {
-      defaultMessage: 'Options',
+    description: i18n.translate('dashboard.topNave.settingsConfigDescription', {
+      defaultMessage: 'Change settings for your dashboard',


How about "Open dashboard settings"

nreese · 2023-03-28T21:58:47Z

src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx

+      settings: {
+        ...topNavStrings.settings,
+        id: 'settings',
+        testId: 'dashboardSettingsButton',
        disableButton: isSaveInProgress,


Should "Settings" button be disabled when the Settings flyout is open? Clicking button again cause flyout to animate open again.

Good idea. I think all the nav bar items should be disabled while the flyout is open since the flyout contains local state that could be lost by clicking "Share", "Save as", or "Switch to view mode".

nreese · 2023-03-28T22:16:57Z

src/plugins/dashboard/public/dashboard_container/component/settings/settings_flyout.tsx

+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton


Can you add some loading state to the "Apply" button. For example, throttle network connection and click "Apply". Notice how the button does not show any loading state and is still click able while duplicate title check is occuring.

nreese · 2023-03-29T16:23:26Z

src/plugins/dashboard/public/dashboard_container/component/settings/settings_flyout.tsx

+    setIsTitleDuplicateConfirmed(true);
+  };
+
+  const onApply = async () => {


Thanks for adding loading state. You will also need to ensure component is still mounted after async task finishes. Otherwise you get errors like this if the component is unmounted before async task finishes

Here is a code example of how to set up isMounted in a functional component with hooks. Thanks @ThomThomson

const [isMounted, setIsMounted] = useState(true); useEffect(() => { return () => setIsMounted(false); });

nreese · 2023-03-29T20:29:33Z

src/plugins/dashboard/public/dashboard_container/component/settings/settings_flyout.tsx

+      onTitleDuplicate,
+      isTitleDuplicateConfirmed,
+    });
+    setIsApplying(false);


Move setIsApplying after is mounted check.

nreese

LGTM
code review, tested in chrome

kibana-ci · 2023-03-30T14:23:03Z

💚 Build Succeeded

Buildkite Build
Commit: 5650df0

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`dashboard`	179	178	-1

Async chunks

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

id	before	after	diff
`dashboard`	450.9KB	455.4KB	+4.5KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`dashboard`	12	13	+1

Unknown metric groups

API count

id	before	after	diff
`dashboard`	188	187	-1

ESLint disabled line counts

id	before	after	diff
`securitySolution`	432	435	+3

Total ESLint disabled count

id	before	after	diff
`securitySolution`	512	515	+3

History

💔 Build #116566 failed 26393ed
💔 Build #116468 failed efd42f8
💚 Build #116212 succeeded 264cf31
💔 Build #116123 failed aa998e6
💔 Build #116112 failed 61770df

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

rshen91

LGTM tested locally and thanks for updating the FTs 👍🏻

## 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]>

nickpeihl added 7 commits March 2, 2023 11:54

Make changes to dashboard settings cancelable

78ea85d

Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts

b68c839

Create dashboard settings flyout

922f629

Disable dashboard quicksave button when flyout is open

18ef0df

Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts

d13718d

Use updater function to avoid dependencies

fbab788

Add functional tests for dashboard settings

620bfc5

nickpeihl added release_note:enhancement Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas v8.8.0 Feature:Dashboard Dashboard related features labels Mar 28, 2023

nickpeihl added 10 commits March 28, 2023 09:02

Ehh, forgot to save my changes

56e8e69

Better descriptions for accessibility

7659a68

Fix i18n ids

75ed836

Fix functional tests

61770df

Use correct i18n namespace

78e3c33

Update docs

936fd45

Merge branch 'main' into unified-dashboard-opts

aa998e6

Fix broken import

cb91e7a

Merge remote-tracking branch 'refs/remotes/origin/unified-dashboard-o…

966db44

…pts' into unified-dashboard-opts

Update i18n

264cf31

nickpeihl marked this pull request as ready for review March 28, 2023 18:48

nickpeihl requested review from a team as code owners March 28, 2023 18:48

nickpeihl commented Mar 28, 2023

View reviewed changes

nickpeihl added loe:large Large Level of Effort impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. labels Mar 28, 2023

nreese self-requested a review March 28, 2023 21:44

nreese reviewed Mar 28, 2023

View reviewed changes

Review feedback

efd42f8

nreese reviewed Mar 29, 2023

View reviewed changes

nickpeihl added 3 commits March 29, 2023 15:10

Handle incomplete async functions when unmounted

28eb138

Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts

e5f75ef

Review feedback

d168045

nreese reviewed Mar 29, 2023

View reviewed changes

Move setIsApplying function after isMounted check

26393ed

nreese approved these changes Mar 29, 2023

View reviewed changes

nickpeihl added 2 commits March 30, 2023 09:15

Fix flaky functional tests

e952920

Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts

5650df0

rshen91 approved these changes Mar 31, 2023

View reviewed changes

nickpeihl merged commit b692e34 into elastic:main Mar 31, 2023

kibanamachine added the backport:skip This commit does not require backporting label Mar 31, 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

cqliu1 mentioned this pull request Jun 30, 2023

[Dashboard] Simplify Save as workflow #161047

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard Usability] Unified dashboard settings #153862

[Dashboard Usability] Unified dashboard settings #153862

nickpeihl commented Mar 28, 2023 •

edited

Loading

elasticmachine commented Mar 28, 2023

nickpeihl Mar 28, 2023

nreese left a comment

nreese Mar 28, 2023

nreese Mar 28, 2023

nreese Mar 28, 2023

nickpeihl Mar 29, 2023

nreese Mar 28, 2023

nreese Mar 29, 2023 •

edited

Loading

nreese Mar 29, 2023

nreese left a comment

kibana-ci commented Mar 30, 2023

API count

ESLint disabled line counts

Total ESLint disabled count

rshen91 left a comment

[Dashboard Usability] Unified dashboard settings #153862

[Dashboard Usability] Unified dashboard settings #153862

Conversation

nickpeihl commented Mar 28, 2023 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Mar 28, 2023

nickpeihl Mar 28, 2023

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

nreese Mar 28, 2023

Choose a reason for hiding this comment

nreese Mar 28, 2023

Choose a reason for hiding this comment

nreese Mar 28, 2023

Choose a reason for hiding this comment

nickpeihl Mar 29, 2023

Choose a reason for hiding this comment

nreese Mar 28, 2023

Choose a reason for hiding this comment

nreese Mar 29, 2023 • edited Loading

Choose a reason for hiding this comment

nreese Mar 29, 2023

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

kibana-ci commented Mar 30, 2023

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

Public APIs missing exports

API count

ESLint disabled line counts

Total ESLint disabled count

History

rshen91 left a comment

Choose a reason for hiding this comment

nickpeihl commented Mar 28, 2023 •

edited

Loading

nreese Mar 29, 2023 •

edited

Loading