Added palette arg to embeddable function

Fixed ts errors
elastic · Oct 26, 2021 · 3abb10f · 3abb10f
1 parent dc6a861
commit 3abb10f
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 13 deletions.
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/external/embeddable.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/external/embeddable.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { PaletteOutput } from 'src/plugins/charts/common';
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { ExpressionValueFilter, EmbeddableInput } from '../../../types';
 import { EmbeddableExpressionType, EmbeddableExpression } from '../../expression_types';
@@ -17,6 +18,7 @@ import { InitializeArguments } from '.';
 export interface Arguments {
   config: string;
   type: string;
+  palette?: PaletteOutput;
 }
 
 const defaultTimeRange = {
@@ -55,6 +57,11 @@ export function embeddableFunctionFactory({
           required: true,
           help: argHelp.config,
         },
+        palette: {
+          types: ['palette'],
+          help: argHelp.palette,
+          required: false,
+        },
         type: {
           types: ['string'],
           required: true,
@@ -76,6 +83,7 @@ export function embeddableFunctionFactory({
             ...baseEmbeddableInput,
             ...embeddableInput,
             filters: getQueryFilters(filters),
+            palette: args.palette,
           },
           generatedAt: Date.now(),
           embeddableType: args.type,

diff --git a/...k/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable_input_to_expression.ts b/...k/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable_input_to_expression.ts
@@ -28,7 +28,7 @@ export function embeddableInputToExpression(
   useGenericEmbeddable?: boolean
 ): string | undefined {
   if (useGenericEmbeddable) {
-    return genericToExpression(input, embeddableType);
+    return genericToExpression(input, embeddableType, palettes);
   }
 
   if (inputToExpressionTypeMap[embeddableType]) {

diff --git a/...canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/embeddable.test.ts b/...canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/embeddable.test.ts
@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import { toExpression } from './embeddable';
-import { EmbeddableInput } from '../../../../types';
-import { decode } from '../../../../common/lib/embeddable_dataurl';
 import { fromExpression } from '@kbn/interpreter/common';
+import { chartPluginMock } from 'src/plugins/charts/public/mocks';
+import { decode } from '../../../../common/lib/embeddable_dataurl';
+import { EmbeddableInput } from '../../../../types';
+import { toExpression } from './embeddable';
 
 describe('toExpression', () => {
   describe('by-reference embeddable input', () => {
@@ -21,7 +22,11 @@ describe('toExpression', () => {
     it('converts to an embeddable expression', () => {
       const input: EmbeddableInput = baseEmbeddableInput;
 
-      const expression = toExpression(input, 'visualization');
+      const expression = toExpression(
+        input,
+        'visualization',
+        chartPluginMock.createPaletteRegistry()
+      );
       const ast = fromExpression(expression);
 
       expect(ast.type).toBe('expression');
@@ -43,7 +48,11 @@ describe('toExpression', () => {
         },
       };
 
-      const expression = toExpression(input, 'visualization');
+      const expression = toExpression(
+        input,
+        'visualization',
+        chartPluginMock.createPaletteRegistry()
+      );
       const ast = fromExpression(expression);
 
       const config = decode(ast.chain[0].arguments.config[0] as string);
@@ -60,7 +69,11 @@ describe('toExpression', () => {
         title: '',
       };
 
-      const expression = toExpression(input, 'visualization');
+      const expression = toExpression(
+        input,
+        'visualization',
+        chartPluginMock.createPaletteRegistry()
+      );
       const ast = fromExpression(expression);
 
       const config = decode(ast.chain[0].arguments.config[0] as string);
@@ -78,12 +91,12 @@ describe('toExpression', () => {
     it('converts to an embeddable expression', () => {
       const input: EmbeddableInput = baseEmbeddableInput;
 
-      const expression = toExpression(input, 'visualization');
+      const expression = toExpression(input, 'lens', chartPluginMock.createPaletteRegistry());
       const ast = fromExpression(expression);
 
       expect(ast.type).toBe('expression');
       expect(ast.chain[0].function).toBe('embeddable');
-      expect(ast.chain[0].arguments.type[0]).toBe('visualization');
+      expect(ast.chain[0].arguments.type[0]).toBe('lens');
 
       const config = decode(ast.chain[0].arguments.config[0] as string);
       expect(config.filters).toStrictEqual(input.filters);
@@ -100,7 +113,7 @@ describe('toExpression', () => {
         },
       };
 
-      const expression = toExpression(input, 'visualization');
+      const expression = toExpression(input, 'lens', chartPluginMock.createPaletteRegistry());
       const ast = fromExpression(expression);
 
       const config = decode(ast.chain[0].arguments.config[0] as string);
@@ -117,7 +130,7 @@ describe('toExpression', () => {
         title: '',
       };
 
-      const expression = toExpression(input, 'visualization');
+      const expression = toExpression(input, 'lens', chartPluginMock.createPaletteRegistry());
       const ast = fromExpression(expression);
 
       const config = decode(ast.chain[0].arguments.config[0] as string);

diff --git a/...gins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/embeddable.ts b/...gins/canvas/canvas_plugin_src/renderers/embeddable/input_type_to_expression/embeddable.ts
@@ -5,9 +5,34 @@
  * 2.0.
  */
 
+import { toExpression as toExpressionString } from '@kbn/interpreter/common';
+import { PaletteRegistry } from 'src/plugins/charts/public';
 import { encode } from '../../../../common/lib/embeddable_dataurl';
 import { EmbeddableInput } from '../../../expression_types';
 
-export function toExpression(input: EmbeddableInput, embeddableType: string): string {
-  return `embeddable config="${encode(input)}" type="${embeddableType}"`;
+/*
+  Take the input from an embeddable and the type of embeddable and convert it into an expression
+*/
+export function toExpression(
+  input: EmbeddableInput,
+  embeddableType: string,
+  palettes: PaletteRegistry
+): string {
+  const expressionParts = [] as string[];
+
+  expressionParts.push('embeddable');
+
+  expressionParts.push(`config="${encode(input)}"`);
+
+  expressionParts.push(`type="${embeddableType}"`);
+
+  if (input.palette) {
+    expressionParts.push(
+      `palette={${toExpressionString(
+        palettes.get(input.palette.name).toExpression(input.palette.params)
+      )}}`
+    );
+  }
+
+  return expressionParts.join(' ');
 }
diff --git a/x-pack/plugins/canvas/i18n/functions/dict/embeddable.ts b/x-pack/plugins/canvas/i18n/functions/dict/embeddable.ts
@@ -18,6 +18,9 @@ export const help: FunctionHelp<FunctionFactory<ReturnType<typeof embeddableFunc
     config: i18n.translate('xpack.canvas.functions.embeddable.args.idHelpText', {
       defaultMessage: `The base64 encoded embeddable input object`,
     }),
+    palette: i18n.translate('xpack.canvas.functions.embeddable.args.paletteHelpText', {
+      defaultMessage: `The color palette to use for the embeddable. Only compatible with the Lens visualization`,
+    }),
     type: i18n.translate('xpack.canvas.functions.embeddable.args.typeHelpText', {
       defaultMessage: `The embeddable type`,
     }),

diff --git a/x-pack/plugins/canvas/types/embeddables.ts b/x-pack/plugins/canvas/types/embeddables.ts
@@ -7,10 +7,12 @@
 
 import { TimeRange } from 'src/plugins/data/public';
 import { Filter } from '@kbn/es-query';
+import { PaletteOutput } from 'src/plugins/charts/common';
 import { EmbeddableInput as Input } from '../../../../src/plugins/embeddable/common/';
 
 export type EmbeddableInput = Input & {
   timeRange?: TimeRange;
   filters?: Filter[];
   savedObjectId?: string;
+  palette?: PaletteOutput;
 };