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
2025-01-15 19:22:34 -06:00 · 2024-09-25 13:20:04 -04:00 · 2024-09-25 13:20:04 -04:00 · c822feff9e
commit c822feff9e
parent 26a3e70cfa
12 changed files with 54 additions and 1 deletions
--- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
+++ b/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
--- a/packages/grafana-data/src/types/featureToggles.gen.ts
+++ b/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;
--- a/pkg/services/featuremgmt/codeowners.go
+++ b/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"
 )
--- a/pkg/services/featuremgmt/registry.go
+++ b/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",
--- a/pkg/services/featuremgmt/toggles_gen.csv
+++ b/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
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/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"
--- a/pkg/services/featuremgmt/toggles_gen.json
+++ b/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",
--- a/pkg/services/navtree/navtreeimpl/navtree.go
+++ b/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
 }

--- a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
+++ b/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',
--- a/public/app/core/utils/navBarItem-translations.ts
+++ b/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':
--- a/public/locales/en-US/grafana.json
+++ b/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"
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@ -1745,6 +1745,9 @@
      "subtitle": "Ůşę şęřvįčę äččőūŉŧş ŧő řūŉ äūŧőmäŧęđ ŵőřĸľőäđş įŉ Ğřäƒäŉä",
      "title": "Ŝęřvįčę äččőūŉŧş"
    },
+    "setup-guide": {
+      "title": "Ŝęŧūp ģūįđę"
+    },
    "shared-dashboard": {
      "subtitle": "Mäŉäģę yőūř őřģäŉįžäŧįőŉ'ş ęχŧęřŉäľľy şĥäřęđ đäşĥþőäřđş",
      "title": "Ŝĥäřęđ đäşĥþőäřđş"