Use AceEditor for Query Snippets (getredash#3973)

Co-Authored-By: Ran Byron <[email protected]>

client/app/assets/less/ant.less

@@ -345,3 +345,22 @@
     }
   }
 }
+
+// overrides for tall form components such as ace editor
+.@{form-prefix-cls}-item {
+  &-children {
+    display: block; // so feeback icon positions correctly
+  }
+
+  // no change for short components, sticks to body for tall ones
+  &-children-icon {
+    top: auto !important;
+    bottom: 8px;
+
+     // makes the icon white instead of see-through
+    & svg {
+      background: white;
+      border-radius: 50%;
+    }
+  }
+}

client/app/components/AceEditorInput.jsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import AceEditor from 'react-ace';
+
+import './AceEditorInput.less';
+
+function AceEditorInput(props, ref) {
+  return (
+    <div className="ace-editor-input">
+      <AceEditor
+        ref={ref}
+        mode="sql"
+        theme="textmate"
+        height="100px"
+        editorProps={{ $blockScrolling: Infinity }}
+        showPrintMargin={false}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export default forwardRef(AceEditorInput);

client/app/components/AceEditorInput.less

@@ -0,0 +1,11 @@
+.ace-editor-input {
+  // hide ghost cursor when not focused
+  .ace_hidden-cursors {
+    opacity: 0;
+  }
+
+  // allow Ant Form feedback icon to hover scrollbar
+  .ace_scrollbar {
+    z-index: auto;
+  }
+}

client/app/components/dynamic-form/DynamicForm.jsx

@@ -10,6 +10,7 @@ import Icon from 'antd/lib/icon';
 import { includes, isFunction } from 'lodash';
 import Select from 'antd/lib/select';
 import notification from '@/services/notification';
+import AceEditorInput from '@/components/AceEditorInput';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
 
@@ -176,6 +177,8 @@ class DynamicForm extends React.Component {
       return getFieldDecorator(name, options)(<InputNumber {...props} />);
     } else if (type === 'textarea') {
       return getFieldDecorator(name, options)(<Input.TextArea {...props} />);
+    } else if (type === 'ace') {
+      return getFieldDecorator(name, options)(<AceEditorInput {...props} />);
     }
     return getFieldDecorator(name, options)(<Input {...props} />);
   }

client/app/components/proptypes.js

@@ -35,6 +35,7 @@ export const Field = PropTypes.shape({
   name: PropTypes.string.isRequired,
   title: PropTypes.string,
   type: PropTypes.oneOf([
+    'ace',
     'text',
     'textarea',
     'email',

client/app/components/query-snippets/QuerySnippetDialog.jsx

@@ -48,9 +48,8 @@ class QuerySnippetDialog extends React.Component {
       { name: 'description', title: 'Description', type: 'text' },
       { name: 'snippet',
         title: 'Snippet',
-        type: 'textarea',
-        required: true,
-        props: { autosize: { minRows: 3, maxRows: 6 } } },
+        type: 'ace',
+        required: true },
     ].map(field => ({ ...field, readOnly, initialValue: get(querySnippet, field.name, '') }));
 
     return (
@@ -79,6 +78,7 @@ class QuerySnippetDialog extends React.Component {
           fields={formFields}
           onSubmit={this.handleSubmit}
           hideSubmitButton
+          feedbackIcons
         />
       </Modal>
     );