[Lens] Runtime field editor (#91882)

Author: flash1293

api_docs/lens.json

@@ -330,7 +330,7 @@
             "description": [],
             "source": {
               "path": "x-pack/plugins/lens/public/indexpattern_datasource/types.ts",
-              "lineNumber": 72
+              "lineNumber": 73
             },
             "signature": [
               "Record<string, Pick<",
@@ -347,7 +347,7 @@
         ],
         "source": {
           "path": "x-pack/plugins/lens/public/indexpattern_datasource/types.ts",
-          "lineNumber": 71
+          "lineNumber": 72
         },
         "initialIsOpen": false
       },
@@ -483,7 +483,7 @@
             ],
             "source": {
               "path": "x-pack/plugins/lens/public/plugin.ts",
-              "lineNumber": 88
+              "lineNumber": 90
             },
             "signature": [
               "React.ComponentType<",
@@ -509,7 +509,7 @@
             ],
             "source": {
               "path": "x-pack/plugins/lens/public/plugin.ts",
-              "lineNumber": 97
+              "lineNumber": 99
             },
             "signature": [
               "(input: ",
@@ -533,7 +533,7 @@
             ],
             "source": {
               "path": "x-pack/plugins/lens/public/plugin.ts",
-              "lineNumber": 101
+              "lineNumber": 103
             },
             "signature": [
               "() => boolean"
@@ -542,7 +542,7 @@
         ],
         "source": {
           "path": "x-pack/plugins/lens/public/plugin.ts",
-          "lineNumber": 79
+          "lineNumber": 81
         },
         "initialIsOpen": false
       },
@@ -1553,7 +1553,7 @@
         "description": [],
         "source": {
           "path": "x-pack/plugins/lens/public/indexpattern_datasource/types.ts",
-          "lineNumber": 75
+          "lineNumber": 76
         },
         "signature": [
           "{ columns: Record<string, IndexPatternColumn>; columnOrder: string[]; incompleteColumns?: Record<string, IncompleteColumn> | undefined; }"

src/plugins/index_pattern_field_editor/public/components/field_editor/form_fields/script_field.tsx

@@ -91,7 +91,10 @@ export const ScriptField = React.memo(({ existingConcreteFields, links, syntaxEr
                 const painlessSyntaxErrors = PainlessLang.getSyntaxErrors();
                 // It is possible for there to be more than one editor in a view,
                 // so we need to get the syntax errors based on the editor (aka model) ID
-                const editorHasSyntaxErrors = editorId && painlessSyntaxErrors[editorId].length > 0;
+                const editorHasSyntaxErrors =
+                  editorId &&
+                  painlessSyntaxErrors[editorId] &&
+                  painlessSyntaxErrors[editorId].length > 0;
 
                 if (editorHasSyntaxErrors) {
                   return resolve({

test/functional/services/field_editor.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export function FieldEditorProvider({ getService }: FtrProviderContext) {
+  const browser = getService('browser');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+
+  class FieldEditor {
+    public async setName(name: string) {
+      await testSubjects.setValue('nameField > input', name);
+    }
+    public async enableValue() {
+      await testSubjects.setEuiSwitch('valueRow > toggle', 'check');
+    }
+    public async disableValue() {
+      await testSubjects.setEuiSwitch('valueRow > toggle', 'uncheck');
+    }
+    public async typeScript(script: string) {
+      const editor = await (await testSubjects.find('valueRow')).findByClassName(
+        'react-monaco-editor-container'
+      );
+      const textarea = await editor.findByClassName('monaco-mouse-cursor-text');
+
+      await textarea.click();
+      await browser.pressKeys(script);
+    }
+    public async save() {
+      await retry.try(async () => {
+        await testSubjects.click('fieldSaveButton');
+        await testSubjects.missingOrFail('fieldSaveButton', { timeout: 2000 });
+      });
+    }
+  }
+
+  return new FieldEditor();
+}

test/functional/services/index.ts

@@ -31,6 +31,7 @@ import { FilterBarProvider } from './filter_bar';
 import { FlyoutProvider } from './flyout';
 import { GlobalNavProvider } from './global_nav';
 import { InspectorProvider } from './inspector';
+import { FieldEditorProvider } from './field_editor';
 import { ManagementMenuProvider } from './management';
 import { QueryBarProvider } from './query_bar';
 import { RemoteProvider } from './remote';
@@ -74,6 +75,7 @@ export const services = {
   browser: BrowserProvider,
   pieChart: PieChartProvider,
   inspector: InspectorProvider,
+  fieldEditor: FieldEditorProvider,
   vegaDebugInspector: VegaDebugInspectorViewProvider,
   appsMenu: AppsMenuProvider,
   globalNav: GlobalNavProvider,

x-pack/plugins/lens/kibana.json

@@ -15,7 +15,8 @@
     "uiActions",
     "embeddable",
     "share",
-    "presentationUtil"
+    "presentationUtil",
+    "indexPatternFieldEditor"
   ],
   "optionalPlugins": [
     "usageCollection",

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

@@ -4,6 +4,10 @@
   padding: $euiSize $euiSize 0;
 }
 
+.lnsInnerIndexPatternDataPanel__switcher {
+  min-width: 0;
+}
+
 .lnsInnerIndexPatternDataPanel__header {
   display: flex;
   align-items: center;

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, ReactElement } from 'react';
 import { createMockedDragDropContext } from './mocks';
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 import { InnerIndexPatternDataPanel, IndexPatternDataPanel, MemoizedDataPanel } from './datapanel';
@@ -19,6 +19,7 @@ import { ChangeIndexPattern } from './change_indexpattern';
 import { EuiProgress, EuiLoadingSpinner } from '@elastic/eui';
 import { documentField } from './document_field';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
+import { indexPatternFieldEditorPluginMock } from '../../../../../src/plugins/index_pattern_field_editor/public/mocks';
 import { getFieldByNameFactory } from './pure_helpers';
 
 const fieldsOne = [
@@ -240,14 +241,16 @@ describe('IndexPattern Data Panel', () => {
   let defaultProps: Parameters<typeof InnerIndexPatternDataPanel>[0] & {
     showNoDataPopover: () => void;
   };
-  let core: ReturnType<typeof coreMock['createSetup']>;
+  let core: ReturnType<typeof coreMock['createStart']>;
 
   beforeEach(() => {
-    core = coreMock.createSetup();
+    core = coreMock.createStart();
     defaultProps = {
       indexPatternRefs: [],
       existingFields: {},
       data: dataPluginMock.createStartContract(),
+      indexPatternFieldEditor: indexPatternFieldEditorPluginMock.createStartContract(),
+      onUpdateIndexPattern: jest.fn(),
       dragDropContext: createMockedDragDropContext(),
       currentIndexPatternId: '1',
       indexPatterns: initialState.indexPatterns,
@@ -806,5 +809,78 @@ describe('IndexPattern Data Panel', () => {
         'memory',
       ]);
     });
+    describe('edit field list', () => {
+      beforeEach(() => {
+        props.indexPatternFieldEditor.userPermissions.editIndexPattern = () => true;
+      });
+      it('should call field editor plugin on clicking add button', async () => {
+        const mockIndexPattern = {};
+        (props.data.indexPatterns.get as jest.Mock).mockImplementation(() =>
+          Promise.resolve(mockIndexPattern)
+        );
+        const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
+        act(() => {
+          (wrapper
+            .find('[data-test-subj="lnsIndexPatternActions-popover"]')
+            .first()
+            .prop('children') as ReactElement).props.items[0].props.onClick();
+        });
+
+        // wait for indx pattern to be loaded
+        await new Promise((r) => setTimeout(r, 0));
+
+        expect(props.indexPatternFieldEditor.openEditor).toHaveBeenCalledWith(
+          expect.objectContaining({
+            ctx: expect.objectContaining({
+              indexPattern: mockIndexPattern,
+            }),
+          })
+        );
+      });
+
+      it('should reload index pattern if callback gets called', async () => {
+        const mockIndexPattern = {
+          id: '1',
+          fields: [
+            {
+              name: 'fieldOne',
+              aggregatable: true,
+            },
+          ],
+          metaFields: [],
+        };
+        (props.data.indexPatterns.get as jest.Mock).mockImplementation(() =>
+          Promise.resolve(mockIndexPattern)
+        );
+        const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
+        act(() => {
+          (wrapper
+            .find('[data-test-subj="lnsIndexPatternActions-popover"]')
+            .first()
+            .prop('children') as ReactElement).props.items[0].props.onClick();
+        });
+        // wait for indx pattern to be loaded
+        await new Promise((r) => setTimeout(r, 0));
+        await (props.indexPatternFieldEditor.openEditor as jest.Mock).mock.calls[0][0].onSave();
+        // wait for indx pattern to be loaded
+        await new Promise((r) => setTimeout(r, 0));
+        expect(props.onUpdateIndexPattern).toHaveBeenCalledWith(
+          expect.objectContaining({
+            fields: [
+              expect.objectContaining({
+                name: 'fieldOne',
+              }),
+              expect.anything(),
+            ],
+          })
+        );
+      });
+
+      it('should not render add button without permissions', () => {
+        props.indexPatternFieldEditor.userPermissions.editIndexPattern = () => false;
+        const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
+        expect(wrapper.find('[data-test-subj="indexPattern-add-field"]').exists()).toBe(false);
+      });
+    });
   });
 });