[Embeddable Rebuild] Migrate control renderer - examples [OLD - TO DELETE]

examples/controls_example/public/app/app.tsx

@@ -32,7 +32,7 @@ const App = ({
   data,
   navigation,
 }: { core: CoreStart } & Pick<ControlsExampleStartDeps, 'data' | 'navigation'>) => {
-  const [selectedTabId, setSelectedTabId] = useState(CONTROLS_REFACTOR_TEST); // TODO: Make this the first tab
+  const [selectedTabId, setSelectedTabId] = useState(CONTROLS_AS_A_BUILDING_BLOCK);
 
   function onSelectedTabChanged(tabId: string) {
     setSelectedTabId(tabId);

examples/controls_example/public/app/control_group_renderer_examples.tsx

@@ -12,7 +12,6 @@ import useAsync from 'react-use/lib/useAsync';
 import { EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui';
 import { SearchExample } from './control_group_renderer_examples/search_example';
 import { EditExample } from './control_group_renderer_examples/edit_example';
-import { BasicReduxExample } from './control_group_renderer_examples/basic_redux_example';
 import { AddButtonExample } from './control_group_renderer_examples/add_button_example';
 import { ControlsExampleStartDeps } from '../plugin';
 
@@ -36,9 +35,8 @@ export const ControlGroupRendererExamples = ({
       <EuiSpacer size="xl" />
       <EditExample />
       <EuiSpacer size="xl" />
-      <BasicReduxExample dataViewId={dataViews[0].id!} />
-      <EuiSpacer size="xl" />
-      <AddButtonExample dataViewId={dataViews[0].id!} />
+      <AddButtonExample dataViewId={dataViews[0].id!} />{' '}
+      {/* TODO: Remove add button? No one uses it */}
     </>
   ) : (
     <EuiText>{'Install web logs sample data to run controls examples.'}</EuiText>

examples/controls_example/public/app/control_group_renderer_examples/add_button_example.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import { ControlGroupRenderer } from '@kbn/controls-plugin/public';
+import { ControlGroupRenderer } from '../../react_controls/control_group/external_api';
 
 export const AddButtonExample = ({ dataViewId }: { dataViewId: string }) => {
   return (

examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx

@@ -21,15 +21,14 @@ import {
   EuiSkeletonRectangle,
 } from '@elastic/eui';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
+import { ControlInputTransform } from '@kbn/controls-plugin/common/types';
 import { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '@kbn/controls-plugin/common';
+import { type ControlGroupInput, ACTION_DELETE_CONTROL } from '@kbn/controls-plugin/public';
 import {
-  type ControlGroupInput,
-  ControlGroupRenderer,
   AwaitingControlGroupAPI,
-  ACTION_EDIT_CONTROL,
-  ACTION_DELETE_CONTROL,
-} from '@kbn/controls-plugin/public';
-import { ControlInputTransform } from '@kbn/controls-plugin/common/types';
+  ControlGroupRenderer,
+} from '../../react_controls/control_group/external_api';
+import { ACTION_EDIT_CONTROL } from '../../react_controls/actions/edit_control_action';
 
 const INPUT_KEY = 'kbnControls:saveExample:input';
 
@@ -55,7 +54,7 @@ export const EditExample = () => {
       const disabledActions: string[] = Object.keys(
         pickBy(newToggleIconIdToSelectedMapIcon, (value) => value)
       );
-      controlGroupAPI.updateInput({ disabledActions });
+      controlGroupAPI.setDisabledActionIds(disabledActions);
     }
 
     setToggleIconIdToSelectedMapIcon(newToggleIconIdToSelectedMapIcon);
@@ -65,7 +64,7 @@ export const EditExample = () => {
     if (!controlGroupAPI) return;
 
     setIsSaving(true);
-    localStorage.setItem(INPUT_KEY, JSON.stringify(controlGroupAPI.getInput()));
+    localStorage.setItem(INPUT_KEY, JSON.stringify(controlGroupAPI.serializeState()));
 
     // simulated async save await
     await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -133,6 +132,7 @@ export const EditExample = () => {
               iconType="plusInCircle"
               isDisabled={controlGroupAPI === undefined}
               onClick={() => {
+                if (!controlGroupAPI) return;
                 controlGroupAPI!.openAddDataControlFlyout({ controlInputTransform });
               }}
             >

examples/controls_example/public/app/control_group_renderer_examples/search_example.tsx

@@ -22,7 +22,11 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { AwaitingControlGroupAPI, ControlGroupRenderer } from '@kbn/controls-plugin/public';
+import {
+  AwaitingControlGroupAPI,
+  ControlGroupRenderer,
+} from '../../react_controls/control_group/external_api';
+
 import { PLUGIN_ID } from '../../constants';
 
 interface Props {
@@ -47,8 +51,8 @@ export const SearchExample = ({ data, dataView, navigation }: Props) => {
     if (!controlGroupAPI) {
       return;
     }
-    const subscription = controlGroupAPI.onFiltersPublished$.subscribe((newFilters) => {
-      setControlFilters([...newFilters]);
+    const subscription = controlGroupAPI.filters$.subscribe((newFilters) => {
+      setControlFilters(newFilters ?? []);
     });
     return () => {
       subscription.unsubscribe();

examples/controls_example/public/app/react_control_example/react_control_example.tsx

@@ -23,11 +23,7 @@ import {
   EuiToolTip,
   OnTimeChangeProps,
 } from '@elastic/eui';
-import {
-  CONTROL_GROUP_TYPE,
-  DEFAULT_CONTROL_GROW,
-  DEFAULT_CONTROL_WIDTH,
-} from '@kbn/controls-plugin/common';
+import { CONTROL_GROUP_TYPE } 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';
@@ -42,19 +38,18 @@ import {
 } from '@kbn/presentation-publishing';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 
+import { ControlGroupApi } from '../../react_controls/control_group/types';
+import {
+  clearControlGroupRuntimeState,
+  getControlGroupRuntimeState,
+  setControlGroupRuntimeState,
+} from './runtime_control_group_state';
 import {
   clearControlGroupSerializedState,
   getControlGroupSerializedState,
   setControlGroupSerializedState,
   WEB_LOGS_DATA_VIEW_ID,
 } from './serialized_control_group_state';
-import {
-  clearControlGroupRuntimeState,
-  getControlGroupRuntimeState,
-  setControlGroupRuntimeState,
-} from './runtime_control_group_state';
-import { ControlGroupApi } from '../../react_controls/control_group/types';
-import { openDataControlEditor } from '../../react_controls/data_controls/open_data_control_editor';
 
 const toggleViewButtons = [
   {
@@ -139,7 +134,7 @@ export const ReactControlExample = ({
       addNewPanel: () => {
         return Promise.resolve(undefined);
       },
-      lastUsedDataViewId: new BehaviorSubject<string>(WEB_LOGS_DATA_VIEW_ID),
+      lastUsedDataViewId$: new BehaviorSubject<string>(WEB_LOGS_DATA_VIEW_ID),
       saveNotification$,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -317,24 +312,7 @@ export const ReactControlExample = ({
           <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,
-                  },
-                });
+                controlGroupApi.openAddDataControlFlyout();
               }}
               size="s"
             >

examples/controls_example/public/index.ts

@@ -7,6 +7,16 @@
  */
 
 import { ControlsExamplePlugin } from './plugin';
+export type {
+  ControlGroupInput,
+  AwaitingControlGroupAPI,
+  ControlGroupAPI,
+  ControlGroupState,
+} from './react_controls/control_group/external_api';
+export {
+  ControlGroupRenderer,
+  controlGroupInputBuilder,
+} from './react_controls/control_group/external_api';
 
 export function plugin() {
   return new ControlsExamplePlugin();

examples/controls_example/public/plugin.tsx

@@ -21,6 +21,7 @@ import { OPTIONS_LIST_CONTROL_TYPE } from './react_controls/data_controls/option
 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 { setKibanaServices } from './react_controls/services/kibana_services';
 
 interface SetupDeps {
   developerExamples: DeveloperExamplesSetup;
@@ -123,6 +124,8 @@ export class ControlsExamplePlugin
   }
 
   public start(core: CoreStart, deps: ControlsExampleStartDeps) {
+    setKibanaServices(core, deps);
+
     const editControlAction = new EditControlAction();
     deps.uiActions.registerAction(editControlAction);
     deps.uiActions.attachAction(PANEL_HOVER_TRIGGER, editControlAction.id);

examples/controls_example/public/react_controls/actions/edit_control_action.tsx

@@ -38,7 +38,7 @@ const isApiCompatible = (api: unknown | null): api is DataControlApi =>
       apiIsPresentationContainer(api.parentApi)
   );
 
-const ACTION_EDIT_CONTROL = 'editDataControl';
+export const ACTION_EDIT_CONTROL = 'editDataControl';
 
 export class EditControlAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_EDIT_CONTROL;

examples/controls_example/public/react_controls/components/control_panel.tsx

@@ -100,6 +100,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
     grow,
     width,
     labelPosition,
+    disabledActionIds,
     rawViewMode,
   ] = useBatchedOptionalPublishingSubjects(
     api?.dataLoading,
@@ -109,6 +110,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
     api?.grow,
     api?.width,
     api?.parentApi?.labelPosition,
+    api?.parentApi?.disabledActionIds,
     viewModeSubject
   );
   const usingTwoLineLayout = labelPosition === 'twoLine';
@@ -147,7 +149,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
           'controlFrameFloatingActions--oneLine': !usingTwoLineLayout,
         })}
         viewMode={viewMode}
-        disabledActions={[]}
+        disabledActions={disabledActionIds}
         isEnabled={true}
       >
         <EuiFormRow