[Reporting/Dashboard] Update integration to use v2 reports (#108553)

* very wip, updating dashboard integration to use v2 reports. at the moment time filters are not working correctly

* added missing dependency to hook

* added tests and refined ForwadedAppState interface

* remove unused import

* updated test because generating a report from an unsaved report is possible

* migrated locator to forward state on history only, reordered methods on react component

* remove unused import

* update locator test and use panel index number if panelIndex does not exist

* ensure locator params are serializable

* - moved getSerializableRecord to locator.ts to ensure that the
  values we get from it will never contain something that cannot
  be passed to history.push
- updated types to remove some `& SerializableRecord` instances
- fixed embeddable drilldown Jest tests given that we no longer
  expect state to be in the URL

* update generated api docs

* remove unused variable

* - removed SerializedRecord extension from dashboard locator params
  interface
- factored out state conversion logic from the locator getLocation

* updated locator jest tests and SerializableRecord types

* explicitly map values to dashboardlocatorparams and export serializable params type

* use serializable params type in embeddable

* factored out logic for converting panels to dashboard panels map

* use "type =" instead of "interface"

* big update to locator params: type fixes and added options key

* added comment about why we are using "type" alias instead of "interface" declaration

* simplify is v2 job param check

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

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md

@@ -80,7 +80,6 @@
 |  [QuerySuggestionField](./kibana-plugin-plugins-data-public.querysuggestionfield.md) | \* |
 |  [QuerySuggestionGetFnArgs](./kibana-plugin-plugins-data-public.querysuggestiongetfnargs.md) | \* |
 |  [Reason](./kibana-plugin-plugins-data-public.reason.md) |  |
-|  [RefreshInterval](./kibana-plugin-plugins-data-public.refreshinterval.md) |  |
 |  [SavedQuery](./kibana-plugin-plugins-data-public.savedquery.md) |  |
 |  [SavedQueryService](./kibana-plugin-plugins-data-public.savedqueryservice.md) |  |
 |  [SearchSessionInfoProvider](./kibana-plugin-plugins-data-public.searchsessioninfoprovider.md) | Provide info about current search session to be stored in the Search Session saved object |
@@ -176,6 +175,7 @@
 |  [RangeFilter](./kibana-plugin-plugins-data-public.rangefilter.md) |  |
 |  [RangeFilterMeta](./kibana-plugin-plugins-data-public.rangefiltermeta.md) |  |
 |  [RangeFilterParams](./kibana-plugin-plugins-data-public.rangefilterparams.md) |  |
+|  [RefreshInterval](./kibana-plugin-plugins-data-public.refreshinterval.md) |  |
 |  [SavedQueryTimeFilter](./kibana-plugin-plugins-data-public.savedquerytimefilter.md) |  |
 |  [SearchBarProps](./kibana-plugin-plugins-data-public.searchbarprops.md) |  |
 |  [StatefulSearchBarProps](./kibana-plugin-plugins-data-public.statefulsearchbarprops.md) |  |

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.refreshinterval.md

@@ -2,18 +2,13 @@
 
 [Home](./index.md) > [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) > [RefreshInterval](./kibana-plugin-plugins-data-public.refreshinterval.md)
 
-## RefreshInterval interface
+## RefreshInterval type
 
 <b>Signature:</b>
 
 ```typescript
-export interface RefreshInterval 
+export declare type RefreshInterval = {
+    pause: boolean;
+    value: number;
+};
 ```
-
-## Properties
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [pause](./kibana-plugin-plugins-data-public.refreshinterval.pause.md) | <code>boolean</code> |  |
-|  [value](./kibana-plugin-plugins-data-public.refreshinterval.value.md) | <code>number</code> |  |
-

src/plugins/dashboard/common/bwc/types.ts

@@ -7,6 +7,7 @@
  */
 
 import { SavedObjectReference } from 'kibana/public';
+import type { Serializable } from '@kbn/utility-types';
 
 import { GridData } from '../';
 
@@ -110,7 +111,7 @@ export type RawSavedDashboardPanel630 = RawSavedDashboardPanel620;
 // In 6.2 we added an inplace migration, moving uiState into each panel's new embeddableConfig property.
 // Source: https://github.com/elastic/kibana/pull/14949
 export type RawSavedDashboardPanel620 = RawSavedDashboardPanel610 & {
-  embeddableConfig: { [key: string]: unknown };
+  embeddableConfig: { [key: string]: Serializable };
   version: string;
 };
 

src/plugins/dashboard/common/embeddable/types.ts

@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
-export interface GridData {
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type GridData = {
   w: number;
   h: number;
   x: number;
   y: number;
   i: string;
-}
+};

src/plugins/dashboard/common/migrate_to_730_panels.ts

@@ -7,6 +7,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import type { SerializableRecord } from '@kbn/utility-types';
 import semverSatisfies from 'semver/functions/satisfies';
 import uuid from 'uuid';
 import {
@@ -80,7 +81,7 @@ function migratePre61PanelToLatest(
   panel: RawSavedDashboardPanelTo60,
   version: string,
   useMargins: boolean,
-  uiState?: { [key: string]: { [key: string]: unknown } }
+  uiState?: { [key: string]: SerializableRecord }
 ): RawSavedDashboardPanel730ToLatest {
   if (panel.col === undefined || panel.row === undefined) {
     throw new Error(
@@ -138,7 +139,7 @@ function migrate610PanelToLatest(
   panel: RawSavedDashboardPanel610,
   version: string,
   useMargins: boolean,
-  uiState?: { [key: string]: { [key: string]: unknown } }
+  uiState?: { [key: string]: SerializableRecord }
 ): RawSavedDashboardPanel730ToLatest {
   (['w', 'x', 'h', 'y'] as Array<keyof GridData>).forEach((key) => {
     if (panel.gridData[key] === undefined) {
@@ -273,7 +274,7 @@ export function migratePanelsTo730(
   >,
   version: string,
   useMargins: boolean,
-  uiState?: { [key: string]: { [key: string]: unknown } }
+  uiState?: { [key: string]: SerializableRecord }
 ): RawSavedDashboardPanel730ToLatest[] {
   return panels.map((panel) => {
     if (isPre61Panel(panel)) {

src/plugins/dashboard/public/application/hooks/use_dashboard_app_state.ts

@@ -25,7 +25,9 @@ import {
   DashboardRedirect,
   DashboardState,
 } from '../../types';
+import { DashboardAppLocatorParams } from '../../locator';
 import {
+  loadDashboardHistoryLocationState,
   tryDestroyDashboardContainer,
   syncDashboardContainerInput,
   savedObjectToDashboardState,
@@ -88,6 +90,7 @@ export const useDashboardAppState = ({
     savedObjectsTagging,
     dashboardCapabilities,
     dashboardSessionStorage,
+    scopedHistory,
   } = services;
   const { docTitle } = chrome;
   const { notifications } = core;
@@ -149,10 +152,15 @@ export const useDashboardAppState = ({
        */
       const dashboardSessionStorageState = dashboardSessionStorage.getState(savedDashboardId) || {};
       const dashboardURLState = loadDashboardUrlState(dashboardBuildContext);
+      const forwardedAppState = loadDashboardHistoryLocationState(
+        scopedHistory()?.location?.state as undefined | DashboardAppLocatorParams
+      );
+
       const initialDashboardState = {
         ...savedDashboardState,
         ...dashboardSessionStorageState,
         ...dashboardURLState,
+        ...forwardedAppState,
 
         // if there is an incoming embeddable, dashboard always needs to be in edit mode to receive it.
         ...(incomingEmbeddable ? { viewMode: ViewMode.EDIT } : {}),
@@ -312,6 +320,7 @@ export const useDashboardAppState = ({
     getStateTransfer,
     savedDashboards,
     usageCollection,
+    scopedHistory,
     notifications,
     indexPatterns,
     kibanaVersion,

src/plugins/dashboard/public/application/lib/convert_dashboard_state.ts

@@ -11,19 +11,15 @@ import type { KibanaExecutionContext } from 'src/core/public';
 import { DashboardSavedObject } from '../../saved_dashboards';
 import { getTagsFromSavedDashboard, migrateAppState } from '.';
 import { EmbeddablePackageState, ViewMode } from '../../services/embeddable';
-import {
-  convertPanelStateToSavedDashboardPanel,
-  convertSavedDashboardPanelToPanelState,
-} from '../../../common/embeddable/embeddable_saved_object_converters';
+import { convertPanelStateToSavedDashboardPanel } from '../../../common/embeddable/embeddable_saved_object_converters';
 import {
   DashboardState,
   RawDashboardState,
-  DashboardPanelMap,
-  SavedDashboardPanel,
   DashboardAppServices,
   DashboardContainerInput,
   DashboardBuildContext,
 } from '../../types';
+import { convertSavedPanelsToPanelMap } from './convert_saved_panels_to_panel_map';
 
 interface SavedObjectToDashboardStateProps {
   version: string;
@@ -77,11 +73,7 @@ export const savedObjectToDashboardState = ({
     usageCollection
   );
 
-  const panels: DashboardPanelMap = {};
-  rawState.panels?.forEach((panel: SavedDashboardPanel) => {
-    panels[panel.panelIndex] = convertSavedDashboardPanelToPanelState(panel);
-  });
-  return { ...rawState, panels };
+  return { ...rawState, panels: convertSavedPanelsToPanelMap(rawState.panels) };
 };
 
 /**

src/plugins/dashboard/public/application/lib/convert_saved_panels_to_panel_map.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { convertSavedDashboardPanelToPanelState } from '../../../common/embeddable/embeddable_saved_object_converters';
+import type { SavedDashboardPanel, DashboardPanelMap } from '../../types';
+
+export const convertSavedPanelsToPanelMap = (panels?: SavedDashboardPanel[]): DashboardPanelMap => {
+  const panelsMap: DashboardPanelMap = {};
+  panels?.forEach((panel, idx) => {
+    panelsMap![panel.panelIndex ?? String(idx)] = convertSavedDashboardPanelToPanelState(panel);
+  });
+  return panelsMap;
+};

src/plugins/dashboard/public/application/lib/index.ts

@@ -20,6 +20,7 @@ export { syncDashboardFilterState } from './sync_dashboard_filter_state';
 export { syncDashboardIndexPatterns } from './sync_dashboard_index_patterns';
 export { syncDashboardContainerInput } from './sync_dashboard_container_input';
 export { diffDashboardContainerInput, diffDashboardState } from './diff_dashboard_state';
+export { loadDashboardHistoryLocationState } from './load_dashboard_history_location_state';
 export { buildDashboardContainer, tryDestroyDashboardContainer } from './build_dashboard_container';
 export {
   stateToDashboardContainerInput,

src/plugins/dashboard/public/application/lib/load_dashboard_history_location_state.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ForwardedDashboardState } from '../../locator';
+import { DashboardState } from '../../types';
+import { convertSavedPanelsToPanelMap } from './convert_saved_panels_to_panel_map';
+
+export const loadDashboardHistoryLocationState = (
+  state?: ForwardedDashboardState
+): Partial<DashboardState> => {
+  if (!state) {
+    return {};
+  }
+
+  const { panels, ...restOfState } = state;
+  if (!panels?.length) {
+    return restOfState;
+  }
+
+  return {
+    ...restOfState,
+    ...{ panels: convertSavedPanelsToPanelMap(panels) },
+  };
+};

src/plugins/dashboard/public/application/lib/load_dashboard_url_state.ts

@@ -11,15 +11,14 @@ import _ from 'lodash';
 import { migrateAppState } from '.';
 import { replaceUrlHashQuery } from '../../../../kibana_utils/public';
 import { DASHBOARD_STATE_STORAGE_KEY } from '../../dashboard_constants';
-import { convertSavedDashboardPanelToPanelState } from '../../../common/embeddable/embeddable_saved_object_converters';
-import {
+import type {
   DashboardBuildContext,
   DashboardPanelMap,
   DashboardState,
   RawDashboardState,
-  SavedDashboardPanel,
 } from '../../types';
 import { migrateLegacyQuery } from './migrate_legacy_query';
+import { convertSavedPanelsToPanelMap } from './convert_saved_panels_to_panel_map';
 
 /**
  * Loads any dashboard state from the URL, and removes the state from the URL.
@@ -32,12 +31,10 @@ export const loadDashboardUrlState = ({
   const rawAppStateInUrl = kbnUrlStateStorage.get<RawDashboardState>(DASHBOARD_STATE_STORAGE_KEY);
   if (!rawAppStateInUrl) return {};
 
-  const panelsMap: DashboardPanelMap = {};
+  let panelsMap: DashboardPanelMap = {};
   if (rawAppStateInUrl.panels && rawAppStateInUrl.panels.length > 0) {
     const rawState = migrateAppState(rawAppStateInUrl, kibanaVersion, usageCollection);
-    rawState.panels?.forEach((panel: SavedDashboardPanel) => {
-      panelsMap[panel.panelIndex] = convertSavedDashboardPanelToPanelState(panel);
-    });
+    panelsMap = convertSavedPanelsToPanelMap(rawState.panels);
   }
 
   const migratedQuery = rawAppStateInUrl.query

src/plugins/dashboard/public/application/lib/migrate_app_state.ts

@@ -7,6 +7,7 @@
  */
 
 import semverSatisfies from 'semver/functions/satisfies';
+import type { SerializableRecord } from '@kbn/utility-types';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 
@@ -75,7 +76,7 @@ export function migrateAppState(
       >,
       kibanaVersion,
       appState.useMargins as boolean,
-      appState.uiState as Record<string, Record<string, unknown>>
+      appState.uiState as { [key: string]: SerializableRecord }
     ) as SavedDashboardPanel[];
     delete appState.uiState;
   }

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -404,6 +404,7 @@ export function DashboardTopNav({
     (anchorElement: HTMLElement) => {
       if (!share) return;
       const currentState = dashboardAppState.getLatestDashboardState();
+      const timeRange = timefilter.getTime();
       ShowShareModal({
         share,
         kibanaVersion,
@@ -412,9 +413,10 @@ export function DashboardTopNav({
         currentDashboardState: currentState,
         savedDashboard: dashboardAppState.savedDashboard,
         isDirty: Boolean(dashboardAppState.hasUnsavedChanges),
+        timeRange,
       });
     },
-    [dashboardAppState, dashboardCapabilities, share, kibanaVersion]
+    [dashboardAppState, dashboardCapabilities, share, kibanaVersion, timefilter]
   );
 
   const dashboardTopNavActions = useMemo(() => {