Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dashboard Usability] Unified dashboard settings #153862

Merged
merged 24 commits into from
Mar 31, 2023
Merged

[Dashboard Usability] Unified dashboard settings #153862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
78ea85d
Make changes to dashboard settings cancelable
nickpeihl Mar 2, 2023
b68c839
Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts
nickpeihl Mar 2, 2023
922f629
Create dashboard settings flyout
nickpeihl Mar 10, 2023
18ef0df
Disable dashboard quicksave button when flyout is open
nickpeihl Mar 10, 2023
d13718d
Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts
nickpeihl Mar 27, 2023
fbab788
Use updater function to avoid dependencies
nickpeihl Mar 27, 2023
620bfc5
Add functional tests for dashboard settings
nickpeihl Mar 28, 2023
56e8e69
Ehh, forgot to save my changes
nickpeihl Mar 28, 2023
7659a68
Better descriptions for accessibility
nickpeihl Mar 28, 2023
75ed836
Fix i18n ids
nickpeihl Mar 28, 2023
61770df
Fix functional tests
nickpeihl Mar 28, 2023
78e3c33
Use correct i18n namespace
nickpeihl Mar 28, 2023
936fd45
Update docs
nickpeihl Mar 28, 2023
aa998e6
Merge branch 'main' into unified-dashboard-opts
nickpeihl Mar 28, 2023
cb91e7a
Fix broken import
nickpeihl Mar 28, 2023
966db44
Merge remote-tracking branch 'refs/remotes/origin/unified-dashboard-o…
nickpeihl Mar 28, 2023
264cf31
Update i18n
nickpeihl Mar 28, 2023
efd42f8
Review feedback
nickpeihl Mar 29, 2023
28eb138
Handle incomplete async functions when unmounted
nickpeihl Mar 29, 2023
e5f75ef
Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts
nickpeihl Mar 29, 2023
d168045
Review feedback
nickpeihl Mar 29, 2023
26393ed
Move setIsApplying function after isMounted check
nickpeihl Mar 29, 2023
e952920
Fix flaky functional tests
nickpeihl Mar 30, 2023
5650df0
Merge remote-tracking branch 'upstream/main' into unified-dashboard-opts
nickpeihl Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/user/dashboard/dashboard.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


* *Use margins between panels* — Adds a margin of space between each panel.

Expand Down
10 changes: 5 additions & 5 deletions src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,12 +323,12 @@ export const topNavStrings = {
defaultMessage: 'Share Dashboard',
}),
},
options: {
label: i18n.translate('dashboard.topNave.optionsButtonAriaLabel', {
defaultMessage: 'options',
settings: {
label: i18n.translate('dashboard.topNave.settingsButtonAriaLabel', {
defaultMessage: 'settings',
}),
description: i18n.translate('dashboard.topNave.optionsConfigDescription', {
defaultMessage: 'Options',
description: i18n.translate('dashboard.topNave.settingsConfigDescription', {
defaultMessage: 'Open dashboard settings',
}),
},
clone: {
Expand Down
24 changes: 13 additions & 11 deletions src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const useDashboardMenuItems = ({
const dispatch = useEmbeddableDispatch();

const hasUnsavedChanges = select((state) => state.componentState.hasUnsavedChanges);
const hasOverlays = select((state) => state.componentState.hasOverlays);
const lastSavedId = select((state) => state.componentState.lastSavedId);
const dashboardTitle = select((state) => state.explicitInput.title);

Expand Down Expand Up @@ -169,13 +170,13 @@ export const useDashboardMenuItems = ({
emphasize: true,
isLoading: isSaveInProgress,
testId: 'dashboardQuickSaveMenuItem',
disableButton: !hasUnsavedChanges || isSaveInProgress,
disableButton: !hasUnsavedChanges || isSaveInProgress || hasOverlays,
run: () => quickSaveDashboard(),
} as TopNavMenuData,

saveAs: {
description: topNavStrings.saveAs.description,
disableButton: isSaveInProgress,
disableButton: isSaveInProgress || hasOverlays,
id: 'save',
emphasize: !Boolean(lastSavedId),
testId: 'dashboardSaveMenuItem',
Expand All @@ -187,7 +188,7 @@ export const useDashboardMenuItems = ({
switchToViewMode: {
...topNavStrings.switchToViewMode,
id: 'cancel',
disableButton: isSaveInProgress || !lastSavedId,
disableButton: isSaveInProgress || !lastSavedId || hasOverlays,
testId: 'dashboardViewOnlyMode',
run: () => returnToViewMode(),
} as TopNavMenuData,
Expand All @@ -196,16 +197,16 @@ export const useDashboardMenuItems = ({
...topNavStrings.share,
id: 'share',
testId: 'shareTopNavButton',
disableButton: isSaveInProgress,
disableButton: isSaveInProgress || hasOverlays,
run: showShare,
} as TopNavMenuData,

options: {
...topNavStrings.options,
id: 'options',
testId: 'dashboardOptionsButton',
disableButton: isSaveInProgress,
run: (anchor) => dashboardContainer.showOptions(anchor),
settings: {
...topNavStrings.settings,
id: 'settings',
testId: 'dashboardSettingsButton',
disableButton: isSaveInProgress || hasOverlays,
run: () => dashboardContainer.showSettings(),
} as TopNavMenuData,

clone: {
Expand All @@ -220,6 +221,7 @@ export const useDashboardMenuItems = ({
quickSaveDashboard,
dashboardContainer,
hasUnsavedChanges,
hasOverlays,
setFullScreenMode,
isSaveInProgress,
returnToViewMode,
Expand Down Expand Up @@ -252,7 +254,7 @@ export const useDashboardMenuItems = ({
} else {
editModeItems.push(menuItems.switchToViewMode, menuItems.saveAs);
}
return [...labsMenuItem, menuItems.options, ...shareMenuItem, ...editModeItems];
return [...labsMenuItem, menuItems.settings, ...shareMenuItem, ...editModeItems];
}, [lastSavedId, menuItems, share, isLabsEnabled]);

return { viewModeTopNavConfig, editModeTopNavConfig };
Expand Down
9 changes: 9 additions & 0 deletions src/plugins/dashboard/public/dashboard_container/component/settings/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

export { DashboardSettings } from './settings_flyout';
Loading