[Dashboard Usability] Unified dashboard settings (#153862)

## 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](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2055)

### Checklist

Delete any items that are not applicable to this PR.

- [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 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)

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:
 
 * *Use margins between panels* — Adds a margin of space between each panel.
 

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

@@ -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: {

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

@@ -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);
 
@@ -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',
@@ -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,
@@ -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: {
@@ -220,6 +221,7 @@ export const useDashboardMenuItems = ({
     quickSaveDashboard,
     dashboardContainer,
     hasUnsavedChanges,
+    hasOverlays,
     setFullScreenMode,
     isSaveInProgress,
     returnToViewMode,
@@ -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 };

src/plugins/dashboard/public/dashboard_container/component/settings/index.ts

@@ -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';