Integrate react control group embeddable into dashboard container

examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts

@@ -90,12 +90,12 @@ const initialSerializedControlGroupState = {
   } as object,
   references: [
     {
-      name: `controlGroup_${rangeSliderControlId}:${RANGE_SLIDER_CONTROL}DataView`,
+      name: `controlGroup_${rangeSliderControlId}:rangeSliderDataView`,
       type: 'index-pattern',
       id: WEB_LOGS_DATA_VIEW_ID,
     },
     {
-      name: `controlGroup_${optionsListId}:${OPTIONS_LIST_CONTROL}DataView`,
+      name: `controlGroup_${optionsListId}:optionsListDataView`,
       type: 'index-pattern',
       id: WEB_LOGS_DATA_VIEW_ID,
     },

examples/portable_dashboards_example/public/dashboard_with_controls_example.tsx

@@ -11,8 +11,7 @@ import React, { useEffect, useState } from 'react';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import { controlGroupInputBuilder } from '@kbn/controls-plugin/public';
-import { getDefaultControlGroupInput } from '@kbn/controls-plugin/common';
+import { controlGroupStateBuilder } from '@kbn/controls-plugin/public';
 import {
   AwaitingDashboardAPI,
   DashboardRenderer,
@@ -63,16 +62,15 @@ export const DashboardWithControlsExample = ({ dataView }: { dataView: DataView
       <EuiPanel hasBorder={true}>
         <DashboardRenderer
           getCreationOptions={async (): Promise<DashboardCreationOptions> => {
-            const builder = controlGroupInputBuilder;
-            const controlGroupInput = getDefaultControlGroupInput();
-            await builder.addDataControlFromField(controlGroupInput, {
+            const controlGroupState = {};
+            await controlGroupStateBuilder.addDataControlFromField(controlGroupState, {
               dataViewId: dataView.id ?? '',
               title: 'Destintion country',
               fieldName: 'geo.dest',
               width: 'medium',
               grow: false,
             });
-            await builder.addDataControlFromField(controlGroupInput, {
+            await controlGroupStateBuilder.addDataControlFromField(controlGroupState, {
               dataViewId: dataView.id ?? '',
               fieldName: 'bytes',
               width: 'medium',
@@ -85,7 +83,7 @@ export const DashboardWithControlsExample = ({ dataView }: { dataView: DataView
               getInitialInput: () => ({
                 timeRange: { from: 'now-30d', to: 'now' },
                 viewMode: ViewMode.VIEW,
-                controlGroupInput,
+                controlGroupState,
               }),
             };
           }}

src/plugins/controls/common/control_group/control_group_persistence.ts

@@ -9,7 +9,6 @@
 import deepEqual from 'fast-deep-equal';
 import { SerializableRecord } from '@kbn/utility-types';
 
-import { v4 } from 'uuid';
 import { pick, omit, xor } from 'lodash';
 
 import {
@@ -23,7 +22,6 @@ import {
 } from './control_group_panel_diff_system';
 import { ControlGroupInput } from '..';
 import {
-  ControlsPanels,
   PersistableControlGroupInput,
   persistableControlGroupInputKeys,
   RawControlGroupAttributes,
@@ -103,32 +101,6 @@ const getPanelsAreEqual = (
   return true;
 };
 
-export const controlGroupInputToRawControlGroupAttributes = (
-  controlGroupInput: Omit<ControlGroupInput, 'id'>
-): RawControlGroupAttributes => {
-  return {
-    controlStyle: controlGroupInput.controlStyle,
-    chainingSystem: controlGroupInput.chainingSystem,
-    showApplySelections: controlGroupInput.showApplySelections,
-    panelsJSON: JSON.stringify(controlGroupInput.panels),
-    ignoreParentSettingsJSON: JSON.stringify(controlGroupInput.ignoreParentSettings),
-  };
-};
-
-export const generateNewControlIds = (controlGroupInput?: PersistableControlGroupInput) => {
-  if (!controlGroupInput?.panels) return;
-
-  const newPanelsMap: ControlsPanels = {};
-  for (const panel of Object.values(controlGroupInput.panels)) {
-    const newId = v4();
-    newPanelsMap[newId] = {
-      ...panel,
-      explicitInput: { ...panel.explicitInput, id: newId },
-    };
-  }
-  return { ...controlGroupInput, panels: newPanelsMap };
-};
-
 export const rawControlGroupAttributesToControlGroupInput = (
   rawControlGroupAttributes: RawControlGroupAttributes
 ): PersistableControlGroupInput | undefined => {

src/plugins/controls/common/index.ts

@@ -22,14 +22,12 @@ export {
   persistableControlGroupInputKeys,
 } from './control_group/types';
 export {
-  controlGroupInputToRawControlGroupAttributes,
   rawControlGroupAttributesToControlGroupInput,
   rawControlGroupAttributesToSerializable,
   serializableToRawControlGroupAttributes,
   getDefaultControlGroupPersistableInput,
   persistableControlGroupInputIsEqual,
   getDefaultControlGroupInput,
-  generateNewControlIds,
 } from './control_group/control_group_persistence';
 
 export {

src/plugins/controls/public/react_controls/control_group/components/control_group.tsx

@@ -121,6 +121,7 @@ export function ControlGroup({
       paddingSize="none"
       color={draggingId ? 'success' : 'transparent'}
       className="controlsWrapper"
+      data-test-subj="controls-group-wrapper"
     >
       <EuiFlexGroup
         gutterSize="s"

src/plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts

@@ -24,11 +24,7 @@ import { apiPublishesAsyncFilters } from '../controls/data_controls/publishes_as
 
 export type ControlGroupComparatorState = Pick<
   ControlGroupRuntimeState,
-  | 'autoApplySelections'
-  | 'chainingSystem'
-  | 'ignoreParentSettings'
-  | 'initialChildControlState'
-  | 'labelPosition'
+  'autoApplySelections' | 'chainingSystem' | 'ignoreParentSettings' | 'labelPosition'
 > & {
   controlsInOrder: ControlsInOrder;
 };
@@ -38,6 +34,7 @@ export function initializeControlGroupUnsavedChanges(
   children$: PresentationContainer['children$'],
   comparators: StateComparators<ControlGroupComparatorState>,
   snapshotControlsRuntimeState: () => ControlPanelsState,
+  resetControlsUnsavedChanges: () => void,
   parentApi: unknown,
   lastSavedRuntimeState: ControlGroupRuntimeState
 ) {
@@ -47,7 +44,6 @@ export function initializeControlGroupUnsavedChanges(
       chainingSystem: lastSavedRuntimeState.chainingSystem,
       controlsInOrder: getControlsInOrder(lastSavedRuntimeState.initialChildControlState),
       ignoreParentSettings: lastSavedRuntimeState.ignoreParentSettings,
-      initialChildControlState: lastSavedRuntimeState.initialChildControlState,
       labelPosition: lastSavedRuntimeState.labelPosition,
     },
     parentApi,
@@ -72,6 +68,7 @@ export function initializeControlGroupUnsavedChanges(
       ),
       asyncResetUnsavedChanges: async () => {
         controlGroupUnsavedChanges.api.resetUnsavedChanges();
+        resetControlsUnsavedChanges();
 
         const filtersReadyPromises: Array<Promise<void>> = [];
         Object.values(children$.value).forEach((controlApi) => {

src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx

@@ -34,12 +34,19 @@ import { chaining$, controlFetch$, controlGroupFetch$ } from './control_fetch';
 import { initControlsManager } from './init_controls_manager';
 import { openEditControlGroupFlyout } from './open_edit_control_group_flyout';
 import { deserializeControlGroup } from './serialization_utils';
-import { ControlGroupApi, ControlGroupRuntimeState, ControlGroupSerializedState } from './types';
+import {
+  ControlGroupApi,
+  ControlGroupRuntimeState,
+  ControlGroupSerializedState,
+  ControlPanelsState,
+} from './types';
 import { ControlGroup } from './components/control_group';
 import { initSelectionsManager } from './selections_manager';
 import { initializeControlGroupUnsavedChanges } from './control_group_unsaved_changes_api';
 import { openDataControlEditor } from '../controls/data_controls/open_data_control_editor';
 
+const DEFAULT_CHAINING_SYSTEM = 'HIERARCHICAL';
+
 export const getControlGroupEmbeddableFactory = (services: {
   core: CoreStart;
   dataViews: DataViewsPublicPluginStart;
@@ -60,27 +67,29 @@ export const getControlGroupEmbeddableFactory = (services: {
       lastSavedRuntimeState
     ) => {
       const {
-        initialChildControlState,
         labelPosition: initialLabelPosition,
         chainingSystem,
         autoApplySelections,
         ignoreParentSettings,
       } = initialRuntimeState;
 
       const autoApplySelections$ = new BehaviorSubject<boolean>(autoApplySelections);
-      const parentDataViewId = apiPublishesDataViews(parentApi)
-        ? parentApi.dataViews.value?.[0]?.id
-        : undefined;
+      const defaultDataViewId = await services.dataViews.getDefaultId();
+      const lastSavedControlsState$ = new BehaviorSubject<ControlPanelsState>(
+        lastSavedRuntimeState.initialChildControlState
+      );
       const controlsManager = initControlsManager(
-        initialChildControlState,
-        parentDataViewId ?? (await services.dataViews.getDefaultId())
+        initialRuntimeState.initialChildControlState,
+        lastSavedControlsState$
       );
       const selectionsManager = initSelectionsManager({
         ...controlsManager.api,
         autoApplySelections$,
       });
       const dataViews = new BehaviorSubject<DataView[] | undefined>(undefined);
-      const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>(chainingSystem);
+      const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>(
+        chainingSystem ?? DEFAULT_CHAINING_SYSTEM
+      );
       const ignoreParentSettings$ = new BehaviorSubject<ParentIgnoreSettings | undefined>(
         ignoreParentSettings
       );
@@ -104,6 +113,7 @@ export const getControlGroupEmbeddableFactory = (services: {
           chainingSystem: [
             chainingSystem$,
             (next: ControlGroupChainingSystem) => chainingSystem$.next(next),
+            (a, b) => (a ?? DEFAULT_CHAINING_SYSTEM) === (b ?? DEFAULT_CHAINING_SYSTEM),
           ],
           ignoreParentSettings: [
             ignoreParentSettings$,
@@ -113,6 +123,7 @@ export const getControlGroupEmbeddableFactory = (services: {
           labelPosition: [labelPosition$, (next: ControlStyle) => labelPosition$.next(next)],
         },
         controlsManager.snapshotControlsRuntimeState,
+        controlsManager.resetControlsUnsavedChanges,
         parentApi,
         lastSavedRuntimeState
       );
@@ -159,20 +170,28 @@ export const getControlGroupEmbeddableFactory = (services: {
           i18n.translate('controls.controlGroup.displayName', {
             defaultMessage: 'Controls',
           }),
-        openAddDataControlFlyout: (settings) => {
-          const { controlInputTransform } = settings ?? {
-            controlInputTransform: (state) => state,
-          };
+        openAddDataControlFlyout: (options) => {
+          const parentDataViewId = apiPublishesDataViews(parentApi)
+            ? parentApi.dataViews.value?.[0]?.id
+            : undefined;
+          const newControlState = controlsManager.getNewControlState();
           openDataControlEditor({
-            initialState: controlsManager.getNewControlState(),
+            initialState: {
+              ...newControlState,
+              dataViewId:
+                newControlState.dataViewId ?? parentDataViewId ?? defaultDataViewId ?? undefined,
+            },
             onSave: ({ type: controlType, state: initialState }) => {
               controlsManager.api.addNewPanel({
                 panelType: controlType,
-                initialState: controlInputTransform!(
-                  initialState as Partial<ControlGroupSerializedState>,
-                  controlType
-                ),
+                initialState: options?.controlInputTransform
+                  ? options.controlInputTransform(
+                      initialState as Partial<ControlGroupSerializedState>,
+                      controlType
+                    )
+                  : initialState,
               });
+              options?.onSave?.();
             },
             controlGroupApi: api,
             services,
@@ -207,6 +226,20 @@ export const getControlGroupEmbeddableFactory = (services: {
         dataViews.next(newDataViews)
       );
 
+      const saveNotificationSubscription = apiHasSaveNotification(parentApi)
+        ? parentApi.saveNotification$.subscribe(() => {
+            lastSavedControlsState$.next(controlsManager.snapshotControlsRuntimeState());
+
+            if (
+              typeof autoApplySelections$.value === 'boolean' &&
+              !autoApplySelections$.value &&
+              selectionsManager.hasUnappliedSelections$.value
+            ) {
+              selectionsManager.applySelections();
+            }
+          })
+        : undefined;
+
       /** Fetch the allowExpensiveQuries setting for the children to use if necessary */
       try {
         const { allowExpensiveQueries } = await services.core.http.get<{
@@ -235,6 +268,7 @@ export const getControlGroupEmbeddableFactory = (services: {
             return () => {
               selectionsManager.cleanup();
               childrenDataViewsSubscription.unsubscribe();
+              saveNotificationSubscription?.unsubscribe();
             };
           }, []);