feat: add toggle for autocomplete (#24274)

elastic · Oct 22, 2018 · b51abd9 · b51abd9
1 parent 7ff4f81
commit b51abd9
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 23 deletions.
diff --git 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 (
     <EuiPanel>
@@ -24,22 +33,32 @@ export const Expression = ({
         error={error}
         value={formState.expression}
         onChange={updateValue}
+        isAutocompleteEnabled={isAutocompleteEnabled}
       />
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+      <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty size="s" color={formState.dirty ? 'danger' : 'primary'} onClick={done}>
-            {formState.dirty ? 'Cancel' : 'Close'}
-          </EuiButtonEmpty>
+          <EuiSwitch
+            id="autocompleteOptIn"
+            name="popswitch"
+            label="Enable autocomplete"
+            checked={isAutocompleteEnabled}
+            onChange={toggleAutocompleteEnabled}
+          />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            fill
-            disabled={!!error}
-            onClick={() => setExpression(formState.expression)}
-            size="s"
-          >
-            Run
-          </EuiButton>
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+            <EuiButtonEmpty size="s" color={formState.dirty ? 'danger' : 'primary'} onClick={done}>
+              {formState.dirty ? 'Cancel' : 'Close'}
+            </EuiButtonEmpty>
+            <EuiButton
+              fill
+              disabled={!!error}
+              onClick={() => setExpression(formState.expression)}
+              size="s"
+            >
+              Run
+            </EuiButton>
+          </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
@@ -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
@@ -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
@@ -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 (
       <div className="expressionInput">
         <EuiFormRow fullWidth isInvalid={Boolean(error)} error={error} helpText={helpText}>
-          <Autocomplete
-            header={this.getHeader()}
-            items={suggestions}
-            onSelect={this.onSuggestionSelect}
-            reference={this.getReference}
-          >
+          {isAutocompleteEnabled ? (
+            <Autocomplete
+              header={this.getHeader()}
+              items={suggestions}
+              onSelect={this.onSuggestionSelect}
+              reference={this.getReference}
+            >
+              <EuiTextArea
+                onKeyDown={this.onKeyDown}
+                className="canvasTextArea--code"
+                value={value}
+                onChange={this.onChange}
+                inputRef={ref => (this.ref = ref)}
+                spellCheck="false"
+              />
+            </Autocomplete>
+          ) : (
             <EuiTextArea
               onKeyDown={this.onKeyDown}
               className="canvasTextArea--code"
               value={value}
               onChange={this.onChange}
               inputRef={ref => (this.ref = ref)}
-              spellcheck="false"
+              spellCheck="false"
             />
-          </Autocomplete>
+          )}
         </EuiFormRow>
       </div>
     );
@@ -170,4 +181,5 @@ ExpressionInput.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,
   error: PropTypes.string,
+  isAutocompleteEnabled: PropTypes.bool,
 };