diff --git a/public/app/features/commandPalette/ResultItem.tsx b/public/app/features/commandPalette/ResultItem.tsx
index 1102f5aa929..2d683987c2c 100644
--- a/public/app/features/commandPalette/ResultItem.tsx
+++ b/public/app/features/commandPalette/ResultItem.tsx
@@ -35,11 +35,12 @@ export const ResultItem = React.forwardRef(
let name = action.name;
- // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
- const hasAction = Boolean(action.command?.perform || (action as ActionImpl & { url?: string }).url);
+ const hasCommandOrLink = (action: ActionImpl) =>
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+ Boolean(action.command?.perform || (action as ActionImpl & { url?: string }).url);
// TODO: does this needs adjusting for i18n?
- if (action.children.length && !hasAction && !name.endsWith('...')) {
+ if (action.children.length && !hasCommandOrLink(action) && !name.endsWith('...')) {
name += '...';
}
@@ -48,16 +49,17 @@ export const ResultItem = React.forwardRef(
{action.icon}
-
- {ancestors.length > 0 &&
- ancestors.map((ancestor) => (
-
+ {ancestors.map((ancestor) => (
+
+ {!hasCommandOrLink(ancestor) && (
+ <>
{ancestor.name}
- ›
-
- ))}
- {name}
-
+
›
+ >
+ )}
+
+ ))}
+
{name}
{action.subtitle &&
{action.subtitle}}
@@ -98,30 +100,35 @@ const getResultItemStyles = (theme: GrafanaTheme2) => {
actionContainer: css({
display: 'flex',
gap: theme.spacing(1),
- alignItems: 'center',
+ alignItems: 'baseline',
fontSize: theme.typography.fontSize,
+ width: '100%',
}),
textContainer: css({
- display: 'flex',
- flexDirection: 'column',
- }),
- shortcut: css({
- padding: theme.spacing(0, 1),
- background: theme.colors.background.secondary,
- borderRadius: theme.shape.borderRadius(),
- fontSize: theme.typography.fontSize,
+ display: 'block',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
}),
breadcrumbAncestor: css({
- marginRight: theme.spacing(1),
color: theme.colors.text.secondary,
}),
- subtitleText: css({
- fontSize: theme.typography.fontSize - 2,
+ breadcrumbSeparator: css({
+ color: theme.colors.text.secondary,
+ marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(1),
}),
- shortcutContainer: css({
- display: 'grid',
- gridAutoFlow: 'column',
- gap: theme.spacing(1),
+ subtitleText: css({
+ ...theme.typography.bodySmall,
+ color: theme.colors.text.secondary,
+ display: 'block',
+ flexBasis: '20%',
+ flexGrow: 1,
+ flexShrink: 0,
+ maxWidth: 'fit-content',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
}),
};
};
diff --git a/public/app/features/commandPalette/actions/dashboardActions.ts b/public/app/features/commandPalette/actions/dashboardActions.ts
index c88ce6f9923..4e6b3a9f52a 100644
--- a/public/app/features/commandPalette/actions/dashboardActions.ts
+++ b/public/app/features/commandPalette/actions/dashboardActions.ts
@@ -57,7 +57,7 @@ export async function getSearchResultActions(searchQuery: string): Promise {
- const { url, name, kind } = item; // items are backed by DataFrameView, so must hold the url in a closure
+ const { url, name, kind, location } = item; // items are backed by DataFrameView, so must hold the url in a closure
return {
id: `go/${kind}${url}`,
name: `${name}`,
@@ -67,6 +67,7 @@ export async function getSearchResultActions(searchQuery: string): Promise parent.text).join(' > ');
const action = {
id: idForNavItem(navItem),
- name: text, // TODO: translate
+ name: text,
section: section,
url: url && locationUtil.stripBaseFromUrl(url),
- parent: parent && !isCreateAction && idForNavItem(parent),
+ parent: parents.length > 0 && !isCreateAction ? idForNavItem(parents[parents.length - 1]) : undefined,
priority: priority,
+ subtitle: isCreateAction ? undefined : subtitle,
};
navActions.push(action);
if (children?.length) {
- const childActions = navTreeToActions(children, navItem);
+ const childActions = navTreeToActions(children, [...parents, navItem]);
navActions.push(...childActions);
}
}