[dashboards as code] Make options parameter optional and avoid injecting defaults in REST API response (elastic#238129)

PR does the following:
* Updates options schema to make options object optional and option keys
optional
* Updates server logic to not inject default values for options on write
and on read
* Updates client typing to consume options with same type as defined in
schema. Previously, options where spread into client state. Now options
are under the options key just like REST API shape

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: kibanamachine <[email protected]>

Author: 3 people

src/platform/packages/shared/presentation/presentation_publishing/state_manager/state_comparators.ts

@@ -35,13 +35,16 @@ export const runComparator = <StateType extends object = object>(
  */
 export const diffComparators = <StateType extends object = object>(
   comparators: StateComparators<StateType>,
-  lastSavedState?: StateType,
-  latestState?: StateType
+  lastSavedState?: Partial<StateType>,
+  latestState?: Partial<StateType>,
+  defaultState?: Partial<StateType>
 ): Partial<StateType> => {
   return Object.keys(comparators).reduce((acc, key) => {
     const comparator = comparators[key as keyof StateType];
-    const lastSavedValue = lastSavedState?.[key as keyof StateType];
-    const currentValue = latestState?.[key as keyof StateType];
+    const lastSavedValue =
+      lastSavedState?.[key as keyof StateType] ?? defaultState?.[key as keyof StateType];
+    const currentValue =
+      latestState?.[key as keyof StateType] ?? defaultState?.[key as keyof StateType];
 
     if (!runComparator(comparator, lastSavedState, latestState, lastSavedValue, currentValue)) {
       acc[key as keyof StateType] = currentValue;

src/platform/packages/shared/presentation/presentation_publishing/state_manager/state_manager.ts

@@ -28,7 +28,7 @@ type KeyToSubjectMap<StateType extends object> = {
  * @param comparators - Optional StateComparators. When provided, subject will only emit when value changes.
  */
 export const initializeStateManager = <StateType extends object>(
-  initialState: StateType,
+  initialState: Partial<StateType>,
   defaultState: WithAllKeys<StateType>,
   comparators?: StateComparators<StateType>
 ): StateManager<StateType> => {

src/platform/plugins/shared/dashboard/common/index.ts

@@ -7,12 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export type {
-  DashboardCapabilities,
-  DashboardLocatorParams,
-  DashboardSettings,
-  DashboardState,
-} from './types';
+export type { DashboardCapabilities, DashboardLocatorParams, DashboardState } from './types';
 
 export {
   getReferencesForPanelId,

src/platform/plugins/shared/dashboard/common/types.ts

@@ -8,12 +8,12 @@
  */
 
 import type { Reference } from '@kbn/content-management-utils';
-import type { SerializableRecord, Writable } from '@kbn/utility-types';
+import type { SerializableRecord } from '@kbn/utility-types';
 import type { ViewMode } from '@kbn/presentation-publishing';
 import type { RefreshInterval } from '@kbn/data-plugin/public';
 import type { ControlsGroupState } from '@kbn/controls-schemas';
 
-import type { DashboardAttributes, DashboardOptions } from '../server/content_management';
+import type { DashboardAttributes } from '../server/content_management';
 
 export interface DashboardCapabilities {
   showWriteControls: boolean;
@@ -27,14 +27,12 @@ export interface DashboardAttributesAndReferences {
   references: Reference[];
 }
 
-export type DashboardSettings = Writable<DashboardOptions> & {
+export interface DashboardState {
+  options?: DashboardAttributes['options'];
   description?: DashboardAttributes['description'];
-  tags: string[];
+  tags?: DashboardAttributes['tags'];
   timeRestore: DashboardAttributes['timeRestore'];
   title: DashboardAttributes['description'];
-};
-
-export interface DashboardState extends DashboardSettings {
   query?: DashboardAttributes['query'];
   filters?: DashboardAttributes['filters'];
   timeRange?: DashboardAttributes['timeRange'];

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

@@ -17,11 +17,4 @@ export const DEFAULT_DASHBOARD_STATE: DashboardState = {
   panels: [],
   title: '',
   tags: [],
-
-  // options
-  useMargins: true,
-  syncColors: false,
-  syncCursor: true,
-  syncTooltips: false,
-  hidePanelTitles: false,
 };

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

@@ -120,7 +120,7 @@ export function getDashboardApi({
     const { panels, references: panelReferences } = layoutManager.internalApi.serializeLayout();
     const unifiedSearchState = unifiedSearchManager.internalApi.getState();
     const dashboardState: DashboardState = {
-      ...settingsManager.api.getSettings(),
+      ...settingsManager.internalApi.serializeSettings(),
       ...unifiedSearchState,
       panels,
     };

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

@@ -55,12 +55,7 @@ export const getSerializedState = ({
     timeRestore,
     description,
 
-    // Dashboard options
-    useMargins,
-    syncColors,
-    syncCursor,
-    syncTooltips,
-    hidePanelTitles,
+    options,
     controlGroupInput,
   } = dashboardState;
 
@@ -76,14 +71,6 @@ export const getSerializedState = ({
     //
   }
 
-  const options = {
-    useMargins,
-    syncColors,
-    syncCursor,
-    syncTooltips,
-    hidePanelTitles,
-  };
-
   /**
    * Parse global time filter settings
    */
@@ -115,9 +102,10 @@ export const getSerializedState = ({
   // TODO Provide tags as an array of tag names in the attribute. In that case, tag references
   // will be extracted by the server.
   const savedObjectsTaggingApi = savedObjectsTaggingService?.getTaggingApi();
-  const references = savedObjectsTaggingApi?.ui.updateTagsReferences
-    ? savedObjectsTaggingApi?.ui.updateTagsReferences([], tags)
-    : [];
+  const references =
+    tags && savedObjectsTaggingApi?.ui.updateTagsReferences
+      ? savedObjectsTaggingApi?.ui.updateTagsReferences([], tags)
+      : [];
 
   const allReferences = [
     ...references,

src/platform/plugins/shared/dashboard/public/dashboard_api/settings_manager.test.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { getSampleDashboardState } from '../mocks';
+import type { DashboardState } from '../../common';
+import { initializeSettingsManager } from './settings_manager';
+
+describe('initializeSettingsManager', () => {
+  describe('startComparing$', () => {
+    test('Should return no changes when there are no changes', (done) => {
+      const lastSavedState$ = new BehaviorSubject<DashboardState>(getSampleDashboardState());
+      const settingsManager = initializeSettingsManager(lastSavedState$.value);
+      settingsManager.internalApi.startComparing$(lastSavedState$).subscribe((changes) => {
+        expect(changes).toMatchInlineSnapshot(`Object {}`);
+        done();
+      });
+    });
+
+    test('Should return only changed keys when there are changes', (done) => {
+      const lastSavedState$ = new BehaviorSubject<DashboardState>({
+        ...getSampleDashboardState(),
+        timeRestore: true,
+      });
+      const settingsManager = initializeSettingsManager(lastSavedState$.value);
+      settingsManager.internalApi.startComparing$(lastSavedState$).subscribe((changes) => {
+        expect(changes).toMatchInlineSnapshot(`
+          Object {
+            "options": Object {
+              "hidePanelTitles": true,
+              "syncColors": false,
+              "syncCursor": true,
+              "syncTooltips": false,
+              "useMargins": true,
+            },
+            "timeRestore": false,
+            "title": "updated title",
+          }
+        `);
+        done();
+      });
+      const currentSettings = settingsManager.api.getSettings();
+      settingsManager.api.setSettings({
+        ...currentSettings,
+        title: 'updated title',
+        hidePanelTitles: !currentSettings.hidePanelTitles,
+        timeRestore: false,
+      });
+    });
+  });
+});