From 3c3293df78344a782fb65e5f977fd148daa597ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 20 Jun 2022 16:25:43 +0200
Subject: [PATCH] TopNav: Adds new feature toggle for upcoming nav~ (#51115)

---
 .../src/types/featureToggles.gen.ts           |  1 +
 pkg/services/featuremgmt/registry.go          |  5 ++++
 pkg/services/featuremgmt/toggles_gen.go       |  4 +++
 public/app/AppWrapper.tsx                     | 30 ++++++++++++-------
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts
index 6190c7a3f7d..0166397ed56 100644
--- a/packages/grafana-data/src/types/featureToggles.gen.ts
+++ b/packages/grafana-data/src/types/featureToggles.gen.ts
@@ -62,4 +62,5 @@ export interface FeatureToggles {
   logRequestsInstrumentedAsUnknown?: boolean;
   dataConnectionsConsole?: boolean;
   internationalization?: boolean;
+  topnav?: boolean;
 }
diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go
index 97cb32c0228..815f1281887 100644
--- a/pkg/services/featuremgmt/registry.go
+++ b/pkg/services/featuremgmt/registry.go
@@ -258,5 +258,10 @@ var (
 			Description: "Enables work-in-progress internationalization",
 			State:       FeatureStateAlpha,
 		},
+		{
+			Name:        "topnav",
+			Description: "New top nav and page layouts",
+			State:       FeatureStateAlpha,
+		},
 	}
 )
diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go
index 0e53265b025..99518b13ac5 100644
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/pkg/services/featuremgmt/toggles_gen.go
@@ -190,4 +190,8 @@ const (
 	// FlagInternationalization
 	// Enables work-in-progress internationalization
 	FlagInternationalization = "internationalization"
+
+	// FlagTopnav
+	// New top nav and page layouts
+	FlagTopnav = "topnav"
 )
diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index d1464843e82..6ff46768d9a 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -81,6 +81,22 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
     return <Switch>{getAppRoutes().map((r) => this.renderRoute(r))}</Switch>;
   }
 
+  renderNavBar() {
+    if (config.isPublicDashboardView || !this.state.ready || config.featureToggles.topnav) {
+      return null;
+    }
+
+    return <NavBar />;
+  }
+
+  commandPaletteEnabled() {
+    return config.featureToggles.commandPalette && !config.isPublicDashboardView;
+  }
+
+  searchBarEnabled() {
+    return !config.isPublicDashboardView;
+  }
+
   render() {
     const { ready } = this.state;
 
@@ -92,14 +108,6 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
       });
     };
 
-    const commandPaletteEnabled = () => !config.isPublicDashboardView && config.featureToggles.commandPalette;
-
-    const renderNavBar = () => {
-      return !config.isPublicDashboardView && ready && <NavBar />;
-    };
-
-    const searchBarEnabled = () => !config.isPublicDashboardView;
-
     return (
       <Provider store={store}>
         <I18nProvider>
@@ -112,10 +120,10 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                 >
                   <ModalsProvider>
                     <GlobalStyles />
-                    {commandPaletteEnabled() && <CommandPalette />}
+                    {this.commandPaletteEnabled() && <CommandPalette />}
                     <div className="grafana-app">
                       <Router history={locationService.getHistory()}>
-                        {renderNavBar()}
+                        {this.renderNavBar()}
                         <main className="main-view">
                           {pageBanners.map((Banner, index) => (
                             <Banner key={index.toString()} />
@@ -123,7 +131,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
 
                           <AngularRoot />
                           <AppNotificationList />
-                          {searchBarEnabled() && <SearchWrapper />}
+                          {this.searchBarEnabled() && <SearchWrapper />}
                           {ready && this.renderRoutes()}
                           {bodyRenderHooks.map((Hook, index) => (
                             <Hook key={index.toString()} />