Migrate flag modal to use components

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

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

app/assets/javascripts/discourse/templates/components/flag-selection.hbs

@@ -0,0 +1,5 @@
+{{#each flags as |f|}}
+  {{yield f}}
+{{else}}
+  {{i18n 'flagging.cant'}}
+{{/each}}

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>
 

app/assets/javascripts/discourse/views/flag.js.es6

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

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