[Discover] Make _source field not clickable (#78698) (#78793)

elastic · Sep 29, 2020 · 9aee232 · 9aee232
1 parent 73dcb9c
commit 9aee232
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 49 deletions.
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
@@ -51,7 +51,17 @@ jest.mock('../../../kibana_services', () => ({
   }),
 }));
 
-function getComponent(selected = false, showDetails = false, useShortDots = false) {
+function getComponent({
+  selected = false,
+  showDetails = false,
+  useShortDots = false,
+  field,
+}: {
+  selected?: boolean;
+  showDetails?: boolean;
+  useShortDots?: boolean;
+  field?: IndexPatternField;
+}) {
   const indexPattern = getStubIndexPattern(
     'logstash-*',
     (cfg: any) => cfg,
@@ -60,23 +70,25 @@ function getComponent(selected = false, showDetails = false, useShortDots = fals
     coreMock.createSetup()
   );
 
-  const field = new IndexPatternField(
-    {
-      name: 'bytes',
-      type: 'number',
-      esTypes: ['long'],
-      count: 10,
-      scripted: false,
-      searchable: true,
-      aggregatable: true,
-      readFromDocValues: true,
-    },
-    'bytes'
-  );
+  const finalField =
+    field ??
+    new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
 
   const props = {
     indexPattern,
-    field,
+    field: finalField,
     getDetails: jest.fn(() => ({ buckets: [], error: '', exists: 1, total: true, columns: [] })),
     onAddFilter: jest.fn(),
     onAddField: jest.fn(),
@@ -91,18 +103,37 @@ function getComponent(selected = false, showDetails = false, useShortDots = fals
 
 describe('discover sidebar field', function () {
   it('should allow selecting fields', function () {
-    const { comp, props } = getComponent();
+    const { comp, props } = getComponent({});
     findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
     expect(props.onAddField).toHaveBeenCalledWith('bytes');
   });
   it('should allow deselecting fields', function () {
-    const { comp, props } = getComponent(true);
+    const { comp, props } = getComponent({ selected: true });
     findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
     expect(props.onRemoveField).toHaveBeenCalledWith('bytes');
   });
   it('should trigger getDetails', function () {
-    const { comp, props } = getComponent(true);
+    const { comp, props } = getComponent({ selected: true });
     findTestSubject(comp, 'field-bytes-showDetails').simulate('click');
     expect(props.getDetails).toHaveBeenCalledWith(props.field);
   });
+  it('should not allow clicking on _source', function () {
+    const field = new IndexPatternField(
+      {
+        name: '_source',
+        type: '_source',
+        esTypes: ['_source'],
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      '_source'
+    );
+    const { comp, props } = getComponent({
+      selected: true,
+      field,
+    });
+    findTestSubject(comp, 'field-_source-showDetails').simulate('click');
+    expect(props.getDetails).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -172,6 +172,19 @@ export function DiscoverField({
     );
   }
 
+  if (field.type === '_source') {
+    return (
+      <FieldButton
+        size="s"
+        className="dscSidebarItem"
+        dataTestSubj={`field-${field.name}-showDetails`}
+        fieldIcon={dscFieldIcon}
+        fieldAction={actionButton}
+        fieldName={fieldName}
+      />
+    );
+  }
+
   return (
     <EuiPopover
       ownFocus
@@ -184,7 +197,7 @@ export function DiscoverField({
           onClick={() => {
             togglePopover();
           }}
-          buttonProps={{ 'data-test-subj': `field-${field.name}-showDetails` }}
+          dataTestSubj={`field-${field.name}-showDetails`}
           fieldIcon={dscFieldIcon}
           fieldAction={actionButton}
           fieldName={fieldName}

diff --git a/src/plugins/kibana_react/public/field_button/field_button.tsx b/src/plugins/kibana_react/public/field_button/field_button.tsx
@@ -19,8 +19,7 @@
 
 import './field_button.scss';
 import classNames from 'classnames';
-import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { CommonProps } from '@elastic/eui';
+import React, { ReactNode, HTMLAttributes } from 'react';
 
 export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -54,13 +53,10 @@ export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
   size?: ButtonSize;
   className?: string;
   /**
-   * The component always renders a `<button>` and therefore will always need an `onClick`
+   * The component will render a `<button>` when provided an `onClick`
    */
-  onClick: () => void;
-  /**
-   * Pass more button props to the actual `<button>` element
-   */
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement> & CommonProps;
+  onClick?: () => void;
+  dataTestSubj?: string;
 }
 
 const sizeToClassNameMap = {
@@ -82,8 +78,7 @@ export function FieldButton({
   className,
   isDraggable = false,
   onClick,
-  buttonProps,
-  ...rest
+  dataTestSubj,
 }: FieldButtonProps) {
   const classes = classNames(
     'kbnFieldButton',
@@ -93,27 +88,31 @@ export function FieldButton({
     className
   );
 
-  const buttonClasses = classNames(
-    'kbn-resetFocusState kbnFieldButton__button',
-    buttonProps && buttonProps.className
-  );
-
   return (
-    <div className={classes} {...rest}>
-      <button
-        onClick={(e) => {
-          if (e.type === 'click') {
-            e.currentTarget.focus();
-          }
-          onClick();
-        }}
-        {...buttonProps}
-        className={buttonClasses}
-      >
-        {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
-        {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
-        {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
-      </button>
+    <div className={classes}>
+      {onClick ? (
+        <button
+          onClick={(e) => {
+            if (e.type === 'click') {
+              e.currentTarget.focus();
+            }
+            onClick();
+          }}
+          data-test-subj={dataTestSubj}
+          className={'kbn-resetFocusState kbnFieldButton__button'}
+        >
+          {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
+          {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
+          {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+        </button>
+      ) : (
+        <div className={'kbn-resetFocusState kbnFieldButton__button'} data-test-subj={dataTestSubj}>
+          {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
+          {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
+          {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+        </div>
+      )}
+
       {fieldAction && <div className="kbnFieldButton__fieldAction">{fieldAction}</div>}
     </div>
   );