[Discover/Lens] Unify field popover (#141787)

* [UnifiedFieldList] Add a new FieldPopover component * [Discover] Integrate FieldPopover into Discover page * [Discover] Integrate FieldPopover into Lens page * [Discover] Update for tests * [Discover] Add "Add field as column" action to Discover * [Discover] Deprecate i18n keys * [Discover] Update tests * [Discover] Fix field type * [Discover] Fix sidebar pagination when lazy js modules are being loaded * [Discover] Extract new FieldVisualizeButton * [Discover] Integrate it into Lens * [Discover] Fix checks * [Discover] Add popover tests * [Discover] Add popover header tests * [Discover] Add field visualize button tests * [Discover] Update docs * [Discover] Update tests * [Discover] Fix button state on rerender * [Discover] Reorganize components * [Discover] Update tests * Merge remote-tracking branch 'upstream/main' into 140363-unified-popover # Conflicts: # x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx * [Discover] Fix for ad hoc data views * [Discover] Fix multi fields toggle action * [Discover] Fix display name in the popover * [Discover] A fix for tests * [Discover] Update the icon to plusInCircle * [UnifiedFieldList] Remove redundant styles Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]>
elastic · Oct 10, 2022 · 91dbdc7 · 91dbdc7
1 parent d7924aa
commit 91dbdc7
Show file tree

Hide file tree

Showing 40 changed files with 1,265 additions and 626 deletions.
diff --git a/src/plugins/discover/public/application/main/components/chart/discover_chart.tsx b/src/plugins/discover/public/application/main/components/chart/discover_chart.tsx
@@ -18,16 +18,18 @@ import {
 import { i18n } from '@kbn/i18n';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { SavedSearch } from '@kbn/saved-search-plugin/public';
+import {
+  getVisualizeInformation,
+  triggerVisualizeActions,
+} from '@kbn/unified-field-list-plugin/public';
 import { HitsCounter } from '../hits_counter';
 import { GetStateReturn } from '../../services/discover_state';
 import { DiscoverHistogram } from './histogram';
 import { DataCharts$, DataTotalHits$ } from '../../hooks/use_saved_search';
 import { useChartPanels } from './use_chart_panels';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
-import {
-  getVisualizeInformation,
-  triggerVisualizeActions,
-} from '../sidebar/lib/visualize_trigger_utils';
+import { getUiActions } from '../../../../kibana_services';
+import { PLUGIN_ID } from '../../../../../common';
 
 const DiscoverHistogramMemoized = memo(DiscoverHistogram);
 export const CHART_HIDDEN_KEY = 'discover:chartHidden';
@@ -72,7 +74,13 @@ export function DiscoverChart({
 
   useEffect(() => {
     if (!timeField) return;
-    getVisualizeInformation(timeField, dataView, savedSearch.columns || []).then((info) => {
+    getVisualizeInformation(
+      getUiActions(),
+      timeField,
+      dataView,
+      savedSearch.columns || [],
+      []
+    ).then((info) => {
       setCanVisualize(Boolean(info));
     });
   }, [dataView, savedSearch.columns, timeField]);
@@ -81,7 +89,13 @@ export function DiscoverChart({
     if (!timeField) {
       return;
     }
-    triggerVisualizeActions(timeField, savedSearch.columns || [], dataView);
+    triggerVisualizeActions(
+      getUiActions(),
+      timeField,
+      savedSearch.columns || [],
+      PLUGIN_ID,
+      dataView
+    );
   }, [dataView, savedSearch.columns, timeField]);
 
   const onShowChartOptions = useCallback(() => {

diff --git a/...blic/application/main/components/sidebar/__stories__/discover_field_visualize.stories.tsx b/...blic/application/main/components/sidebar/__stories__/discover_field_visualize.stories.tsx
diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_field.scss b/src/plugins/discover/public/application/main/components/sidebar/discover_field.scss
@@ -1,8 +1,3 @@
-.dscSidebarItem__fieldPopoverPanel {
-  min-width: $euiSizeXXL * 6.5;
-  max-width: $euiSizeXXL * 7.5;
-}
-
 .dscSidebarItem--multi {
   .kbnFieldButton__button {
     padding-left: 0;

diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_field.test.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_field.test.tsx
@@ -8,7 +8,6 @@
 
 import { act } from 'react-dom/test-utils';
 import { EuiPopover, EuiProgress, EuiButtonIcon } from '@elastic/eui';
-import { ReactWrapper } from 'enzyme';
 import React from 'react';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
@@ -85,6 +84,7 @@ async function getComponent({
     getDetails: jest.fn(() => ({ buckets: [], error: '', exists: 1, total: 2 })),
     ...(onAddFilterExists && { onAddFilter: jest.fn() }),
     onAddField: jest.fn(),
+    onEditField: jest.fn(),
     onRemoveField: jest.fn(),
     showFieldStats,
     selected,
@@ -140,6 +140,9 @@ async function getComponent({
       <DiscoverField {...props} />
     </KibanaContextProvider>
   );
+  // wait for lazy modules
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await comp.update();
   return { comp, props };
 }
 
@@ -233,29 +236,100 @@ describe('discover sidebar field', function () {
       aggregatable: true,
       searchable: true,
     });
-    let comp: ReactWrapper;
+
+    const { comp } = await getComponent({ showFieldStats: true, field, onAddFilterExists: true });
 
     await act(async () => {
-      const result = await getComponent({ showFieldStats: true, field, onAddFilterExists: true });
-      comp = result.comp;
+      const fieldItem = findTestSubject(comp, 'field-machine.os.raw-showDetails');
+      await fieldItem.simulate('click');
       await comp.update();
     });
 
+    await comp.update();
+
+    expect(comp.find(EuiPopover).prop('isOpen')).toBe(true);
+    expect(findTestSubject(comp, 'dscFieldStats-title').text()).toBe('Top values');
+    expect(findTestSubject(comp, 'dscFieldStats-topValues-bucket')).toHaveLength(2);
+    expect(
+      findTestSubject(comp, 'dscFieldStats-topValues-formattedFieldValue').first().text()
+    ).toBe('osx');
+    expect(comp.find(EuiProgress)).toHaveLength(2);
+    expect(findTestSubject(comp, 'dscFieldStats-topValues').find(EuiButtonIcon)).toHaveLength(4);
+  });
+  it('should include popover actions', async function () {
+    const field = new DataViewField({
+      name: 'extension.keyword',
+      type: 'string',
+      esTypes: ['keyword'],
+      aggregatable: true,
+      searchable: true,
+    });
+
+    const { comp, props } = await getComponent({ field, onAddFilterExists: true });
+
     await act(async () => {
-      const fieldItem = findTestSubject(comp, 'field-machine.os.raw-showDetails');
+      const fieldItem = findTestSubject(comp, 'field-extension.keyword-showDetails');
       await fieldItem.simulate('click');
       await comp.update();
     });
 
-    await comp!.update();
+    await comp.update();
 
-    expect(comp!.find(EuiPopover).prop('isOpen')).toBe(true);
-    expect(findTestSubject(comp!, 'dscFieldStats-title').text()).toBe('Top values');
-    expect(findTestSubject(comp!, 'dscFieldStats-topValues-bucket')).toHaveLength(2);
+    expect(comp.find(EuiPopover).prop('isOpen')).toBe(true);
     expect(
-      findTestSubject(comp!, 'dscFieldStats-topValues-formattedFieldValue').first().text()
-    ).toBe('osx');
-    expect(comp!.find(EuiProgress)).toHaveLength(2);
-    expect(findTestSubject(comp!, 'dscFieldStats-topValues').find(EuiButtonIcon)).toHaveLength(4);
+      comp.find('[data-test-subj="fieldPopoverHeader_addField-extension.keyword"]').exists()
+    ).toBeTruthy();
+    expect(
+      comp
+        .find('[data-test-subj="discoverFieldListPanelAddExistFilter-extension.keyword"]')
+        .exists()
+    ).toBeTruthy();
+    expect(
+      comp.find('[data-test-subj="discoverFieldListPanelEdit-extension.keyword"]').exists()
+    ).toBeTruthy();
+    expect(
+      comp.find('[data-test-subj="discoverFieldListPanelDelete-extension.keyword"]').exists()
+    ).toBeFalsy();
+
+    await act(async () => {
+      const fieldItem = findTestSubject(comp, 'fieldPopoverHeader_addField-extension.keyword');
+      await fieldItem.simulate('click');
+      await comp.update();
+    });
+
+    expect(props.onAddField).toHaveBeenCalledWith('extension.keyword');
+
+    await comp.update();
+
+    expect(comp.find(EuiPopover).prop('isOpen')).toBe(false);
+  });
+
+  it('should not include + action for selected fields', async function () {
+    const field = new DataViewField({
+      name: 'extension.keyword',
+      type: 'string',
+      esTypes: ['keyword'],
+      aggregatable: true,
+      searchable: true,
+    });
+
+    const { comp } = await getComponent({
+      field,
+      onAddFilterExists: true,
+      selected: true,
+    });
+
+    await act(async () => {
+      const fieldItem = findTestSubject(comp, 'field-extension.keyword-showDetails');
+      await fieldItem.simulate('click');
+      await comp.update();
+    });
+
+    await comp.update();
+
+    expect(comp.find(EuiPopover).prop('isOpen')).toBe(true);
+    expect(
+      comp.find('[data-test-subj="fieldPopoverHeader_addField-extension.keyword"]').exists()
+    ).toBeFalsy();
   });
 });