revert changes to chaining files

examples/controls_example/public/react_controls/control_group/control_fetch/chaining.test.ts

@@ -10,7 +10,6 @@ import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common';
 import { Filter } from '@kbn/es-query';
 import { BehaviorSubject, skip } from 'rxjs';
 import { chaining$ } from './chaining';
-import { ControlPanelState } from '../types';
 
 const FILTER_ALPHA = {
   meta: {
@@ -36,7 +35,7 @@ const FILTER_DELTA = {
 describe('chaining$', () => {
   const onFireMock = jest.fn();
   const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>('HIERARCHICAL');
-  const controlsInOrder$ = new BehaviorSubject<Array<ControlPanelState & { id: string }>>([]);
+  const controlsInOrder$ = new BehaviorSubject<Array<{ id: string; type: string }>>([]);
   const alphaControlApi = {
     filters$: new BehaviorSubject<Filter[] | undefined>(undefined),
   };
@@ -78,10 +77,10 @@ describe('chaining$', () => {
     deltaControlApi.filters$.next([FILTER_DELTA]);
     chainingSystem$.next('HIERARCHICAL');
     controlsInOrder$.next([
-      { id: 'alpha' } as unknown as ControlPanelState & { id: string },
-      { id: 'bravo' } as unknown as ControlPanelState & { id: string },
-      { id: 'charlie' } as unknown as ControlPanelState & { id: string },
-      { id: 'delta' } as unknown as ControlPanelState & { id: string },
+      { id: 'alpha', type: 'whatever' },
+      { id: 'bravo', type: 'whatever' },
+      { id: 'charlie', type: 'whatever' },
+      { id: 'delta', type: 'whatever' },
     ]);
   });
 
@@ -135,10 +134,10 @@ describe('chaining$', () => {
 
       // Move control to right of 'delta' control
       controlsInOrder$.next([
-        { id: 'alpha' } as unknown as ControlPanelState & { id: string },
-        { id: 'bravo' } as unknown as ControlPanelState & { id: string },
-        { id: 'delta' } as unknown as ControlPanelState & { id: string },
-        { id: 'charlie' } as unknown as ControlPanelState & { id: string },
+        { id: 'alpha', type: 'whatever' },
+        { id: 'bravo', type: 'whatever' },
+        { id: 'delta', type: 'whatever' },
+        { id: 'charlie', type: 'whatever' },
       ]);
       await new Promise((resolve) => setTimeout(resolve, 0));
 
@@ -164,9 +163,9 @@ describe('chaining$', () => {
 
       // remove 'bravo' control
       controlsInOrder$.next([
-        { id: 'alpha' } as unknown as ControlPanelState & { id: string },
-        { id: 'charlie' } as unknown as ControlPanelState & { id: string },
-        { id: 'delta' } as unknown as ControlPanelState & { id: string },
+        { id: 'alpha', type: 'whatever' },
+        { id: 'charlie', type: 'whatever' },
+        { id: 'delta', type: 'whatever' },
       ]);
       await new Promise((resolve) => setTimeout(resolve, 0));
 

examples/controls_example/public/react_controls/control_group/control_fetch/chaining.ts

@@ -14,7 +14,6 @@ import {
   PublishingSubject,
 } from '@kbn/presentation-publishing';
 import { BehaviorSubject, combineLatest, debounceTime, map, Observable, switchMap } from 'rxjs';
-import { ControlPanelState } from '../types';
 
 export interface ChainingContext {
   chainingFilters?: Filter[] | undefined;
@@ -24,7 +23,7 @@ export interface ChainingContext {
 export function chaining$(
   uuid: string,
   chainingSystem$: PublishingSubject<ControlGroupChainingSystem>,
-  controlsInOrder$: PublishingSubject<Array<ControlPanelState & { id: string }>>,
+  controlsInOrder$: PublishingSubject<Array<{ id: string; type: string }>>,
   getControlApi: (uuid: string) => undefined | unknown
 ) {
   return combineLatest([chainingSystem$, controlsInOrder$]).pipe(

examples/controls_example/public/react_controls/control_group/init_controls_manager.ts

@@ -17,15 +17,19 @@ import { BehaviorSubject, merge } from 'rxjs';
 import { PublishingSubject } from '@kbn/presentation-publishing';
 import { omit } from 'lodash';
 import { ControlPanelsState, ControlPanelState } from './types';
-import { DefaultControlApi } from '../types';
+import { DefaultControlApi, DefaultControlState } from '../types';
 
-export function initControlsManager(controlPanelsState: ControlPanelsState) {
+export function initControlsManager(initialControlPanelsState: ControlPanelsState) {
   const children$ = new BehaviorSubject<{ [key: string]: DefaultControlApi }>({});
-  const controlsInOrder$ = new BehaviorSubject<Array<ControlPanelState & { id: string }>>(
-    Object.keys(controlPanelsState)
+  const controlsPanelState: { [panelId: string]: DefaultControlState } = {
+    ...initialControlPanelsState,
+  };
+  const controlsInOrder$ = new BehaviorSubject<Array<{ id: string; type: string }>>(
+    Object.keys(initialControlPanelsState)
       .map((key) => ({
         id: key,
-        ...controlPanelsState[key],
+        order: initialControlPanelsState[key].order,
+        type: initialControlPanelsState[key].type,
       }))
       .sort((a, b) => (a.order > b.order ? 1 : -1))
   );
@@ -61,30 +65,28 @@ export function initControlsManager(controlPanelsState: ControlPanelsState) {
     return children$.value[controlUuid];
   }
 
-  async function addNewPanel({ panelType, initialState }: PanelPackage<object>) {
+  async function addNewPanel({ panelType, initialState }: PanelPackage<DefaultControlState>) {
     const id = generateId();
     const controlsInOrder = controlsInOrder$.getValue();
     controlsInOrder$.next([
       ...controlsInOrder,
       {
         id,
         type: panelType,
-        order: controlsInOrder.length,
-        ...(initialState ?? {}),
       },
     ]);
+    controlsPanelState[id] = initialState ?? {};
     return await untilControlLoaded(id);
   }
 
   function removePanel(panelId: string) {
+    delete controlsPanelState[panelId];
     controlsInOrder$.next(controlsInOrder$.value.filter(({ id }) => id !== panelId));
     children$.next(omit(children$.value, panelId));
   }
 
   return {
-    controlsInOrder$: controlsInOrder$ as PublishingSubject<
-      Array<ControlPanelState & { id: string }>
-    >,
+    controlsInOrder$: controlsInOrder$ as PublishingSubject<Array<{ id: string; type: string }>>,
     getControlApi,
     setControlApi: (uuid: string, controlApi: DefaultControlApi) => {
       children$.next({
@@ -130,9 +132,7 @@ export function initControlsManager(controlPanelsState: ControlPanelsState) {
     },
     api: {
       getSerializedStateForChild: (childId: string) => {
-        const controlPanelState = controlsInOrder$
-          .getValue()
-          .find((element) => element.id === childId);
+        const controlPanelState = controlsPanelState[childId];
         return controlPanelState ? { rawState: controlPanelState } : undefined;
       },
       children$: children$ as PublishingSubject<{