CommandPalette: Remove topnav command palette feature flag (#63620)

* CommandPalette: Remove topnav command palette feature flag

* Restore search shortcuts if topnav isnt enabled

* fix unused imports

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

@@ -46,7 +46,6 @@ Some stable features are enabled by default. You can disable a stable feature by
 | `topnav`                          | Displays new top nav and page layouts                                           |
 | `accessControlOnCall`             | Access control primitives for OnCall                                            |
 | `alertingNoNormalState`           | Stop maintaining state of alerts that are not firing                            |
-| `topNavCommandPalette`            | Launch the Command Palette from the top navigation search box                   |
 
 ## Alpha feature toggles
 

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

@@ -77,7 +77,6 @@ export interface FeatureToggles {
   alertingBacktesting?: boolean;
   editPanelCSVDragAndDrop?: boolean;
   alertingNoNormalState?: boolean;
-  topNavCommandPalette?: boolean;
   logsSampleInExplore?: boolean;
   logsContextDatasourceUi?: boolean;
   lokiQuerySplitting?: boolean;

pkg/services/featuremgmt/registry.go

@@ -341,12 +341,6 @@ var (
 			State:           FeatureStateBeta,
 			RequiresRestart: false,
 		},
-		{
-			Name:         "topNavCommandPalette",
-			Description:  "Launch the Command Palette from the top navigation search box",
-			State:        FeatureStateBeta,
-			FrontendOnly: true,
-		},
 		{
 
 			Name:         "logsSampleInExplore",

pkg/services/featuremgmt/toggles_gen.go

@@ -251,10 +251,6 @@ const (
 	// Stop maintaining state of alerts that are not firing
 	FlagAlertingNoNormalState = "alertingNoNormalState"
 
-	// FlagTopNavCommandPalette
-	// Launch the Command Palette from the top navigation search box
-	FlagTopNavCommandPalette = "topNavCommandPalette"
-
 	// FlagLogsSampleInExplore
 	// Enables access to the logs sample feature in Explore
 	FlagLogsSampleInExplore = "logsSampleInExplore"

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

@@ -22,7 +22,6 @@ export function AppChrome({ children }: Props) {
   const styles = useStyles2(getStyles);
   const { chrome } = useGrafana();
   const state = chrome.useState();
-  const featureToggles = config.featureToggles;
 
   if (!config.featureToggles.topnav) {
     return (
@@ -73,7 +72,6 @@ export function AppChrome({ children }: Props) {
       <div className={contentClass}>{children}</div>
       <MegaMenu searchBarHidden={searchBarHidden} onClose={() => chrome.setMegaMenu(false)} />
       <CommandPalette />
-      {!featureToggles.topNavCommandPalette && <SearchWrapper />}
     </main>
   );
 }

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

@@ -3,7 +3,6 @@ import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Dropdown, ToolbarButton, useStyles2 } from '@grafana/ui';
-import { config } from 'app/core/config';
 import { contextSrv } from 'app/core/core';
 import { useSelector } from 'app/types';
 
@@ -16,7 +15,6 @@ import { SignInLink } from './TopBar/SignInLink';
 import { TopNavBarMenu } from './TopBar/TopNavBarMenu';
 import { TopSearchBarSection } from './TopBar/TopSearchBarSection';
 import { TopSearchBarCommandPaletteTrigger } from './TopSearchBarCommandPaletteTrigger';
-import { TopSearchBarInput } from './TopSearchBarInput';
 import { TOP_BAR_LEVEL_HEIGHT } from './types';
 
 export function TopSearchBar() {
@@ -26,12 +24,6 @@ export function TopSearchBar() {
   const helpNode = navIndex['help'];
   const profileNode = navIndex['profile'];
 
-  const search = config.featureToggles.topNavCommandPalette ? (
-    <TopSearchBarCommandPaletteTrigger />
-  ) : (
-    <TopSearchBarInput />
-  );
-
   return (
     <div className={styles.layout}>
       <TopSearchBarSection>
@@ -41,7 +33,9 @@ export function TopSearchBar() {
         <OrganizationSwitcher />
       </TopSearchBarSection>
 
-      <TopSearchBarSection>{search}</TopSearchBarSection>
+      <TopSearchBarSection>
+        <TopSearchBarCommandPaletteTrigger />
+      </TopSearchBarSection>
 
       <TopSearchBarSection align="right">
         <QuickAdd />

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

@@ -1,47 +0,0 @@
-import React, { useState } from 'react';
-
-import { locationService } from '@grafana/runtime';
-import { FilterInput, ToolbarButton, useTheme2 } from '@grafana/ui';
-import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
-import { t } from 'app/core/internationalization';
-import { getSearchStateManager } from 'app/features/search/state/SearchStateManager';
-
-export function TopSearchBarInput() {
-  const theme = useTheme2();
-  const stateManager = getSearchStateManager();
-  const state = stateManager.useState();
-  const breakpoint = theme.breakpoints.values.sm;
-
-  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
-
-  useMediaQueryChange({
-    breakpoint,
-    onChange: (e) => {
-      setIsSmallScreen(e.matches);
-    },
-  });
-
-  const onOpenSearch = () => {
-    locationService.partial({ search: 'open' });
-  };
-
-  const onSearchChange = (value: string) => {
-    stateManager.onQueryChange(value);
-    if (value) {
-      onOpenSearch();
-    }
-  };
-
-  if (isSmallScreen) {
-    return <ToolbarButton iconOnly icon="search" aria-label="Search Grafana" onClick={onOpenSearch} />;
-  }
-
-  return (
-    <FilterInput
-      onClick={onOpenSearch}
-      placeholder={t('nav.search.placeholder', 'Search Grafana')}
-      value={state.query ?? ''}
-      onChange={onSearchChange}
-    />
-  );
-}

public/app/core/services/keybindingSrv.ts

@@ -41,7 +41,7 @@ export class KeybindingSrv {
       this.bind('g a', this.openAlerting);
       this.bind('g p', this.goToProfile);
       this.bind('g e', this.goToExplore);
-      if (!config.featureToggles.topNavCommandPalette) {
+      if (!config.featureToggles.topnav) {
         this.bind('s o', this.openSearch);
         this.bind('f', this.openSearch);
       }

public/app/features/commandPalette/CommandPalette.tsx

@@ -15,7 +15,7 @@ import {
 import React, { useEffect, useMemo, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { config, reportInteraction } from '@grafana/runtime';
+import { reportInteraction } from '@grafana/runtime';
 import { Icon, Spinner, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
@@ -135,13 +135,11 @@ const RenderResults = ({ searchResults }: RenderResultsProps) => {
 };
 
 const getSearchStyles = (theme: GrafanaTheme2) => {
-  const topNavCommandPalette = Boolean(config.featureToggles.topNavCommandPalette);
-
   return {
     positioner: css({
       zIndex: theme.zIndex.portal,
       marginTop: '0px',
-      paddingTop: topNavCommandPalette ? '4px !important' : undefined,
+      paddingTop: '4px !important',
       '&::before': {
         content: '""',
         position: 'fixed',

public/app/features/commandPalette/actions/staticActions.ts

@@ -1,5 +1,4 @@
 import { locationUtil, NavModelItem } from '@grafana/data';
-import { config, locationService } from '@grafana/runtime';
 import { t } from 'app/core/internationalization';
 import { changeTheme } from 'app/core/services/theme';
 
@@ -75,17 +74,6 @@ export default (navBarTree: NavModelItem[]): CommandPaletteAction[] => {
     },
   ];
 
-  if (!config.featureToggles.topNavCommandPalette) {
-    globalActions.unshift({
-      id: 'go/search',
-      name: t('command-palette.action.search', 'Search'),
-      keywords: 'navigate',
-      perform: () => locationService.push('?search=open'),
-      section: t('command-palette.section.pages', 'Pages'),
-      priority: DEFAULT_PRIORITY,
-    });
-  }
-
   const navBarActions = navTreeToActions(navBarTree);
 
   return [...globalActions, ...navBarActions];