From 85c2aaa3415fdaba0ce9ef72f087de5ff0f9f0b7 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 14 Nov 2016 16:25:15 -0500
Subject: [PATCH] Migrate flag modal to use components

---
 .../components/flag-selection.js.es6          | 18 +++++++++++++
 .../discourse/controllers/flag.js.es6         |  6 +++++
 .../templates/components/flag-selection.hbs   |  5 ++++
 .../discourse/templates/modal/flag.hbs        | 11 +++-----
 .../javascripts/discourse/views/flag.js.es6   | 27 -------------------
 app/assets/javascripts/main_include.js        |  1 -
 6 files changed, 33 insertions(+), 35 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/flag-selection.js.es6
 create mode 100644 app/assets/javascripts/discourse/templates/components/flag-selection.hbs
 delete mode 100644 app/assets/javascripts/discourse/views/flag.js.es6

diff --git a/app/assets/javascripts/discourse/components/flag-selection.js.es6 b/app/assets/javascripts/discourse/components/flag-selection.js.es6
new file mode 100644
index 00000000000..b738e2c169d
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/flag-selection.js.es6
@@ -0,0 +1,18 @@
+import { observes } from 'ember-addons/ember-computed-decorators';
+
+// Mostly hacks because `flag.hbs` didn't use `radio-button`
+export default Ember.Component.extend({
+  _selectRadio() {
+    this.$("input[type='radio']").prop('checked', false);
+
+    const nameKey = this.get('nameKey');
+    if (!nameKey) { return; }
+
+    this.$('#radio_' + nameKey).prop('checked', 'true');
+  },
+
+  @observes('nameKey')
+  selectedChanged() {
+    Ember.run.next(this, this._selectRadio);
+  }
+});
diff --git a/app/assets/javascripts/discourse/controllers/flag.js.es6 b/app/assets/javascripts/discourse/controllers/flag.js.es6
index 760390d3d41..b316091285c 100644
--- a/app/assets/javascripts/discourse/controllers/flag.js.es6
+++ b/app/assets/javascripts/discourse/controllers/flag.js.es6
@@ -1,6 +1,7 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import ActionSummary from 'discourse/models/action-summary';
 import { MAX_MESSAGE_LENGTH } from 'discourse/models/post-action-type';
+import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend(ModalFunctionality, {
   userDetails: null,
@@ -14,6 +15,11 @@ export default Ember.Controller.extend(ModalFunctionality, {
     this.set('selected', null);
   },
 
+  @computed('flagTopic')
+  title(flagTopic) {
+    return flagTopic ? 'flagging_topic.title' : 'flagging.title';
+  },
+
   flagsAvailable: function() {
     if (!this.get('flagTopic')) {
       // flagging post
diff --git a/app/assets/javascripts/discourse/templates/components/flag-selection.hbs b/app/assets/javascripts/discourse/templates/components/flag-selection.hbs
new file mode 100644
index 00000000000..4aadb91c823
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/flag-selection.hbs
@@ -0,0 +1,5 @@
+{{#each flags as |f|}}
+  {{yield f}}
+{{else}}
+  {{i18n 'flagging.cant'}}
+{{/each}}
diff --git a/app/assets/javascripts/discourse/templates/modal/flag.hbs b/app/assets/javascripts/discourse/templates/modal/flag.hbs
index bc002e26119..3b0da391233 100644
--- a/app/assets/javascripts/discourse/templates/modal/flag.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/flag.hbs
@@ -1,7 +1,6 @@
-<div class="modal-body flag-modal">
-
+{{#d-modal-body class="flag-modal" title=title}}
   <form>
-    {{#each flagsAvailable as |f|}}
+    {{#flag-selection nameKey=selected.name_key flags=flagsAvailable as |f|}}
       {{flag-action-type flag=f
                          message=message
                          isWarning=isWarning
@@ -9,12 +8,10 @@
                          username=model.username
                          staffFlagsAvailable=staffFlagsAvailable
                          changePostActionType="changePostActionType"}}
-    {{else}}
-      {{i18n 'flagging.cant'}}
-    {{/each}}
+   {{/flag-selection}}
   </form>
+{{/d-modal-body}}
 
-</div>
 <div class="modal-footer">
   <button class='btn btn-primary' {{action "createFlag"}} disabled={{submitDisabled}} title="{{i18n 'flagging.submit_tooltip'}}">{{{submitText}}}</button>
 
diff --git a/app/assets/javascripts/discourse/views/flag.js.es6 b/app/assets/javascripts/discourse/views/flag.js.es6
deleted file mode 100644
index 388735c7c5f..00000000000
--- a/app/assets/javascripts/discourse/views/flag.js.es6
+++ /dev/null
@@ -1,27 +0,0 @@
-import ModalBodyView from "discourse/views/modal-body";
-
-export default ModalBodyView.extend({
-  templateName: 'modal/flag',
-
-  title: function() {
-    return this.get('controller.flagTopic') ? I18n.t('flagging_topic.title') : I18n.t('flagging.title');
-  }.property('controller.flagTopic'),
-
-  _selectRadio: function() {
-    this.$("input[type='radio']").prop('checked', false);
-
-    const nameKey = this.get('controller.selected.name_key');
-    if (!nameKey) { return; }
-
-    this.$('#radio_' + nameKey).prop('checked', 'true');
-  },
-
-  selectedChanged: function() {
-    Ember.run.next(this, this._selectRadio);
-  }.observes('controller.selected.name_key'),
-
-  // See: https://github.com/emberjs/ember.js/issues/10869
-  _selectedHack: function() {
-    this.removeObserver('controller.selected.name_key');
-  }.on('willDestroyElement')
-});
diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js
index a2f7009218a..da737321808 100644
--- a/app/assets/javascripts/main_include.js
+++ b/app/assets/javascripts/main_include.js
@@ -60,7 +60,6 @@
 //= require ./discourse/controllers/discovery-sortable
 //= require ./discourse/controllers/navigation/default
 //= require ./discourse/views/modal-body
-//= require ./discourse/views/flag
 //= require ./discourse/components/edit-category-panel
 //= require ./discourse/components/dropdown-button
 //= require ./discourse/components/notifications-button