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'); + } +});