[Embeddable Rebuild] [Controls] Refactor control editing + creation

examples/controls_example/public/app/react_control_example.tsx

@@ -20,7 +20,11 @@ import {
   EuiSuperDatePicker,
   OnTimeChangeProps,
 } from '@elastic/eui';
-import { CONTROL_GROUP_TYPE } from '@kbn/controls-plugin/common';
+import {
+  CONTROL_GROUP_TYPE,
+  DEFAULT_CONTROL_GROW,
+  DEFAULT_CONTROL_WIDTH,
+} from '@kbn/controls-plugin/common';
 import { CoreStart } from '@kbn/core/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
@@ -39,6 +43,7 @@ import { ControlGroupApi } from '../react_controls/control_group/types';
 import { RANGE_SLIDER_CONTROL_TYPE } from '../react_controls/data_controls/range_slider/types';
 import { SEARCH_CONTROL_TYPE } from '../react_controls/data_controls/search_control/types';
 import { TIMESLIDER_CONTROL_TYPE } from '../react_controls/timeslider_control/types';
+import { openDataControlEditor } from '../react_controls/data_controls/open_data_control_editor';
 
 const toggleViewButtons = [
   {
@@ -167,6 +172,7 @@ export const ReactControlExample = ({
       addNewPanel: () => {
         return Promise.resolve(undefined);
       },
+      lastUsedDataViewId: new BehaviorSubject<string>(WEB_LOGS_DATA_VIEW_ID),
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -282,6 +288,33 @@ export const ReactControlExample = ({
             Serialize control group
           </EuiButton>
         </EuiFlexItem>
+        {controlGroupApi && (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              onClick={async () => {
+                const { type: controlType, state: initialState } = await openDataControlEditor({
+                  initialState: {
+                    grow: DEFAULT_CONTROL_GROW,
+                    width: DEFAULT_CONTROL_WIDTH,
+                    dataViewId: dashboardApi.lastUsedDataViewId.getValue(),
+                  },
+                  controlGroupApi,
+                  services: {
+                    core,
+                    dataViews: dataViewsService,
+                  },
+                });
+                controlGroupApi.addNewPanel({
+                  panelType: controlType,
+                  initialState,
+                });
+              }}
+              size="s"
+            >
+              Add new data control
+            </EuiButton>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem grow={false}>
           <EuiButtonGroup
             legend="Change the view mode"

examples/controls_example/public/react_controls/control_group/get_control_group_factory.tsx

@@ -9,6 +9,7 @@
 import React, { useEffect } from 'react';
 import { BehaviorSubject } from 'rxjs';
 
+import { EuiFlexGroup } from '@elastic/eui';
 import {
   ControlGroupChainingSystem,
   ControlWidth,
@@ -36,9 +37,9 @@ import {
   useStateFromPublishingSubject,
 } from '@kbn/presentation-publishing';
 
-import { EuiFlexGroup } from '@elastic/eui';
 import { ControlRenderer } from '../control_renderer';
 import { DefaultControlApi } from '../types';
+import { dataControlFetch$ } from './data_control_fetch';
 import { openEditControlGroupFlyout } from './open_edit_control_group_flyout';
 import { deserializeControlGroup, serializeControlGroup } from './serialization_utils';
 import {
@@ -47,7 +48,6 @@ import {
   ControlGroupSerializedState,
   ControlGroupUnsavedChanges,
 } from './types';
-import { dataControlFetch$ } from './data_control_fetch';
 
 export const getControlGroupEmbeddableFactory = (services: {
   core: CoreStart;

examples/controls_example/public/react_controls/control_panel.scss

@@ -10,14 +10,16 @@
     border-radius: $euiBorderRadius !important;
   }
 
-  &--label {
-    @include euiTextTruncate;
+  &--labelWrapper {
     max-width: 40%;
-    background-color: transparent;
-    border-radius: $euiBorderRadius;
 
-    margin-left: 0 !important;
-    padding-left: 0 !important;
+    .controlPanel--label {
+      @include euiTextTruncate;
+      background-color: transparent;
+      border-radius: $euiBorderRadius;
+      margin-left: 0 !important;
+      padding-left: 0 !important;
+    }
   }
 
   &--hideComponent {

examples/controls_example/public/react_controls/control_panel.tsx

@@ -9,7 +9,14 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
-import { EuiFlexItem, EuiFormControlLayout, EuiFormLabel, EuiFormRow, EuiIcon } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiFormControlLayout,
+  EuiFormLabel,
+  EuiFormRow,
+  EuiIcon,
+  EuiToolTip,
+} from '@elastic/eui';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import {
@@ -135,12 +142,18 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
                   controlTitle={panelTitle || defaultPanelTitle}
                   hideEmptyDragHandle={usingTwoLineLayout || Boolean(api?.CustomPrependComponent)}
                 />
+
                 {api?.CustomPrependComponent ? (
                   <api.CustomPrependComponent />
                 ) : usingTwoLineLayout ? null : (
-                  <EuiFormLabel className="controlPanel--label">
-                    {panelTitle || defaultPanelTitle}
-                  </EuiFormLabel>
+                  <EuiToolTip
+                    anchorClassName="controlPanel--labelWrapper"
+                    content={panelTitle || defaultPanelTitle}
+                  >
+                    <EuiFormLabel className="controlPanel--label">
+                      {panelTitle || defaultPanelTitle}
+                    </EuiFormLabel>
+                  </EuiToolTip>
                 )}
               </>
             }

examples/controls_example/public/react_controls/data_controls/data_control_editor.test.tsx

@@ -0,0 +1,236 @@
+/*
+ * 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 React from 'react';
+import { BehaviorSubject } from 'rxjs';
+
+import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
+import { stubFieldSpecMap } from '@kbn/data-views-plugin/common/field.stub';
+import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
+import { TimeRange } from '@kbn/es-query';
+import { I18nProvider } from '@kbn/i18n-react';
+import { act, fireEvent, render, RenderResult, waitFor } from '@testing-library/react';
+
+import { registerControlFactory } from '../control_factory_registry';
+import { ControlGroupApi } from '../control_group/types';
+import { DataControlEditor } from './data_control_editor';
+import {
+  getMockedOptionsListControlFactory,
+  getMockedRangeSliderControlFactory,
+  getMockedSearchControlFactory,
+} from './mocks/data_control_mocks';
+import { DEFAULT_CONTROL_GROW, DEFAULT_CONTROL_WIDTH } from '@kbn/controls-plugin/common';
+import { DataControlEditorState } from './open_data_control_editor';
+
+const mockDataViews = dataViewPluginMocks.createStartContract();
+const mockDataView = createStubDataView({
+  spec: {
+    id: 'logstash-*',
+    fields: {
+      ...stubFieldSpecMap,
+      'machine.os.raw': {
+        name: 'machine.os.raw',
+        customLabel: 'OS',
+        type: 'string',
+        esTypes: ['keyword'],
+        aggregatable: true,
+        searchable: true,
+      },
+    },
+    title: 'logstash-*',
+    timeFieldName: '@timestamp',
+  },
+});
+mockDataViews.get = jest.fn().mockResolvedValue(mockDataView);
+
+const dashboardApi = {
+  timeRange$: new BehaviorSubject<TimeRange | undefined>(undefined),
+  lastUsedDataViewId$: new BehaviorSubject<string>(mockDataView.id!),
+};
+const controlGroupApi = {
+  parentApi: dashboardApi,
+  grow: new BehaviorSubject(DEFAULT_CONTROL_GROW),
+  width: new BehaviorSubject(DEFAULT_CONTROL_WIDTH),
+} as unknown as ControlGroupApi;
+
+describe('Data control editor', () => {
+  const mountComponent = async ({
+    initialState,
+  }: {
+    initialState?: Partial<DataControlEditorState>;
+  }) => {
+    mockDataViews.get = jest.fn().mockResolvedValue(mockDataView);
+
+    const controlEditor = render(
+      <I18nProvider>
+        <DataControlEditor
+          onCancel={() => {}}
+          onSave={() => {}}
+          parentApi={controlGroupApi}
+          initialState={{
+            dataViewId: dashboardApi.lastUsedDataViewId$.getValue(),
+            ...initialState,
+          }}
+          services={{ dataViews: mockDataViews }}
+        />
+      </I18nProvider>
+    );
+
+    await waitFor(() => {
+      expect(mockDataViews.get).toHaveBeenCalledTimes(1);
+    });
+
+    return controlEditor;
+  };
+
+  const selectField = async (controlEditor: RenderResult, fieldName: string) => {
+    expect(controlEditor.queryByTestId(`field-picker-select-${fieldName}`)).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(controlEditor.getByTestId(`field-picker-select-${fieldName}`));
+    });
+  };
+
+  const getPressedAttribute = (controlEditor: RenderResult, testId: string) => {
+    return controlEditor.getByTestId(testId).getAttribute('aria-pressed');
+  };
+
+  beforeAll(() => {
+    /** Register all of my mocked data controls */
+    registerControlFactory('search', async () => {
+      return getMockedSearchControlFactory({ parentApi: controlGroupApi });
+    });
+    registerControlFactory('optionsList', async () => {
+      return getMockedOptionsListControlFactory({ parentApi: controlGroupApi });
+    });
+    registerControlFactory('rangeSlider', async () => {
+      return getMockedRangeSliderControlFactory({ parentApi: controlGroupApi });
+    });
+  });
+
+  describe('creating a new control', () => {
+    test('field list does not include fields that are not compatible with any control types', async () => {
+      const controlEditor = await mountComponent({});
+      const nonAggOption = controlEditor.queryByTestId('field-picker-select-machine.os');
+      expect(nonAggOption).not.toBeInTheDocument();
+    });
+
+    test('cannot save before selecting a field', async () => {
+      const controlEditor = await mountComponent({});
+
+      const saveButton = controlEditor.getByTestId('control-editor-save');
+      expect(saveButton).toBeDisabled();
+      await selectField(controlEditor, 'machine.os.raw');
+      expect(saveButton).toBeEnabled();
+    });
+
+    test('selecting a keyword field - can only create an options list control', async () => {
+      const controlEditor = await mountComponent({});
+      await selectField(controlEditor, 'machine.os.raw');
+
+      expect(controlEditor.getByTestId('create__optionsList')).toBeEnabled();
+      expect(controlEditor.getByTestId('create__rangeSlider')).not.toBeEnabled();
+      expect(controlEditor.getByTestId('create__search')).not.toBeEnabled();
+    });
+
+    test('selecting an IP field - can only create an options list control', async () => {
+      const controlEditor = await mountComponent({});
+      await selectField(controlEditor, 'clientip');
+
+      expect(controlEditor.getByTestId('create__optionsList')).toBeEnabled();
+      expect(controlEditor.getByTestId('create__rangeSlider')).not.toBeEnabled();
+      expect(controlEditor.getByTestId('create__search')).not.toBeEnabled();
+    });
+
+    describe('selecting a number field', () => {
+      let controlEditor: RenderResult;
+
+      beforeEach(async () => {
+        controlEditor = await mountComponent({});
+        await selectField(controlEditor, 'bytes');
+      });
+
+      test('can create an options list or range slider control', () => {
+        expect(controlEditor.getByTestId('create__optionsList')).toBeEnabled();
+        expect(controlEditor.getByTestId('create__rangeSlider')).toBeEnabled();
+        expect(controlEditor.getByTestId('create__search')).not.toBeEnabled();
+      });
+
+      test('defaults to options list creation', () => {
+        expect(getPressedAttribute(controlEditor, 'create__optionsList')).toBe('true');
+        expect(getPressedAttribute(controlEditor, 'create__rangeSlider')).toBe('false');
+      });
+    });
+
+    test('renders custom settings when provided', async () => {
+      const controlEditor = await mountComponent({});
+      await selectField(controlEditor, 'machine.os.raw');
+      expect(controlEditor.queryByTestId('optionsListCustomSettings')).toBeInTheDocument();
+    });
+  });
+
+  test('selects the default width and grow', async () => {
+    const controlEditor = await mountComponent({});
+
+    expect(getPressedAttribute(controlEditor, 'control-editor-width-small')).toBe('false');
+    expect(getPressedAttribute(controlEditor, 'control-editor-width-medium')).toBe('true');
+    expect(getPressedAttribute(controlEditor, 'control-editor-width-large')).toBe('false');
+    expect(
+      controlEditor.getByTestId('control-editor-grow-switch').getAttribute('aria-checked')
+    ).toBe(`${DEFAULT_CONTROL_GROW}`);
+  });
+
+  describe('editing existing control', () => {
+    describe('control title', () => {
+      test('auto-fills input with the default title', async () => {
+        const controlEditor = await mountComponent({
+          initialState: {
+            controlType: 'optionsList',
+            controlId: 'testId',
+            fieldName: 'machine.os.raw',
+            defaultPanelTitle: 'OS',
+          },
+        });
+        const titleInput = await controlEditor.findByTestId('control-editor-title-input');
+        expect(titleInput.getAttribute('value')).toBe('OS');
+        expect(titleInput.getAttribute('placeholder')).toBe('OS');
+      });
+
+      test('auto-fills input with the custom title', async () => {
+        const controlEditor = await mountComponent({
+          initialState: {
+            controlType: 'optionsList',
+            controlId: 'testId',
+            fieldName: 'machine.os.raw',
+            title: 'Custom title',
+          },
+        });
+        const titleInput = await controlEditor.findByTestId('control-editor-title-input');
+        expect(titleInput.getAttribute('value')).toBe('Custom title');
+        expect(titleInput.getAttribute('placeholder')).toBe('machine.os.raw');
+      });
+    });
+
+    test('selects the provided control type', async () => {
+      const controlEditor = await mountComponent({
+        initialState: {
+          controlType: 'rangeSlider',
+          controlId: 'testId',
+          fieldName: 'bytes',
+        },
+      });
+
+      expect(controlEditor.getByTestId('create__optionsList')).toBeEnabled();
+      expect(controlEditor.getByTestId('create__rangeSlider')).toBeEnabled();
+      expect(controlEditor.getByTestId('create__search')).not.toBeEnabled();
+
+      expect(getPressedAttribute(controlEditor, 'create__optionsList')).toBe('false');
+      expect(getPressedAttribute(controlEditor, 'create__rangeSlider')).toBe('true');
+      expect(getPressedAttribute(controlEditor, 'create__search')).toBe('false');
+    });
+  });
+});