Home: add setup guide tab under home tab (#92947)

* feat: add setup guide in home tab

* chore: add feature toggle for setup guide

* chore: add feature toggle for sub menu

* chore: run pretier

* chore: run i18n

* chore: run generated files again

* chore: update description

* chore: update comment to trigger test flow

* chore: trigger test

* chore: fix styling

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -201,6 +201,7 @@ Experimental features might be changed or removed without prior notice.
 | `exploreLogsShardSplitting`                 | Used in Explore Logs to split queries into multiple queries based on the number of shards                                                                                                                                                                                         |
 | `exploreLogsAggregatedMetrics`              | Used in Explore Logs to query by aggregated metrics                                                                                                                                                                                                                               |
 | `exploreLogsLimitedTimeRange`               | Used in Explore Logs to limit the time range                                                                                                                                                                                                                                      |
+| `homeSetupGuide`                            | Used in Home for users who want to return to the onboarding flow or quickly find popular config pages                                                                                                                                                                             |
 | `appSidecar`                                | Enable the app sidecar feature that allows rendering 2 apps at the same time                                                                                                                                                                                                      |
 
 ## Development feature toggles

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -209,6 +209,7 @@ export interface FeatureToggles {
   exploreLogsShardSplitting?: boolean;
   exploreLogsAggregatedMetrics?: boolean;
   exploreLogsLimitedTimeRange?: boolean;
+  homeSetupGuide?: boolean;
   appPlatformAccessTokens?: boolean;
   appSidecar?: boolean;
   groupAttributeSync?: boolean;

pkg/services/featuremgmt/codeowners.go

@@ -28,4 +28,5 @@ const (
 	enterpriseDatasourcesSquad                  codeowner = "@grafana/enterprise-datasources"
 	grafanaSharingSquad                         codeowner = "@grafana/sharing-squad"
 	grafanaDatabasesFrontend                    codeowner = "@grafana/databases-frontend"
+	growthAndOnboarding                         codeowner = "@grafana/growth-and-onboarding"
 )

pkg/services/featuremgmt/registry.go

@@ -1438,6 +1438,13 @@ var (
 			FrontendOnly: true,
 			Owner:        grafanaObservabilityLogsSquad,
 		},
+		{
+			Name:         "homeSetupGuide",
+			Description:  "Used in Home for users who want to return to the onboarding flow or quickly find popular config pages",
+			Stage:        FeatureStageExperimental,
+			FrontendOnly: true,
+			Owner:        growthAndOnboarding,
+		},
 		{
 			Name:              "appPlatformAccessTokens",
 			Description:       "Enables the use of access tokens for the App Platform",

pkg/services/featuremgmt/toggles_gen.csv

@@ -190,6 +190,7 @@ singleTopNav,experimental,@grafana/grafana-frontend-platform,false,false,true
 exploreLogsShardSplitting,experimental,@grafana/observability-logs,false,false,true
 exploreLogsAggregatedMetrics,experimental,@grafana/observability-logs,false,false,true
 exploreLogsLimitedTimeRange,experimental,@grafana/observability-logs,false,false,true
+homeSetupGuide,experimental,@grafana/growth-and-onboarding,false,false,true
 appPlatformAccessTokens,experimental,@grafana/identity-access-team,false,false,false
 appSidecar,experimental,@grafana/explore-squad,false,false,false
 groupAttributeSync,experimental,@grafana/identity-access-team,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -771,6 +771,10 @@ const (
 	// Used in Explore Logs to limit the time range
 	FlagExploreLogsLimitedTimeRange = "exploreLogsLimitedTimeRange"
 
+	// FlagHomeSetupGuide
+	// Used in Home for users who want to return to the onboarding flow or quickly find popular config pages
+	FlagHomeSetupGuide = "homeSetupGuide"
+
 	// FlagAppPlatformAccessTokens
 	// Enables the use of access tokens for the App Platform
 	FlagAppPlatformAccessTokens = "appPlatformAccessTokens"

pkg/services/featuremgmt/toggles_gen.json

@@ -1433,6 +1433,22 @@
         "hideFromAdminPage": true
       }
     },
+    {
+      "metadata": {
+        "name": "homeSetupGuide",
+        "resourceVersion": "1726258153467",
+        "creationTimestamp": "2024-09-10T15:46:32Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2024-09-13 20:09:13.467989 +0000 UTC"
+        }
+      },
+      "spec": {
+        "description": "Used in Home for users who want to return to the onboarding flow or quickly find popular config pages",
+        "stage": "experimental",
+        "codeowner": "@grafana/growth-and-onboarding",
+        "frontend": true
+      }
+    },
     {
       "metadata": {
         "name": "idForwarding",

pkg/services/navtree/navtreeimpl/navtree.go

@@ -202,6 +202,18 @@ func (s *ServiceImpl) getHomeNode(c *contextmodel.ReqContext, prefs *pref.Prefer
 		Icon:       "home-alt",
 		SortWeight: navtree.WeightHome,
 	}
+	ctx := c.Req.Context()
+	if s.features.IsEnabled(ctx, featuremgmt.FlagHomeSetupGuide) {
+		var children []*navtree.NavLink
+		// setup guide (a submenu item under Home)
+		children = append(children, &navtree.NavLink{
+			Id:         "home-setup-guide",
+			Text:       "Setup guide",
+			Url:        homeUrl + "/setup-guide",
+			SortWeight: navtree.WeightHome,
+		})
+		homeNode.Children = children
+	}
 	return homeNode
 }
 

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

@@ -123,7 +123,7 @@ export const MegaMenu = memo(
           <CustomScrollbar showScrollIndicators hideHorizontalTrack>
             <ul className={styles.itemList} aria-label={t('navigation.megamenu.list-label', 'Navigation')}>
               {navItems.map((link, index) => (
-                <Stack key={link.text} direction={index === 0 ? 'row-reverse' : 'row'} alignItems="center">
+                <Stack key={link.text} direction={index === 0 ? 'row-reverse' : 'row'} alignItems="start">
                   {index === 0 && (
                     <IconButton
                       id="dock-menu-button"
@@ -187,6 +187,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
   dockMenuButton: css({
     display: 'none',
+    position: 'relative',
+    top: theme.spacing(1),
 
     [theme.breakpoints.up('xl')]: {
       display: 'inline-flex',

public/app/core/utils/navBarItem-translations.ts

@@ -11,6 +11,8 @@ export function getNavTitle(navId: string | undefined) {
   switch (navId) {
     case 'home':
       return t('nav.home.title', 'Home');
+    case 'home-setup-guide':
+      return t('nav.setup-guide.title', 'Setup guide');
     case 'new':
       return t('nav.new.title', 'New');
     case 'create':

public/locales/en-US/grafana.json

@@ -1745,6 +1745,9 @@
       "subtitle": "Use service accounts to run automated workloads in Grafana",
       "title": "Service accounts"
     },
+    "setup-guide": {
+      "title": "Setup guide"
+    },
     "shared-dashboard": {
       "subtitle": "Manage your organization's externally shared dashboards",
       "title": "Shared dashboards"

public/locales/pseudo-LOCALE/grafana.json

@@ -1745,6 +1745,9 @@
       "subtitle": "Ůşę şęřvįčę äččőūʼnŧş ŧő řūʼn äūŧőmäŧęđ ŵőřĸľőäđş įʼn Ğřäƒäʼnä",
       "title": "Ŝęřvįčę äččőūʼnŧş"
     },
+    "setup-guide": {
+      "title": "Ŝęŧūp ģūįđę"
+    },
     "shared-dashboard": {
       "subtitle": "Mäʼnäģę yőūř őřģäʼnįžäŧįőʼn'ş ęχŧęřʼnäľľy şĥäřęđ đäşĥþőäřđş",
       "title": "Ŝĥäřęđ đäşĥþőäřđş"