[Controls Anywhere] Keep controls focused when creating + editing other panels

src/platform/packages/shared/presentation/presentation_containers/index.ts

@@ -24,11 +24,13 @@ export {
   apiCanBeCustomized,
   apiCanBeExpanded,
   apiCanBePinned,
+  apiHasSectionId,
   type IsDuplicable,
   type IsExpandable,
   type IsCustomizable,
   type IsPinnable,
   type HasPanelCapabilities,
+  type HasSectionId,
 } from './interfaces/panel_capabilities';
 export { type CanAddNewSection, apiCanAddNewSection } from './interfaces/can_add_new_section';
 export {

src/platform/packages/shared/presentation/presentation_containers/interfaces/panel_capabilities.ts

@@ -7,6 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { Observable } from 'rxjs';
+
 export interface IsDuplicable {
   isDuplicable: boolean;
 }
@@ -33,4 +35,16 @@ export interface IsPinnable {
 export const apiCanBePinned = (unknownApi: unknown | null): unknownApi is IsPinnable =>
   Boolean((unknownApi as IsPinnable).isPinnable);
 
-export type HasPanelCapabilities = IsExpandable & IsCustomizable & IsDuplicable & IsPinnable;
+export interface HasSectionId {
+  sectionId$: Observable<string | undefined>;
+}
+
+export const apiHasSectionId = (api: unknown): api is HasSectionId => {
+  return typeof (api as HasSectionId)?.sectionId$ !== 'undefined';
+};
+
+export type HasPanelCapabilities = IsExpandable &
+  IsCustomizable &
+  IsDuplicable &
+  IsPinnable &
+  HasSectionId;

src/platform/plugins/shared/controls/public/controls/data_controls/data_control_manager.ts

@@ -7,12 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { BehaviorSubject, combineLatest, merge, switchMap, tap } from 'rxjs';
+import { BehaviorSubject, combineLatest, merge, of, switchMap, tap } from 'rxjs';
 
 import type { DataControlState } from '@kbn/controls-schemas';
 import { type DataView, type DataViewField } from '@kbn/data-views-plugin/common';
 import type { Filter } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
+import type { PublishingSubject } from '@kbn/presentation-publishing';
 import {
   initializeTitleManager,
   titleComparators,
@@ -22,6 +23,7 @@ import { initializeStateManager } from '@kbn/presentation-publishing/state_manag
 import type { StateManager } from '@kbn/presentation-publishing/state_manager/types';
 import { DEFAULT_IGNORE_VALIDATIONS, DEFAULT_USE_GLOBAL_FILTERS } from '@kbn/controls-constants';
 
+import { apiHasSections } from '@kbn/presentation-containers';
 import { dataViewsService } from '../../services/kibana_services';
 import { openDataControlEditor } from './open_data_control_editor';
 import type { DataControlApi, DataControlFieldFormatter } from './types';
@@ -201,6 +203,11 @@ export const initializeDataControlManager = async <EditorState extends object =
     initialFilter ? [initialFilter] : undefined
   );
 
+  /** Output filters when selections and/or filter meta data changes */
+  const sectionId$ = (
+    apiHasSections(parentApi) ? parentApi.getPanelSection$(controlId) : of(undefined)
+  ) as PublishingSubject<string | undefined>;
+
   return {
     api: {
       ...titlesManager.api,
@@ -222,6 +229,7 @@ export const initializeDataControlManager = async <EditorState extends object =
       isCustomizable: false,
       isDuplicable: true,
       isPinnable: true,
+      sectionId$,
     },
     cleanup: () => {
       dataViewIdSubscription.unsubscribe();

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx

@@ -17,14 +17,13 @@ import {
   filter,
   map,
   merge,
-  of,
   skip,
 } from 'rxjs';
 
 import { OPTIONS_LIST_CONTROL } from '@kbn/controls-constants';
 import type { OptionsListControlState } from '@kbn/controls-schemas';
 import type { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
-import { apiHasSections, initializeUnsavedChanges } from '@kbn/presentation-containers';
+import { initializeUnsavedChanges } from '@kbn/presentation-containers';
 import type { PublishingSubject, SerializedPanelState } from '@kbn/presentation-publishing';
 
 import type { OptionsListSuccessResponse } from '../../../../common/options_list';
@@ -225,18 +224,13 @@ export const getOptionsListControlFactory = (): EmbeddableFactory<
           hasSelections$.next(hasSelections);
         });
 
-      /** Output filters when selections and/or filter meta data changes */
-      const sectionId$ = apiHasSections(parentApi)
-        ? parentApi.getPanelSection$(uuid)
-        : of(undefined);
-
       const outputFilterSubscription = combineLatest([
         dataControlManager.api.dataViews$,
         dataControlManager.api.fieldName$,
         selectionsManager.api.selectedOptions$,
         selectionsManager.api.existsSelected$,
         selectionsManager.api.exclude$,
-        sectionId$,
+        dataControlManager.api.sectionId$,
       ])
         .pipe(debounceTime(0))
         .subscribe(

src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx

@@ -8,14 +8,14 @@
  */
 
 import React, { useEffect } from 'react';
-import { BehaviorSubject, combineLatest, debounceTime, map, merge, of, skip } from 'rxjs';
+import { BehaviorSubject, combineLatest, debounceTime, map, merge, skip } from 'rxjs';
 
 import {
   apiPublishesViewMode,
   fetch$,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { apiHasSections, initializeUnsavedChanges } from '@kbn/presentation-containers';
+import { initializeUnsavedChanges } from '@kbn/presentation-containers';
 import { RANGE_SLIDER_CONTROL } from '@kbn/controls-constants';
 
 import type { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -173,16 +173,11 @@ export const getRangesliderControlFactory = (): EmbeddableFactory<
         }
       );
 
-      /** Output filters when selections and/or filter meta data changes */
-      const sectionId$ = apiHasSections(parentApi)
-        ? parentApi.getPanelSection$(uuid)
-        : of(undefined);
-
       const outputFilterSubscription = combineLatest([
         dataControlManager.api.dataViews$,
         dataControlManager.api.fieldName$,
         selections.value$,
-        sectionId$,
+        dataControlManager.api.sectionId$,
       ])
         .pipe(debounceTime(0))
         .subscribe(([dataViews, fieldName, value, sectionId]) => {
@@ -212,6 +207,7 @@ export const getRangesliderControlFactory = (): EmbeddableFactory<
         ? parentApi.viewMode$
         : new BehaviorSubject<boolean>(true);
 
+      console.log('API', api);
       return {
         api,
         Component: () => {

src/platform/plugins/shared/controls/public/controls/esql_control/esql_control_manager.ts

@@ -266,6 +266,7 @@ export function initializeESQLControlManager(
       hasSelections$: hasSelections$ as PublishingSubject<boolean | undefined>,
       esqlVariable$: esqlVariable$ as PublishingSubject<ESQLControlVariable>,
       singleSelect$: singleSelect$ as PublishingSubject<boolean>,
+      sectionId$: sectionId$ as PublishingSubject<string | undefined>,
     },
     anyStateChange$: merge(
       selectedOptions$,

src/platform/plugins/shared/controls/public/controls/esql_control/types.ts

@@ -14,13 +14,15 @@ import type {
   TitlesApi,
 } from '@kbn/presentation-publishing';
 import type { Filter } from '@kbn/es-query';
+import type { HasSectionId } from '@kbn/presentation-containers';
 import type { OptionsListComponentState } from '../data_controls/options_list_control/types';
 
 export type ESQLControlApi = DefaultEmbeddableApi<ESQLControlState> &
   PublishesESQLVariable &
   HasEditCapabilities &
   TitlesApi &
-  PublishesDataLoading;
+  PublishesDataLoading &
+  HasSectionId;
 
 type HideExcludeUnusedState = Pick<OptionsListComponentState, 'exclude'>;
 type HideExistsUnusedState = Pick<OptionsListComponentState, 'existsSelected'>;

src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts

@@ -43,6 +43,7 @@ import { initializeUnsavedChangesManager } from './unsaved_changes_manager';
 import { initializeViewModeManager } from './view_mode_manager';
 import type { DashboardReadResponseBody } from '../../server';
 import { initializePauseFetchManager } from './pause_fetch_manager';
+import { initializeRelatedPanelsManager } from './related_panels_manager';
 
 export function getDashboardApi({
   creationOptions,
@@ -169,6 +170,8 @@ export function getDashboardApi({
 
   const pauseFetchManager = initializePauseFetchManager(filtersManager);
 
+  const relatedPanelsManager = initializeRelatedPanelsManager(trackPanel, layoutManager);
+
   const dashboardApi = {
     ...viewModeManager.api,
     ...dataLoadingManager.api,
@@ -290,6 +293,7 @@ export function getDashboardApi({
     ...layoutManager.internalApi,
     ...unifiedSearchManager.internalApi,
     ...esqlVariablesManager.api,
+    ...relatedPanelsManager.api,
     dashboardContainerRef$,
     setDashboardContainerRef: (ref: HTMLElement | null) => dashboardContainerRef$.next(ref),
   };