update query library styles

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={() => (
+              <span className={styles.badge}>
+                <Icon name="gf-query-library" />
+              </span>
+            )}
+            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';

public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx

@@ -262,7 +262,13 @@ export const QueryLibraryView = forwardRef<QueryLibraryViewRef, QueryLibraryView
   // Render query list item
   const renderQueryItem = (query: (typeof STUB_SAVED_QUERIES)[0], index: number) => (
     <Fragment key={query.uid}>
-      <label className={cx(styles.queryItem, mode === 'browse' && selectedQueryIndex === index && styles.selected)}>
+      <label
+        className={cx(
+          styles.queryItem,
+          mode === 'browse' && selectedQueryIndex === index && styles.selected,
+          mode === 'save' && styles.disabled
+        )}
+      >
         <input
           type="radio"
           name="query-library-list"
@@ -491,6 +497,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
       backgroundColor: theme.colors.action.selected,
     },
   }),
+  disabled: css({
+    opacity: 0.5,
+    cursor: 'default',
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+  }),
   radioInput: css({
     position: 'absolute',
     opacity: 0,