FEATURE: Use ACE for badge queries (#5269)

* FEATURE: Use ACE for badge queries

* Forgot disabled

* When disabled, cursor should be `not-allowed`

* Tests + prefix custom attribute with `data-`

app/assets/javascripts/admin/components/ace-editor.js.es6

@@ -1,13 +1,14 @@
 import loadScript from 'discourse/lib/load-script';
 import { observes } from 'ember-addons/ember-computed-decorators';
 
-const LOAD_ASYNC = !Ember.Test;
+const LOAD_ASYNC = !Ember.testing;
 
 export default Ember.Component.extend({
   mode: 'css',
   classNames: ['ace-wrapper'],
   _editor: null,
   _skipContentChangeEvent: null,
+  disabled: false,
 
   @observes('editorId')
   editorIdChanged() {
@@ -30,6 +31,24 @@ export default Ember.Component.extend({
     }
   },
 
+  @observes('disabled')
+  disabledStateChanged() {
+    this.changeDisabledState();
+  },
+
+  changeDisabledState() {
+    const editor = this._editor;
+    if (editor) {
+      const disabled = this.get('disabled');
+      editor.setOptions({
+        readOnly: disabled,
+        highlightActiveLine: !disabled,
+        highlightGutterLine: !disabled
+      });
+      editor.container.parentNode.setAttribute("data-disabled", disabled);
+    }
+  },
+
   _destroyEditor: function() {
     if (this._editor) {
       this._editor.destroy();
@@ -76,6 +95,7 @@ export default Ember.Component.extend({
 
         this.$().data('editor', editor);
         this._editor = editor;
+        this.changeDisabledState();
 
         $(window).off('ace:resize').on('ace:resize', ()=>{
           this.appEvents.trigger('ace:resize');

app/assets/javascripts/admin/templates/badges-show.hbs

@@ -60,7 +60,7 @@
     {{#if siteSettings.enable_badge_sql}}
       <div>
         <label for="query">{{i18n 'admin.badges.query'}}</label>
-        {{textarea name="query" value=buffered.query disabled=readOnly}}
+        {{ace-editor content=buffered.query mode="sql" disabled=readOnly}}
       </div>
 
       {{#if hasQuery}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -675,6 +675,39 @@ section.details {
   }
 
   .form-horizontal {
+    .ace-wrapper {
+      position: relative;
+      height: 270px;
+      margin-bottom: 10px;
+
+      .ace_editor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        border: 1px solid #e9e9e9;
+        border-radius: 3px;
+
+        .ace_gutter {
+          border-right: 1px solid #e9e9e9;
+          background: #f4f4f4;
+        }
+      }
+
+      &[data-disabled="true"] {
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        .ace_editor {
+          pointer-events:none;
+          
+          .ace_cursor {
+            visibility: hidden;
+          }
+        }
+      }
+    }
     .delete-link {
       margin-left: 15px;
       margin-top: 5px;

test/javascripts/components/ace-editor-test.js.es6

@@ -17,3 +17,22 @@ componentTest('html editor', {
     assert.ok(this.$('.ace_editor').length, 'it renders the ace editor');
   }
 });
+
+componentTest('sql editor', {
+  template: '{{ace-editor mode="sql" content="SELECT * FROM users"}}',
+  test(assert) {
+    assert.expect(1);
+    assert.ok(this.$('.ace_editor').length, 'it renders the ace editor');
+  }
+});
+
+componentTest('disabled editor', {
+  template: '{{ace-editor mode="sql" content="SELECT * FROM users" disabled=true}}',
+  test(assert) {
+    const $ace = this.$('.ace_editor');
+    assert.expect(3);
+    assert.ok($ace.length, 'it renders the ace editor');
+    assert.equal($ace.parent().data().editor.getReadOnly(), true, 'it sets ACE to read-only mode');
+    assert.equal($ace.parent().attr('data-disabled'), "true", 'ACE wrapper has `data-disabled` attribute set to true');
+  }
+});