[Canvas] Enable Embeddable maps (elastic#53971)

* Enables Embeddable maps in Canvas. Updates expressions as maps are interacted with

* Fix type check errors

* Update imports. Remove filters from initial embed expressions

* Adds hide layer functionality to canvas map embeds

* Fix typecheck error

* Fix Type check

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/canvas/canvas_plugin_src/expression_types/embeddable.ts

@@ -5,11 +5,11 @@
  */
 
 import { ExpressionType } from 'src/plugins/expressions/public';
-import { EmbeddableInput } from 'src/legacy/core_plugins/embeddable_api/public/np_ready/public';
+import { EmbeddableInput } from '../../../../../../src/plugins/embeddable/public';
 import { EmbeddableTypes } from './embeddable_types';
 
 export const EmbeddableExpressionType = 'embeddable';
-export { EmbeddableTypes };
+export { EmbeddableTypes, EmbeddableInput };
 
 export interface EmbeddableExpression<Input extends EmbeddableInput> {
   type: typeof EmbeddableExpressionType;

x-pack/legacy/plugins/canvas/canvas_plugin_src/expression_types/embeddable_types.ts

@@ -9,7 +9,7 @@ import { MAP_SAVED_OBJECT_TYPE } from '../../../maps/common/constants';
 import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../../../src/legacy/core_plugins/kibana/public/visualize_embeddable/constants';
 import { SEARCH_EMBEDDABLE_TYPE } from '../../../../../../src/legacy/core_plugins/kibana/public/discover/np_ready/embeddable/constants';
 
-export const EmbeddableTypes = {
+export const EmbeddableTypes: { map: string; search: string; visualization: string } = {
   map: MAP_SAVED_OBJECT_TYPE,
   search: SEARCH_EMBEDDABLE_TYPE,
   visualization: VISUALIZE_EMBEDDABLE_TYPE,

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/index.ts

@@ -32,6 +32,7 @@ import { image } from './image';
 import { joinRows } from './join_rows';
 import { lt } from './lt';
 import { lte } from './lte';
+import { mapCenter } from './map_center';
 import { mapColumn } from './mapColumn';
 import { math } from './math';
 import { metric } from './metric';
@@ -57,6 +58,7 @@ import { staticColumn } from './staticColumn';
 import { string } from './string';
 import { table } from './table';
 import { tail } from './tail';
+import { timerange } from './time_range';
 import { timefilter } from './timefilter';
 import { timefilterControl } from './timefilterControl';
 import { switchFn } from './switch';
@@ -91,6 +93,7 @@ export const functions = [
   lt,
   lte,
   joinRows,
+  mapCenter,
   mapColumn,
   math,
   metric,
@@ -118,6 +121,7 @@ export const functions = [
   tail,
   timefilter,
   timefilterControl,
+  timerange,
   switchFn,
   caseFn,
 ];

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/map_center.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ExpressionFunction } from 'src/plugins/expressions/common';
+import { getFunctionHelp } from '../../../i18n/functions';
+import { MapCenter } from '../../../types';
+
+interface Args {
+  lat: number;
+  lon: number;
+  zoom: number;
+}
+
+export function mapCenter(): ExpressionFunction<'mapCenter', null, Args, MapCenter> {
+  const { help, args: argHelp } = getFunctionHelp().mapCenter;
+  return {
+    name: 'mapCenter',
+    help,
+    type: 'mapCenter',
+    context: {
+      types: ['null'],
+    },
+    args: {
+      lat: {
+        types: ['number'],
+        required: true,
+        help: argHelp.lat,
+      },
+      lon: {
+        types: ['number'],
+        required: true,
+        help: argHelp.lon,
+      },
+      zoom: {
+        types: ['number'],
+        required: true,
+        help: argHelp.zoom,
+      },
+    },
+    fn: (context, args) => {
+      return {
+        type: 'mapCenter',
+        ...args,
+      };
+    },
+  };
+}

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/saved_map.test.ts

@@ -5,7 +5,7 @@
  */
 jest.mock('ui/new_platform');
 import { savedMap } from './saved_map';
-import { buildEmbeddableFilters } from '../../../server/lib/build_embeddable_filters';
+import { getQueryFilters } from '../../../server/lib/build_embeddable_filters';
 
 const filterContext = {
   and: [
@@ -24,20 +24,22 @@ describe('savedMap', () => {
   const fn = savedMap().fn;
   const args = {
     id: 'some-id',
+    center: null,
+    title: null,
+    timerange: null,
+    hideLayer: [],
   };
 
   it('accepts null context', () => {
     const expression = fn(null, args, {});
 
     expect(expression.input.filters).toEqual([]);
-    expect(expression.input.timeRange).toBeUndefined();
   });
 
   it('accepts filter context', () => {
     const expression = fn(filterContext, args, {});
-    const embeddableFilters = buildEmbeddableFilters(filterContext.and);
+    const embeddableFilters = getQueryFilters(filterContext.and);
 
-    expect(expression.input.filters).toEqual(embeddableFilters.filters);
-    expect(expression.input.timeRange).toEqual(embeddableFilters.timeRange);
+    expect(expression.input.filters).toEqual(embeddableFilters);
   });
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/saved_map.ts

@@ -7,8 +7,8 @@
 import { ExpressionFunction } from 'src/plugins/expressions/common/types';
 import { TimeRange } from 'src/plugins/data/public';
 import { EmbeddableInput } from 'src/legacy/core_plugins/embeddable_api/public/np_ready/public';
-import { buildEmbeddableFilters } from '../../../server/lib/build_embeddable_filters';
-import { Filter } from '../../../types';
+import { getQueryFilters } from '../../../server/lib/build_embeddable_filters';
+import { Filter, MapCenter, TimeRange as TimeRangeArg } from '../../../types';
 import {
   EmbeddableTypes,
   EmbeddableExpressionType,
@@ -19,19 +19,36 @@ import { esFilters } from '../../../../../../../src/plugins/data/public';
 
 interface Arguments {
   id: string;
+  center: MapCenter | null;
+  hideLayer: string[];
+  title: string | null;
+  timerange: TimeRangeArg | null;
 }
 
 // Map embeddable is missing proper typings, so type is just to document what we
 // are expecting to pass to the embeddable
-interface SavedMapInput extends EmbeddableInput {
+export type SavedMapInput = EmbeddableInput & {
   id: string;
+  isLayerTOCOpen: boolean;
   timeRange?: TimeRange;
   refreshConfig: {
     isPaused: boolean;
     interval: number;
   };
+  hideFilterActions: true;
   filters: esFilters.Filter[];
-}
+  mapCenter?: {
+    lat: number;
+    lon: number;
+    zoom: number;
+  };
+  hiddenLayers?: string[];
+};
+
+const defaultTimeRange = {
+  from: 'now-15m',
+  to: 'now',
+};
 
 type Return = EmbeddableExpression<SavedMapInput>;
 
@@ -46,21 +63,56 @@ export function savedMap(): ExpressionFunction<'savedMap', Filter | null, Argume
         required: false,
         help: argHelp.id,
       },
+      center: {
+        types: ['mapCenter'],
+        help: argHelp.center,
+        required: false,
+      },
+      hideLayer: {
+        types: ['string'],
+        help: argHelp.hideLayer,
+        required: false,
+        multi: true,
+      },
+      timerange: {
+        types: ['timerange'],
+        help: argHelp.timerange,
+        required: false,
+      },
+      title: {
+        types: ['string'],
+        help: argHelp.title,
+        required: false,
+      },
     },
     type: EmbeddableExpressionType,
-    fn: (context, { id }) => {
+    fn: (context, args) => {
       const filters = context ? context.and : [];
 
+      const center = args.center
+        ? {
+            lat: args.center.lat,
+            lon: args.center.lon,
+            zoom: args.center.zoom,
+          }
+        : undefined;
+
       return {
         type: EmbeddableExpressionType,
         input: {
-          id,
-          ...buildEmbeddableFilters(filters),
-
+          id: args.id,
+          filters: getQueryFilters(filters),
+          timeRange: args.timerange || defaultTimeRange,
           refreshConfig: {
             isPaused: false,
             interval: 0,
           },
+
+          mapCenter: center,
+          hideFilterActions: true,
+          title: args.title ? args.title : undefined,
+          isLayerTOCOpen: false,
+          hiddenLayers: args.hideLayer || [],
         },
         embeddableType: EmbeddableTypes.map,
       };

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/time_range.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ExpressionFunction } from 'src/plugins/expressions/common';
+import { getFunctionHelp } from '../../../i18n/functions';
+import { TimeRange } from '../../../types';
+
+interface Args {
+  from: string;
+  to: string;
+}
+
+export function timerange(): ExpressionFunction<'timerange', null, Args, TimeRange> {
+  const { help, args: argHelp } = getFunctionHelp().timerange;
+  return {
+    name: 'timerange',
+    help,
+    type: 'timerange',
+    context: {
+      types: ['null'],
+    },
+    args: {
+      from: {
+        types: ['string'],
+        required: true,
+        help: argHelp.from,
+      },
+      to: {
+        types: ['string'],
+        required: true,
+        help: argHelp.to,
+      },
+    },
+    fn: (context, args) => {
+      return {
+        type: 'timerange',
+        ...args,
+      };
+    },
+  };
+}

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable.tsx → x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx

@@ -10,32 +10,27 @@ import { I18nContext } from 'ui/i18n';
 import { npStart } from 'ui/new_platform';
 import {
   IEmbeddable,
+  EmbeddableFactory,
   EmbeddablePanel,
   EmbeddableFactoryNotFoundError,
-  EmbeddableInput,
-} from '../../../../../../src/legacy/core_plugins/embeddable_api/public/np_ready/public';
-import { start } from '../../../../../../src/legacy/core_plugins/embeddable_api/public/np_ready/public/legacy';
-import { EmbeddableExpression } from '../expression_types/embeddable';
-import { RendererStrings } from '../../i18n';
+} from '../../../../../../../src/plugins/embeddable/public';
+import { start } from '../../../../../../../src/legacy/core_plugins/embeddable_api/public/np_ready/public/legacy';
+import { EmbeddableExpression } from '../../expression_types/embeddable';
+import { RendererStrings } from '../../../i18n';
 import {
   SavedObjectFinderProps,
   SavedObjectFinderUi,
-} from '../../../../../../src/plugins/kibana_react/public';
+} from '../../../../../../../src/plugins/kibana_react/public';
 
 const { embeddable: strings } = RendererStrings;
+import { embeddableInputToExpression } from './embeddable_input_to_expression';
+import { EmbeddableInput } from '../../expression_types';
+import { RendererHandlers } from '../../../types';
 
 const embeddablesRegistry: {
   [key: string]: IEmbeddable;
 } = {};
 
-interface Handlers {
-  setFilter: (text: string) => void;
-  getFilter: () => string | null;
-  done: () => void;
-  onResize: (fn: () => void) => void;
-  onDestroy: (fn: () => void) => void;
-}
-
 const renderEmbeddable = (embeddableObject: IEmbeddable, domNode: HTMLElement) => {
   const SavedObjectFinder = (props: SavedObjectFinderProps) => (
     <SavedObjectFinderUi
@@ -73,21 +68,26 @@ const embeddable = () => ({
   render: async (
     domNode: HTMLElement,
     { input, embeddableType }: EmbeddableExpression<EmbeddableInput>,
-    handlers: Handlers
+    handlers: RendererHandlers
   ) => {
     if (!embeddablesRegistry[input.id]) {
       const factory = Array.from(start.getEmbeddableFactories()).find(
         embeddableFactory => embeddableFactory.type === embeddableType
-      );
+      ) as EmbeddableFactory<EmbeddableInput>;
 
       if (!factory) {
         handlers.done();
         throw new EmbeddableFactoryNotFoundError(embeddableType);
       }
 
       const embeddableObject = await factory.createFromSavedObject(input.id, input);
+
       embeddablesRegistry[input.id] = embeddableObject;
+      ReactDOM.unmountComponentAtNode(domNode);
 
+      const subscription = embeddableObject.getInput$().subscribe(function(updatedInput) {
+        handlers.onEmbeddableInputChange(embeddableInputToExpression(updatedInput, embeddableType));
+      });
       ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () => handlers.done());
 
       handlers.onResize(() => {
@@ -97,7 +97,11 @@ const embeddable = () => ({
       });
 
       handlers.onDestroy(() => {
+        subscription.unsubscribe();
+        handlers.onEmbeddableDestroyed();
+
         delete embeddablesRegistry[input.id];
+
         return ReactDOM.unmountComponentAtNode(domNode);
       });
     } else {