Added sort order to share menu options. (#25058) (#25096)

* Added sort order to share menu options.

Sorts ascending on sort order first then ascending on name. Any menu item without a sort order gets set to zero.

* Moved new sortOrder property from node_modules

* Had to rerun the snapshot for the share menu with the sortOrder in it.

src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap

@@ -50,12 +50,14 @@ exports[`should render context menu panel when there are more than one panel 1`]
             "icon": "console",
             "name": "Embed code",
             "panel": 2,
+            "sortOrder": 0,
           },
           Object {
             "data-test-subj": "sharePanel-Permalinks",
             "icon": "link",
             "name": "Permalinks",
             "panel": 1,
+            "sortOrder": 0,
           },
         ],
         "title": "Share this dashboard",

src/ui/public/share/components/share_context_menu.tsx

@@ -20,10 +20,10 @@
 import React, { Component } from 'react';
 import './share_panel_content.less';
 
-import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
+import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
 import { EuiContextMenu } from '@elastic/eui';
 
-import { ShareAction, ShareActionProvider } from 'ui/share/share_action';
+import { ShareAction, ShareActionProvider, ShareContextMenuPanelItem } from 'ui/share/share_action';
 import { UrlPanelContent } from './url_panel_content';
 
 interface Props {
@@ -51,7 +51,7 @@ export class ShareContextMenu extends Component<Props> {
 
   private getPanels = () => {
     const panels: EuiContextMenuPanelDescriptor[] = [];
-    const menuItems: EuiContextMenuPanelItemDescriptor[] = [];
+    const menuItems: ShareContextMenuPanelItem[] = [];
 
     const permalinkPanel = {
       id: panels.length + 1,
@@ -68,6 +68,7 @@ export class ShareContextMenu extends Component<Props> {
       name: 'Permalinks',
       icon: 'link',
       panel: permalinkPanel.id,
+      sortOrder: 0,
     });
     panels.push(permalinkPanel);
 
@@ -89,6 +90,7 @@ export class ShareContextMenu extends Component<Props> {
         name: 'Embed code',
         icon: 'console',
         panel: embedPanel.id,
+        sortOrder: 0,
       });
     }
 
@@ -132,10 +134,23 @@ export class ShareContextMenu extends Component<Props> {
         items: menuItems
           .map(menuItem => {
             menuItem['data-test-subj'] = `sharePanel-${menuItem.name.replace(' ', '')}`;
+            if (!menuItem.sortOrder) {
+              menuItem.sortOrder = 0;
+            }
             return menuItem;
           })
+          // Sorts ascending on sort order first and then ascending on name
           .sort((a, b) => {
-            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+            if (a.sortOrder > b.sortOrder) {
+              return 1;
+            }
+            if (a.sortOrder < b.sortOrder) {
+              return -1;
+            }
+            if (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) > 0) {
+              return 1;
+            }
+            return -1;
           }),
       };
       panels.push(topLevelMenuPanel);

src/ui/public/share/share_action.ts

@@ -47,8 +47,12 @@ export interface ShareActionProps {
   onClose: () => void;
 }
 
+export interface ShareContextMenuPanelItem extends EuiContextMenuPanelItemDescriptor {
+  sortOrder: number;
+}
+
 export interface ShareAction {
-  shareMenuItem: EuiContextMenuPanelItemDescriptor;
+  shareMenuItem: ShareContextMenuPanelItem;
   panel: EuiContextMenuPanelDescriptor;
 }
 

x-pack/plugins/reporting/public/share_context_menu/register_reporting.tsx

@@ -82,6 +82,7 @@ function reportingProvider(Private: any, dashboardConfig: any) {
             ? true
             : false,
           ['data-test-subj']: 'pdfReportMenuItem',
+          sortOrder: 10,
         },
         panel: {
           title: panelTitle,
@@ -109,6 +110,7 @@ function reportingProvider(Private: any, dashboardConfig: any) {
           toolTipContent: xpackInfo.get('features.reporting.png.message'),
           disabled: !xpackInfo.get('features.reporting.png.enableLinks', false) ? true : false,
           ['data-test-subj']: 'pngReportMenuItem',
+          sortOrder: 10,
         },
         panel: {
           title: panelTitle,