Navigation: move connections + integrations to be a top level item (#58902)

* move connections + integrations to be a top level item

* add a test to check we can move apps to the root

* split out movePlugin logic into a separate function

* fix linting

* rename movePlugin -> addPluginToSection

pkg/services/navtree/models.go

@@ -36,6 +36,7 @@ const (
 )
 
 const (
+	NavIDRoot               = "root"
 	NavIDDashboards         = "dashboards"
 	NavIDDashboardsBrowse   = "dashboards/browse"
 	NavIDCfg                = "cfg" // NavIDCfg is the id for org configuration navigation node

pkg/services/navtree/navtreeimpl/applinks.go

@@ -170,6 +170,12 @@ func (s *ServiceImpl) processAppPlugin(plugin plugins.PluginDTO, c *models.ReqCo
 	}
 	appLink.Children = childrenWithoutDefault
 
+	s.addPluginToSection(c, treeRoot, plugin, appLink)
+
+	return nil
+}
+
+func (s *ServiceImpl) addPluginToSection(c *models.ReqContext, treeRoot *navtree.NavTreeRoot, plugin plugins.PluginDTO, appLink *navtree.NavLink) {
 	// Handle moving apps into specific navtree sections
 	alertingNode := treeRoot.FindById(navtree.NavIDAlerting)
 	sectionID := navtree.NavIDApps
@@ -183,7 +189,9 @@ func (s *ServiceImpl) processAppPlugin(plugin plugins.PluginDTO, c *models.ReqCo
 		}
 	}
 
-	if navNode := treeRoot.FindById(sectionID); navNode != nil {
+	if sectionID == navtree.NavIDRoot {
+		treeRoot.AddSection(appLink)
+	} else if navNode := treeRoot.FindById(sectionID); navNode != nil {
 		navNode.Children = append(navNode.Children, appLink)
 	} else {
 		switch sectionID {
@@ -227,8 +235,6 @@ func (s *ServiceImpl) processAppPlugin(plugin plugins.PluginDTO, c *models.ReqCo
 			s.log.Error("Plugin app nav id not found", "pluginId", plugin.ID, "navId", sectionID)
 		}
 	}
-
-	return nil
 }
 
 func (s *ServiceImpl) hasAccessToInclude(c *models.ReqContext, pluginID string) func(include *plugins.Includes) bool {
@@ -256,6 +262,7 @@ func (s *ServiceImpl) readNavigationSettings() {
 		"grafana-incident-app":             {SectionID: navtree.NavIDAlertsAndIncidents, SortWeight: 2, Text: "Incident"},
 		"grafana-ml-app":                   {SectionID: navtree.NavIDAlertsAndIncidents, SortWeight: 3, Text: "Machine Learning"},
 		"grafana-cloud-link-app":           {SectionID: navtree.NavIDCfg},
+		"grafana-easystart-app":            {SectionID: navtree.NavIDRoot, SortWeight: navtree.WeightSavedItems + 1, Text: "Connections"},
 	}
 
 	s.navigationAppPathConfig = map[string]NavigationAppConfig{

pkg/services/navtree/navtreeimpl/applinks_test.go

@@ -147,6 +147,30 @@ func TestAddAppLinks(t *testing.T) {
 		require.Equal(t, "Page2", app1Node.Children[0].Text)
 	})
 
+	// This can be done by using `[navigation.app_sections]` in the INI config
+	t.Run("Should move apps that have root nav id configured to the root", func(t *testing.T) {
+		service.features = featuremgmt.WithFeatures(featuremgmt.FlagTopnav)
+		service.navigationAppConfig = map[string]NavigationAppConfig{
+			"test-app1": {SectionID: navtree.NavIDRoot},
+		}
+
+		treeRoot := navtree.NavTreeRoot{}
+
+		err := service.addAppLinks(&treeRoot, reqCtx)
+		require.NoError(t, err)
+
+		// Check if the plugin gets moved to the root
+		require.Len(t, treeRoot.Children, 2)
+		require.Equal(t, "plugin-page-test-app1", treeRoot.Children[0].Id)
+
+		// Check if it is not under the "Apps" section anymore
+		appsNode := treeRoot.FindById(navtree.NavIDApps)
+		require.NotNil(t, appsNode)
+		require.Len(t, appsNode.Children, 2)
+		require.Equal(t, "plugin-page-test-app2", appsNode.Children[0].Id)
+		require.Equal(t, "plugin-page-test-app3", appsNode.Children[1].Id)
+	})
+
 	// This can be done by using `[navigation.app_sections]` in the INI config
 	t.Run("Should move apps that have specific nav id configured to correct section", func(t *testing.T) {
 		service.features = featuremgmt.WithFeatures(featuremgmt.FlagTopnav)

public/app/core/components/MegaMenu/MegaMenu.tsx

@@ -25,17 +25,14 @@ export const MegaMenu = React.memo<Props>(({ onClose, searchBarHidden }) => {
   const navTree = cloneDeep(navBarTree);
 
   const coreItems = navTree
-    .filter((item) => item.section === NavSection.Core)
-    .map((item) => enrichWithInteractionTracking(item, true));
-  const pluginItems = navTree
-    .filter((item) => item.section === NavSection.Plugin)
+    .filter((item) => item.section === NavSection.Core || item.section === NavSection.Plugin)
     .map((item) => enrichWithInteractionTracking(item, true));
   const configItems = enrichConfigItems(
     navTree.filter((item) => item.section === NavSection.Config && item && item.id !== 'help' && item.id !== 'profile'),
     location
   ).map((item) => enrichWithInteractionTracking(item, true));
 
-  const navItems = [...coreItems, ...pluginItems, ...configItems];
+  const navItems = [...coreItems, ...configItems];
 
   const activeItem = getActiveItem(navItems, location.pathname);