From b7d92061e210cd5381e1b79740444cf8e05f2874 Mon Sep 17 00:00:00 2001
From: Jeff Wong <awole20@gmail.com>
Date: Mon, 4 Jun 2018 18:34:41 -0700
Subject: [PATCH] FEATURE: add an option to create undismissable modals

---
 .../discourse/components/d-modal-body.js.es6    |  4 +++-
 .../discourse/components/d-modal.js.es6         | 12 +++++++++++-
 .../discourse/templates/components/d-modal.hbs  |  8 +++++---
 test/javascripts/acceptance/modal-test.js.es6   | 17 +++++++++++++++++
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/d-modal-body.js.es6 b/app/assets/javascripts/discourse/components/d-modal-body.js.es6
index 04c9754dd88..04beaa9fdb3 100644
--- a/app/assets/javascripts/discourse/components/d-modal-body.js.es6
+++ b/app/assets/javascripts/discourse/components/d-modal-body.js.es6
@@ -1,6 +1,7 @@
 export default Ember.Component.extend({
   classNames: ['modal-body'],
   fixed: false,
+  dismissable: true,
 
   didInsertElement() {
     this._super();
@@ -44,7 +45,8 @@ export default Ember.Component.extend({
         'rawTitle',
         'fixed',
         'subtitle',
-        'rawSubtitle'
+        'rawSubtitle',
+        'dismissable'
       )
     );
   },
diff --git a/app/assets/javascripts/discourse/components/d-modal.js.es6 b/app/assets/javascripts/discourse/components/d-modal.js.es6
index a57f4daea09..43cc66e4620 100644
--- a/app/assets/javascripts/discourse/components/d-modal.js.es6
+++ b/app/assets/javascripts/discourse/components/d-modal.js.es6
@@ -3,6 +3,7 @@ import { on } from "ember-addons/ember-computed-decorators";
 export default Ember.Component.extend({
   classNameBindings: [':modal', ':d-modal', 'modalClass', 'modalStyle'],
   attributeBindings: ['data-keyboard'],
+  dismissable: true,
 
   init() {
     this._super(...arguments);
@@ -21,7 +22,7 @@ export default Ember.Component.extend({
   @on("didInsertElement")
   setUp() {
     $('html').on('keydown.discourse-modal', e => {
-      if (e.which === 27) {
+      if (e.which === 27 && this.get('dismissable')) {
         Em.run.next(() => $('.modal-header a.close').click());
       }
     });
@@ -48,6 +49,12 @@ export default Ember.Component.extend({
         // of another modal is not used
         this.set('subtitle', null);
       }
+
+      if ('dismissable' in data) {
+        this.set('dismissable', data.dismissable);
+      } else {
+        this.set('dismissable', true);
+      }
     });
   },
 
@@ -57,6 +64,9 @@ export default Ember.Component.extend({
   },
 
   click(e) {
+    if(!this.get('dismissable')) {
+      return;
+    }
     const $target = $(e.target);
     if ($target.hasClass("modal-middle-container") ||
         $target.hasClass("modal-outer-container")) {
diff --git a/app/assets/javascripts/discourse/templates/components/d-modal.hbs b/app/assets/javascripts/discourse/templates/components/d-modal.hbs
index 852b29f884d..f9b339428a1 100644
--- a/app/assets/javascripts/discourse/templates/components/d-modal.hbs
+++ b/app/assets/javascripts/discourse/templates/components/d-modal.hbs
@@ -2,9 +2,11 @@
   <div class="modal-middle-container">
     <div class="modal-inner-container">
       <div class="modal-header">
-        <div class='modal-close'>
-          <a class="close" {{action closeModal}}>{{d-icon "times"}}</a>
-        </div>
+        {{#if dismissable}}
+          <div class='modal-close'>
+            <a class="close" {{action closeModal}}>{{d-icon "times"}}</a>
+          </div>
+        {{/if}}
 
         <div class="title">
           <h3>{{title}}</h3>
diff --git a/test/javascripts/acceptance/modal-test.js.es6 b/test/javascripts/acceptance/modal-test.js.es6
index 7907c12b215..dc94edfbb68 100644
--- a/test/javascripts/acceptance/modal-test.js.es6
+++ b/test/javascripts/acceptance/modal-test.js.es6
@@ -1,4 +1,6 @@
 import { acceptance } from "helpers/qunit-helpers";
+import showModal from 'discourse/lib/show-modal';
+
 acceptance("Modal");
 
 QUnit.test("modal", assert => {
@@ -27,4 +29,19 @@ QUnit.test("modal", assert => {
   andThen(() => {
     assert.ok(find('.d-modal:visible').length === 0, 'ESC should close the modal');
   });
+  andThen(() => {
+    Ember.TEMPLATES['modal/not-dismissable'] = Ember.HTMLBars.compile('{{#d-modal-body title="" class="" dismissable=false}}test{{/d-modal-body}}');
+    showModal('not-dismissable', {});
+  });
+  andThen(() => {
+    assert.ok(find('.d-modal:visible').length === 1, 'modal should appear');
+  });
+  click('.modal-outer-container');
+  andThen(() => {
+    assert.ok(find('.d-modal:visible').length === 1, 'modal should not disappear when you click outside');
+  });
+  keyEvent('#main-outlet', 'keydown', 27);
+  andThen(() => {
+    assert.ok(find('.d-modal:visible').length === 1, 'ESC should not close the modal');
+  });
 });