[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.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 { EuiButton, EuiPopover, EuiPopoverTitle } 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 {
   /**
@@ -100,6 +101,8 @@ export function DiscoverField({
     }
   );
 
+  const [infoIsOpen, setOpen] = useState(false);
+
   const toggleDisplay = (f: IndexPatternField) => {
     if (selected) {
       onRemoveField(f.name);
@@ -108,70 +111,105 @@ 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 = (
+      <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>
+    );
+  } else if (field.name !== '_source' && selected) {
+    actionButton = (
+      <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>
+    );
+  }
+
   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`}
-      >
-        <span className="dscSidebarField__fieldIcon">
-          <FieldIcon
-            type={field.type}
-            label={getFieldTypeName(field.type)}
-            scripted={field.scripted}
+      <EuiPopover
+        ownFocus
+        display="block"
+        button={
+          <FieldButton
+            size="s"
+            className="dscSidebarItem"
+            isActive={infoIsOpen}
+            onClick={() => {
+              togglePopover();
+            }}
+            data-test-subj={`field-${field.name}-showDetails`}
+            fieldIcon={dscFieldIcon}
+            fieldAction={actionButton}
+            fieldName={fieldName}
           />
-        </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>
+        }
+        isOpen={infoIsOpen}
+        closePopover={() => setOpen(false)}
+        anchorPosition="rightUp"
+        panelClassName="dscSidebarItem__fieldPopoverPanel"
+      >
+        <EuiPopoverTitle>
+          {' '}
+          {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
+            defaultMessage: 'Top values',
+          })}
+        </EuiPopoverTitle>
+        <DiscoverFieldDetails
+          indexPattern={indexPattern}
+          field={field}
+          details={getDetails(field)}
+          onAddFilter={onAddFilter}
+        />
+      </EuiPopover>
+
       {showDetails && (
         <DiscoverFieldDetails
           indexPattern={indexPattern}

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;
+}

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

@@ -17,13 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import { EuiLink, EuiIconTip, EuiText } from '@elastic/eui';
+import { EuiLink, EuiIconTip, EuiText, EuiPopoverFooter, EuiButton, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { DiscoverFieldBucket } from './discover_field_bucket';
 import { getWarnings } from './lib/get_warnings';
 import { Bucket, FieldDetails } from './types';
 import { getServices } from '../../../kibana_services';
 import { IndexPatternField, IndexPattern } from '../../../../../data/public';
+import './discover_field_details.scss';
 
 interface DiscoverFieldDetailsProps {
   field: IndexPatternField;
@@ -41,62 +42,68 @@ export function DiscoverFieldDetails({
   const warnings = getWarnings(field);
 
   return (
-    <div className="dscFieldDetails">
-      {!details.error && (
-        <EuiText size="xs">
-          <FormattedMessage
-            id="discover.fieldChooser.detailViews.topValuesInRecordsDescription"
-            defaultMessage="Top 5 values in"
-          />{' '}
-          {!indexPattern.metaFields.includes(field.name) && !field.scripted ? (
-            <EuiLink onClick={() => onAddFilter('_exists_', field.name, '+')}>
-              {details.exists}
-            </EuiLink>
-          ) : (
-            <span>{details.exists}</span>
-          )}{' '}
-          / {details.total}{' '}
-          <FormattedMessage
-            id="discover.fieldChooser.detailViews.recordsText"
-            defaultMessage="records"
-          />
-        </EuiText>
-      )}
-      {details.error && <EuiText size="xs">{details.error}</EuiText>}
-      {!details.error && (
-        <div style={{ marginTop: '4px' }}>
-          {details.buckets.map((bucket: Bucket, idx: number) => (
-            <DiscoverFieldBucket
-              key={`bucket${idx}`}
-              bucket={bucket}
-              field={field}
-              onAddFilter={onAddFilter}
-            />
-          ))}
-        </div>
-      )}
+    <>
+      <div className="dscFieldDetails">
+        {details.error && <EuiText size="xs">{details.error}</EuiText>}
+        {!details.error && (
+          <div style={{ marginTop: '4px' }}>
+            {details.buckets.map((bucket: Bucket, idx: number) => (
+              <DiscoverFieldBucket
+                key={`bucket${idx}`}
+                bucket={bucket}
+                field={field}
+                onAddFilter={onAddFilter}
+              />
+            ))}
+          </div>
+        )}
 
-      {details.visualizeUrl && (
-        <>
-          <EuiLink
-            onClick={() => {
-              getServices().core.application.navigateToApp(details.visualizeUrl.app, {
-                path: details.visualizeUrl.path,
-              });
-            }}
-            className="kuiButton kuiButton--secondary kuiButton--small kuiVerticalRhythmSmall"
-            data-test-subj={`fieldVisualize-${field.name}`}
-          >
-            <FormattedMessage
-              id="discover.fieldChooser.detailViews.visualizeLinkText"
-              defaultMessage="Visualize"
-            />
+        {details.visualizeUrl && (
+          <>
+            <EuiSpacer size="xs" />
+            <EuiButton
+              onClick={() => {
+                getServices().core.application.navigateToApp(details.visualizeUrl.app, {
+                  path: details.visualizeUrl.path,
+                });
+              }}
+              size="s"
+              className="dscFieldDetails__visualizeBtn"
+              data-test-subj={`fieldVisualize-${field.name}`}
+            >
+              <FormattedMessage
+                id="discover.fieldChooser.detailViews.visualizeLinkText"
+                defaultMessage="Visualize"
+              />
+            </EuiButton>
             {warnings.length > 0 && (
               <EuiIconTip type="alert" color="warning" content={warnings.join(' ')} />
             )}
-          </EuiLink>
-        </>
+          </>
+        )}
+      </div>
+      {!details.error && (
+        <EuiPopoverFooter>
+          <EuiText size="xs" textAlign="center">
+            <FormattedMessage
+              id="discover.fieldChooser.detailViews.topValuesInRecordsDescription"
+              defaultMessage="Top 5 values in"
+            />{' '}
+            {!indexPattern.metaFields.includes(field.name) && !field.scripted ? (
+              <EuiLink onClick={() => onAddFilter('_exists_', field.name, '+')}>
+                {details.exists}
+              </EuiLink>
+            ) : (
+              <span>{details.exists}</span>
+            )}{' '}
+            / {details.total}{' '}
+            <FormattedMessage
+              id="discover.fieldChooser.detailViews.recordsText"
+              defaultMessage="records"
+            />
+          </EuiText>
+        </EuiPopoverFooter>
       )}
-    </div>
+    </>
   );
 }