Re-style and re-order top menu buttons

src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts

@@ -48,12 +48,12 @@ export function getTopNavConfig(
           ];
     case ViewMode.EDIT:
       return [
-        getCreateNewConfig(actions[TopNavIds.VISUALIZE]),
-        getSaveConfig(actions[TopNavIds.SAVE]),
-        getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE]),
-        getAddConfig(actions[TopNavIds.ADD_EXISTING]),
         getOptionsConfig(actions[TopNavIds.OPTIONS]),
         getShareConfig(actions[TopNavIds.SHARE]),
+        getAddConfig(actions[TopNavIds.ADD_EXISTING]),
+        getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE]),
+        getSaveConfig(actions[TopNavIds.SAVE]),
+        getCreateNewConfig(actions[TopNavIds.VISUALIZE]),
       ];
     default:
       return [];
@@ -79,7 +79,9 @@ function getFullScreenConfig(action: NavAction) {
  */
 function getEditConfig(action: NavAction) {
   return {
+    emphasize: true,
     id: 'edit',
+    iconType: 'pencil',
     label: i18n.translate('dashboard.topNave.editButtonAriaLabel', {
       defaultMessage: 'edit',
     }),
@@ -168,7 +170,7 @@ function getAddConfig(action: NavAction) {
 function getCreateNewConfig(action: NavAction) {
   return {
     emphasize: true,
-    iconType: 'plusInCircle',
+    iconType: 'plusInCircleFilled',
     id: 'addNew',
     label: i18n.translate('dashboard.topNave.addNewButtonAriaLabel', {
       defaultMessage: 'Create new',

src/plugins/navigation/public/top_nav_menu/_index.scss

@@ -1,3 +1,7 @@
+.kbnTopNavMenu {
+  margin-right: $euiSizeXS;
+}
+
 .kbnTopNavMenu > * > * {
   // TEMP fix to adjust spacing between EuiHeaderList__list items
   margin: 0 $euiSizeXS;

src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx

@@ -48,7 +48,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
   };
 
   const btn = props.emphasize ? (
-    <EuiButton size="s" fill {...commonButtonProps}>
+    <EuiButton size="s" {...commonButtonProps}>
       {upperFirst(props.label || props.id!)}
     </EuiButton>
   ) : (

src/plugins/visualize/public/application/utils/get_top_nav_config.tsx

@@ -175,54 +175,61 @@ export const getTopNavConfig = (
   };
 
   const topNavMenu: TopNavMenuData[] = [
-    ...(originatingApp && ((savedVis && savedVis.id) || embeddableId)
-      ? [
-          {
-            id: 'saveAndReturn',
-            label: i18n.translate('visualize.topNavMenu.saveAndReturnVisualizationButtonLabel', {
-              defaultMessage: 'Save and return',
-            }),
-            emphasize: true,
-            iconType: 'check',
-            description: i18n.translate(
-              'visualize.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
-              {
-                defaultMessage: 'Finish editing visualization and return to the last app',
-              }
-            ),
-            testId: 'visualizesaveAndReturnButton',
-            disableButton: hasUnappliedChanges,
-            tooltip() {
-              if (hasUnappliedChanges) {
-                return i18n.translate(
-                  'visualize.topNavMenu.saveAndReturnVisualizationDisabledButtonTooltip',
-                  {
-                    defaultMessage: 'Apply or Discard your changes before finishing',
-                  }
-                );
-              }
-            },
-            run: async () => {
-              const saveOptions = {
-                confirmOverwrite: false,
-                returnToOrigin: true,
-              };
-              if (
-                originatingApp === 'dashboards' &&
-                dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
-                !savedVis
-              ) {
-                return createVisReference();
-              }
-              return doSave(saveOptions);
+    {
+      id: 'inspector',
+      label: i18n.translate('visualize.topNavMenu.openInspectorButtonLabel', {
+        defaultMessage: 'inspect',
+      }),
+      description: i18n.translate('visualize.topNavMenu.openInspectorButtonAriaLabel', {
+        defaultMessage: 'Open Inspector for visualization',
+      }),
+      testId: 'openInspectorButton',
+      disableButton() {
+        return !embeddableHandler.hasInspector || !embeddableHandler.hasInspector();
+      },
+      run: openInspector,
+      tooltip() {
+        if (!embeddableHandler.hasInspector || !embeddableHandler.hasInspector()) {
+          return i18n.translate('visualize.topNavMenu.openInspectorDisabledButtonTooltip', {
+            defaultMessage: `This visualization doesn't support any inspectors.`,
+          });
+        }
+      },
+    },
+    {
+      id: 'share',
+      label: i18n.translate('visualize.topNavMenu.shareVisualizationButtonLabel', {
+        defaultMessage: 'share',
+      }),
+      description: i18n.translate('visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
+        defaultMessage: 'Share Visualization',
+      }),
+      testId: 'shareTopNavButton',
+      run: (anchorElement) => {
+        if (share && !embeddableId) {
+          // TODO: support sharing in by-value mode
+          share.toggleShareContextMenu({
+            anchorElement,
+            allowEmbed: true,
+            allowShortUrl: visualizeCapabilities.createShortUrl,
+            shareableUrl: unhashUrl(window.location.href),
+            objectId: savedVis?.id,
+            objectType: 'visualization',
+            sharingData: {
+              title: savedVis?.title,
             },
-          },
-        ]
-      : []),
+            isDirty: hasUnappliedChanges || hasUnsavedChanges,
+          });
+        }
+      },
+      // disable the Share button if no action specified
+      disableButton: !share || !!embeddableId,
+    },
     ...(visualizeCapabilities.save && !embeddableId
       ? [
           {
             id: 'save',
+            iconType: savedVis?.id && originatingApp ? undefined : 'save',
             label:
               savedVis?.id && originatingApp
                 ? i18n.translate('visualize.topNavMenu.saveVisualizationAsButtonLabel', {
@@ -303,56 +310,50 @@ export const getTopNavConfig = (
           },
         ]
       : []),
-    {
-      id: 'share',
-      label: i18n.translate('visualize.topNavMenu.shareVisualizationButtonLabel', {
-        defaultMessage: 'share',
-      }),
-      description: i18n.translate('visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
-        defaultMessage: 'Share Visualization',
-      }),
-      testId: 'shareTopNavButton',
-      run: (anchorElement) => {
-        if (share && !embeddableId) {
-          // TODO: support sharing in by-value mode
-          share.toggleShareContextMenu({
-            anchorElement,
-            allowEmbed: true,
-            allowShortUrl: visualizeCapabilities.createShortUrl,
-            shareableUrl: unhashUrl(window.location.href),
-            objectId: savedVis?.id,
-            objectType: 'visualization',
-            sharingData: {
-              title: savedVis?.title,
+    ...(originatingApp && ((savedVis && savedVis.id) || embeddableId)
+      ? [
+          {
+            id: 'saveAndReturn',
+            label: i18n.translate('visualize.topNavMenu.saveAndReturnVisualizationButtonLabel', {
+              defaultMessage: 'Save and return',
+            }),
+            emphasize: true,
+            iconType: 'checkInCircleFilled',
+            description: i18n.translate(
+              'visualize.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
+              {
+                defaultMessage: 'Finish editing visualization and return to the last app',
+              }
+            ),
+            testId: 'visualizesaveAndReturnButton',
+            disableButton: hasUnappliedChanges,
+            tooltip() {
+              if (hasUnappliedChanges) {
+                return i18n.translate(
+                  'visualize.topNavMenu.saveAndReturnVisualizationDisabledButtonTooltip',
+                  {
+                    defaultMessage: 'Apply or Discard your changes before finishing',
+                  }
+                );
+              }
             },
-            isDirty: hasUnappliedChanges || hasUnsavedChanges,
-          });
-        }
-      },
-      // disable the Share button if no action specified
-      disableButton: !share || !!embeddableId,
-    },
-    {
-      id: 'inspector',
-      label: i18n.translate('visualize.topNavMenu.openInspectorButtonLabel', {
-        defaultMessage: 'inspect',
-      }),
-      description: i18n.translate('visualize.topNavMenu.openInspectorButtonAriaLabel', {
-        defaultMessage: 'Open Inspector for visualization',
-      }),
-      testId: 'openInspectorButton',
-      disableButton() {
-        return !embeddableHandler.hasInspector || !embeddableHandler.hasInspector();
-      },
-      run: openInspector,
-      tooltip() {
-        if (!embeddableHandler.hasInspector || !embeddableHandler.hasInspector()) {
-          return i18n.translate('visualize.topNavMenu.openInspectorDisabledButtonTooltip', {
-            defaultMessage: `This visualization doesn't support any inspectors.`,
-          });
-        }
-      },
-    },
+            run: async () => {
+              const saveOptions = {
+                confirmOverwrite: false,
+                returnToOrigin: true,
+              };
+              if (
+                originatingApp === 'dashboards' &&
+                dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
+                !savedVis
+              ) {
+                return createVisReference();
+              }
+              return doSave(saveOptions);
+            },
+          },
+        ]
+      : []),
   ];
 
   return topNavMenu;

x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx

@@ -30,24 +30,22 @@ export function getLensTopNavConfig(options: {
         defaultMessage: 'Save',
       });
 
-  if (showSaveAndReturn) {
+  if (showCancel) {
     topNavMenu.push({
-      label: i18n.translate('xpack.lens.app.saveAndReturn', {
-        defaultMessage: 'Save and return',
+      label: i18n.translate('xpack.lens.app.cancel', {
+        defaultMessage: 'cancel',
       }),
-      emphasize: true,
-      iconType: 'check',
-      run: actions.saveAndReturn,
-      testId: 'lnsApp_saveAndReturnButton',
-      disableButton: !savingPermitted,
-      description: i18n.translate('xpack.lens.app.saveAndReturnButtonAriaLabel', {
-        defaultMessage: 'Save the current lens visualization and return to the last app',
+      run: actions.cancel,
+      testId: 'lnsApp_cancelButton',
+      description: i18n.translate('xpack.lens.app.cancelButtonAriaLabel', {
+        defaultMessage: 'Return to the last app without saving changes',
       }),
     });
   }
 
   topNavMenu.push({
     label: saveButtonLabel,
+    iconType: !showSaveAndReturn ? 'save' : undefined,
     emphasize: !showSaveAndReturn,
     run: actions.showSaveModal,
     testId: 'lnsApp_saveButton',
@@ -57,17 +55,21 @@ export function getLensTopNavConfig(options: {
     disableButton: !savingPermitted,
   });
 
-  if (showCancel) {
+  if (showSaveAndReturn) {
     topNavMenu.push({
-      label: i18n.translate('xpack.lens.app.cancel', {
-        defaultMessage: 'cancel',
+      label: i18n.translate('xpack.lens.app.saveAndReturn', {
+        defaultMessage: 'Save and return',
       }),
-      run: actions.cancel,
-      testId: 'lnsApp_cancelButton',
-      description: i18n.translate('xpack.lens.app.cancelButtonAriaLabel', {
-        defaultMessage: 'Return to the last app without saving changes',
+      emphasize: true,
+      iconType: 'checkInCircleFilled',
+      run: actions.saveAndReturn,
+      testId: 'lnsApp_saveAndReturnButton',
+      disableButton: !savingPermitted,
+      description: i18n.translate('xpack.lens.app.saveAndReturnButtonAriaLabel', {
+        defaultMessage: 'Save the current lens visualization and return to the last app',
       }),
     });
   }
+
   return topNavMenu;
 }