[Discover] Add field types in-product help

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

@@ -2,6 +2,10 @@
   padding: $euiSizeM;
 }
 
-.dscFieldSearch__filterWrapper {
-  width: 100%;
+.dscFieldTypesHelp__popover {
+  flex-grow: 0;
 }
+
+.dscFieldTypesHelp__button {
+  @include euiFocusBackground($euiColorDarkShade);
+}

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

@@ -11,6 +11,7 @@ import './discover_field_search.scss';
 import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
+  EuiBasicTable,
   EuiFieldSearch,
   EuiFilterGroup,
   EuiFlexGroup,
@@ -27,6 +28,8 @@ import {
   EuiOutsideClickDetector,
   EuiFilterButton,
   EuiSpacer,
+  EuiIcon,
+  EuiToken,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -80,13 +83,71 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
 
   const [activeFiltersCount, setActiveFiltersCount] = useState(0);
   const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
   const [values, setValues] = useState<State>({
     searchable: 'any',
     aggregatable: 'any',
     type: 'any',
     missing: true,
   });
 
+  const onHelpClick = () => {
+    setIsHelpOpen((isHelpOpen) => !isHelpOpen);
+  };
+  const closeHelp = () => setIsHelpOpen(false);
+
+  const columnsSidebar = [
+    {
+      field: 'type',
+      name: 'Icon',
+      width: '40px',
+      render: (name) => <EuiToken iconType={name} />,
+    },
+    {
+      field: 'dataType',
+      name: 'Data type',
+      width: '70px',
+    },
+    {
+      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 filterBtnAriaLabel = isPopoverOpen
     ? i18n.translate('discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
         defaultMessage: 'Hide field filter settings',
@@ -257,6 +318,17 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
     </div>
   );
 
+  const helpButton = (
+    <EuiFilterButton
+      grow={false}
+      onClick={onHelpClick}
+      className="dscFieldTypesHelp__button"
+      aria-label="Filter type help"
+    >
+      <EuiIcon type="questionInCircle" title="Filter type help" />
+    </EuiFilterButton>
+  );
+
   return (
     <React.Fragment>
       <EuiFlexGroup responsive={false} gutterSize={'s'}>
@@ -272,30 +344,51 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="xs" />
-      <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
-        <EuiFilterGroup className="dscFieldSearch__filterWrapper">
+      <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}
+            button={helpButton}
+            isOpen={isHelpOpen}
+            panelPaddingSize="s"
+            className="dscFieldTypesHelp__popover"
+            closePopover={closeHelp}
           >
-            <EuiPopoverTitle paddingSize="s">
-              {i18n.translate('discover.fieldChooser.filter.filterByTypeLabel', {
-                defaultMessage: 'Filter by type',
-              })}
-            </EuiPopoverTitle>
-            {selectionPanel}
-            {footer()}
+            <EuiPopoverTitle paddingSize="s">Field types</EuiPopoverTitle>
+            <EuiBasicTable
+              style={{ width: 350 }}
+              tableCaption="Description of field types"
+              items={items}
+              compressed={true}
+              rowHeader="firstName"
+              columns={columnsSidebar}
+            />
           </EuiPopover>
         </EuiFilterGroup>
-      </EuiOutsideClickDetector>
+      </EuiFlexItem>
     </React.Fragment>
   );
 }

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

@@ -327,7 +327,7 @@ export function DiscoverSidebarComponent({
         responsive={false}
       >
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
+          <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="s">
             <EuiFlexItem grow={true} className="dscSidebar__indexPatternSwitcher">
               <DiscoverIndexPattern
                 selectedIndexPattern={selectedIndexPattern}