[7.x] [Discover] Make _source field not clickable (#78698)

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

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}

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>
  );