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, };