CommandPalette: Minor usability improvements (#61567)

This commit is contained in:
Josh Hunt
2023-01-16 18:33:46 +00:00
committed by GitHub
parent f135c6cbf1
commit 665f85cd7e
10 changed files with 25 additions and 15 deletions

View File

@ -56,7 +56,10 @@ export const CommandPalette = () => {
<KBarAnimator className={styles.animator}> <KBarAnimator className={styles.animator}>
<FocusScope contain autoFocus restoreFocus> <FocusScope contain autoFocus restoreFocus>
<div {...overlayProps} {...dialogProps}> <div {...overlayProps} {...dialogProps}>
<KBarSearch className={styles.search} /> <KBarSearch
defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search Grafana')}
className={styles.search}
/>
<RenderResults dashboardResults={dashboardResults} /> <RenderResults dashboardResults={dashboardResults} />
</div> </div>
</FocusScope> </FocusScope>

View File

@ -59,15 +59,6 @@ export const ResultItem = React.forwardRef(
</div> </div>
{action.subtitle && <span className={styles.subtitleText}>{action.subtitle}</span>} {action.subtitle && <span className={styles.subtitleText}>{action.subtitle}</span>}
</div> </div>
{action.shortcut?.length ? (
<div aria-hidden className={styles.shortcutContainer}>
{action.shortcut.map((sc) => (
<kbd key={sc} className={styles.shortcut}>
{sc}
</kbd>
))}
</div>
) : null}
</div> </div>
); );
} }

View File

@ -36,7 +36,7 @@ export async function getRecentDashboardActions(): Promise<CommandPaletteAction[
return { return {
id: `recent-dashboards/${url}`, id: `recent-dashboards/${url}`,
name: `${name}`, name: `${name}`,
section: t('command-palette.section.recent-dashboards', 'Recently viewed dashboards'), section: t('command-palette.section.recent-dashboards', 'Recent dashboards'),
priority: RECENT_DASHBOARDS_PRORITY, priority: RECENT_DASHBOARDS_PRORITY,
perform: () => { perform: () => {
locationService.push(locationUtil.stripBaseFromUrl(url)); locationService.push(locationUtil.stripBaseFromUrl(url));

View File

@ -55,7 +55,6 @@ export default (navBarTree: NavModelItem[]): CommandPaletteAction[] => {
keywords: 'navigate', keywords: 'navigate',
perform: () => locationService.push('?search=open'), perform: () => locationService.push('?search=open'),
section: t('command-palette.section.pages', 'Pages'), section: t('command-palette.section.pages', 'Pages'),
shortcut: ['s', 'o'],
priority: DEFAULT_PRIORITY, priority: DEFAULT_PRIORITY,
}, },
{ {
@ -63,7 +62,6 @@ export default (navBarTree: NavModelItem[]): CommandPaletteAction[] => {
name: t('command-palette.action.change-theme', 'Change theme...'), name: t('command-palette.action.change-theme', 'Change theme...'),
keywords: 'interface color dark light', keywords: 'interface color dark light',
section: t('command-palette.section.preferences', 'Preferences'), section: t('command-palette.section.preferences', 'Preferences'),
shortcut: ['c', 't'],
priority: PREFERENCES_PRIORITY, priority: PREFERENCES_PRIORITY,
}, },
{ {

View File

@ -12,6 +12,9 @@
"light-theme": "", "light-theme": "",
"search": "" "search": ""
}, },
"search-box": {
"placeholder": ""
},
"section": { "section": {
"actions": "", "actions": "",
"dashboard-search-results": "", "dashboard-search-results": "",

View File

@ -12,12 +12,15 @@
"light-theme": "Light", "light-theme": "Light",
"search": "Search" "search": "Search"
}, },
"search-box": {
"placeholder": "Search Grafana"
},
"section": { "section": {
"actions": "Actions", "actions": "Actions",
"dashboard-search-results": "Dashboards", "dashboard-search-results": "Dashboards",
"pages": "Pages", "pages": "Pages",
"preferences": "Preferences", "preferences": "Preferences",
"recent-dashboards": "Recently viewed dashboards" "recent-dashboards": "Recent dashboards"
} }
}, },
"common": { "common": {

View File

@ -12,6 +12,9 @@
"light-theme": "", "light-theme": "",
"search": "" "search": ""
}, },
"search-box": {
"placeholder": ""
},
"section": { "section": {
"actions": "", "actions": "",
"dashboard-search-results": "", "dashboard-search-results": "",

View File

@ -12,6 +12,9 @@
"light-theme": "", "light-theme": "",
"search": "" "search": ""
}, },
"search-box": {
"placeholder": ""
},
"section": { "section": {
"actions": "", "actions": "",
"dashboard-search-results": "", "dashboard-search-results": "",

View File

@ -12,12 +12,15 @@
"light-theme": "Ŀįģĥŧ", "light-theme": "Ŀįģĥŧ",
"search": "Ŝęäřčĥ" "search": "Ŝęäřčĥ"
}, },
"search-box": {
"placeholder": "Ŝęäřčĥ Ğřäƒäʼnä"
},
"section": { "section": {
"actions": "Åčŧįőʼnş", "actions": "Åčŧįőʼnş",
"dashboard-search-results": "Đäşĥþőäřđş", "dashboard-search-results": "Đäşĥþőäřđş",
"pages": "Päģęş", "pages": "Päģęş",
"preferences": "Přęƒęřęʼnčęş", "preferences": "Přęƒęřęʼnčęş",
"recent-dashboards": "Ŗęčęʼnŧľy vįęŵęđ đäşĥþőäřđş" "recent-dashboards": "Ŗęčęʼnŧ đäşĥþőäřđş"
} }
}, },
"common": { "common": {

View File

@ -12,6 +12,9 @@
"light-theme": "", "light-theme": "",
"search": "" "search": ""
}, },
"search-box": {
"placeholder": ""
},
"section": { "section": {
"actions": "", "actions": "",
"dashboard-search-results": "", "dashboard-search-results": "",