[embeddable] make presentation interface names consistent (#205279)

PR cleans up presentation interface names for consistentency * adds `$` suffix to all observables. For example, `dataLoading` => `dataLoading$` * removes `Panel` naming convention from interface names since an api may not be a panel, an api may be a dashboard. For example, `PublisesPanelTitle` => `PublishesTitle` #### Note to Reviewers Pay special attention to any place where your application creates an untyped API. In the example below, there is no typescript violation when the parent returns `dataLoading` instead of `dataLoading$` since the parent is not typed as `PublishesDataLoading`. Please check for instances like these. ``` <ReactEmbeddableRenderer getParentApi={() => { dataLoading: new BehaviorSubject() }} /> ``` --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Jan 22, 2025 · 0591605 · 0591605
1 parent 3314537
commit 0591605
Show file tree

Hide file tree

Showing 229 changed files with 1,265 additions and 1,299 deletions.
diff --git a/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx b/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx
@@ -70,7 +70,7 @@ export const EditExample = () => {
       INPUT_KEY,
       JSON.stringify({
         ...controlGroupAPI.snapshotRuntimeState(),
-        disabledActions: controlGroupAPI.disabledActionIds.getValue(), // not part of runtime
+        disabledActions: controlGroupAPI.disabledActionIds$.getValue(), // not part of runtime
       })
     );
 

diff --git a/examples/controls_example/public/app/react_control_example/react_control_example.tsx b/examples/controls_example/public/app/react_control_example/react_control_example.tsx
@@ -119,9 +119,9 @@ export const ReactControlExample = ({
     const children$ = new BehaviorSubject<{ [key: string]: unknown }>({});
 
     return {
-      dataLoading: dataLoading$,
+      dataLoading$,
       unifiedSearchFilters$,
-      viewMode: viewMode$,
+      viewMode$,
       filters$,
       query$,
       timeRange$,
@@ -149,7 +149,7 @@ export const ReactControlExample = ({
   useEffect(() => {
     const subscription = combineCompatibleChildrenApis<PublishesDataLoading, boolean | undefined>(
       dashboardApi,
-      'dataLoading',
+      'dataLoading$',
       apiPublishesDataLoading,
       undefined,
       // flatten method
@@ -249,7 +249,7 @@ export const ReactControlExample = ({
     if (!controlGroupApi) {
       return;
     }
-    const subscription = controlGroupApi.unsavedChanges.subscribe((nextUnsavedChanges) => {
+    const subscription = controlGroupApi.unsavedChanges$.subscribe((nextUnsavedChanges) => {
       if (!nextUnsavedChanges) {
         clearControlGroupRuntimeState();
         setUnsavedChanges(undefined);

diff --git a/...s/public/app/presentation_container_example/components/presentation_container_example.tsx b/...s/public/app/presentation_container_example/components/presentation_container_example.tsx
@@ -37,7 +37,7 @@ export const PresentationContainerExample = ({ uiActions }: { uiActions: UiActio
   }, [cleanUp]);
 
   const [dataLoading, panels, timeRange] = useBatchedPublishingSubjects(
-    pageApi.dataLoading,
+    pageApi.dataLoading$,
     componentApi.panels$,
     pageApi.timeRange$
   );
@@ -95,7 +95,7 @@ export const PresentationContainerExample = ({ uiActions }: { uiActions: UiActio
           <TopNav
             onSave={componentApi.onSave}
             resetUnsavedChanges={pageApi.resetUnsavedChanges}
-            unsavedChanges$={pageApi.unsavedChanges}
+            unsavedChanges$={pageApi.unsavedChanges$}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/...ples/embeddable_examples/public/app/presentation_container_example/components/top_nav.tsx b/...ples/embeddable_examples/public/app/presentation_container_example/components/top_nav.tsx
@@ -15,7 +15,7 @@ import { PublishesUnsavedChanges } from '@kbn/presentation-publishing';
 interface Props {
   onSave: () => Promise<void>;
   resetUnsavedChanges: () => void;
-  unsavedChanges$: PublishesUnsavedChanges['unsavedChanges'];
+  unsavedChanges$: PublishesUnsavedChanges['unsavedChanges$'];
 }
 
 export function TopNav(props: Props) {

diff --git a/examples/embeddable_examples/public/app/presentation_container_example/page_api.ts b/examples/embeddable_examples/public/app/presentation_container_example/page_api.ts
@@ -81,7 +81,7 @@ export function getPageApi() {
     boolean | undefined
   >(
     { children$ },
-    'dataLoading',
+    'dataLoading$',
     apiPublishesDataLoading,
     undefined,
     // flatten method
@@ -193,7 +193,7 @@ export function getPageApi() {
       },
       canRemovePanels: () => true,
       children$,
-      dataLoading: dataLoading$,
+      dataLoading$,
       executionContext: {
         type: 'presentationContainerEmbeddableExample',
       },
@@ -210,7 +210,7 @@ export function getPageApi() {
         children$.next(omit(children$.value, id));
       },
       saveNotification$,
-      viewMode: new BehaviorSubject<ViewMode>('edit'),
+      viewMode$: new BehaviorSubject<ViewMode>('edit'),
       /**
        * return last saved embeddable state
        */
@@ -252,7 +252,7 @@ export function getPageApi() {
         return true;
       },
       timeRange$,
-      unsavedChanges: unsavedChanges$ as PublishingSubject<object | undefined>,
+      unsavedChanges$: unsavedChanges$ as PublishingSubject<object | undefined>,
     } as PageApi,
   };
 }
diff --git a/examples/embeddable_examples/public/app/render_examples.tsx b/examples/embeddable_examples/public/app/render_examples.tsx
@@ -47,7 +47,7 @@ export const RenderExamples = () => {
   const [api, setApi] = useState<SearchApi | null>(null);
   const [hidePanelChrome, setHidePanelChrome] = useState<boolean>(false);
   const [dataLoading, timeRange] = useBatchedOptionalPublishingSubjects(
-    api?.dataLoading,
+    api?.dataLoading$,
     parentApi.timeRange$
   );
 

diff --git a/...ples/embeddable_examples/public/app/state_management_example/state_management_example.tsx b/...ples/embeddable_examples/public/app/state_management_example/state_management_example.tsx
@@ -40,10 +40,10 @@ export const StateManagementExample = ({ uiActions }: { uiActions: UiActionsStar
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   useEffect(() => {
-    if (!bookApi || !bookApi.unsavedChanges) {
+    if (!bookApi || !bookApi.unsavedChanges$) {
       return;
     }
-    const subscription = bookApi.unsavedChanges.subscribe((unsavedChanges) => {
+    const subscription = bookApi.unsavedChanges$.subscribe((unsavedChanges) => {
       setHasUnsavedChanges(unsavedChanges !== undefined);
       unsavedChangesSessionStorage.save(unsavedChanges ?? {});
     });
@@ -158,7 +158,7 @@ export const StateManagementExample = ({ uiActions }: { uiActions: UiActionsStar
               return unsavedChangesSessionStorage.load();
             },
             saveNotification$,
-            viewMode: new BehaviorSubject<ViewMode>('edit'),
+            viewMode$: new BehaviorSubject<ViewMode>('edit'),
           };
         }}
         onApiAvailable={(api) => {

diff --git a/examples/embeddable_examples/public/react_embeddables/data_table/data_table_queries.ts b/examples/embeddable_examples/public/react_embeddables/data_table/data_table_queries.ts
@@ -60,7 +60,7 @@ export const initializeDataTableQueries = async (
         dataView$.next(defaultDataView);
         return;
       }
-      const dataViewSubscription = dataViewProvider.dataViews.subscribe((dataViews) => {
+      const dataViewSubscription = dataViewProvider.dataViews$.subscribe((dataViews) => {
         dataView$.next(dataViews?.[0] ?? defaultDataView);
       });
       return () => dataViewSubscription.unsubscribe();

diff --git a/...s/embeddable_examples/public/react_embeddables/data_table/data_table_react_embeddable.tsx b/...s/embeddable_examples/public/react_embeddables/data_table/data_table_react_embeddable.tsx
@@ -17,7 +17,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import {
   initializeTimeRange,
-  initializeTitles,
+  initializeTitleManager,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
@@ -40,8 +40,8 @@ export const getDataTableFactory = (
   buildEmbeddable: async (state, buildApi, uuid, parentApi) => {
     const storage = new Storage(localStorage);
     const timeRange = initializeTimeRange(state);
-    const queryLoading$ = new BehaviorSubject<boolean | undefined>(true);
-    const { titlesApi, titleComparators, serializeTitles } = initializeTitles(state);
+    const dataLoading$ = new BehaviorSubject<boolean | undefined>(true);
+    const titleManager = initializeTitleManager(state);
     const allServices: UnifiedDataTableProps['services'] = {
       ...services,
       storage,
@@ -53,18 +53,18 @@ export const getDataTableFactory = (
     const api = buildApi(
       {
         ...timeRange.api,
-        ...titlesApi,
-        dataLoading: queryLoading$,
+        ...titleManager.api,
+        dataLoading$,
         serializeState: () => {
           return {
-            rawState: { ...serializeTitles(), ...timeRange.serialize() },
+            rawState: { ...titleManager.serialize(), ...timeRange.serialize() },
           };
         },
       },
-      { ...titleComparators, ...timeRange.comparators }
+      { ...titleManager.comparators, ...timeRange.comparators }
     );
 
-    const queryService = await initializeDataTableQueries(services, api, queryLoading$);
+    const queryService = await initializeDataTableQueries(services, api, dataLoading$);
 
     // Create the React Embeddable component
     return {
@@ -74,7 +74,7 @@ export const getDataTableFactory = (
         const [fields, rows, loading, dataView] = useBatchedPublishingSubjects(
           queryService.fields$,
           queryService.rows$,
-          queryLoading$,
+          dataLoading$,
           queryService.dataView$
         );
 

diff --git a/...beddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx b/...beddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
@@ -12,7 +12,7 @@ import { css } from '@emotion/react';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import {
-  initializeTitles,
+  initializeTitleManager,
   useInheritedViewMode,
   useStateFromPublishingSubject,
 } from '@kbn/presentation-publishing';
@@ -40,7 +40,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
     /**
      * initialize state (source of truth)
      */
-    const { titlesApi, titleComparators, serializeTitles } = initializeTitles(state);
+    const titleManager = initializeTitleManager(state);
     const content$ = new BehaviorSubject(state.content);
 
     /**
@@ -50,11 +50,11 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
      */
     const api = buildApi(
       {
-        ...titlesApi,
+        ...titleManager.api,
         serializeState: () => {
           return {
             rawState: {
-              ...serializeTitles(),
+              ...titleManager.serialize(),
               content: content$.getValue(),
             },
           };
@@ -69,7 +69,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
        */
       {
         content: [content$, (value) => content$.next(value)],
-        ...titleComparators,
+        ...titleManager.comparators,
       }
     );
 

diff --git a/...s/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx b/...s/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
@@ -15,7 +15,7 @@ import { DataView } from '@kbn/data-views-plugin/common';
 import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/public';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { initializeTitles, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
+import { initializeTitleManager, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public';
 import {
   UnifiedFieldListSidebarContainer,
@@ -69,7 +69,7 @@ export const getFieldListFactory = (
     },
     buildEmbeddable: async (initialState, buildApi) => {
       const subscriptions = new Subscription();
-      const { titlesApi, titleComparators, serializeTitles } = initializeTitles(initialState);
+      const titleManager = initializeTitleManager(initialState);
 
       // set up data views
       const [allDataViews, defaultDataViewId] = await Promise.all([
@@ -105,8 +105,8 @@ export const getFieldListFactory = (
 
       const api = buildApi(
         {
-          ...titlesApi,
-          dataViews: dataViews$,
+          ...titleManager.api,
+          dataViews$,
           selectedFields: selectedFieldNames$,
           serializeState: () => {
             const dataViewId = selectedDataViewId$.getValue();
@@ -121,7 +121,7 @@ export const getFieldListFactory = (
               : [];
             return {
               rawState: {
-                ...serializeTitles(),
+                ...titleManager.serialize(),
                 // here we skip serializing the dataViewId, because the reference contains that information.
                 selectedFieldNames: selectedFieldNames$.getValue(),
               },
@@ -130,7 +130,7 @@ export const getFieldListFactory = (
           },
         },
         {
-          ...titleComparators,
+          ...titleManager.comparators,
           dataViewId: [selectedDataViewId$, (value) => selectedDataViewId$.next(value)],
           selectedFieldNames: [
             selectedFieldNames$,

diff --git a/...s/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx b/...s/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 import {
   apiHasParentApi,
   getUnchangingComparator,
-  initializeTitles,
+  initializeTitleManager,
   SerializedTitles,
   SerializedPanelState,
   useBatchedPublishingSubjects,
@@ -81,7 +81,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
       };
     },
     buildEmbeddable: async (state, buildApi) => {
-      const { titlesApi, titleComparators, serializeTitles } = initializeTitles(state);
+      const titleManager = initializeTitleManager(state);
       const bookAttributesManager = stateManagerFromAttributes(state);
       const isByReference = Boolean(state.savedBookId);
 
@@ -90,21 +90,21 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
           // if this book is currently by reference, we serialize the reference only.
           const bookByReferenceState: BookByReferenceSerializedState = {
             savedBookId: newId ?? state.savedBookId!,
-            ...serializeTitles(),
+            ...titleManager.serialize(),
           };
           return { rawState: bookByReferenceState };
         }
         // if this book is currently by value, we serialize the entire state.
         const bookByValueState: BookByValueSerializedState = {
           attributes: serializeBookAttributes(bookAttributesManager),
-          ...serializeTitles(),
+          ...titleManager.serialize(),
         };
         return { rawState: bookByValueState };
       };
 
       const api = buildApi(
         {
-          ...titlesApi,
+          ...titleManager.api,
           onEdit: async () => {
             openSavedBookEditor({
               attributesManager: bookAttributesManager,
@@ -152,7 +152,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
         {
           savedBookId: getUnchangingComparator(), // saved book id will not change over the lifetime of the embeddable.
           ...bookAttributesManager.comparators,
-          ...titleComparators,
+          ...titleManager.comparators,
         }
       );
 

diff --git a/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
@@ -49,9 +49,9 @@ export const getSearchEmbeddableFactory = (services: Services) => {
       const api = buildApi(
         {
           ...timeRange.api,
-          blockingError: blockingError$,
-          dataViews: dataViews$,
-          dataLoading: dataLoading$,
+          blockingError$,
+          dataViews$,
+          dataLoading$,
           serializeState: () => {
             return {
               rawState: {

diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
@@ -72,8 +72,8 @@ export const GridExample = ({
 
   const mockDashboardApi = useMockDashboardApi({ savedState: savedState.current });
   const [viewMode, expandedPanelId] = useBatchedPublishingSubjects(
-    mockDashboardApi.viewMode,
-    mockDashboardApi.expandedPanelId
+    mockDashboardApi.viewMode$,
+    mockDashboardApi.expandedPanelId$
   );
 
   useEffect(() => {
@@ -244,7 +244,7 @@ export const GridExample = ({
                           ]}
                           idSelected={viewMode}
                           onChange={(id) => {
-                            mockDashboardApi.viewMode.next(id);
+                            mockDashboardApi.viewMode$.next(id);
                           }}
                         />
                       </EuiFormRow>

diff --git a/examples/grid_example/public/use_mock_dashboard_api.tsx b/examples/grid_example/public/use_mock_dashboard_api.tsx
@@ -48,10 +48,10 @@ export const useMockDashboardApi = ({
       }),
       filters$: new BehaviorSubject([]),
       query$: new BehaviorSubject(''),
-      viewMode: new BehaviorSubject('edit'),
+      viewMode$: new BehaviorSubject('edit'),
       panels$,
       rows$: new BehaviorSubject<MockedDashboardRowMap>(savedState.rows),
-      expandedPanelId: expandedPanelId$,
+      expandedPanelId$,
       expandPanel: (id: string) => {
         if (expandedPanelId$.getValue()) {
           expandedPanelId$.next(undefined);

diff --git a/examples/portable_dashboards_example/public/dual_dashboards_example.tsx b/examples/portable_dashboards_example/public/dual_dashboards_example.tsx
@@ -27,7 +27,7 @@ export const DualDashboardsExample = () => {
   const [secondDashboardApi, setSecondDashboardApi] = useState<DashboardApi | undefined>();
 
   const ButtonControls = ({ dashboardApi }: { dashboardApi: DashboardApi }) => {
-    const viewMode = useStateFromPublishingSubject(dashboardApi.viewMode);
+    const viewMode = useStateFromPublishingSubject(dashboardApi.viewMode$);
 
     return (
       <EuiButtonGroup

diff --git a/...es/private/kbn-reporting/get_csv_panel_actions/panel_actions/get_csv_panel_action.test.ts b/...es/private/kbn-reporting/get_csv_panel_actions/panel_actions/get_csv_panel_action.test.ts
@@ -104,7 +104,7 @@ describe('GetCsvReportPanelAction', () => {
         }),
         hasTimeRange: () => true,
         parentApi: {
-          viewMode: new BehaviorSubject('view'),
+          viewMode$: new BehaviorSubject('view'),
         },
       },
     } as EmbeddableApiContext;