Command Palette: Add empty state (#81903)

* add an empty state for the command palette

* cleaner logic

public/app/features/commandPalette/CommandPalette.tsx

@@ -19,6 +19,7 @@ import { reportInteraction } from '@grafana/runtime';
 import { Icon, LoadingBar, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
+import { EmptyState } from './EmptyState';
 import { KBarResults } from './KBarResults';
 import { ResultItem } from './ResultItem';
 import { useSearchResults } from './actions/dashboardActions';
@@ -68,7 +69,7 @@ export function CommandPalette() {
                 </div>
               </div>
               <div className={styles.resultsContainer}>
-                <RenderResults searchResults={searchResults} />
+                <RenderResults isFetchingSearchResults={isFetchingSearchResults} searchResults={searchResults} />
               </div>
             </div>
           </FocusScope>
@@ -79,10 +80,11 @@ export function CommandPalette() {
 }
 
 interface RenderResultsProps {
+  isFetchingSearchResults: boolean;
   searchResults: CommandPaletteAction[];
 }
 
-const RenderResults = ({ searchResults }: RenderResultsProps) => {
+const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResultsProps) => {
   const { results: kbarResults, rootActionId } = useMatches();
   const styles = useStyles2(getSearchStyles);
   const dashboardsSectionTitle = t('command-palette.section.dashboard-search-results', 'Dashboards');
@@ -117,7 +119,11 @@ const RenderResults = ({ searchResults }: RenderResultsProps) => {
     return results;
   }, [kbarResults, dashboardsSectionTitle, dashboardResultItems, foldersSectionTitle, folderResultItems]);
 
-  return (
+  const showEmptyState = !isFetchingSearchResults && items.length === 0;
+
+  return showEmptyState ? (
+    <EmptyState />
+  ) : (
     <KBarResults
       items={items}
       maxHeight={650}

public/app/features/commandPalette/EmptyState.tsx

@@ -0,0 +1,31 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Stack, Text, useStyles2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
+
+export interface Props {}
+
+export const EmptyState = ({}: Props) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.container}>
+      <Stack direction="column" alignItems="center">
+        <img src={'public/img/grot-not-found.svg'} width="200px" alt="grot" />
+        <Text variant="h5">
+          <Trans i18nKey="command-palette.empty-state.title">No results found</Trans>
+        </Text>
+      </Stack>
+    </div>
+  );
+};
+
+EmptyState.displayName = 'EmptyState';
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    padding: theme.spacing(8, 0),
+  }),
+});

public/locales/en-US/grafana.json

@@ -108,6 +108,9 @@
       "dark-theme": "Dark",
       "light-theme": "Light"
     },
+    "empty-state": {
+      "title": "No results found"
+    },
     "search-box": {
       "placeholder": "Search or jump to..."
     },

public/locales/pseudo-LOCALE/grafana.json

@@ -108,6 +108,9 @@
       "dark-theme": "Đäřĸ",
       "light-theme": "Ŀįģĥŧ"
     },
+    "empty-state": {
+      "title": "Ńő řęşūľŧş ƒőūʼnđ"
+    },
     "search-box": {
       "placeholder": "Ŝęäřčĥ őř ĵūmp ŧő..."
     },