Fix: Consistent property names (elastic#195)

* chore: defaultValue -> default

BREAKING CHANGE: the object definition changed, defaultValue will silently be dropped now

* chore: description -> help

BREAKING CHANGE: the object definition changed, description will silently be dropped now

* fix: corrected spec for checkbox arg type

* fix: update exactly and urlparm functoin specs

common/functions/exactly/exactly.js

@@ -1,6 +1,4 @@
-import Fn from '../fn.js';
-
-export default new Fn({
+export default {
   name: 'exactly',
   aliases: [],
   type: 'filter',
@@ -33,4 +31,4 @@ export default new Fn({
 
     return context;
   },
-});
+};

public/components/arg_add/arg_add.js

@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './arg_add.less';
 
-export const ArgAdd = ({ onValueAdd, displayName, description }) => {
+export const ArgAdd = ({ onValueAdd, displayName, help }) => {
   return (
     <div className="canvas__arg--add" onClick={onValueAdd}>
       <strong>{displayName}</strong><br/>
-      {description}
+      {help}
     </div>
   );
 };
 
 ArgAdd.propTypes = {
   displayName: PropTypes.string,
-  description: PropTypes.string,
+  help: PropTypes.string,
   onValueAdd: PropTypes.func,
 };

public/components/arg_add_popover/arg_add_popover.js

@@ -18,7 +18,7 @@ export const ArgAddPopover = ({ options }) => {
       {options.map(opt => (
         <ArgAdd key={`${opt.arg.name}-add`}
           displayName={opt.arg.displayName}
-          description={opt.arg.description}
+          help={opt.arg.help}
           onValueAdd={() => { opt.onValueAdd(...arguments); close();}}
         />
       ))}

public/components/arg_form/arg_form.js

@@ -26,7 +26,7 @@ export const ArgForm = (props) => {
     const { template, simpleTemplate } = argTypeInstance.argType;
     const argumentProps = {
       ...templateProps,
-      defaultValue: argTypeInstance.defaultValue,
+      defaultValue: argTypeInstance.default,
       renderError: (msg) => { throw new RenderError(msg || 'Render failed'); },
       setLabel,
       resetErrorState,
@@ -54,7 +54,7 @@ export const ArgForm = (props) => {
       <div className="canvas__arg--header">
         <ArgLabel
           label={label}
-          description={argTypeInstance.description}
+          help={argTypeInstance.help}
           expandable={expandableLabel || error}
           expanded={expand}
           setExpand={setExpand}

public/components/arg_form/arg_label.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { Tooltip } from '../tooltip';
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
-export const ArgLabel = ({ label, description, expandable, expanded, setExpand }) => {
+export const ArgLabel = ({ label, help, expandable, expanded, setExpand }) => {
   const className = expandable ? 'canvas__arg--label clickable' : 'canvas__arg--label';
 
   return (
-    <Tooltip text={description} placement="left">
+    <Tooltip text={help} placement="left">
       {expandable ? (
         <label className={className} onClick={() => setExpand(!expanded)}>
           <i className={`fa fa-chevron-${expanded ? 'down' : 'right'}`}/>
@@ -24,7 +24,7 @@ export const ArgLabel = ({ label, description, expandable, expanded, setExpand }
 
 ArgLabel.propTypes = {
   label: PropTypes.string,
-  description: PropTypes.string,
+  help: PropTypes.string,
   expandable: PropTypes.bool,
   expanded: PropTypes.bool,
   setExpand: PropTypes.func,

public/components/toolbar/element_types/element_types.js

@@ -7,20 +7,19 @@ import { FormControl } from 'react-bootstrap';
 
 export const ElementTypes = ({ elements, onClick, search, setSearch }) => {
   search = lowerCase(search);
-  const elementList = map(elements, (val, name) => {
-    const { expression, filter } = val;
+  const elementList = map(elements, (element, name) => {
+    const { help, image, displayName, expression, filter } = element;
     const whenClicked = () => onClick({ expression, filter });
-    const { description, image, displayName } = val;
     const card = (
       <MediaCard key={name} image={image} title={displayName} onClick={whenClicked}>
-        {description}
+        {help}
       </MediaCard>
     );
 
     if (!search) return card;
     if (includes(lowerCase(name), search)) return card;
     if (includes(lowerCase(displayName), search)) return card;
-    if (includes(lowerCase(description), search)) return card;
+    if (includes(lowerCase(help), search)) return card;
     return null;
   });
 

public/elements/advanced_filter/advanced_filter.js

@@ -6,7 +6,7 @@ import { AdvancedFilter } from './components/advanced_filter';
 export default {
   name: 'advanced_filter',
   displayName: 'Advanced Filter',
-  description: 'An input box for typing a Canvas filter expression',
+  help: 'An input box for typing a Canvas filter expression',
   image: header,
   expression: 'render as=advanced_filter',
   render(domNode, config, handlers) {

public/elements/debug/debug.js

@@ -5,7 +5,7 @@ import header from './header.png';
 export default {
   name: 'debug',
   displayName: 'Debug',
-  description: 'Just dumps the configuration of the element',
+  help: 'Just dumps the configuration of the element',
   image: header,
   expression: 'demodata | render as=debug',
   render(domNode, config, handlers) {

public/elements/element.js

@@ -9,7 +9,7 @@ export function Element(config) {
   this.image = config.image;
 
   // A sentence or few about what this element does
-  this.description = config.description;
+  this.help = config.help;
 
   if (!config.expression) throw new Error('Element types must have a default expression');
   this.expression = config.expression;

public/elements/grid/grid.js

@@ -50,7 +50,7 @@ function getColor(palette, summary, val) {
 export default {
   name: 'grid',
   displayName: 'Grid',
-  description: 'A colorable, sizable, grid for displaying a point series',
+  help: 'A colorable, sizable, grid for displaying a point series',
   image: header,
   expression: 'filters | demodata | pointseries x="project" y="state" size="median(price)" | grid | render',
   render(domNode, config, handlers) {

public/elements/image/image.js

@@ -5,7 +5,7 @@ import header from './header.png';
 export default {
   name: 'image',
   displayName: 'Image',
-  description: 'A static image.',
+  help: 'A static image.',
   image: header,
   expression: 'image mode="contain" | render',
   render(domNode, config, handlers) {

public/elements/markdown/markdown.js

@@ -9,7 +9,7 @@ const md = new Markdown();
 export default {
   name: 'markdown',
   displayName: 'Markdown',
-  description: 'Markup from Markdown',
+  help: 'Markup from Markdown',
   image: header,
   expression: `filters | demodata | markdown "### Welcome to the Markdown Element.
 

public/elements/pie/pie.js

@@ -5,7 +5,7 @@ import '../../lib/flot';
 export default {
   name: 'pie',
   displayName: 'Pie chart',
-  description: 'An customizable element for making pie charts from your data',
+  help: 'An customizable element for making pie charts from your data',
   image: header,
   expression: 'filters | demodata | pointseries color="state" size="max(price)" | pie | render',
   render(domNode, config, handlers) {

public/elements/plot/plot.js

@@ -9,7 +9,7 @@ import './plot.less';
 export default {
   name: 'plot',
   displayName: 'Coordinate plot',
-  description: 'An customizable XY plot for making line, bar or dot charts from your data',
+  help: 'An customizable XY plot for making line, bar or dot charts from your data',
   image: header,
   expression: 'filters | demodata | pointseries x="time" y="sum(price)" color="state" | plot defaultStyle={seriesStyle points=5} | render',
   render(domNode, config, handlers) {

public/elements/table/table.js

@@ -7,7 +7,7 @@ import { get } from 'lodash';
 export default {
   name: 'table',
   displayName: 'Data Table',
-  description: 'A scrollable grid for displaying data in a tabluar format',
+  help: 'A scrollable grid for displaying data in a tabluar format',
   image: header,
   expression: 'filters | demodata | table | render',
   render(domNode, config, handlers) {

public/elements/time_filter/time_filter.js

@@ -8,7 +8,7 @@ import { get, set } from 'lodash';
 export default {
   name: 'time_filter',
   displayName: 'Time Filter',
-  description: 'Set a time window',
+  help: 'Set a time window',
   image: header,
   expression: 'timefilterControl compact=true column=@timestamp | render as=time_filter',
   filter: 'timefilter column=@timestamp from=now-6M to=now-2M',

public/expression_types/arg.js

@@ -8,11 +8,11 @@ export class Arg {
     const propNames = [
       'name',
       'displayName',
-      'description',
+      'help',
       'multi',
       'required',
       'types',
-      'defaultValue',
+      'default',
       'resolve',
       'options',
     ];
@@ -24,11 +24,11 @@ export class Arg {
     // properties that can be passed in
     const defaultProps = {
       displayName: props.name,
-      description: argType.description || props.name,
+      help: argType.help || `Argument: ${props.name}`,
       multi: false,
       required: false,
       types: [],
-      defaultValue: isUndefined(argType.defaultValue) ? null : argType.defaultValue,
+      default: isUndefined(argType.default) ? null : argType.default,
       options: {},
       resolve: () => ({}),
     };

public/expression_types/arg_type.js

@@ -7,7 +7,7 @@ export class ArgType extends BaseForm {
 
     this.simpleTemplate = props.simpleTemplate;
     this.template = props.template;
-    this.defaultValue = props.defaultValue;
+    this.default = props.default;
   }
 }
 

public/expression_types/arg_types/checkbox.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ArgType } from '../arg_type';
 
 const template = ({ onValueChange, argValue }) => {
 
@@ -26,8 +25,9 @@ template.propTypes = {
   argValue: PropTypes.any.isRequired,
 };
 
-export const checkbox = () => new ArgType('checkbox', {
+export const checkbox = () => ({
+  name: 'checkbox',
   displayName: 'Checkbox',
-  description: 'A true/false checkbox toggle',
+  help: 'A true/false checkbox toggle',
   simpleTemplate: template,
 });

public/expression_types/arg_types/container_style/container_style.js

@@ -20,7 +20,7 @@ const wrap = (Component) => withHandlers({
 export const containerStyle = () => ({
   name: 'containerStyle',
   displayName: 'Image Upload',
-  description: 'Select or upload an image',
+  help: 'Select or upload an image',
   template: wrap(extendedTemplate),
   simpleTemplate: wrap(simpleTemplate),
 });

public/expression_types/arg_types/datacolumn/datacolumn.js

@@ -87,7 +87,7 @@ simpleTemplate.propTypes = {
 export const datacolumn = () => ({
   name: 'datacolumn',
   displayName: 'Column',
-  description: 'Select the data column',
-  defaultValue: '""',
+  help: 'Select the data column',
+  default: '""',
   simpleTemplate,
 });

public/expression_types/arg_types/expression.js

@@ -14,7 +14,7 @@ const template = (props = {}) => {
 export const expression = () => ({
   name: 'expression',
   displayName: 'Expression',
-  description: 'Manually enter a custom expression',
+  help: 'Manually enter a custom expression',
   args: [],
   template,
 });

public/expression_types/arg_types/font/font.js

@@ -4,8 +4,7 @@ import './font.less';
 export const font = () => ({
   name: 'font',
   displayName: 'Text Settings',
-  description: 'Set the font, size and color',
+  help: 'Set the font, size and color',
   template: extendedTemplate,
-  defaultValue: '{font size=12 family="\'Open Sans\', Helvetica, Arial, sans-serif" color="#000000" align=left}',
-  //simpleTemplate,
+  default: '{font size=12 family="\'Open Sans\', Helvetica, Arial, sans-serif" color="#000000" align=left}',
 });

public/expression_types/arg_types/image_upload.js

@@ -52,6 +52,6 @@ template.propTypes = {
 export const imageUpload = () => ({
   name: 'imageUpload',
   displayName: 'Image Upload',
-  description: 'Select or upload an image',
+  help: 'Select or upload an image',
   template: withState('isLoading', 'setLoading', false)(template),
 });

public/expression_types/arg_types/palette.js

@@ -59,7 +59,7 @@ template.propTypes = {
 export const palette = () => ({
   name: 'palette',
   displayName: 'Palette',
-  description: 'Color palette selector',
-  defaultValue: '{palette #882E72 #B178A6 #D6C1DE #1965B0 #5289C7 #7BAFDE #4EB265 #90C987 #CAE0AB #F7EE55 #F6C141 #F1932D #E8601C #DC050C}',
+  help: 'Color palette selector',
+  default: '{palette #882E72 #B178A6 #D6C1DE #1965B0 #5289C7 #7BAFDE #4EB265 #90C987 #CAE0AB #F7EE55 #F6C141 #F1932D #E8601C #DC050C}',
   simpleTemplate: template,
 });

public/expression_types/arg_types/select.js

@@ -30,6 +30,6 @@ template.propTypes = {
 export const select = () => ({
   name: 'select',
   displayName: 'Select',
-  description: 'Select from multiple options in a drop down',
+  help: 'Select from multiple options in a drop down',
   simpleTemplate: template,
 });

public/expression_types/arg_types/series_style/series_style.js

@@ -32,7 +32,7 @@ wrappedTemplate.propTypes = {
 export const seriesStyle = () => ({
   name: 'seriesStyle',
   displayName: 'Series Style',
-  description: 'Set the style for a selected named series',
+  help: 'Set the style for a selected named series',
   template: wrappedTemplate,
   simpleTemplate,
 });

public/expression_types/arg_types/shape.js

@@ -20,7 +20,7 @@ template.propTypes = {
 export const shape = () => ({
   name: 'shape',
   displayName: 'Shape',
-  description: 'Shape selector',
-  defaultValue: 'circle',
+  help: 'Shape selector',
+  default: 'circle',
   simpleTemplate: template,
 });

public/expression_types/arg_types/string.js

@@ -45,6 +45,6 @@ template.propTypes = {
 export const string = () => ({
   name: 'string',
   displayName: 'string',
-  description: 'Input short strings',
+  help: 'Input short strings',
   simpleTemplate: template,
 });

public/expression_types/arg_types/textarea.js

@@ -52,6 +52,6 @@ template.propTypes = {
 export const textarea = () => ({
   name: 'textarea',
   displayName: 'textarea',
-  description: 'Input long strings',
+  help: 'Input long strings',
   template: template,
 });

public/expression_types/base_form.js

@@ -4,6 +4,6 @@ export class BaseForm {
 
     this.name = props.name;
     this.displayName = props.displayName || this.name;
-    this.description = props.description || '';
+    this.help = props.help || '';
   }
 }

public/expression_types/function_form.js

@@ -59,7 +59,7 @@ export class FunctionForm extends BaseForm {
     if (!arg || arg.required || skipRender) return null;
     if (argValues && !arg.multi) return null;
 
-    const value = arg.defaultValue == null ? null : fromExpression(arg.defaultValue, 'argument');
+    const value = arg.default == null ? null : fromExpression(arg.default, 'argument');
 
     return { arg, onValueAdd: onValueAdd(arg.name, value) };
   }
@@ -101,7 +101,7 @@ export class FunctionForm extends BaseForm {
 
       return (
         <SidebarSection>
-          <SidebarSectionTitle title={argTypeDef.displayName} tip={argTypeDef.description}>
+          <SidebarSectionTitle title={argTypeDef.displayName} tip={argTypeDef.help}>
             {addableArgs.length === 0 ? null : (
               <ArgAddPopover options={addableArgs}/>
             )}