From f06ec8345805709a00e64f7dacb765693d022030 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 11 Dec 2018 09:22:01 -0700
Subject: [PATCH] do not pass 'sortOrder' to EuiContextMenuItem in share
 context menu (#26890)

* do not pass 'sortOrder' to EuiContextMenuItem in share context menu

* add unit test for sortOrder

* avoid using lodash

* fix merge conflicts with internationization PR
---
 .../share_context_menu.test.js.snap           | 57 ++++++++++++++++++-
 .../components/share_context_menu.test.js     | 47 +++++++++++++++
 .../share/components/share_context_menu.tsx   | 18 +++---
 3 files changed, 111 insertions(+), 11 deletions(-)

diff --git a/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap b/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap
index d92769d3101f..df50f1d4a78b 100644
--- a/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap
+++ b/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap
@@ -1,5 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`shareContextMenuExtensions should sort ascending on sort order first and then ascending on name 1`] = `
+<EuiContextMenu
+  data-test-subj="shareContextMenu"
+  initialPanelId={4}
+  panels={
+    Array [
+      Object {
+        "content": <InjectIntl(UrlPanelContentUI)
+          getUnhashableStates={[Function]}
+          objectType="dashboard"
+        />,
+        "id": 1,
+        "title": "Permalink",
+      },
+      Object {
+        "content": <div>
+          panel content
+        </div>,
+        "id": 2,
+        "title": "AAA panel",
+      },
+      Object {
+        "content": <div>
+          panel content
+        </div>,
+        "id": 3,
+        "title": "ZZZ panel",
+      },
+      Object {
+        "id": 4,
+        "items": Array [
+          Object {
+            "data-test-subj": "sharePanel-Permalinks",
+            "icon": "link",
+            "name": "Permalinks",
+            "panel": 1,
+          },
+          Object {
+            "data-test-subj": "sharePanel-ZZZpanel",
+            "name": "ZZZ panel",
+            "panel": 3,
+          },
+          Object {
+            "data-test-subj": "sharePanel-AAApanel",
+            "name": "AAA panel",
+            "panel": 2,
+          },
+        ],
+        "title": "Share this dashboard",
+      },
+    ]
+  }
+/>
+`;
+
 exports[`should only render permalink panel when there are no other panels 1`] = `
 <EuiContextMenu
   data-test-subj="shareContextMenu"
@@ -50,14 +105,12 @@ 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",
diff --git a/src/ui/public/share/components/share_context_menu.test.js b/src/ui/public/share/components/share_context_menu.test.js
index 175c6bd9952f..5b583420f85e 100644
--- a/src/ui/public/share/components/share_context_menu.test.js
+++ b/src/ui/public/share/components/share_context_menu.test.js
@@ -43,3 +43,50 @@ test('should only render permalink panel when there are no other panels', () =>
   />);
   expect(component).toMatchSnapshot();
 });
+
+describe('shareContextMenuExtensions', () => {
+  const shareContextMenuExtensions = [
+    {
+      getShareActions: () => {
+        return [
+          {
+            panel: {
+              title: 'AAA panel',
+              content: (<div>panel content</div>),
+            },
+            shareMenuItem: {
+              name: 'AAA panel',
+              sortOrder: 5,
+            }
+          }
+        ];
+      }
+    },
+    {
+      getShareActions: () => {
+        return [
+          {
+            panel: {
+              title: 'ZZZ panel',
+              content: (<div>panel content</div>),
+            },
+            shareMenuItem: {
+              name: 'ZZZ panel',
+              sortOrder: 0,
+            }
+          }
+        ];
+      }
+    }
+  ];
+
+  test('should sort ascending on sort order first and then ascending on name', () => {
+    const component = shallowWithIntl(<ShareContextMenu.WrappedComponent
+      allowEmbed={false}
+      objectType="dashboard"
+      getUnhashableStates={() => {}}
+      shareContextMenuExtensions={shareContextMenuExtensions}
+    />);
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/ui/public/share/components/share_context_menu.tsx b/src/ui/public/share/components/share_context_menu.tsx
index b68d75b40bc5..e31cbad76725 100644
--- a/src/ui/public/share/components/share_context_menu.tsx
+++ b/src/ui/public/share/components/share_context_menu.tsx
@@ -155,25 +155,25 @@ class ShareContextMenuUI 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) => {
-            if (a.sortOrder > b.sortOrder) {
+            const aSortOrder = a.sortOrder || 0;
+            const bSortOrder = b.sortOrder || 0;
+            if (aSortOrder > bSortOrder) {
               return 1;
             }
-            if (a.sortOrder < b.sortOrder) {
+            if (aSortOrder < bSortOrder) {
               return -1;
             }
             if (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) > 0) {
               return 1;
             }
             return -1;
+          })
+          .map(menuItem => {
+            menuItem['data-test-subj'] = `sharePanel-${menuItem.name.replace(' ', '')}`;
+            delete menuItem.sortOrder;
+            return menuItem;
           }),
       };
       panels.push(topLevelMenuPanel);