diff --git a/app/assets/javascripts/admin/components/ace-editor.js.es6 b/app/assets/javascripts/admin/components/ace-editor.js.es6
index 749ce2492da..faad36798ad 100644
--- a/app/assets/javascripts/admin/components/ace-editor.js.es6
+++ b/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');
diff --git a/app/assets/javascripts/admin/templates/badges-show.hbs b/app/assets/javascripts/admin/templates/badges-show.hbs
index c9fe0496c1a..877b9a8e8e0 100644
--- a/app/assets/javascripts/admin/templates/badges-show.hbs
+++ b/app/assets/javascripts/admin/templates/badges-show.hbs
@@ -60,7 +60,7 @@
{{#if siteSettings.enable_badge_sql}}
- {{textarea name="query" value=buffered.query disabled=readOnly}}
+ {{ace-editor content=buffered.query mode="sql" disabled=readOnly}}
{{#if hasQuery}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index ae60af2687e..2f418ddad3f 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/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;
diff --git a/test/javascripts/components/ace-editor-test.js.es6 b/test/javascripts/components/ace-editor-test.js.es6
index 4a05e6f83e2..e831da6eb53 100644
--- a/test/javascripts/components/ace-editor-test.js.es6
+++ b/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');
+ }
+});