clean up table and add more field types

src/plugins/discover/public/application/main/components/sidebar/discover_field_search.tsx

@@ -25,13 +25,13 @@ import {
   EuiForm,
   EuiFormRow,
   EuiButtonGroup,
-  EuiOutsideClickDetector,
   EuiFilterButton,
   EuiSpacer,
   EuiIcon,
-  EuiToken,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { FieldIcon } from '@kbn/react-field';
+import { getFieldTypeDescription } from './lib/get_field_type_description';
 
 export interface State {
   searchable: string;
@@ -97,57 +97,55 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
   const closeHelp = () => setIsHelpOpen(false);
 
   const columnsSidebar = [
-    {
-      field: 'type',
-      name: 'Icon',
-      width: '40px',
-      render: (name) => <EuiToken iconType={name} />,
-    },
     {
       field: 'dataType',
       name: 'Data type',
-      width: '70px',
+      width: '110px',
+      render: (name) => (
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <FieldIcon type={name} />
+          </EuiFlexItem>
+          <EuiFlexItem>{name}</EuiFlexItem>
+        </EuiFlexGroup>
+      ),
     },
     {
       field: 'description',
       name: 'Description',
     },
   ];
 
-  const items = [
-    {
-      id: 0,
-      dataType: 'text',
-      type: 'tokenString',
-      description: 'Full text such as the body of an email or a product description.',
-    },
-    {
-      id: 1,
-      dataType: 'number',
-      type: 'tokenNumber',
-      description: 'Long, integer, short, byte, double, and float values.',
-    },
-    {
-      id: 2,
-      dataType: 'keyword',
-      type: 'tokenKeyword',
-      description:
-        'Structured content such as an ID, email address, hostname, status code, or tag.',
-    },
-    {
-      id: 3,
-      dataType: 'date',
-      type: 'tokenDate',
-      description: 'A date string or the number of seconds or milliseconds since 1/1/1970.',
-    },
-    {
-      id: 4,
-      dataType: 'geo_point',
-      type: 'tokenGeo',
-      description: 'Latitude and longitude points.',
-    },
+  const items = [];
+
+  const discoverFieldTypes = [
+    'boolean',
+    'conflict',
+    'date',
+    'date_range',
+    'geo_point',
+    'geo_shape',
+    'histogram',
+    'ip',
+    'ip_range',
+    'keyword',
+    'murmur3',
+    'number',
+    'number_range',
+    '_source',
+    'string',
+    'nested',
+    'version',
   ];
 
+  discoverFieldTypes.forEach((element, index) =>
+    items.push({
+      id: index,
+      dataType: element,
+      description: getFieldTypeDescription(element),
+    })
+  );
+
   const filterBtnAriaLabel = isPopoverOpen
     ? i18n.translate('discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
         defaultMessage: 'Hide field filter settings',
@@ -346,28 +344,26 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
       <EuiSpacer size="xs" />
       <EuiFlexItem>
         <EuiFilterGroup fullWidth>
-          <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
-            <EuiPopover
-              id="dataPanelTypeFilter"
-              panelClassName="euiFilterGroup__popoverPanel"
-              panelPaddingSize="none"
-              anchorPosition="rightUp"
-              display="block"
-              isOpen={isPopoverOpen}
-              closePopover={() => {
-                setPopoverOpen(false);
-              }}
-              button={buttonContent}
-            >
-              <EuiPopoverTitle paddingSize="s">
-                {i18n.translate('discover.fieldChooser.filter.filterByTypeLabel', {
-                  defaultMessage: 'Filter by type',
-                })}
-              </EuiPopoverTitle>
-              {selectionPanel}
-              {footer()}
-            </EuiPopover>
-          </EuiOutsideClickDetector>
+          <EuiPopover
+            id="dataPanelTypeFilter"
+            panelClassName="euiFilterGroup__popoverPanel"
+            panelPaddingSize="none"
+            anchorPosition="rightUp"
+            display="block"
+            isOpen={isPopoverOpen}
+            closePopover={() => {
+              setPopoverOpen(false);
+            }}
+            button={buttonContent}
+          >
+            <EuiPopoverTitle paddingSize="s">
+              {i18n.translate('discover.fieldChooser.filter.filterByTypeLabel', {
+                defaultMessage: 'Filter by type',
+              })}
+            </EuiPopoverTitle>
+            {selectionPanel}
+            {footer()}
+          </EuiPopover>
           <EuiPopover
             anchorPosition="rightUp"
             display="block"

src/plugins/discover/public/application/main/components/sidebar/lib/get_field_type_description.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export function getFieldTypeDescription(type: string) {
+  switch (type) {
+    case 'boolean':
+      return i18n.translate('discover.fieldNameDescription.booleanField', {
+        defaultMessage: 'Boolean field',
+      });
+    case 'conflict':
+      return i18n.translate('discover.fieldNameDescription.conflictField', {
+        defaultMessage: 'Conflicting field',
+      });
+    case 'date':
+      return i18n.translate('discover.fieldNameDescription.dateField', {
+        defaultMessage: 'A date string or the number of seconds or milliseconds since 1/1/1970.',
+      });
+    case 'geo_point':
+      return i18n.translate('discover.fieldNameDescription.geoPointField', {
+        defaultMessage: 'Latitude and longitude points.',
+      });
+    case 'geo_shape':
+      return i18n.translate('discover.fieldNameDescription.geoShapeField', {
+        defaultMessage: 'Geo shape field',
+      });
+    case 'ip':
+      return i18n.translate('discover.fieldNameDescription.ipAddressField', {
+        defaultMessage: 'IP address field',
+      });
+    case 'murmur3':
+      return i18n.translate('discover.fieldNameDescription.murmur3Field', {
+        defaultMessage: 'Murmur3 field',
+      });
+    case 'number':
+      return i18n.translate('discover.fieldNameDescription.numberField', {
+        defaultMessage: 'Long, integer, short, byte, double, and float values.',
+      });
+    case 'source':
+      // Note that this type is currently not provided, type for _source is undefined
+      return i18n.translate('discover.fieldNameDescription.sourceField', {
+        defaultMessage: 'Source field',
+      });
+    case 'string':
+      return i18n.translate('discover.fieldNameDescription.stringField', {
+        defaultMessage: 'Full text such as the body of an email or a product description.',
+      });
+    case 'text':
+      return i18n.translate('discover.fieldNameDescription.textField', {
+        defaultMessage: 'Text field',
+      });
+    case 'keyword':
+      return i18n.translate('discover.fieldNameDescription.keywordField', {
+        defaultMessage:
+          'Structured content such as an ID, email address, hostname, status code, or tag.',
+      });
+
+    case 'nested':
+      return i18n.translate('discover.fieldNameDescription.nestedField', {
+        defaultMessage: 'Nested field',
+      });
+    case 'version':
+      return i18n.translate('discover.fieldNameDescription.versionField', {
+        defaultMessage: 'Version field',
+      });
+    default:
+      return i18n.translate('discover.fieldNameDescription.unknownField', {
+        defaultMessage: 'Unknown field',
+      });
+  }
+}