[Canvas] Add simple variables to workpads

x-pack/plugins/canvas/.storybook/storyshots.test.js

@@ -84,6 +84,10 @@ import { RenderedElement } from '../shareable_runtime/components/rendered_elemen
 jest.mock('../shareable_runtime/components/rendered_element');
 RenderedElement.mockImplementation(() => 'RenderedElement');
 
+import { EuiObserver } from '@elastic/eui/test-env/components/observer/observer';
+jest.mock('@elastic/eui/test-env/components/observer/observer');
+EuiObserver.mockImplementation(() => 'EuiObserver');
+
 addSerializer(styleSheetSerializer);
 
 // Initialize Storyshots and build the Jest Snapshots

x-pack/plugins/canvas/__tests__/fixtures/workpads.ts

@@ -25,6 +25,7 @@ const BaseWorkpad: CanvasWorkpad = {
   pages: [],
   colors: [],
   isWriteable: true,
+  variables: [],
 };
 
 const BasePage: CanvasPage = {

x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/esdocs.js

@@ -107,7 +107,7 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
       <EuiAccordion
         id="accordionAdvancedSettings"
         buttonContent="Advanced settings"
-        className="canvasArg__accordion"
+        className="canvasSidebar__accordion"
       >
         <EuiSpacer size="s" />
         <EuiFormRow label={strings.getSortFieldTitle()} display="columnCompressed">

x-pack/plugins/canvas/i18n/components.ts

@@ -545,7 +545,7 @@ export const ComponentStrings = {
       }),
     getTitle: () =>
       i18n.translate('xpack.canvas.pageConfig.title', {
-        defaultMessage: 'Page styles',
+        defaultMessage: 'Page settings',
       }),
     getTransitionLabel: () =>
       i18n.translate('xpack.canvas.pageConfig.transitionLabel', {
@@ -899,6 +899,144 @@ export const ComponentStrings = {
         defaultMessage: 'Close tray',
       }),
   },
+  VarConfig: {
+    getAddButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.addButtonLabel', {
+        defaultMessage: 'Add a variable',
+      }),
+    getAddTooltipLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.addTooltipLabel', {
+        defaultMessage: 'Add a variable',
+      }),
+    getCopyActionButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.copyActionButtonLabel', {
+        defaultMessage: 'Copy snippet',
+      }),
+    getCopyActionTooltipLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.copyActionTooltipLabel', {
+        defaultMessage: 'Copy variable syntax to clipboard',
+      }),
+    getCopyNotificationDescription: () =>
+      i18n.translate('xpack.canvas.varConfig.copyNotificationDescription', {
+        defaultMessage: 'Variable syntax copied to clipboard',
+      }),
+    getDeleteActionButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.deleteActionButtonLabel', {
+        defaultMessage: 'Delete variable',
+      }),
+    getDeleteNotificationDescription: () =>
+      i18n.translate('xpack.canvas.varConfig.deleteNotificationDescription', {
+        defaultMessage: 'Variable successfully deleted',
+      }),
+    getEditActionButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.editActionButtonLabel', {
+        defaultMessage: 'Edit variable',
+      }),
+    getEmptyDescription: () =>
+      i18n.translate('xpack.canvas.varConfig.emptyDescription', {
+        defaultMessage:
+          'This workpad has no variables currently. You may add variables to store and edit common values. These variables can then be used in elements or within the expression editor.',
+      }),
+    getTableNameLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.tableNameLabel', {
+        defaultMessage: 'Name',
+      }),
+    getTableTypeLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.tableTypeLabel', {
+        defaultMessage: 'Type',
+      }),
+    getTableValueLabel: () =>
+      i18n.translate('xpack.canvas.varConfig.tableValueLabel', {
+        defaultMessage: 'Value',
+      }),
+    getTitle: () =>
+      i18n.translate('xpack.canvas.varConfig.titleLabel', {
+        defaultMessage: 'Variables',
+      }),
+    getTitleTooltip: () =>
+      i18n.translate('xpack.canvas.varConfig.titleTooltip', {
+        defaultMessage: 'Add variables to store and edit common values',
+      }),
+  },
+  VarConfigDeleteVar: {
+    getCancelButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfigDeleteVar.cancelButtonLabel', {
+        defaultMessage: 'Cancel',
+      }),
+    getDeleteButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfigDeleteVar.deleteButtonLabel', {
+        defaultMessage: 'Delete variable',
+      }),
+    getTitle: () =>
+      i18n.translate('xpack.canvas.varConfigDeleteVar.titleLabel', {
+        defaultMessage: 'Delete variable?',
+      }),
+    getWarningDescription: () =>
+      i18n.translate('xpack.canvas.varConfigDeleteVar.warningDescription', {
+        defaultMessage:
+          'Deleting this variable may adversely affect the workpad. Are you sure you wish to continue?',
+      }),
+  },
+  VarConfigEditVar: {
+    getAddTitle: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.addTitleLabel', {
+        defaultMessage: 'Add variable',
+      }),
+    getCancelButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.cancelButtonLabel', {
+        defaultMessage: 'Cancel',
+      }),
+    getDuplicateNameError: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.duplicateNameError', {
+        defaultMessage: 'Variable name already in use',
+      }),
+    getEditTitle: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.editTitleLabel', {
+        defaultMessage: 'Edit variable',
+      }),
+    getEditWarning: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.editWarning', {
+        defaultMessage: 'Editing a variable in use may adversely affect your workpad',
+      }),
+    getNameFieldLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.nameFieldLabel', {
+        defaultMessage: 'Name',
+      }),
+    getSaveButtonLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.saveButtonLabel', {
+        defaultMessage: 'Save changes',
+      }),
+    getTypeBooleanLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.typeBooleanLabel', {
+        defaultMessage: 'Boolean',
+      }),
+    getTypeFieldLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.typeFieldLabel', {
+        defaultMessage: 'Type',
+      }),
+    getTypeNumberLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.typeNumberLabel', {
+        defaultMessage: 'Number',
+      }),
+    getTypeStringLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.typeStringLabel', {
+        defaultMessage: 'String',
+      }),
+    getValueFieldLabel: () =>
+      i18n.translate('xpack.canvas.varConfigEditVar.valueFieldLabel', {
+        defaultMessage: 'Value',
+      }),
+  },
+  VarConfigVarValueField: {
+    getFalseOption: () =>
+      i18n.translate('xpack.canvas.varConfigVarValueField.falseOption', {
+        defaultMessage: 'False',
+      }),
+    getTrueOption: () =>
+      i18n.translate('xpack.canvas.varConfigVarValueField.trueOption', {
+        defaultMessage: 'True',
+      }),
+  },
   WorkpadConfig: {
     getApplyStylesheetButtonLabel: () =>
       i18n.translate('xpack.canvas.workpadConfig.applyStylesheetButtonLabel', {

x-pack/plugins/canvas/public/components/arg_form/arg_form.js

@@ -120,7 +120,7 @@ class ArgFormComponent extends PureComponent {
           );
 
           return (
-            <div className={`canvasArg ${expandableLabel ? 'canvasArg--expandable' : null}`}>
+            <div className={`canvasArg ${expandableLabel ? 'canvasSidebar__expandable' : null}`}>
               <ArgLabel
                 className="resolved"
                 argId={argId}

x-pack/plugins/canvas/public/components/arg_form/arg_form.scss

@@ -1,27 +1,3 @@
-.canvasArg--expandable + .canvasArg--expandable {
-  margin-top: 0;
-
-  .canvasArg__accordion:before {
-    display: none;
-  }
-}
-
-.canvasSidebar__panel {
-  .canvasArg--expandable:last-child {
-    .canvasArg__accordion {
-      margin-bottom: (-$euiSizeS);
-    }
-
-    .canvasArg__accordion:after {
-      content: none;
-    }
-
-    .canvasArg__accordion.euiAccordion-isOpen:after {
-      display: none;
-    }
-  }
-}
-
 .canvasArg {
   margin-top: $euiSizeS;
 }
@@ -31,10 +7,6 @@
   padding: $euiSizeXS 0;
 }
 
-.canvasArg__content {
-  padding-top: $euiSizeS;
-}
-
 .canvasArg__form {
   position: relative;
 }
@@ -43,38 +15,11 @@
   margin-left: -$euiSizeXL;
 }
 
-.canvasArg__accordion {
-  padding: $euiSizeS $euiSizeM;
-  margin: 0 (-$euiSizeM);
-  background: $euiColorLightestShade;
-  position: relative;
-
+.canvasSidebar__accordion {
   // don't let remove button position here if this is nested in an accordion
   .canvasArg__form {
     position: static;
   }
-
-  &.euiAccordion-isOpen {
-    background: transparent;
-  }
-
-  &:before,
-  &:after {
-    content: '';
-    height: 1px;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    background: $euiColorLightShade;
-  }
-
-  &:before {
-    top: 0;
-  }
-
-  &:after {
-    bottom: 0;
-  }
 }
 
 // this is a workaround since an EuiFormRow label cannot be passed in toggle.js

x-pack/plugins/canvas/public/components/arg_form/arg_label.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiAccordion, EuiText, EuiToolTip, EuiIcon } from '@elastic/eui';
+import { EuiFormRow, EuiAccordion, EuiToolTip, EuiIcon } from '@elastic/eui';
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 
 export const ArgLabel = (props) => {
@@ -17,18 +17,16 @@ export const ArgLabel = (props) => {
       {expandable ? (
         <EuiAccordion
           id={`accordion-${argId}`}
-          className="canvasArg__accordion"
+          className="canvasSidebar__accordion"
           buttonContent={
             <EuiToolTip content={help} position="left" className="canvasArg__tooltip">
-              <EuiText size="s" color="subdued" htmlFor={`accordion-${argId}`}>
-                {label}
-              </EuiText>
+              <span>{label}</span>
             </EuiToolTip>
           }
           extraAction={simpleArg}
           initialIsOpen={initialIsOpen}
         >
-          <div className="canvasArg__content">{children}</div>
+          <div className="canvasSidebar__accordionContent">{children}</div>
         </EuiAccordion>
       ) : (
         simpleArg && (

x-pack/plugins/canvas/public/components/datasource/datasource_preview/index.js

@@ -15,10 +15,13 @@ export const DatasourcePreview = compose(
   withState('datatable', 'setDatatable'),
   lifecycle({
     componentDidMount() {
-      interpretAst({
-        type: 'expression',
-        chain: [this.props.function],
-      }).then(this.props.setDatatable);
+      interpretAst(
+        {
+          type: 'expression',
+          chain: [this.props.function],
+        },
+        {}
+      ).then(this.props.setDatatable);
     },
   }),
   branch(({ datatable }) => !datatable, renderComponent(Loading))