Navigation: more command palette tweaks (#62286)

* update placeholder text, only create search keybindings if topNavCommandPalette is disabled

* make search input wider

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

@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     justifyContent: 'space-between',
 
     [theme.breakpoints.up('sm')]: {
-      gridTemplateColumns: '1.5fr minmax(200px, 1fr) 1.5fr', // search should not be smaller than 200px
+      gridTemplateColumns: '1.5fr minmax(240px, 1fr) 1.5fr', // search should not be smaller than 240px
       display: 'grid',
 
       justifyContent: 'flex-start',

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

@@ -36,7 +36,7 @@ export function TopSearchBarCommandPaletteTrigger() {
       <ToolbarButton
         iconOnly
         icon="search"
-        aria-label={t('nav.search.placeholder', 'Search Grafana')}
+        aria-label={t('nav.search.placeholderCommandPalette', 'Search or jump to...')}
         onClick={onOpenSearch}
       />
     );
@@ -65,7 +65,7 @@ function PretendTextInput({ onClick }: PretendTextInputProps) {
         </div>
 
         <button className={styles.fakeInput} onClick={onClick}>
-          {t('nav.search.placeholder', 'Search Grafana')}
+          {t('nav.search.placeholderCommandPalette', 'Search or jump to...')}
         </button>
 
         <div className={styles.suffix}>

public/app/core/services/keybindingSrv.ts

@@ -39,9 +39,11 @@ export class KeybindingSrv {
       this.bind('g a', this.openAlerting);
       this.bind('g p', this.goToProfile);
       this.bind('g e', this.goToExplore);
-      this.bind('s o', this.openSearch);
+      if (!config.featureToggles.topNavCommandPalette) {
+        this.bind('s o', this.openSearch);
+        this.bind('f', this.openSearch);
+      }
       this.bind('t a', this.makeAbsoluteTime);
-      this.bind('f', this.openSearch);
       this.bind('esc', this.exit);
       this.bindGlobalEsc();
     }

public/app/features/commandPalette/CommandPalette.tsx

@@ -59,7 +59,7 @@ export const CommandPalette = () => {
               <div className={styles.searchContainer}>
                 {isFetchingDashboardResults ? <Spinner className={styles.spinner} /> : <Icon name="search" size="md" />}
                 <KBarSearch
-                  defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search Grafana')}
+                  defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search or jump to...')}
                   className={styles.search}
                 />
               </div>

public/locales/de-DE/grafana.json

@@ -292,7 +292,8 @@
       "title": "Szenen"
     },
     "search": {
-      "placeholder": "Grafana durchsuchen"
+      "placeholder": "Grafana durchsuchen",
+      "placeholderCommandPalette": ""
     },
     "search-dashboards": {
       "title": "Dashboards durchsuchen"

public/locales/en-US/grafana.json

@@ -292,7 +292,8 @@
       "title": "Scenes"
     },
     "search": {
-      "placeholder": "Search Grafana"
+      "placeholder": "Search Grafana",
+      "placeholderCommandPalette": "Search or jump to..."
     },
     "search-dashboards": {
       "title": "Search dashboards"

public/locales/es-ES/grafana.json

@@ -292,7 +292,8 @@
       "title": "Escenas"
     },
     "search": {
-      "placeholder": "Buscar Grafana"
+      "placeholder": "Buscar Grafana",
+      "placeholderCommandPalette": ""
     },
     "search-dashboards": {
       "title": "Buscar paneles de control"

public/locales/fr-FR/grafana.json

@@ -292,7 +292,8 @@
       "title": "Scènes"
     },
     "search": {
-      "placeholder": "Rechercher dans Grafana"
+      "placeholder": "Rechercher dans Grafana",
+      "placeholderCommandPalette": ""
     },
     "search-dashboards": {
       "title": "Rechercher dans les tableaux de bord"

public/locales/pseudo-LOCALE/grafana.json

@@ -292,7 +292,8 @@
       "title": "Ŝčęʼnęş"
     },
     "search": {
-      "placeholder": "Ŝęäřčĥ Ğřäƒäʼnä"
+      "placeholder": "Ŝęäřčĥ Ğřäƒäʼnä",
+      "placeholderCommandPalette": "Ŝęäřčĥ őř ĵūmp ŧő..."
     },
     "search-dashboards": {
       "title": "Ŝęäřčĥ đäşĥþőäřđş"

public/locales/zh-Hans/grafana.json

@@ -292,7 +292,8 @@
       "title": "场景"
     },
     "search": {
-      "placeholder": "搜索 Grafana"
+      "placeholder": "搜索 Grafana",
+      "placeholderCommandPalette": ""
     },
     "search-dashboards": {
       "title": ""