TopNav: Adds new feature toggle for upcoming nav~ (#51115)

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

@@ -62,4 +62,5 @@ export interface FeatureToggles {
   logRequestsInstrumentedAsUnknown?: boolean;
   dataConnectionsConsole?: boolean;
   internationalization?: boolean;
+  topnav?: boolean;
 }

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,
+		},
 	}
 )

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"
 )

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()} />