[Lens] Optimize dimension panel flow (#41114)

elastic · Jul 18, 2019 · 9581e4e · 9581e4e
1 parent 292aa40
commit 9581e4e
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/...k/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx b/...k/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
@@ -542,6 +542,41 @@ describe('IndexPatternDimensionPanel', () => {
     });
   });
 
+  it('should select operation directly if only one field is possible', () => {
+    const initialState = {
+      ...defaultProps.state,
+      indexPatterns: {
+        1: {
+          ...defaultProps.state.indexPatterns['1'],
+          fields: defaultProps.state.indexPatterns['1'].fields.filter(
+            field => field.name !== 'memory'
+          ),
+        },
+      },
+    };
+
+    wrapper = mount(
+      <IndexPatternDimensionPanel {...defaultProps} state={initialState} columnId={'col2'} />
+    );
+
+    openPopover();
+
+    wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+
+    expect(setState).toHaveBeenCalledWith({
+      ...initialState,
+      columns: {
+        ...state.columns,
+        col2: expect.objectContaining({
+          sourceField: 'bytes',
+          operationType: 'avg',
+          // Other parts of this don't matter for this test
+        }),
+      },
+      columnOrder: ['col1', 'col2'],
+    });
+  });
+
   it('should indicate compatible fields when selecting the operation first', () => {
     wrapper = mount(<IndexPatternDimensionPanel {...defaultProps} columnId={'col2'} />);
 

diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
@@ -88,7 +88,19 @@ export function PopoverEditor(props: PopoverEditorProps) {
           }),
           'data-test-subj': `lns-indexPatternDimension-${operationType}`,
           onClick() {
-            if (!selectedColumn || !compatibleWithCurrentField) {
+            if (!selectedColumn) {
+              const possibleColumns = _.uniq(
+                filteredColumns.filter(col => col.operationType === operationType),
+                'sourceField'
+              );
+              if (possibleColumns.length === 1) {
+                setState(changeColumn(state, columnId, possibleColumns[0]));
+              } else {
+                setInvalidOperationType(operationType);
+              }
+              return;
+            }
+            if (!compatibleWithCurrentField) {
               setInvalidOperationType(operationType);
               return;
             }
@@ -179,6 +191,16 @@ export function PopoverEditor(props: PopoverEditorProps) {
                   </p>
                 </EuiCallOut>
               )}
+              {incompatibleSelectedOperationType && !selectedColumn && (
+                <EuiCallOut
+                  size="s"
+                  data-test-subj="indexPattern-fieldless-operation"
+                  title={i18n.translate('xpack.lens.indexPattern.fieldlessOperationLabel', {
+                    defaultMessage: 'Choose a field the operation is applied to',
+                  })}
+                  iconType="alert"
+                ></EuiCallOut>
+              )}
               {!incompatibleSelectedOperationType && ParamEditor && (
                 <ParamEditor
                   state={state}