[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,35 @@ export const ReactControlExample = ({
             Serialize control group
           </EuiButton>
         </EuiFlexItem>
+        {controlGroupApi && (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              onClick={() => {
+                openDataControlEditor({
+                  initialState: {
+                    grow: DEFAULT_CONTROL_GROW,
+                    width: DEFAULT_CONTROL_WIDTH,
+                    dataViewId: dashboardApi.lastUsedDataViewId.getValue(),
+                  },
+                  onSave: ({ type: controlType, state: initialState }) => {
+                    controlGroupApi.addNewPanel({
+                      panelType: controlType,
+                      initialState,
+                    });
+                  },
+                  controlGroupApi,
+                  services: {
+                    core,
+                    dataViews: dataViewsService,
+                  },
+                });
+              }}
+              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 { chaining$, controlFetch$, controlGroupFetch$ } from './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 { controlGroupFetch$, chaining$, controlFetch$ } from './control_fetch';
 
 export const getControlGroupEmbeddableFactory = (services: {
   core: CoreStart;

examples/controls_example/public/react_controls/control_panel.scss

@@ -1,7 +1,7 @@
 .controlPanel {
   width: 100%;
   max-inline-size: 100% !important;
-  height: calc($euiButtonHeight - 2px);
+  height: $euiButtonHeight;
   box-shadow: none !important;
   background-color: $euiFormBackgroundColor !important;
 
@@ -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>
                 )}
               </>
             }