diff --git a/x-pack/plugins/canvas/public/components/expression/expression.js b/x-pack/plugins/canvas/public/components/expression/expression.js
index 9644bb05d31d3..676c6865cd0ef 100644
--- a/x-pack/plugins/canvas/public/components/expression/expression.js
+++ b/x-pack/plugins/canvas/public/components/expression/expression.js
@@ -6,7 +6,14 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { EuiPanel, EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import {
+ EuiPanel,
+ EuiButton,
+ EuiButtonEmpty,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSwitch,
+} from '@elastic/eui';
import { ExpressionInput } from '../expression_input';
export const Expression = ({
@@ -16,6 +23,8 @@ export const Expression = ({
setExpression,
done,
error,
+ isAutocompleteEnabled,
+ toggleAutocompleteEnabled,
}) => {
return (
@@ -24,22 +33,32 @@ export const Expression = ({
error={error}
value={formState.expression}
onChange={updateValue}
+ isAutocompleteEnabled={isAutocompleteEnabled}
/>
-
+
-
- {formState.dirty ? 'Cancel' : 'Close'}
-
+
-
- setExpression(formState.expression)}
- size="s"
- >
- Run
-
+
+
+
+ {formState.dirty ? 'Cancel' : 'Close'}
+
+ setExpression(formState.expression)}
+ size="s"
+ >
+ Run
+
+
@@ -53,4 +72,6 @@ Expression.propTypes = {
setExpression: PropTypes.func,
done: PropTypes.func,
error: PropTypes.string,
+ isAutocompleteEnabled: PropTypes.bool,
+ toggleAutocompleteEnabled: PropTypes.func,
};
diff --git a/x-pack/plugins/canvas/public/components/expression/index.js b/x-pack/plugins/canvas/public/components/expression/index.js
index 16dc36da13e55..958fa99566ef5 100644
--- a/x-pack/plugins/canvas/public/components/expression/index.js
+++ b/x-pack/plugins/canvas/public/components/expression/index.js
@@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
+import { Storage } from 'ui/storage';
import { connect } from 'react-redux';
import {
compose,
@@ -18,9 +19,12 @@ import { getSelectedPage, getSelectedElement } from '../../state/selectors/workp
import { getFunctionDefinitions } from '../../state/selectors/app';
import { setExpression, flushContext } from '../../state/actions/elements';
import { fromExpression } from '../../../common/lib/ast';
+import { getWindow } from '../../lib/get_window';
import { ElementNotSelected } from './element_not_selected';
import { Expression as Component } from './expression';
+const storage = new Storage(getWindow().localStorage);
+
const mapStateToProps = state => ({
pageId: getSelectedPage(state),
element: getSelectedElement(state),
@@ -73,7 +77,15 @@ export const Expression = compose(
expression,
dirty: false,
})),
+ withState('isAutocompleteEnabled', 'setIsAutocompleteEnabled', () => {
+ const setting = storage.get('kibana.canvas.isAutocompleteEnabled');
+ return setting === null ? true : setting;
+ }),
withHandlers({
+ toggleAutocompleteEnabled: ({ isAutocompleteEnabled, setIsAutocompleteEnabled }) => () => {
+ storage.set('kibana.canvas.isAutocompleteEnabled', !isAutocompleteEnabled);
+ setIsAutocompleteEnabled(!isAutocompleteEnabled);
+ },
updateValue: ({ setFormState }) => expression => {
setFormState({
expression,
diff --git a/x-pack/plugins/canvas/public/components/expression_input/expression_input.js b/x-pack/plugins/canvas/public/components/expression_input/expression_input.js
index 076c8e07589e9..7ea1aa8f6f698 100644
--- a/x-pack/plugins/canvas/public/components/expression_input/expression_input.js
+++ b/x-pack/plugins/canvas/public/components/expression_input/expression_input.js
@@ -135,7 +135,7 @@ export class ExpressionInput extends React.Component {
};
render() {
- const { value, error } = this.props;
+ const { value, error, isAutocompleteEnabled } = this.props;
const { suggestions } = this.state;
const helpText = error
@@ -144,21 +144,32 @@ export class ExpressionInput extends React.Component {
return (
-
+ {isAutocompleteEnabled ? (
+
+ (this.ref = ref)}
+ spellCheck="false"
+ />
+
+ ) : (
(this.ref = ref)}
- spellcheck="false"
+ spellCheck="false"
/>
-
+ )}
);
@@ -170,4 +181,5 @@ ExpressionInput.propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
error: PropTypes.string,
+ isAutocompleteEnabled: PropTypes.bool,
};