[Dashboard] Top Nav Save Menu (#237211)

## Summary

Closes #192630.
Closes [#237210](#237210).

This moves the `Save as` and `Reset` top nav actions into a split button
menu next to the `Save` button in edit mode.

<img width="1188" height="777" alt="Screenshot 2025-10-29 at 10 18
39 AM"
src="https://github.com/user-attachments/assets/06ac1310-e3f7-4251-ade0-3b94eeb5d8d2"
/>

#### With unsaved changes
<img width="624" height="164" alt="Screenshot 2025-10-29 at 10 20 33 AM"
src="https://github.com/user-attachments/assets/4e42212f-b7f1-4b29-9525-6b2b6ee6f207"
/>

#### View mode
The duplicate and reset actions remain in the top nav in view mode.

<img width="428" height="168" alt="Screenshot 2025-10-29 at 10 21 29 AM"
src="https://github.com/user-attachments/assets/3d70796f-c2f6-4312-b017-3dc5f0461388"
/>

#### Editing a new dashboard
The save button returns to a normal button with no additional save
options.
<img width="456" height="124" alt="Screenshot 2025-10-29 at 10 22 13 AM"
src="https://github.com/user-attachments/assets/7c0ca3e6-e567-43d2-9a4e-6c25fd9e03f2"
/>

I also cleaned up styles for the add menu

<img width="440" height="526" alt="Screenshot 2025-10-29 at 10 12 57 AM"
src="https://github.com/user-attachments/assets/e8117793-14da-472a-9aaf-ebc3d55e94f0"
/>


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] 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/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 3 people

packages/kbn-optimizer/limits.yml

@@ -107,7 +107,7 @@ pageLoadAssetSize:
   ml: 89000
   mockIdpPlugin: 7544
   monitoring: 28983
-  navigation: 11684
+  navigation: 14000
   newsfeed: 12371
   noDataPage: 1749
   observability: 107955

src/platform/packages/private/kbn-split-button/index.ts

@@ -7,4 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+export type { SplitButtonProps } from './src/split_button';
 export { SplitButton } from './src/split_button';

src/platform/packages/private/kbn-split-button/src/split_button.tsx

@@ -8,11 +8,11 @@
  */
 
 import { EuiButton, EuiButtonIcon, useEuiTheme } from '@elastic/eui';
-import type { IconType, UseEuiTheme } from '@elastic/eui';
+import type { EuiButtonProps, IconType, UseEuiTheme } from '@elastic/eui';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import React from 'react';
 
-type SplitButtonProps = React.ComponentProps<typeof EuiButton> & {
+export type SplitButtonProps = React.ComponentProps<typeof EuiButton> & {
   isMainButtonLoading?: boolean;
   isMainButtonDisabled?: boolean;
   iconOnly?: boolean;
@@ -22,6 +22,7 @@ type SplitButtonProps = React.ComponentProps<typeof EuiButton> & {
   secondaryButtonIcon: IconType;
   secondaryButtonAriaLabel?: string;
   secondaryButtonTitle?: string;
+  secondaryButtonFill?: boolean;
   onSecondaryButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
@@ -39,6 +40,7 @@ export const SplitButton = ({
   secondaryButtonIcon,
   secondaryButtonAriaLabel,
   secondaryButtonTitle,
+  secondaryButtonFill,
   onSecondaryButtonClick,
 
   // Primary button props
@@ -56,7 +58,7 @@ export const SplitButton = ({
 
   const areButtonsDisabled = disabled || isDisabled;
 
-  const commonMainButtonProps = {
+  const commonMainButtonProps: EuiButtonProps = {
     css: styles.mainButton,
     style: {
       borderRightColor: borderColor,
@@ -83,8 +85,8 @@ export const SplitButton = ({
         css={styles.secondaryButton}
         data-test-subj={mainButtonProps['data-test-subj'] + `-secondary-button`}
         aria-label={secondaryButtonAriaLabel}
+        display={secondaryButtonFill ? 'fill' : 'base'}
         title={secondaryButtonTitle}
-        display="base"
         color={color}
         size={size}
         iconType={secondaryButtonIcon}

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

@@ -192,7 +192,7 @@ export const topNavStrings = {
   },
   editModeInteractiveSave: {
     label: i18n.translate('dashboard.topNave.editModeInteractiveSaveButtonAriaLabel', {
-      defaultMessage: 'save as',
+      defaultMessage: 'Save as',
     }),
     description: i18n.translate('dashboard.topNave.editModeInteractiveSaveConfigDescription', {
       defaultMessage: 'Save as a new dashboard',
@@ -262,6 +262,14 @@ export const topNavStrings = {
       defaultMessage: 'Open background searches',
     }),
   },
+  saveMenu: {
+    label: i18n.translate('dashboard.topNave.saveMenuButtonAriaLabel', {
+      defaultMessage: 'Save options',
+    }),
+    description: i18n.translate('dashboard.topNave.saveMenuDescription', {
+      defaultMessage: 'Additional save options',
+    }),
+  },
 };
 
 export const getControlButtonTitle = () =>

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/add_menu/show_add_menu.tsx

@@ -15,6 +15,7 @@ import {
   type EuiContextMenuPanelDescriptor,
   EuiContextMenu,
   EuiWrappingPopover,
+  EuiThemeProvider,
 } from '@elastic/eui';
 import type { CoreStart } from '@kbn/core/public';
 import { TIME_SLIDER_CONTROL } from '@kbn/controls-constants';
@@ -263,6 +264,9 @@ export const AddMenu = ({ dashboardApi, anchorElement, coreServices }: AddMenuPr
       button={anchorElement}
       panelPaddingSize="none"
       repositionOnScroll
+      attachToAnchor
+      anchorPosition="downLeft"
+      panelStyle={{ maxWidth: 200 }}
     >
       <EuiContextMenu initialPanelId={0} panels={panels} />
     </EuiWrappingPopover>
@@ -275,15 +279,19 @@ export function showAddMenu({ dashboardApi, anchorElement, coreServices }: AddMe
     return;
   }
 
+  const theme = coreServices.theme.getTheme();
+
   isOpen = true;
   document.body.appendChild(container);
   ReactDOM.render(
     <KibanaContextProvider services={coreServices}>
-      <AddMenu
-        dashboardApi={dashboardApi}
-        anchorElement={anchorElement}
-        coreServices={coreServices}
-      />
+      <EuiThemeProvider colorMode={theme.darkMode ? 'dark' : 'light'}>
+        <AddMenu
+          dashboardApi={dashboardApi}
+          anchorElement={anchorElement}
+          coreServices={coreServices}
+        />
+      </EuiThemeProvider>
     </KibanaContextProvider>,
     container
   );

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/save_menu/show_save_menu.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback } from 'react';
+import ReactDOM from 'react-dom';
+
+import { EuiContextMenu, EuiThemeProvider, EuiWrappingPopover } from '@elastic/eui';
+import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
+
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import type { CoreStart } from '@kbn/core/public';
+import type { DashboardApi } from '../../../dashboard_api/types';
+import { topNavStrings } from '../../_dashboard_app_strings';
+
+interface SaveMenuProps {
+  anchorElement: HTMLElement;
+  dashboardApi: DashboardApi;
+  isResetting: boolean;
+  isSaveInProgress: boolean;
+  resetChanges: () => void;
+  dashboardInteractiveSave: () => void;
+}
+
+const container = document.createElement('div');
+let isOpen = false;
+
+function cleanup() {
+  if (!isOpen) {
+    return;
+  }
+  ReactDOM.unmountComponentAtNode(container);
+  document.body.removeChild(container);
+  isOpen = false;
+}
+
+export const SaveMenu = ({
+  dashboardApi,
+  anchorElement,
+  isResetting,
+  isSaveInProgress,
+  resetChanges,
+  dashboardInteractiveSave,
+}: SaveMenuProps) => {
+  const [hasOverlays, hasUnsavedChanges, lastSavedId] = useBatchedPublishingSubjects(
+    dashboardApi.hasOverlays$,
+    dashboardApi.hasUnsavedChanges$,
+    dashboardApi.savedObjectId$
+  );
+
+  const closePopover = useCallback(() => {
+    cleanup();
+    anchorElement.focus();
+  }, [anchorElement]);
+
+  const panels = [
+    {
+      id: 0,
+      initialFocusedItemIndex: 0,
+      items: [
+        {
+          name: topNavStrings.editModeInteractiveSave.label,
+          icon: 'save',
+          'data-test-subj': 'dashboardInteractiveSaveMenuItem',
+          iconType: lastSavedId ? undefined : 'save',
+          onClick: () => {
+            dashboardInteractiveSave();
+            closePopover();
+          },
+        },
+        {
+          name: topNavStrings.resetChanges.label,
+          icon: 'editorUndo',
+          'data-test-subj': 'dashboardDiscardChangesMenuItem',
+          isLoading: isResetting,
+          disabled:
+            isResetting || !hasUnsavedChanges || hasOverlays || isSaveInProgress || !lastSavedId,
+          onClick: () => {
+            resetChanges();
+            closePopover();
+          },
+        },
+      ],
+    },
+  ];
+
+  return (
+    <EuiWrappingPopover
+      isOpen={isOpen}
+      closePopover={closePopover}
+      button={anchorElement}
+      panelPaddingSize="none"
+      anchorPosition="downRight"
+      attachToAnchor
+      panelStyle={{ maxWidth: 100 }}
+      buffer={0}
+      repositionOnScroll
+    >
+      <EuiContextMenu initialPanelId={0} panels={panels} />
+    </EuiWrappingPopover>
+  );
+};
+
+export function showSaveMenu({
+  coreServices,
+  ...props
+}: SaveMenuProps & { coreServices: CoreStart }) {
+  if (isOpen) {
+    cleanup();
+    return;
+  }
+
+  const theme = coreServices.theme.getTheme();
+
+  isOpen = true;
+  document.body.appendChild(container);
+  ReactDOM.render(
+    <KibanaContextProvider services={coreServices}>
+      <EuiThemeProvider colorMode={theme.darkMode ? 'dark' : 'light'}>
+        <SaveMenu {...props} />
+      </EuiThemeProvider>
+    </KibanaContextProvider>,
+    container
+  );
+}

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

@@ -26,6 +26,7 @@ import { getDashboardCapabilities } from '../../utils/get_dashboard_capabilities
 import { topNavStrings } from '../_dashboard_app_strings';
 import { showAddMenu } from './add_menu/show_add_menu';
 import { ShowShareModal } from './share/show_share_modal';
+import { showSaveMenu } from './save_menu/show_save_menu';
 
 export const useDashboardMenuItems = ({
   isLabsShown,
@@ -54,6 +55,7 @@ export const useDashboardMenuItems = ({
       dashboardApi.viewMode$
     );
   const disableTopNav = isSaveInProgress || hasOverlays;
+  const isCreatingNewDashboard = viewMode === 'edit' && !lastSavedId;
 
   /**
    * Show the Dashboard app's share menu
@@ -158,24 +160,41 @@ export const useDashboardMenuItems = ({
         id: 'quick-save',
         iconType: 'save',
         emphasize: true,
-        isLoading: isSaveInProgress,
+        fill: true,
         testId: 'dashboardQuickSaveMenuItem',
-        disableButton: disableTopNav || !hasUnsavedChanges,
+        disableButton: disableTopNav || isResetting,
         run: () => quickSaveDashboard(),
+        splitButtonProps: {
+          run: (anchorElement: HTMLElement) => {
+            showSaveMenu({
+              dashboardApi,
+              anchorElement,
+              resetChanges,
+              isResetting,
+              isSaveInProgress,
+              dashboardInteractiveSave,
+              coreServices,
+            });
+          },
+          isMainButtonLoading: isSaveInProgress,
+          isMainButtonDisabled: !hasUnsavedChanges,
+          secondaryButtonAriaLabel: topNavStrings.saveMenu.label,
+          secondaryButtonIcon: 'arrowDown',
+          secondaryButtonFill: true,
+          isSecondaryButtonDisabled: isSaveInProgress,
+        },
       } as TopNavMenuData,
 
       interactiveSave: {
         disableButton: disableTopNav,
-        emphasize: !Boolean(lastSavedId),
+        emphasize: isCreatingNewDashboard,
         id: 'interactive-save',
         testId: 'dashboardInteractiveSaveMenuItem',
+        iconType: lastSavedId ? undefined : 'save',
         run: dashboardInteractiveSave,
-        label:
-          viewMode === 'view'
-            ? topNavStrings.viewModeInteractiveSave.label
-            : Boolean(lastSavedId)
-            ? topNavStrings.editModeInteractiveSave.label
-            : topNavStrings.quickSave.label,
+        label: isCreatingNewDashboard
+          ? topNavStrings.quickSave.label
+          : topNavStrings.viewModeInteractiveSave.label,
         description:
           viewMode === 'view'
             ? topNavStrings.viewModeInteractiveSave.description
@@ -251,6 +270,7 @@ export const useDashboardMenuItems = ({
     disableTopNav,
     isSaveInProgress,
     hasUnsavedChanges,
+    isCreatingNewDashboard,
     lastSavedId,
     dashboardInteractiveSave,
     viewMode,
@@ -355,11 +375,7 @@ export const useDashboardMenuItems = ({
     const editModeItems: TopNavMenuData[] = [];
 
     if (lastSavedId) {
-      editModeItems.push(menuItems.interactiveSave, menuItems.switchToViewMode);
-
-      if (showResetChange) {
-        editModeItems.push(resetChangesMenuItem);
-      }
+      editModeItems.push(menuItems.switchToViewMode);
 
       editModeItems.push(menuItems.add, menuItems.quickSave);
     } else {
@@ -389,8 +405,6 @@ export const useDashboardMenuItems = ({
     menuItems.backgroundSearch,
     hasExportIntegration,
     lastSavedId,
-    showResetChange,
-    resetChangesMenuItem,
   ]);
 
   return { viewModeTopNavConfig, editModeTopNavConfig };

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

@@ -129,6 +129,29 @@ export const resetConfirmStrings = {
     }),
 };
 
+export const unsavedChangesConfirmStrings = {
+  getUnsavedChangesTitle: () =>
+    i18n.translate('dashboard.resetChangesConfirmModal.resetChangesTitle', {
+      defaultMessage: 'Unsaved changes',
+    }),
+  getUnsavedChangesSubtitle: () =>
+    i18n.translate('dashboard.discardChangesConfirmModal.discardChangesDescription', {
+      defaultMessage: `You have unsaved changes. Would you like to save or discard your work?`,
+    }),
+  getCancelButtonLabel: () =>
+    i18n.translate('dashboard.unsavedChangesConfirmModal.cancelButtonLabel', {
+      defaultMessage: 'Cancel',
+    }),
+  getDiscardButtonText: () =>
+    i18n.translate('dashboard.unsavedChangesConfirmModal.discardButtonLabel', {
+      defaultMessage: 'Discard',
+    }),
+  getSaveButtonText: () =>
+    i18n.translate('dashboard.unsavedChangesConfirmModal.saveButtonLabel', {
+      defaultMessage: 'Save',
+    }),
+};
+
 export const createConfirmStrings = {
   getCreateTitle: () =>
     i18n.translate('dashboard.createConfirmModal.unsavedChangesTitle', {