[Discover] Create field_button and add popovers to sidebar

src/plugins/discover/public/application/components/sidebar/discover_field.scss

@@ -0,0 +1,4 @@
+.dscSidebarItem__fieldPopoverPanel {
+  min-width: 260px;
+  max-width: 300px;
+}

src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx

@@ -104,9 +104,4 @@ describe('discover sidebar field', function () {
     findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
     expect(props.onRemoveField).toHaveBeenCalledWith('bytes');
   });
-  it('should trigger onShowDetails', function () {
-    const { comp, props } = getComponent();
-    findTestSubject(comp, 'field-bytes-showDetails').simulate('click');
-    expect(props.onShowDetails).toHaveBeenCalledWith(true, props.field);
-  });
 });

src/plugins/discover/public/application/components/sidebar/discover_field.tsx

@@ -16,15 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { EuiButton } from '@elastic/eui';
+import React, { useState } from 'react';
+import { EuiPopover, EuiPopoverTitle, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DiscoverFieldDetails } from './discover_field_details';
-import { FieldIcon } from '../../../../../kibana_react/public';
+import { FieldIcon, FieldButton } from '../../../../../kibana_react/public';
 import { FieldDetails } from './types';
 import { IndexPatternField, IndexPattern } from '../../../../../data/public';
 import { shortenDottedString } from '../../helpers';
 import { getFieldTypeName } from './lib/get_field_type_name';
+import './discover_field.scss';
 
 export interface DiscoverFieldProps {
   /**
@@ -48,14 +49,6 @@ export interface DiscoverFieldProps {
    * @param fieldName
    */
   onRemoveField: (fieldName: string) => void;
-  /**
-   * Callback to hide/show details, buckets of the field
-   */
-  onShowDetails: (show: boolean, field: IndexPatternField) => void;
-  /**
-   * Determines, whether details of the field are displayed
-   */
-  showDetails: boolean;
   /**
    * Retrieve details data for the field
    */
@@ -76,22 +69,14 @@ export function DiscoverField({
   onAddField,
   onRemoveField,
   onAddFilter,
-  onShowDetails,
-  showDetails,
   getDetails,
   selected,
   useShortDots,
 }: DiscoverFieldProps) {
-  const addLabel = i18n.translate('discover.fieldChooser.discoverField.addButtonLabel', {
-    defaultMessage: 'Add',
-  });
   const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', {
     defaultMessage: 'Add {field} to table',
     values: { field: field.name },
   });
-  const removeLabel = i18n.translate('discover.fieldChooser.discoverField.removeButtonLabel', {
-    defaultMessage: 'Remove',
-  });
   const removeLabelAria = i18n.translate(
     'discover.fieldChooser.discoverField.removeButtonAriaLabel',
     {
@@ -100,6 +85,8 @@ export function DiscoverField({
     }
   );
 
+  const [infoIsOpen, setOpen] = useState(false);
+
   const toggleDisplay = (f: IndexPatternField) => {
     if (selected) {
       onRemoveField(f.name);
@@ -108,78 +95,116 @@ export function DiscoverField({
     }
   };
 
+  function togglePopover() {
+    setOpen(!infoIsOpen);
+  }
+
   function wrapOnDot(str?: string) {
     // u200B is a non-width white-space character, which allows
     // the browser to efficiently word-wrap right after the dot
     // without us having to draw a lot of extra DOM elements, etc
     return str ? str.replace(/\./g, '.\u200B') : '';
   }
 
+  const dscFieldIcon = (
+    <FieldIcon type={field.type} label={getFieldTypeName(field.type)} scripted={field.scripted} />
+  );
+
+  const fieldName = (
+    <span
+      data-test-subj={`field-${field.name}`}
+      title={field.name}
+      className="dscSidebarField__name"
+    >
+      {useShortDots ? wrapOnDot(shortenDottedString(field.name)) : wrapOnDot(field.displayName)}
+    </span>
+  );
+
+  let actionButton;
+  if (field.name !== '_source' && !selected) {
+    actionButton = (
+      <EuiToolTip
+        delay="long"
+        content={i18n.translate('discover.fieldChooser.discoverField.addFieldTooltip', {
+          defaultMessage: 'Add field as column',
+        })}
+      >
+        <EuiButtonIcon
+          iconType="plusInCircleFilled"
+          className="dscSidebarItem__action"
+          onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            toggleDisplay(field);
+          }}
+          data-test-subj={`fieldToggle-${field.name}`}
+          aria-label={addLabelAria}
+        />
+      </EuiToolTip>
+    );
+  } else if (field.name !== '_source' && selected) {
+    actionButton = (
+      <EuiToolTip
+        delay="long"
+        content={i18n.translate('discover.fieldChooser.discoverField.removeFieldTooltip', {
+          defaultMessage: 'Remove field from table',
+        })}
+      >
+        <EuiButtonIcon
+          color="danger"
+          iconType="cross"
+          className="dscSidebarItem__action"
+          onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            toggleDisplay(field);
+          }}
+          data-test-subj={`fieldToggle-${field.name}`}
+          aria-label={removeLabelAria}
+        />
+      </EuiToolTip>
+    );
+  }
+
   return (
     <>
-      <div
-        className={`dscSidebarField dscSidebarItem ${showDetails ? 'dscSidebarItem--active' : ''}`}
-        tabIndex={0}
-        onClick={() => onShowDetails(!showDetails, field)}
-        onKeyPress={() => onShowDetails(!showDetails, field)}
-        data-test-subj={`field-${field.name}-showDetails`}
+      <EuiPopover
+        ownFocus
+        display="block"
+        button={
+          <FieldButton
+            size="s"
+            className="dscSidebarItem"
+            isActive={infoIsOpen}
+            onClick={() => {
+              togglePopover();
+            }}
+            buttonProps={{ 'data-test-subj': `field-${field.name}-showDetails` }}
+            fieldIcon={dscFieldIcon}
+            fieldAction={actionButton}
+            fieldName={fieldName}
+          />
+        }
+        isOpen={infoIsOpen}
+        closePopover={() => setOpen(false)}
+        anchorPosition="rightUp"
+        panelClassName="dscSidebarItem__fieldPopoverPanel"
       >
-        <span className="dscSidebarField__fieldIcon">
-          <FieldIcon
-            type={field.type}
-            label={getFieldTypeName(field.type)}
-            scripted={field.scripted}
+        <EuiPopoverTitle>
+          {' '}
+          {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
+            defaultMessage: 'Top 5 values',
+          })}
+        </EuiPopoverTitle>
+        {infoIsOpen && (
+          <DiscoverFieldDetails
+            indexPattern={indexPattern}
+            field={field}
+            details={getDetails(field)}
+            onAddFilter={onAddFilter}
           />
-        </span>
-        <span
-          data-test-subj={`field-${field.name}`}
-          title={field.name}
-          className="dscSidebarField__name"
-        >
-          {useShortDots ? wrapOnDot(shortenDottedString(field.name)) : wrapOnDot(field.displayName)}
-        </span>
-        <span>
-          {field.name !== '_source' && !selected && (
-            <EuiButton
-              fill
-              size="s"
-              className="dscSidebarItem__action"
-              onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                toggleDisplay(field);
-              }}
-              data-test-subj={`fieldToggle-${field.name}`}
-              arial-label={addLabelAria}
-            >
-              {addLabel}
-            </EuiButton>
-          )}
-          {field.name !== '_source' && selected && (
-            <EuiButton
-              color="danger"
-              className="dscSidebarItem__action"
-              onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                toggleDisplay(field);
-              }}
-              data-test-subj={`fieldToggle-${field.name}`}
-              arial-label={removeLabelAria}
-            >
-              {removeLabel}
-            </EuiButton>
-          )}
-        </span>
-      </div>
-      {showDetails && (
-        <DiscoverFieldDetails
-          indexPattern={indexPattern}
-          field={field}
-          details={getDetails(field)}
-          onAddFilter={onAddFilter}
-        />
-      )}
+        )}
+      </EuiPopover>
     </>
   );
 }

src/plugins/discover/public/application/components/sidebar/discover_field_details.scss

@@ -0,0 +1,5 @@
+.dscFieldDetails__visualizeBtn {
+  @include euiFontSizeXS;
+  height: $euiSizeL !important;
+  min-width: $euiSize * 4;
+}