Canvas function/argument/value autocomplete (elastic#23200)

* feat: canvas autocomplete * fix: remove unused files * autocomplete ui cleanup * fix: handle stuff inside quotes * fix: canvas suggestion comparator * fix: spaces at the beginning of expressions * fix: move header out of autocomplete component itself * fix: add tests * fix: failing test * fix: pointed to wrong module
skh · Oct 18, 2018 · 314d1c4 · 314d1c4
1 parent db77feb
commit 314d1c4
Show file tree

Hide file tree

Showing 44 changed files with 1,275 additions and 531 deletions.
diff --git a/x-pack/plugins/canvas/__tests__/fixtures/function_specs.js b/x-pack/plugins/canvas/__tests__/fixtures/function_specs.js
@@ -0,0 +1,6 @@
+import { Fn } from '../../common/lib/fn';
+import { functions as browserFns } from '../../canvas_plugin_src/functions/browser';
+import { functions as commonFns } from '../../canvas_plugin_src/functions/common';
+import { functions as serverFns } from '../../canvas_plugin_src/functions/server/src';
+
+export const functionSpecs = [...browserFns, ...commonFns, ...serverFns].map(fn => new Fn(fn()));
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__tests__/font.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__tests__/font.js
@@ -160,9 +160,9 @@ describe('font', () => {
  expect(result.spec).to.have.property('textAlign', 'right');
  expect(result.css).to.contain('text-align:right');
 
- result = fn(null, { align: 'justified' });
- expect(result.spec).to.have.property('textAlign', 'justified');
- expect(result.css).to.contain('text-align:justified');
+ result = fn(null, { align: 'justify' });
+ expect(result.spec).to.have.property('textAlign', 'justify');
+ expect(result.css).to.contain('text-align:justify');
  });
 
  it(`defaults to 'left'`, () => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.js
@@ -23,6 +23,7 @@ export const alterColumn = () => ({
  types: ['string'],
  help: 'The type to convert the column to. Leave blank to not change type',
  default: null,
+ options: ['null', 'boolean', 'number', 'string'],
  },
  name: {
  types: ['string'],

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axisConfig.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axisConfig.js
@@ -22,6 +22,7 @@ export const axisConfig = () => ({
  position: {
  types: ['string'],
  help: 'Position of the axis labels - top, bottom, left, and right',
+ options: ['top', 'bottom', 'left', 'right'],
  default: '',
  },
  min: {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.js
@@ -22,6 +22,7 @@ export const compare = () => ({
  help:
  'The operator to use in the comparison: ' +
  ' eq (equal), ne (not equal), lt (less than), gt (greater than), lte (less than equal), gte (greater than eq)',
+ options: ['eq', 'ne', 'lt', 'gt', 'lte', 'gte'],
  },
  to: {
  aliases: ['this', 'b'],

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.js
@@ -41,19 +41,22 @@ export const containerStyle = () => ({
  types: ['string'],
  help: 'Valid CSS background size string',
  default: 'contain',
+ options: ['contain', 'cover', 'auto'],
  },
  backgroundRepeat: {
  types: ['string'],
  help: 'Valid CSS background repeat string',
  default: 'no-repeat',
+ options: ['repeat-x', 'repeat', 'space', 'round', 'no-repeat', 'space'],
  },
  opacity: {
  types: ['number', 'null'],
  help: 'A number between 0 and 1 representing the degree of transparency of the element',
  },
  overflow: {
  types: ['string'],
- help: `Sets overflow of the container`,
+ help: 'Sets overflow of the container',
+ options: ['visible', 'hidden', 'scroll', 'auto'],
  },
  },
  fn: (context, args) => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/font.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/font.js
@@ -7,6 +7,23 @@
 import inlineStyle from 'inline-style';
 import { openSans } from '../../../common/lib/fonts';
 
+const weights = [
+ 'normal',
+ 'bold',
+ 'bolder',
+ 'lighter',
+ '100',
+ '200',
+ '300',
+ '400',
+ '500',
+ '600',
+ '700',
+ '800',
+ '900',
+];
+const alignments = ['center', 'left', 'right', 'justify'];
+
 export const font = () => ({
  name: 'font',
  aliases: [],
@@ -40,41 +57,28 @@ export const font = () => ({
  help:
  'Set the font weight, e.g. normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900',
  default: 'normal',
+ options: weights,
  },
  underline: {
  types: ['boolean'],
  default: false,
  help: 'Underline the text, true or false',
+ options: [true, false],
  },
  italic: {
  types: ['boolean'],
  default: false,
  help: 'Italicize, true or false',
+ options: [true, false],
  },
  align: {
  types: ['string'],
  help: 'Horizontal text alignment',
  default: 'left',
+ options: alignments,
  },
  },
  fn: (context, args) => {
- const weights = [
- 'normal',
- 'bold',
- 'bolder',
- 'lighter',
- '100',
- '200',
- '300',
- '400',
- '500',
- '600',
- '700',
- '800',
- '900',
- ];
- const alignments = ['center', 'left', 'right', 'justified'];
-
  if (!weights.includes(args.weight)) throw new Error(`Invalid font weight: ${args.weight}`);
  if (!alignments.includes(args.align)) throw new Error(`Invalid text alignment: ${args.align}`);
 

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.js
@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { includes } from 'lodash';
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
 import { elasticLogo } from '../../lib/elastic_logo';
 
+const modes = ['contain', 'cover', 'stretch'];
+
 export const image = () => ({
  name: 'image',
  aliases: [],
@@ -31,11 +32,11 @@ export const image = () => ({
  '"cover" will fill the container with the image, cropping from the sides or bottom as needed.' +
  '"stretch" will resize the height and width of the image to 100% of the container',
  default: 'contain',
+ options: modes,
  },
  },
  fn: (context, { dataurl, mode }) => {
- if (!includes(['contain', 'cover', 'stretch'], mode))
- throw '"mode" must be "contain", "cover", or "stretch"';
+ if (!modes.includes(mode)) throw '"mode" must be "contain", "cover", or "stretch"';
 
  const modeStyle = mode === 'stretch' ? '100% 100%' : mode;
 

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/palette.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/palette.js
@@ -24,11 +24,13 @@ export const palette = () => ({
  types: ['boolean'],
  default: false,
  help: 'Prefer to make a gradient where supported and useful?',
+ options: [true, false],
  },
  reverse: {
  type: ['boolean'],
  default: false,
  help: 'Reverse the palette',
+ options: [true, false],
  },
  },
  fn: (context, args) => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.js
@@ -42,6 +42,7 @@ export const pie = () => ({
  types: ['boolean'],
  default: true,
  help: 'Show pie labels',
+ options: [true, false],
  },
  labelRadius: {
  types: ['number'],
@@ -57,6 +58,7 @@ export const pie = () => ({
  types: ['string', 'boolean'],
  help: 'Legend position, nw, sw, ne, se or false',
  default: false,
+ options: ['nw', 'sw', 'ne', 'se', false],
  },
  tilt: {
  types: ['number'],

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/plot/index.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/plot/index.js
@@ -47,6 +47,7 @@ export const plot = () => ({
  types: ['string', 'boolean'],
  help: 'Legend position, nw, sw, ne, se or false',
  default: 'ne',
+ options: ['nw', 'sw', 'ne', 'se', false],
  },
  yaxis: {
  types: ['boolean', 'axisConfig'],

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.js
@@ -6,7 +6,17 @@
 
 import { get } from 'lodash';
 import { openSans } from '../../../common/lib/fonts';
-import { shapes } from '../../renderers/progress/shapes';
+
+const shapes = [
+ 'gauge',
+ 'horizontalBar',
+ 'horizontalPill',
+ 'semicircle',
+ 'unicorn',
+ 'verticalBar',
+ 'verticalPill',
+ 'wheel',
+];
 
 export const progress = () => ({
  name: 'progress',
@@ -20,9 +30,8 @@ export const progress = () => ({
  shape: {
  type: ['string'],
  alias: ['_'],
- help: `Select ${Object.keys(shapes)
- .map((key, i, src) => (i === src.length - 1 ? `or ${shapes[key].name}` : shapes[key].name))
- .join(', ')}`,
+ help: `Select ${shapes.slice(0, -1).join(', ')}, or ${shapes.slice(-1)[0]}`,
+ options: shapes,
  default: 'gauge',
  },
  max: {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.js
@@ -17,6 +17,7 @@ export const render = () => ({
  types: ['string', 'null'],
  help:
  'The element type to use in rendering. You probably want a specialized function instead, such as plot or grid',
+ options: ['debug', 'error', 'image', 'pie', 'plot', 'shape', 'table', 'text'],
  },
  css: {
  types: ['string', 'null'],

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.js
@@ -30,6 +30,7 @@ export const revealImage = () => ({
  types: ['string'],
  help: 'Where to start from. Eg, top, left, bottom or right',
  default: 'bottom',
+ options: ['top', 'left', 'bottom', 'right'],
  },
  },
  fn: (percent, args) => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/seriesStyle.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/seriesStyle.js
@@ -45,6 +45,8 @@ export const seriesStyle = () => ({
  types: ['number', 'boolean'],
  displayName: 'Fill points',
  help: 'Should we fill points?',
+ default: false,
+ options: [true, false],
  },
  stack: {
  types: ['number', 'null'],
@@ -56,6 +58,7 @@ export const seriesStyle = () => ({
  types: ['boolean'],
  displayName: 'Horizontal bars orientation',
  help: 'Sets the orientation of bars in the chart to horizontal',
+ options: [true, false],
  },
  },
  fn: (context, args) => ({ type: name, ...args }),

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/shape.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/shape.js
@@ -18,6 +18,24 @@ export const shape = () => ({
  help: 'Pick a shape',
  aliases: ['_'],
  default: 'square',
+ options: [
+ 'arrow',
+ 'arrowMulti',
+ 'bookmark',
+ 'cross',
+ 'circle',
+ 'hexagon',
+ 'kite',
+ 'pentagon',
+ 'rhombus',
+ 'semicircle',
+ 'speechBubble',
+ 'square',
+ 'star',
+ 'tag',
+ 'triangle',
+ 'triangleRight',
+ ],
  },
  fill: {
  types: ['string', 'null'],
@@ -39,6 +57,7 @@ export const shape = () => ({
  types: ['boolean'],
  help: 'Select true to maintain aspect ratio',
  default: false,
+ options: [true, false],
  },
  },
  fn: (context, { shape, fill, border, borderWidth, maintainAspect }) => ({

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.js
@@ -25,6 +25,7 @@ export const sort = () => ({
  types: ['boolean'],
  help:
  'Reverse the sort order. If reverse is not specified, the datatable will be sorted in ascending order.',
+ options: [true, false],
  },
  },
  fn: (context, args) => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.js
@@ -22,6 +22,7 @@ export const table = () => ({
  types: ['boolean'],
  default: true,
  help: 'Show pagination controls. If set to false only the first page will be displayed',
+ options: [true, false],
  },
  perPage: {
  types: ['number'],
@@ -32,6 +33,7 @@ export const table = () => ({
  types: ['boolean'],
  default: true,
  help: 'Show or hide the header row with titles for each column',
+ options: [true, false],
  },
  },
  fn: (context, args) => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilterControl.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilterControl.js
@@ -22,6 +22,7 @@ export const timefilterControl = () => ({
  type: ['boolean'],
  help: 'Show the time filter as a button that triggers a popover',
  default: true,
+ options: [true, false],
  },
  },
  fn: (context, args) => {

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/server/src/demodata/index.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/server/src/demodata/index.js
@@ -22,6 +22,7 @@ export const demodata = () => ({
  aliases: ['_'],
  help: 'The name of the demo data set to use',
  default: 'ci',
+ options: ['ci', 'shirts'],
  },
  },
  fn: (context, args) => {