FieldNamePicker: Add preview details for field type and values (#38768)

* add field type and values preview to picker

* add more details to description

* add icon to Select and specify icons for FieldType

* remove description

packages/grafana-ui/src/components/MatchersUI/utils.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { DataFrame, Field, getFieldDisplayName, SelectableValue } from '@grafana/data';
+import { DataFrame, Field, FieldType, getFieldDisplayName, SelectableValue } from '@grafana/data';
+import { IconName } from '../..';
 
 /**
  * @internal
@@ -61,6 +62,15 @@ export function useFieldDisplayNames(data: DataFrame[], filter?: (field: Field)
   }, [data, filter]);
 }
 
+const fieldTypeIcons: { [key in FieldType]: IconName } = {
+  time: 'clock-nine',
+  string: 'font',
+  number: 'calculator-alt',
+  boolean: 'toggle-on',
+  trace: 'info-circle',
+  other: 'brackets-curly',
+};
+
 /**
  * @internal
  */
@@ -79,9 +89,11 @@ export function useSelectOptions(
       if (!found && name === currentName) {
         found = true;
       }
+      const field = displayNames.fields.get(name);
       options.push({
         value: name,
         label: name,
+        icon: field ? fieldTypeIcons[field.type] : undefined,
       });
     }
     for (const name of displayNames.raw) {

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -4,6 +4,8 @@ import { getSelectStyles } from './getSelectStyles';
 import { cx } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../../types';
 
 interface SelectMenuProps {
   maxHeight: number;
@@ -49,6 +51,7 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
         {...innerProps}
         aria-label="Select option"
       >
+        {data.icon && <Icon name={data.icon as IconName} className={styles.optionIcon} />}
         {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} />}
         <div className={styles.optionBody}>
           <span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -27,6 +27,9 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
         background: ${theme.colors.action.hover};
       }
     `,
+    optionIcon: css`
+      margin-right: ${theme.spacing(1)};
+    `,
     optionImage: css`
       label: grafana-select-option-image;
       width: 16px;

packages/grafana-ui/src/types/icon.ts

@@ -68,6 +68,7 @@ export const getAvailableIcons = () =>
     'file-copy-alt',
     'filter',
     'folder',
+    'font',
     'fire',
     'folder-open',
     'folder-plus',
@@ -140,6 +141,7 @@ export const getAvailableIcons = () =>
     'table',
     'tag-alt',
     'times',
+    'toggle-on',
     'trash-alt',
     'unlock',
     'upload',