From 595518ec12518ce740d1556e5f843ae1213cccbc Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Fri, 17 Mar 2023 11:09:23 +0100
Subject: [PATCH] Plugin Extensions: Move PanelMenu links into extensions
 submenu (#64599)

* feat(pluginextensions): move panel menu links into an extensions submenu

* refactor(pluginextensions): move extensions submenu above more... submenu

* test(panelmenu): fix failing tests after moving extensions out of more

* fix: fix rebase issues

---------

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
---
 .../dashboard/utils/getPanelMenu.test.ts      |  8 +--
 .../features/dashboard/utils/getPanelMenu.ts  | 57 +++++++++++--------
 2 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/public/app/features/dashboard/utils/getPanelMenu.test.ts b/public/app/features/dashboard/utils/getPanelMenu.test.ts
index 94fa6214058..953558eb624 100644
--- a/public/app/features/dashboard/utils/getPanelMenu.test.ts
+++ b/public/app/features/dashboard/utils/getPanelMenu.test.ts
@@ -126,7 +126,7 @@ describe('getPanelMenu()', () => {
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
       const menuItems = getPanelMenu(dashboard, panel);
-      const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
+      const moreSubMenu = menuItems.find((i) => i.text === 'Extensions')?.subMenu;
 
       expect(moreSubMenu).toEqual(
         expect.arrayContaining([
@@ -154,7 +154,7 @@ describe('getPanelMenu()', () => {
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
       const menuItems = getPanelMenu(dashboard, panel);
-      const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
+      const moreSubMenu = menuItems.find((i) => i.text === 'Extensions')?.subMenu;
 
       expect(moreSubMenu).toEqual(
         expect.arrayContaining([
@@ -193,7 +193,7 @@ describe('getPanelMenu()', () => {
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
       const menuItems = getPanelMenu(dashboard, panel);
-      const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
+      const moreSubMenu = menuItems.find((i) => i.text === 'Extensions')?.subMenu;
 
       expect(moreSubMenu).toEqual(
         expect.arrayContaining([
@@ -224,7 +224,7 @@ describe('getPanelMenu()', () => {
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
       const menuItems = getPanelMenu(dashboard, panel);
-      const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
+      const moreSubMenu = menuItems.find((i) => i.text === 'Extensions')?.subMenu;
 
       expect(moreSubMenu).toEqual(
         expect.not.arrayContaining([
diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts
index 4c1b9473fa8..4de4e890095 100644
--- a/public/app/features/dashboard/utils/getPanelMenu.ts
+++ b/public/app/features/dashboard/utils/getPanelMenu.ts
@@ -268,6 +268,40 @@ export function getPanelMenu(
     });
   }
 
+  const { extensions } = getPluginExtensions({
+    placement: PluginExtensionPlacements.DashboardPanelMenu,
+    context: createExtensionContext(panel, dashboard),
+  });
+
+  if (extensions.length > 0) {
+    const extensionsMenu: PanelMenuItem[] = [];
+
+    for (const extension of extensions) {
+      if (isPluginExtensionLink(extension)) {
+        extensionsMenu.push({
+          text: truncateTitle(extension.title, 25),
+          href: extension.path,
+        });
+        continue;
+      }
+
+      if (isPluginExtensionCommand(extension)) {
+        extensionsMenu.push({
+          text: truncateTitle(extension.title, 25),
+          onClick: extension.callHandlerWithContext,
+        });
+        continue;
+      }
+    }
+
+    menu.push({
+      text: 'Extensions',
+      iconClassName: 'plug',
+      type: 'submenu',
+      subMenu: extensionsMenu,
+    });
+  }
+
   if (dashboard.canEditPanel(panel) && !panel.isEditing && !panel.isViewing) {
     menu.push({ type: 'divider', text: '' });
 
@@ -279,29 +313,6 @@ export function getPanelMenu(
     });
   }
 
-  const { extensions } = getPluginExtensions({
-    placement: PluginExtensionPlacements.DashboardPanelMenu,
-    context: createExtensionContext(panel, dashboard),
-  });
-
-  for (const extension of extensions) {
-    if (isPluginExtensionLink(extension)) {
-      subMenu.push({
-        text: truncateTitle(extension.title, 25),
-        href: extension.path,
-      });
-      continue;
-    }
-
-    if (isPluginExtensionCommand(extension)) {
-      subMenu.push({
-        text: truncateTitle(extension.title, 25),
-        onClick: extension.callHandlerWithContext,
-      });
-      continue;
-    }
-  }
-
   return menu;
 }