Command Palette Scaffolding + Explore (#47445)

* Add feature flag and scaffodling

* start adding actions

* WIP

* move action files

* Start adding styles

* Fix implementation based on feedback

* Add more hackathon code back to command palette

* Cleanup

* Cleanup unused service files for simple MVP pass

* Move type def to library

* WIP

* Move provider to proper place to pick up other routes’ actions

* Build actions off navbar, add explore actions

* Work around undefined typescript stuff

* Fix based on feedback

* close palette on ESC

* Fix based on PR feedback pt 1

* Move styles to classes

* Move another inline style to a class

* Enable command palette by default

* change around async hook structure

* Add simple feature tracking

* Code cleanup, and be sure the command is accurate

* Change to only render if there are actions, and only add actions once past login

public/app/AppWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import { Router, Route, Redirect, Switch } from 'react-router-dom';
-import { config, locationService, navigationLogger } from '@grafana/runtime';
+import { config, locationService, navigationLogger, reportInteraction } from '@grafana/runtime';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
 import { ErrorBoundaryAlert, GlobalStyles, ModalRoot, ModalsProvider, PortalContainer } from '@grafana/ui';
@@ -15,6 +15,8 @@ import { GrafanaRoute } from './core/navigation/GrafanaRoute';
 import { AppNotificationList } from './core/components/AppNotifications/AppNotificationList';
 import { SearchWrapper } from 'app/features/search';
 import { LiveConnectionWarning } from './features/live/LiveConnectionWarning';
+import { Action, KBarProvider } from 'kbar';
+import { CommandPalette } from './features/commandPalette/CommandPalette';
 import { I18nProvider } from './core/localisation';
 import { AngularRoot } from './angular/AngularRoot';
 import { loadAndInitAngularIfEnabled } from './angular/loadAndInitAngularIfEnabled';
@@ -85,36 +87,48 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
 
     const newNavigationEnabled = Boolean(config.featureToggles.newNavigation);
 
+    const commandPaletteActionSelected = (action: Action) => {
+      reportInteraction('commandPalette_action_selected', {
+        actionId: action.id,
+      });
+    };
+
     return (
       <Provider store={store}>
         <I18nProvider>
           <ErrorBoundaryAlert style="page">
             <ConfigContext.Provider value={config}>
               <ThemeProvider>
-                <ModalsProvider>
-                  <GlobalStyles />
-                  <div className="grafana-app">
-                    <Router history={locationService.getHistory()}>
-                      {ready && <>{newNavigationEnabled ? <NavBarNext /> : <NavBar />}</>}
-                      <main className="main-view">
-                        {pageBanners.map((Banner, index) => (
-                          <Banner key={index.toString()} />
-                        ))}
+                <KBarProvider
+                  actions={[]}
+                  options={{ enableHistory: true, callbacks: { onSelectAction: commandPaletteActionSelected } }}
+                >
+                  <ModalsProvider>
+                    <GlobalStyles />
+                    {config.featureToggles.commandPalette && <CommandPalette />}
+                    <div className="grafana-app">
+                      <Router history={locationService.getHistory()}>
+                        {ready && <>{newNavigationEnabled ? <NavBarNext /> : <NavBar />}</>}
+                        <main className="main-view">
+                          {pageBanners.map((Banner, index) => (
+                            <Banner key={index.toString()} />
+                          ))}
 
-                        <AngularRoot />
-                        <AppNotificationList />
-                        <SearchWrapper />
-                        {ready && this.renderRoutes()}
-                        {bodyRenderHooks.map((Hook, index) => (
-                          <Hook key={index.toString()} />
-                        ))}
-                      </main>
-                    </Router>
-                  </div>
-                  <LiveConnectionWarning />
-                  <ModalRoot />
-                  <PortalContainer />
-                </ModalsProvider>
+                          <AngularRoot />
+                          <AppNotificationList />
+                          <SearchWrapper />
+                          {ready && this.renderRoutes()}
+                          {bodyRenderHooks.map((Hook, index) => (
+                            <Hook key={index.toString()} />
+                          ))}
+                        </main>
+                      </Router>
+                    </div>
+                    <LiveConnectionWarning />
+                    <ModalRoot />
+                    <PortalContainer />
+                  </ModalsProvider>
+                </KBarProvider>
               </ThemeProvider>
             </ConfigContext.Provider>
           </ErrorBoundaryAlert>