[dashboard] decouple DashboardStateFromSettingsFlyout type from Dashb…

…oardContainerInput type (elastic#204270) Part of elastic#204249 Co-authored-by: Elastic Machine <[email protected]>
shahzad31 · Dec 16, 2024 · e7dabbf · e7dabbf
1 parent 86fe148
commit e7dabbf
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 91 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_api/get_dashboard_api.ts b/src/plugins/dashboard/public/dashboard_api/get_dashboard_api.ts
@@ -87,18 +87,15 @@ export function getDashboardApi({
     controlGroupApi$,
     panelsManager.api.children$
   );
+  const settingsManager = initializeSettingsManager(initialState);
   const unifiedSearchManager = initializeUnifiedSearchManager(
     initialState,
     controlGroupApi$,
+    settingsManager.api.timeRestore$,
     dataLoadingManager.internalApi.waitForPanelsToLoad$,
     () => unsavedChangesManager.internalApi.getLastSavedState(),
     creationOptions
   );
-  const settingsManager = initializeSettingsManager({
-    initialState,
-    setTimeRestore: unifiedSearchManager.internalApi.setTimeRestore,
-    timeRestore$: unifiedSearchManager.internalApi.timeRestore$,
-  });
   const unsavedChangesManager = initializeUnsavedChangesManager({
     creationOptions,
     controlGroupApi$,

diff --git a/src/plugins/dashboard/public/dashboard_api/settings_manager.ts b/src/plugins/dashboard/public/dashboard_api/settings_manager.ts
@@ -8,25 +8,12 @@
  */
 
 import fastIsEqual from 'fast-deep-equal';
-import {
-  PublishingSubject,
-  StateComparators,
-  initializeTitles,
-} from '@kbn/presentation-publishing';
+import { StateComparators, initializeTitles } from '@kbn/presentation-publishing';
 import { BehaviorSubject } from 'rxjs';
-import { DashboardState } from './types';
+import { DashboardSettings, DashboardState } from './types';
 import { DEFAULT_DASHBOARD_INPUT } from '../dashboard_constants';
-import { DashboardStateFromSettingsFlyout } from '../dashboard_container/types';
 
-export function initializeSettingsManager({
-  initialState,
-  setTimeRestore,
-  timeRestore$,
-}: {
-  initialState?: DashboardState;
-  setTimeRestore: (timeRestore: boolean) => void;
-  timeRestore$: PublishingSubject<boolean | undefined>;
-}) {
+export function initializeSettingsManager(initialState?: DashboardState) {
   const syncColors$ = new BehaviorSubject<boolean>(
     initialState?.syncColors ?? DEFAULT_DASHBOARD_INPUT.syncColors
   );
@@ -50,6 +37,12 @@ export function initializeSettingsManager({
     if (!fastIsEqual(tags, tags$.value)) tags$.next(tags);
   }
   const titleManager = initializeTitles(initialState ?? {});
+  const timeRestore$ = new BehaviorSubject<boolean | undefined>(
+    initialState?.timeRestore ?? DEFAULT_DASHBOARD_INPUT.timeRestore
+  );
+  function setTimeRestore(timeRestore: boolean) {
+    if (timeRestore !== timeRestore$.value) timeRestore$.next(timeRestore);
+  }
   const useMargins$ = new BehaviorSubject<boolean>(
     initialState?.useMargins ?? DEFAULT_DASHBOARD_INPUT.useMargins
   );
@@ -69,7 +62,7 @@ export function initializeSettingsManager({
     };
   }
 
-  function setSettings(settings: DashboardStateFromSettingsFlyout) {
+  function setSettings(settings: DashboardSettings) {
     setSyncColors(settings.syncColors);
     setSyncCursor(settings.syncCursor);
     setSyncTooltips(settings.syncTooltips);
@@ -100,35 +93,16 @@ export function initializeSettingsManager({
       syncColors: [syncColors$, setSyncColors],
       syncCursor: [syncCursor$, setSyncCursor],
       syncTooltips: [syncTooltips$, setSyncTooltips],
+      timeRestore: [timeRestore$, setTimeRestore],
       useMargins: [useMargins$, setUseMargins],
-    } as StateComparators<
-      Pick<
-        DashboardState,
-        | 'description'
-        | 'hidePanelTitles'
-        | 'syncColors'
-        | 'syncCursor'
-        | 'syncTooltips'
-        | 'title'
-        | 'useMargins'
-      >
-    >,
+    } as StateComparators<Omit<DashboardSettings, 'tags'>>,
     internalApi: {
-      getState: (): Pick<
-        DashboardState,
-        | 'description'
-        | 'hidePanelTitles'
-        | 'syncColors'
-        | 'syncCursor'
-        | 'syncTooltips'
-        | 'tags'
-        | 'title'
-        | 'useMargins'
-      > => {
+      getState: (): DashboardSettings => {
         const settings = getSettings();
         return {
           ...settings,
           title: settings.title ?? '',
+          timeRestore: settings.timeRestore ?? DEFAULT_DASHBOARD_INPUT.timeRestore,
           hidePanelTitles: settings.hidePanelTitles ?? DEFAULT_DASHBOARD_INPUT.hidePanelTitles,
         };
       },

diff --git a/src/plugins/dashboard/public/dashboard_api/types.ts b/src/plugins/dashboard/public/dashboard_api/types.ts
@@ -54,15 +54,12 @@ import { PublishesReload } from '@kbn/presentation-publishing/interfaces/fetch/p
 import { PublishesSearchSession } from '@kbn/presentation-publishing/interfaces/fetch/publishes_search_session';
 import { LocatorPublic } from '@kbn/share-plugin/common';
 import { DashboardPanelMap, DashboardPanelState } from '../../common';
-import type { DashboardOptions } from '../../server/content_management';
+import type { DashboardAttributes, DashboardOptions } from '../../server/content_management';
 import {
   LoadDashboardReturn,
   SaveDashboardReturn,
 } from '../services/dashboard_content_management_service/types';
-import {
-  DashboardLocatorParams,
-  DashboardStateFromSettingsFlyout,
-} from '../dashboard_container/types';
+import { DashboardLocatorParams } from '../dashboard_container/types';
 
 export const DASHBOARD_API_TYPE = 'dashboard';
 
@@ -93,23 +90,19 @@ export interface DashboardCreationOptions {
   getEmbeddableAppContext?: (dashboardId?: string) => EmbeddableAppContext;
 }
 
-export interface DashboardState extends DashboardOptions {
-  // filter context to be passed to children
+export type DashboardSettings = DashboardOptions & {
+  description?: DashboardAttributes['description'];
+  tags: string[];
+  timeRestore: DashboardAttributes['timeRestore'];
+  title: DashboardAttributes['description'];
+};
+
+export interface DashboardState extends DashboardSettings {
   query: Query;
   filters: Filter[];
-  timeRestore: boolean;
   timeRange?: TimeRange;
   refreshInterval?: RefreshInterval;
-
-  // dashboard meta info
-  title: string;
-  tags: string[];
   viewMode: ViewMode;
-  description?: string;
-
-  // settings from DashboardOptions
-
-  // dashboard contents
   panels: DashboardPanelMap;
 
   /**
@@ -152,7 +145,7 @@ export type DashboardApi = CanExpandPanels &
     fullScreenMode$: PublishingSubject<boolean>;
     focusedPanelId$: PublishingSubject<string | undefined>;
     forceRefresh: () => void;
-    getSettings: () => DashboardStateFromSettingsFlyout;
+    getSettings: () => DashboardSettings;
     getDashboardPanelFromId: (id: string) => DashboardPanelState;
     hasOverlays$: PublishingSubject<boolean>;
     hasUnsavedChanges$: PublishingSubject<boolean>;
@@ -173,7 +166,7 @@ export type DashboardApi = CanExpandPanels &
     setPanels: (panels: DashboardPanelMap) => void;
     setQuery: (query?: Query | undefined) => void;
     setScrollToPanelId: (id: string | undefined) => void;
-    setSettings: (settings: DashboardStateFromSettingsFlyout) => void;
+    setSettings: (settings: DashboardSettings) => void;
     setTags: (tags: string[]) => void;
     setTimeRange: (timeRange?: TimeRange | undefined) => void;
     unifiedSearchFilters$: PublishesUnifiedSearch['filters$'];

diff --git a/src/plugins/dashboard/public/dashboard_api/unified_search_manager.ts b/src/plugins/dashboard/public/dashboard_api/unified_search_manager.ts
@@ -48,6 +48,7 @@ import { DEFAULT_DASHBOARD_INPUT, GLOBAL_STATE_STORAGE_KEY } from '../dashboard_
 export function initializeUnifiedSearchManager(
   initialState: DashboardState,
   controlGroupApi$: PublishingSubject<ControlGroupApi | undefined>,
+  timeRestore$: PublishingSubject<boolean | undefined>,
   waitForPanelsToLoad$: Observable<void>,
   getLastSavedState: () => DashboardState | undefined,
   creationOptions?: DashboardCreationOptions
@@ -97,12 +98,6 @@ export function initializeUnifiedSearchManager(
       timefilterService.setTime(timeRangeOrDefault);
     }
   }
-  const timeRestore$ = new BehaviorSubject<boolean | undefined>(
-    initialState?.timeRestore ?? DEFAULT_DASHBOARD_INPUT.timeRestore
-  );
-  function setTimeRestore(timeRestore: boolean) {
-    if (timeRestore !== timeRestore$.value) timeRestore$.next(timeRestore);
-  }
   const timeslice$ = new BehaviorSubject<[number, number] | undefined>(undefined);
   const unifiedSearchFilters$ = new BehaviorSubject<Filter[] | undefined>(initialState.filters);
   // setAndSyncUnifiedSearchFilters method not needed since filters synced with 2-way data binding
@@ -312,9 +307,8 @@ export function initializeUnifiedSearchManager(
           return true;
         },
       ],
-      timeRestore: [timeRestore$, setTimeRestore],
     } as StateComparators<
-      Pick<DashboardState, 'filters' | 'query' | 'refreshInterval' | 'timeRange' | 'timeRestore'>
+      Pick<DashboardState, 'filters' | 'query' | 'refreshInterval' | 'timeRange'>
     >,
     internalApi: {
       controlGroupReload$,
@@ -325,7 +319,6 @@ export function initializeUnifiedSearchManager(
           ...lastSavedState.filters,
         ]);
         setQuery(lastSavedState.query);
-        setTimeRestore(lastSavedState.timeRestore);
         if (lastSavedState.timeRestore) {
           setAndSyncRefreshInterval(lastSavedState.refreshInterval);
           setAndSyncTimeRange(lastSavedState.timeRange);
@@ -341,8 +334,6 @@ export function initializeUnifiedSearchManager(
         timeRange: timeRange$.value,
         timeRestore: timeRestore$.value ?? DEFAULT_DASHBOARD_INPUT.timeRestore,
       }),
-      setTimeRestore,
-      timeRestore$,
     },
     cleanup: () => {
       controlGroupSubscriptions.unsubscribe();

diff --git a/src/plugins/dashboard/public/dashboard_container/component/settings/index.ts b/src/plugins/dashboard/public/dashboard_container/component/settings/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { DashboardSettings } from './settings_flyout';
+export { DashboardSettingsFlyout } from './settings_flyout';
diff --git a/src/plugins/dashboard/public/dashboard_container/component/settings/settings_flyout.tsx b/src/plugins/dashboard/public/dashboard_container/component/settings/settings_flyout.tsx
@@ -31,7 +31,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { DashboardContainerInput } from '../../../../common';
+import { DashboardSettings } from '../../../dashboard_api/types';
 import { useDashboardApi } from '../../../dashboard_api/use_dashboard_api';
 import { getDashboardContentManagementService } from '../../../services/dashboard_content_management_service';
 import { savedObjectsTaggingService } from '../../../services/kibana_services';
@@ -42,7 +42,7 @@ interface DashboardSettingsProps {
 
 const DUPLICATE_TITLE_CALLOUT_ID = 'duplicateTitleCallout';
 
-export const DashboardSettings = ({ onClose }: DashboardSettingsProps) => {
+export const DashboardSettingsFlyout = ({ onClose }: DashboardSettingsProps) => {
   const dashboardApi = useDashboardApi();
 
   const [localSettings, setLocalSettings] = useState(dashboardApi.getSettings());
@@ -81,7 +81,7 @@ export const DashboardSettings = ({ onClose }: DashboardSettingsProps) => {
     }
   };
 
-  const updateDashboardSetting = useCallback((newSettings: Partial<DashboardContainerInput>) => {
+  const updateDashboardSetting = useCallback((newSettings: Partial<DashboardSettings>) => {
     setLocalSettings((prevSettings) => {
       return {
         ...prevSettings,

diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/api/open_settings_flyout.tsx b/src/plugins/dashboard/public/dashboard_container/embeddable/api/open_settings_flyout.tsx
@@ -14,14 +14,14 @@ import { toMountPoint } from '@kbn/react-kibana-mount';
 import { DashboardApi } from '../../../dashboard_api/types';
 import { DashboardContext } from '../../../dashboard_api/use_dashboard_api';
 import { coreServices } from '../../../services/kibana_services';
-import { DashboardSettings } from '../../component/settings/settings_flyout';
+import { DashboardSettingsFlyout } from '../../component/settings/settings_flyout';
 
 export function openSettingsFlyout(dashboardApi: DashboardApi) {
   dashboardApi.openOverlay(
     coreServices.overlays.openFlyout(
       toMountPoint(
         <DashboardContext.Provider value={dashboardApi}>
-          <DashboardSettings
+          <DashboardSettingsFlyout
             onClose={() => {
               dashboardApi.clearOverlays();
             }}

diff --git a/src/plugins/dashboard/public/dashboard_container/types.ts b/src/plugins/dashboard/public/dashboard_container/types.ts
@@ -12,7 +12,7 @@ import { SerializableRecord } from '@kbn/utility-types';
 
 import { ControlGroupRuntimeState } from '@kbn/controls-plugin/public';
 import type { DashboardContainerInput } from '../../common';
-import type { DashboardOptions, DashboardPanel } from '../../server/content_management';
+import type { DashboardPanel } from '../../server/content_management';
 
 export interface UnsavedPanelState {
   [key: string]: object | undefined;
@@ -23,13 +23,6 @@ export type RedirectToProps =
   | { destination: 'dashboard'; id?: string; useReplace?: boolean; editMode?: boolean }
   | { destination: 'listing'; filter?: string; useReplace?: boolean };
 
-export type DashboardStateFromSaveModal = Pick<
-  DashboardContainerInput,
-  'title' | 'description' | 'tags' | 'timeRestore'
->;
-
-export type DashboardStateFromSettingsFlyout = DashboardStateFromSaveModal & DashboardOptions;
-
 export type DashboardLoadType =
   | 'sessionFirstLoad'
   | 'dashboardFirstLoad'
@@ -41,8 +34,6 @@ export interface DashboardRenderPerformanceStats {
   panelsRenderStartTime: number;
 }
 
-export type DashboardContainerInputWithoutId = Omit<DashboardContainerInput, 'id'>;
-
 export interface DashboardContainerOutput extends ContainerOutput {
   usedDataViewIds?: string[];
 }