diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx index 74148de7d83..045fd7e214c 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx @@ -4,7 +4,7 @@ import { ComponentProps, memo, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { t } from '@grafana/i18n'; import { config } from '@grafana/runtime'; -import { Button, Dropdown, IconButton, Menu, useStyles2 } from '@grafana/ui'; +import { Button, Dropdown, Icon, IconButton, Menu, useStyles2 } from '@grafana/ui'; import { ExpressionQueryType, getExpressionIcon } from 'app/features/expressions/types'; interface AddDataItemMenuProps { @@ -99,6 +99,12 @@ export const AddDataItemMenu = memo( label={t('dashboard-scene.add-data-item-menu.add-from-saved-queries', 'From saved queries')} icon="bookmark" onClick={() => onAddFromSavedQueries(index)} + component={() => ( + + + + )} + className={styles.queryLibraryMenuItem} /> )} {allowedTypes.includes('transform') && ( @@ -132,6 +138,14 @@ const getStyles = (theme: GrafanaTheme2) => ({ paddingLeft: 0, fontFamily: theme.typography.fontFamilyMonospace, }), + queryLibraryMenuItem: css({ + flexDirection: 'row', + alignItems: 'center', + }), + badge: css({ + display: 'flex', + alignItems: 'center', + }), }); AddDataItemMenu.displayName = 'AddDataItemMenu'; diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx index 9eb92ef8879..52337561e6e 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx @@ -262,7 +262,13 @@ export const QueryLibraryView = forwardRef ( -