From 9e7ad70e5d8c8f45127f70e58176e866fa5928ab Mon Sep 17 00:00:00 2001
From: nikki-kiga <42276368+nikki-kiga@users.noreply.github.com>
Date: Thu, 2 Sep 2021 17:04:02 -0700
Subject: [PATCH] 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
---
 .../grafana-ui/src/components/MatchersUI/utils.ts  | 14 +++++++++++++-
 .../src/components/Select/SelectMenu.tsx           |  3 +++
 .../src/components/Select/getSelectStyles.ts       |  3 +++
 packages/grafana-ui/src/types/icon.ts              |  2 ++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/MatchersUI/utils.ts b/packages/grafana-ui/src/components/MatchersUI/utils.ts
index abd10f88549..d402e2cf5e8 100644
--- a/packages/grafana-ui/src/components/MatchersUI/utils.ts
+++ b/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) {
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 008d871ba93..628c8660365 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/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>
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index bc60888cc3f..8821b1cc74e 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/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;
diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts
index b2bb10fafd8..404020679fc 100644
--- a/packages/grafana-ui/src/types/icon.ts
+++ b/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',