[Lens] Use accordion menus in field list for available and empty fields

x-pack/plugins/lens/public/indexpattern_datasource/__mocks__/loader.ts

@@ -19,7 +19,6 @@ export function loadInitialState() {
       [restricted.id]: restricted,
     },
     layers: {},
-    showEmptyFields: false,
   };
   return result;
 }

x-pack/plugins/lens/public/indexpattern_datasource/_index.scss

@@ -1,2 +1 @@
-@import 'datapanel';
 @import 'field_item';

x-pack/plugins/lens/public/indexpattern_datasource/_datapanel.scss → x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss

@@ -16,10 +16,6 @@
   line-height: $euiSizeXXL;
 }
 
-.lnsInnerIndexPatternDataPanel__filterWrapper {
-  flex-grow: 0;
-}
-
 /**
  * 1. Don't cut off the shadow of the field items
  */
@@ -41,11 +37,9 @@
   right: $euiSizeXS; /* 1 */
 }
 
-.lnsInnerIndexPatternDataPanel__filterButton {
-  width: 100%;
-  color: $euiColorPrimary;
-  padding-left: $euiSizeS;
-  padding-right: $euiSizeS;
+.lnsInnerIndexPatternDataPanel__fieldItems {
+  // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
+  padding: $euiSizeXS $euiSizeXS 0;
 }
 
 .lnsInnerIndexPatternDataPanel__textField {
@@ -54,7 +48,9 @@
 }
 
 .lnsInnerIndexPatternDataPanel__filterType {
+  font-size: $euiFontSizeS;
   padding: $euiSizeS;
+  border-bottom: 1px solid $euiColorLightestShade;
 }
 
 .lnsInnerIndexPatternDataPanel__filterTypeInner {

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx

@@ -9,19 +9,19 @@ import { createMockedDragDropContext } from './mocks';
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 import { InnerIndexPatternDataPanel, IndexPatternDataPanel, MemoizedDataPanel } from './datapanel';
 import { FieldItem } from './field_item';
+import { NoFieldsCallout } from './no_fields_callout';
 import { act } from 'react-dom/test-utils';
 import { coreMock } from 'src/core/public/mocks';
 import { IndexPatternPrivateState } from './types';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ChangeIndexPattern } from './change_indexpattern';
-import { EuiProgress } from '@elastic/eui';
+import { EuiProgress, EuiLoadingSpinner } from '@elastic/eui';
 import { documentField } from './document_field';
 
 const initialState: IndexPatternPrivateState = {
   indexPatternRefs: [],
   existingFields: {},
   currentIndexPatternId: '1',
-  showEmptyFields: false,
   layers: {
     first: {
       indexPatternId: '1',
@@ -229,8 +229,6 @@ describe('IndexPattern Data Panel', () => {
       },
       query: { query: '', language: 'lucene' },
       filters: [],
-      showEmptyFields: false,
-      onToggleEmptyFields: jest.fn(),
     };
   });
 
@@ -303,7 +301,6 @@ describe('IndexPattern Data Panel', () => {
         state: {
           indexPatternRefs: [],
           existingFields: {},
-          showEmptyFields: false,
           currentIndexPatternId: 'a',
           indexPatterns: {
             a: { id: 'a', title: 'aaa', timeFieldName: 'atime', fields: [] },
@@ -534,42 +531,97 @@ describe('IndexPattern Data Panel', () => {
     });
   });
 
-  describe('while showing empty fields', () => {
-    it('should list all supported fields in the pattern sorted alphabetically', async () => {
-      const wrapper = shallowWithIntl(
-        <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
+  describe('displaying field list', () => {
+    let props: Parameters<typeof InnerIndexPatternDataPanel>[0];
+    beforeEach(() => {
+      props = {
+        ...defaultProps,
+        existingFields: {
+          idx1: {
+            bytes: true,
+            memory: true,
+          },
+        },
+      };
+    });
+    it('should list all supported fields in the pattern sorted alphabetically in groups', async () => {
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
+      expect(wrapper.find(FieldItem).first().prop('field').name).toEqual('Records');
+      expect(
+        wrapper
+          .find('[data-test-subj="lnsIndexPatternAvailableFields"]')
+          .find(FieldItem)
+          .map((fieldItem) => fieldItem.prop('field').name)
+      ).toEqual(['bytes', 'memory']);
+      wrapper
+        .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
+        .find('button')
+        .first()
+        .simulate('click');
+      expect(
+        wrapper
+          .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
+          .find(FieldItem)
+          .map((fieldItem) => fieldItem.prop('field').name)
+      ).toEqual(['client', 'source', 'timestamp']);
+    });
+
+    it('should display NoFieldsCallout when all fields are empty', async () => {
+      const wrapper = mountWithIntl(
+        <InnerIndexPatternDataPanel {...defaultProps} existingFields={{ idx1: {} }} />
       );
+      expect(wrapper.find(NoFieldsCallout).length).toEqual(1);
+      expect(
+        wrapper
+          .find('[data-test-subj="lnsIndexPatternAvailableFields"]')
+          .find(FieldItem)
+          .map((fieldItem) => fieldItem.prop('field').name)
+      ).toEqual([]);
+      wrapper
+        .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
+        .find('button')
+        .first()
+        .simulate('click');
+      expect(
+        wrapper
+          .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
+          .find(FieldItem)
+          .map((fieldItem) => fieldItem.prop('field').name)
+      ).toEqual(['bytes', 'client', 'memory', 'source', 'timestamp']);
+    });
 
-      expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
-        'Records',
-        'bytes',
-        'client',
-        'memory',
-        'source',
-        'timestamp',
-      ]);
+    it('should display spinner for available fields accordion if existing fields are not loaded yet', async () => {
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...defaultProps} />);
+      expect(
+        wrapper.find('[data-test-subj="lnsIndexPatternAvailableFields"]').find(EuiLoadingSpinner)
+          .length
+      ).toEqual(1);
+      wrapper.setProps({ existingFields: { idx1: {} } });
+      expect(wrapper.find(NoFieldsCallout).length).toEqual(1);
     });
 
     it('should filter down by name', () => {
-      const wrapper = shallowWithIntl(
-        <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
-      );
-
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
       act(() => {
         wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
-          target: { value: 'mem' },
+          target: { value: 'me' },
         } as ChangeEvent<HTMLInputElement>);
       });
 
+      wrapper
+        .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
+        .find('button')
+        .first()
+        .simulate('click');
+
       expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
         'memory',
+        'timestamp',
       ]);
     });
 
     it('should filter down by type', () => {
-      const wrapper = mountWithIntl(
-        <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
-      );
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
 
       wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');
 
@@ -581,112 +633,55 @@ describe('IndexPattern Data Panel', () => {
       ]);
     });
 
-    it('should toggle type if clicked again', () => {
-      const wrapper = mountWithIntl(
-        <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
-      );
+    it('should display no fields in groups when filtered by type Record', () => {
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
 
       wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');
 
-      wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
-      wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
+      wrapper.find('[data-test-subj="typeFilter-document"]').first().simulate('click');
 
       expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
         'Records',
-        'bytes',
-        'client',
-        'memory',
-        'source',
-        'timestamp',
       ]);
+      expect(wrapper.find(NoFieldsCallout).length).toEqual(2);
     });
 
-    it('should filter down by type and by name', () => {
-      const wrapper = mountWithIntl(
-        <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
-      );
-
-      act(() => {
-        wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
-          target: { value: 'mem' },
-        } as ChangeEvent<HTMLInputElement>);
-      });
-
+    it('should toggle type if clicked again', () => {
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
       wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');
 
       wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
-
-      expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
-        'memory',
-      ]);
-    });
-  });
-
-  describe('filtering out empty fields', () => {
-    let emptyFieldsTestProps: typeof defaultProps;
-
-    beforeEach(() => {
-      emptyFieldsTestProps = {
-        ...defaultProps,
-        indexPatterns: {
-          ...defaultProps.indexPatterns,
-          '1': {
-            ...defaultProps.indexPatterns['1'],
-            fields: defaultProps.indexPatterns['1'].fields.map((field) => ({
-              ...field,
-              exists: field.type === 'number',
-            })),
-          },
-        },
-        onToggleEmptyFields: jest.fn(),
-      };
-    });
-
-    it('should list all supported fields in the pattern sorted alphabetically', async () => {
-      const props = {
-        ...emptyFieldsTestProps,
-        existingFields: {
-          idx1: {
-            bytes: true,
-            memory: true,
-          },
-        },
-      };
-      const wrapper = shallowWithIntl(<InnerIndexPatternDataPanel {...props} />);
-
+      wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
+      wrapper
+        .find('[data-test-subj="lnsIndexPatternEmptyFields"]')
+        .find('button')
+        .first()
+        .simulate('click');
       expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
         'Records',
         'bytes',
         'memory',
+        'client',
+        'source',
+        'timestamp',
       ]);
     });
 
-    it('should filter down by name', () => {
-      const wrapper = shallowWithIntl(
-        <InnerIndexPatternDataPanel {...emptyFieldsTestProps} showEmptyFields={true} />
-      );
-
+    it('should filter down by type and by name', () => {
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
       act(() => {
         wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
-          target: { value: 'mem' },
+          target: { value: 'me' },
         } as ChangeEvent<HTMLInputElement>);
       });
 
-      expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
-        'memory',
-      ]);
-    });
-
-    it('should allow removing the filter for data', () => {
-      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...emptyFieldsTestProps} />);
-
       wrapper.find('[data-test-subj="lnsIndexPatternFiltersToggle"]').first().simulate('click');
 
-      wrapper.find('[data-test-subj="lnsEmptyFilter"]').first().prop('onChange')!(
-        {} as ChangeEvent
-      );
+      wrapper.find('[data-test-subj="typeFilter-number"]').first().simulate('click');
 
-      expect(emptyFieldsTestProps.onToggleEmptyFields).toHaveBeenCalled();
+      expect(wrapper.find(FieldItem).map((fieldItem) => fieldItem.prop('field').name)).toEqual([
+        'memory',
+      ]);
     });
   });
 });