Added lens embeddables to embed flyout

Fixed import

embedded panel styles (#58654)

Merging to WIP draft branch

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

@@ -7,9 +7,16 @@
 // @ts-ignore
 import { MAP_SAVED_OBJECT_TYPE } from '../../../maps/common/constants';
 import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../../../src/legacy/core_plugins/visualizations/public';
+import { LENS_EMBEDDABLE_TYPE } from '../../../../../plugins/lens/common/constants';
 import { SEARCH_EMBEDDABLE_TYPE } from '../../../../../../src/legacy/core_plugins/kibana/public/discover/np_ready/embeddable/constants';
 
-export const EmbeddableTypes: { map: string; search: string; visualization: string } = {
+export const EmbeddableTypes: {
+  lens: string;
+  map: string;
+  search: string;
+  visualization: string;
+} = {
+  lens: LENS_EMBEDDABLE_TYPE,
   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

@@ -48,6 +48,7 @@ import { rounddate } from './rounddate';
 import { rowCount } from './rowCount';
 import { repeatImage } from './repeatImage';
 import { revealImage } from './revealImage';
+import { savedLens } from './saved_lens';
 import { savedMap } from './saved_map';
 import { savedSearch } from './saved_search';
 import { savedVisualization } from './saved_visualization';
@@ -109,6 +110,7 @@ export const functions = [
   revealImage,
   rounddate,
   rowCount,
+  savedLens,
   savedMap,
   savedSearch,
   savedVisualization,

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

@@ -0,0 +1,101 @@
+/*
+ * 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/types';
+import { TimeRange } from 'src/plugins/data/public';
+import { EmbeddableInput } from 'src/legacy/core_plugins/embeddable_api/public/np_ready/public';
+import { getQueryFilters } from '../../../server/lib/build_embeddable_filters';
+import { Filter, MapCenter, TimeRange as TimeRangeArg } from '../../../types';
+import {
+  EmbeddableTypes,
+  EmbeddableExpressionType,
+  EmbeddableExpression,
+} from '../../expression_types';
+import { getFunctionHelp } from '../../../i18n';
+import { esFilters } from '../../../../../../../src/plugins/data/public';
+
+interface Arguments {
+  id: string;
+  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
+export type SavedLensInput = EmbeddableInput & {
+  id: string;
+  isLayerTOCOpen: boolean;
+  timeRange?: TimeRange;
+  refreshConfig: {
+    isPaused: boolean;
+    interval: number;
+  };
+  hideFilterActions: true;
+  filters: esFilters.Filter[];
+  hiddenLayers?: string[];
+};
+
+const defaultTimeRange = {
+  from: 'now-15m',
+  to: 'now',
+};
+
+type Return = EmbeddableExpression<SavedLensInput>;
+
+export function savedLens(): ExpressionFunction<'savedLens', Filter | null, Arguments, Return> {
+  // TODO: update function help
+  const { help, args: argHelp } = getFunctionHelp().savedMap;
+  return {
+    name: 'savedLens',
+    help,
+    args: {
+      id: {
+        types: ['string'],
+        required: false,
+        help: argHelp.id,
+      },
+      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, args) => {
+      const filters = context ? context.and : [];
+
+      return {
+        type: EmbeddableExpressionType,
+        input: {
+          id: args.id,
+          filters: getQueryFilters(filters),
+          timeRange: args.timerange || defaultTimeRange,
+          refreshConfig: {
+            isPaused: false,
+            interval: 0,
+          },
+          hideFilterActions: true,
+          title: args.title ? args.title : undefined,
+          isLayerTOCOpen: false,
+          hiddenLayers: args.hideLayer || [],
+        },
+        embeddableType: EmbeddableTypes.lens,
+      };
+    },
+  };
+}

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

@@ -31,7 +31,7 @@ const embeddablesRegistry: {
 const renderEmbeddable = (embeddableObject: IEmbeddable, domNode: HTMLElement) => {
   return (
     <div
-      className="embeddable"
+      className="canvasEmbeddable"
       style={{ width: domNode.offsetWidth, height: domNode.offsetHeight, cursor: 'auto' }}
     >
       <I18nContext>

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable_input_to_expression.test.ts

@@ -73,4 +73,10 @@ describe('input to expression', () => {
       expect(timerangeExpression.chain[0].arguments.to[0]).toEqual(input.timeRange?.to);
     });
   });
+
+  describe('Lens Embeddable', () => {
+    it('converts to a savedLens expression', () => {
+      expect('foo').toBe('bar');
+    });
+  });
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable_input_to_expression.ts

@@ -6,6 +6,7 @@
 
 import { EmbeddableTypes, EmbeddableInput } from '../../expression_types';
 import { SavedMapInput } from '../../functions/common/saved_map';
+import { SavedLensInput } from '../../functions/common/saved_lens';
 
 /*
   Take the input from an embeddable and the type of embeddable and convert it into an expression
@@ -46,5 +47,29 @@ export function embeddableInputToExpression(
     }
   }
 
+  if (embeddableType === EmbeddableTypes.lens) {
+    const lensInput = input as SavedLensInput;
+
+    expressionParts.push('savedLens');
+
+    expressionParts.push(`id="${input.id}"`);
+
+    if (input.title) {
+      expressionParts.push(`title="${input.title}"`);
+    }
+
+    if (lensInput.timeRange) {
+      expressionParts.push(
+        `timerange={timerange from="${lensInput.timeRange.from}" to="${lensInput.timeRange.to}"}`
+      );
+    }
+
+    if (lensInput.hiddenLayers && lensInput.hiddenLayers.length) {
+      for (const layerId of lensInput.hiddenLayers) {
+        expressionParts.push(`hideLayer="${layerId}"`);
+      }
+    }
+  }
+
   return expressionParts.join(' ');
 }

x-pack/legacy/plugins/canvas/public/components/embeddable_flyout/index.tsx

@@ -21,6 +21,9 @@ const allowedEmbeddables = {
   [EmbeddableTypes.map]: (id: string) => {
     return `savedMap id="${id}" | render`;
   },
+  [EmbeddableTypes.lens]: (id: string) => {
+    return `savedLens id="${id}" | render`;
+  },
   // FIX: Only currently allow Map embeddables
   /* [EmbeddableTypes.visualization]: (id: string) => {
     return `filters | savedVisualization id="${id}" | render`;

x-pack/legacy/plugins/canvas/public/style/hackery.scss

@@ -46,3 +46,27 @@
     max-height: 680px; // limit for large screen displays
   }
 }
+
+.canvasEmbeddable .embPanel {
+  border: none;
+  background: none;
+
+  .embPanel__title {
+    margin-bottom: $euiSizeXS;
+  }
+
+  .embPanel__optionsMenuButton {
+    border-radius: $euiBorderRadius;
+  }
+
+  .canvas-isFullscreen & {
+    .embPanel__optionsMenuButton {
+      opacity: 0;
+    }
+
+    &:focus .embPanel__optionsMenuButton,
+    &:hover .embPanel__optionsMenuButton {
+      opacity: 1;
+    }
+  }
+}

x-pack/plugins/lens/common/constants.ts

@@ -5,6 +5,7 @@
  */
 
 export const PLUGIN_ID = 'lens';
+export const LENS_EMBEDDABLE_TYPE = 'lens';
 export const NOT_INTERNATIONALIZED_PRODUCT_NAME = 'Lens Visualizations';
 export const BASE_APP_URL = '/app/kibana';
 export const BASE_API_URL = '/api/lens';