diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx index 0ccb405da39..9e2222bedcd 100644 --- a/public/app/features/commandPalette/CommandPalette.tsx +++ b/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() {
- +
@@ -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 ? ( + + ) : ( { + const styles = useStyles2(getStyles); + + return ( +
+ + grot + + No results found + + +
+ ); +}; + +EmptyState.displayName = 'EmptyState'; + +const getStyles = (theme: GrafanaTheme2) => ({ + container: css({ + padding: theme.spacing(8, 0), + }), +}); diff --git a/public/img/grot-not-found.svg b/public/img/grot-not-found.svg new file mode 100644 index 00000000000..12106ef9a7f --- /dev/null +++ b/public/img/grot-not-found.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 8fa043ef48c..c5a2ea55733 100644 --- a/public/locales/en-US/grafana.json +++ b/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..." }, diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 82ecca9b352..8f2a84999eb 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -108,6 +108,9 @@ "dark-theme": "Đäřĸ", "light-theme": "Ŀįģĥŧ" }, + "empty-state": { + "title": "Ńő řęşūľŧş ƒőūʼnđ" + }, "search-box": { "placeholder": "Ŝęäřčĥ őř ĵūmp ŧő..." },