Simplify workflow for dashboard copy creation in both view and edit interaction modes

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

@@ -189,11 +189,11 @@ export const topNavStrings = {
       defaultMessage: 'Quick save your dashboard without any prompts',
     }),
   },
-  saveAs: {
-    label: i18n.translate('dashboard.topNave.saveAsButtonAriaLabel', {
+  editModeInteractiveSave: {
+    label: i18n.translate('dashboard.topNave.editModeInteractiveSaveButtonAriaLabel', {
       defaultMessage: 'save as',
     }),
-    description: i18n.translate('dashboard.topNave.saveAsConfigDescription', {
+    description: i18n.translate('dashboard.topNave.editModeInteractiveSaveConfigDescription', {
       defaultMessage: 'Save as a new dashboard',
     }),
   },
@@ -229,11 +229,11 @@ export const topNavStrings = {
       defaultMessage: 'Open dashboard settings',
     }),
   },
-  clone: {
-    label: i18n.translate('dashboard.topNave.cloneButtonAriaLabel', {
-      defaultMessage: 'clone',
+  viewModeInteractiveSave: {
+    label: i18n.translate('dashboard.topNave.viewModeInteractiveSaveButtonAriaLabel', {
+      defaultMessage: 'duplicate',
     }),
-    description: i18n.translate('dashboard.topNave.cloneConfigDescription', {
+    description: i18n.translate('dashboard.topNave.viewModeInteractiveSaveConfigDescription', {
       defaultMessage: 'Create a copy of your dashboard',
     }),
   },

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

@@ -104,23 +104,11 @@ export const useDashboardMenuItems = ({
   }, [dashboard]);
 
   /**
-   * Show the dashboard's save modal
+   * initiate interactive dashboard copy action
    */
-  const saveDashboardAs = useCallback(() => {
-    dashboard.runSaveAs().then((result) => maybeRedirect(result));
-  }, [maybeRedirect, dashboard]);
-
-  /**
-   * Clone the dashboard
-   */
-  const clone = useCallback(() => {
-    setIsSaveInProgress(true);
-
-    dashboard.runClone().then((result) => {
-      setIsSaveInProgress(false);
-      maybeRedirect(result);
-    });
-  }, [maybeRedirect, dashboard]);
+  const dashboardInteractiveSave = useCallback(() => {
+    dashboard.runInteractiveSave(viewMode).then((result) => maybeRedirect(result));
+  }, [maybeRedirect, dashboard, viewMode]);
 
   /**
    * Show the dashboard's "Confirm reset changes" modal. If confirmed:
@@ -197,15 +185,22 @@ export const useDashboardMenuItems = ({
         run: () => quickSaveDashboard(),
       } as TopNavMenuData,
 
-      saveAs: {
-        description: topNavStrings.saveAs.description,
+      interactiveSave: {
         disableButton: disableTopNav,
-        id: 'save',
         emphasize: !Boolean(lastSavedId),
-        testId: 'dashboardSaveMenuItem',
-        iconType: Boolean(lastSavedId) ? undefined : 'save',
-        label: Boolean(lastSavedId) ? topNavStrings.saveAs.label : topNavStrings.quickSave.label,
-        run: () => saveDashboardAs(),
+        id: 'interactive-save',
+        testId: 'dashboardInteractiveSaveMenuItem',
+        run: dashboardInteractiveSave,
+        label:
+          viewMode === ViewMode.VIEW
+            ? topNavStrings.viewModeInteractiveSave.label
+            : Boolean(lastSavedId)
+            ? topNavStrings.editModeInteractiveSave.label
+            : topNavStrings.quickSave.label,
+        description:
+          viewMode === ViewMode.VIEW
+            ? topNavStrings.viewModeInteractiveSave.description
+            : topNavStrings.editModeInteractiveSave.description,
       } as TopNavMenuData,
 
       switchToViewMode: {
@@ -230,31 +225,23 @@ export const useDashboardMenuItems = ({
         testId: 'dashboardSettingsButton',
         disableButton: disableTopNav,
         run: () => dashboard.showSettings(),
-      } as TopNavMenuData,
-
-      clone: {
-        ...topNavStrings.clone,
-        id: 'clone',
-        testId: 'dashboardClone',
-        disableButton: disableTopNav,
-        run: () => clone(),
-      } as TopNavMenuData,
+      },
     };
   }, [
-    quickSaveDashboard,
+    disableTopNav,
     isSaveInProgress,
     hasRunMigrations,
     hasUnsavedChanges,
-    dashboardBackup,
-    saveDashboardAs,
-    setIsLabsShown,
-    disableTopNav,
-    resetChanges,
-    isLabsShown,
     lastSavedId,
+    dashboardInteractiveSave,
+    viewMode,
     showShare,
     dashboard,
-    clone,
+    setIsLabsShown,
+    isLabsShown,
+    dashboardBackup,
+    quickSaveDashboard,
+    resetChanges,
   ]);
 
   const resetChangesMenuItem = useMemo(() => {
@@ -276,15 +263,15 @@ export const useDashboardMenuItems = ({
   const viewModeTopNavConfig = useMemo(() => {
     const labsMenuItem = isLabsEnabled ? [menuItems.labs] : [];
     const shareMenuItem = share ? [menuItems.share] : [];
-    const cloneMenuItem = showWriteControls ? [menuItems.clone] : [];
+    const duplicateMenuItem = showWriteControls ? [menuItems.interactiveSave] : [];
     const editMenuItem = showWriteControls && !managed ? [menuItems.edit] : [];
     const mayberesetChangesMenuItem = showResetChange ? [resetChangesMenuItem] : [];
 
     return [
       ...labsMenuItem,
       menuItems.fullScreen,
       ...shareMenuItem,
-      ...cloneMenuItem,
+      ...duplicateMenuItem,
       ...mayberesetChangesMenuItem,
       ...editMenuItem,
     ];
@@ -304,30 +291,18 @@ export const useDashboardMenuItems = ({
     const editModeItems: TopNavMenuData[] = [];
 
     if (lastSavedId) {
-      editModeItems.push(menuItems.saveAs, menuItems.switchToViewMode);
+      editModeItems.push(menuItems.interactiveSave, menuItems.switchToViewMode);
 
       if (showResetChange) {
         editModeItems.push(resetChangesMenuItem);
       }
 
       editModeItems.push(menuItems.quickSave);
     } else {
-      editModeItems.push(menuItems.switchToViewMode, menuItems.saveAs);
+      editModeItems.push(menuItems.switchToViewMode, menuItems.interactiveSave);
     }
     return [...labsMenuItem, menuItems.settings, ...shareMenuItem, ...editModeItems];
-  }, [
-    isLabsEnabled,
-    menuItems.labs,
-    menuItems.share,
-    menuItems.settings,
-    menuItems.saveAs,
-    menuItems.switchToViewMode,
-    menuItems.quickSave,
-    share,
-    lastSavedId,
-    showResetChange,
-    resetChangesMenuItem,
-  ]);
+  }, [isLabsEnabled, menuItems, share, lastSavedId, showResetChange, resetChangesMenuItem]);
 
   return { viewModeTopNavConfig, editModeTopNavConfig };
 };

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

@@ -323,7 +323,11 @@ export const DashboardSettings = ({ onClose }: DashboardSettingsProps) => {
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty data-test-subj="cancelCustomizeDashboardButton" onClick={onClose}>
+            <EuiButtonEmpty
+              flush="left"
+              data-test-subj="cancelCustomizeDashboardButton"
+              onClick={onClose}
+            >
               <FormattedMessage
                 id="dashboard.embeddableApi.showSettings.flyout.cancelButtonTitle"
                 defaultMessage="Cancel"

src/plugins/dashboard/public/dashboard_container/embeddable/api/index.ts

@@ -9,4 +9,4 @@
 export { showSettings } from './show_settings';
 export { addFromLibrary } from './add_panel_from_library';
 export { addOrUpdateEmbeddable } from './panel_management';
-export { runSaveAs, runQuickSave, runClone } from './run_save_functions';
+export { runQuickSave, runInteractiveSave } from './run_save_functions';

src/plugins/dashboard/public/dashboard_container/embeddable/api/lib/extract_title_and_count.test.ts

@@ -19,14 +19,14 @@ describe('extractTitleAndCount', () => {
     ]);
   });
 
-  it('defaults to the count to 1 and returns the original title when the provided title does not contain a valid count', () => {
-    expect(extractTitleAndCount('Test dashboard')).toEqual(['Test dashboard', 1]);
-    expect(extractTitleAndCount('Test dashboard 2')).toEqual(['Test dashboard 2', 1]);
-    expect(extractTitleAndCount('Test dashboard (-1)')).toEqual(['Test dashboard (-1)', 1]);
-    expect(extractTitleAndCount('Test dashboard (0)')).toEqual(['Test dashboard (0)', 1]);
-    expect(extractTitleAndCount('Test dashboard (3.0)')).toEqual(['Test dashboard (3.0)', 1]);
-    expect(extractTitleAndCount('Test dashboard (8.4)')).toEqual(['Test dashboard (8.4)', 1]);
-    expect(extractTitleAndCount('Test dashboard (foo3.0)')).toEqual(['Test dashboard (foo3.0)', 1]);
-    expect(extractTitleAndCount('Test dashboard (bar7)')).toEqual(['Test dashboard (bar7)', 1]);
+  it('defaults to the count to 0 and returns the original title when the provided title does not contain a valid count', () => {
+    expect(extractTitleAndCount('Test dashboard')).toEqual(['Test dashboard', 0]);
+    expect(extractTitleAndCount('Test dashboard 2')).toEqual(['Test dashboard 2', 0]);
+    expect(extractTitleAndCount('Test dashboard (-1)')).toEqual(['Test dashboard (-1)', 0]);
+    expect(extractTitleAndCount('Test dashboard (0)')).toEqual(['Test dashboard (0)', 0]);
+    expect(extractTitleAndCount('Test dashboard (3.0)')).toEqual(['Test dashboard (3.0)', 0]);
+    expect(extractTitleAndCount('Test dashboard (8.4)')).toEqual(['Test dashboard (8.4)', 0]);
+    expect(extractTitleAndCount('Test dashboard (foo3.0)')).toEqual(['Test dashboard (foo3.0)', 0]);
+    expect(extractTitleAndCount('Test dashboard (bar7)')).toEqual(['Test dashboard (bar7)', 0]);
   });
 });

src/plugins/dashboard/public/dashboard_container/embeddable/api/lib/extract_title_and_count.ts

@@ -15,5 +15,5 @@ export const extractTitleAndCount = (title: string): [string, number] => {
       return [baseTitle, Number(count)];
     }
   }
-  return [title, 1];
+  return [title, 0];
 };