DEV: Update poll components and controllers to native class syntax

Conversion performed using the ember-native-class-codemod

plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js

@@ -1,61 +1,61 @@
+import { classNames } from "@ember-decorators/component";
+import { mapBy } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
 import { PIE_CHART_TYPE } from "../controllers/poll-ui-builder";
 import discourseComputed from "discourse-common/utils/decorators";
 import { getColors } from "discourse/plugins/poll/lib/chart-colors";
 import { htmlSafe } from "@ember/template";
-import { mapBy } from "@ember/object/computed";
 import { next } from "@ember/runloop";
 
-export default Component.extend({
+@classNames("poll-breakdown-chart-container")
+export default class PollBreakdownChart extends Component {
   // Arguments:
-  group: null,
+  group = null;
-  options: null,
+  options = null;
-  displayMode: null,
+  displayMode = null;
-  highlightedOption: null,
+  highlightedOption = null;
-  setHighlightedOption: null,
+  setHighlightedOption = null;
 
-  classNames: "poll-breakdown-chart-container",
+  @mapBy("options", "votes") data;
 
-  _optionToSlice: null,
+  _optionToSlice = null;
-  _previousHighlightedSliceIndex: null,
+  _previousHighlightedSliceIndex = null;
-  _previousDisplayMode: null,
+  _previousDisplayMode = null;
-
-  data: mapBy("options", "votes"),
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this._optionToSlice = {};
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     const canvas = this.element.querySelector("canvas");
     this._chart = new window.Chart(canvas.getContext("2d"), this.chartConfig);
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     if (this._chart) {
       this._updateDisplayMode();
       this._updateHighlight();
     }
-  },
+  }
 
   willDestroy() {
-    this._super(...arguments);
+    super.willDestroy(...arguments);
 
     if (this._chart) {
       this._chart.destroy();
     }
-  },
+  }
 
   @discourseComputed("optionColors", "index")
   colorStyle(optionColors, index) {
     return htmlSafe(`background: ${optionColors[index]};`);
-  },
+  }
 
   @discourseComputed("data", "displayMode")
   chartConfig(data, displayMode) {
@@ -149,7 +149,7 @@ export default Component.extend({
         },
       },
     };
-  },
+  }
 
   _updateDisplayMode() {
     if (this.displayMode !== this._previousDisplayMode) {
@@ -160,7 +160,7 @@ export default Component.extend({
       this._chart.update();
       this._previousDisplayMode = this.displayMode;
     }
-  },
+  }
 
   _updateHighlight() {
     const meta = this._chart.getDatasetMeta(0);
@@ -186,5 +186,5 @@ export default Component.extend({
     this._previousHighlightedSliceIndex = sliceIndex;
     meta.controller.setHoverStyle(slice);
     this._chart.draw();
-  },
+  }
-});
+}

plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js

@@ -1,37 +1,37 @@
+import { tagName } from "@ember-decorators/component";
+import { equal } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
-import { equal } from "@ember/object/computed";
 import { getColors } from "discourse/plugins/poll/lib/chart-colors";
 import { htmlSafe } from "@ember/template";
 import { propertyEqual } from "discourse/lib/computed";
 
-export default Component.extend({
+@tagName("")
+export default class PollBreakdownOption extends Component {
   // Arguments:
-  option: null,
+  option = null;
-  index: null,
+  index = null;
-  totalVotes: null,
+  totalVotes = null;
-  optionsCount: null,
+  optionsCount = null;
-  displayMode: null,
+  displayMode = null;
-  highlightedOption: null,
+  highlightedOption = null;
-  onMouseOver: null,
+  onMouseOver = null;
-  onMouseOut: null,
+  onMouseOut = null;
 
-  tagName: "",
+  @propertyEqual("highlightedOption", "index") highlighted;
-
+  @equal("displayMode", "percentage") showPercentage;
-  highlighted: propertyEqual("highlightedOption", "index"),
-  showPercentage: equal("displayMode", "percentage"),
 
   @discourseComputed("option.votes", "totalVotes")
   percent(votes, total) {
     return I18n.toNumber((votes / total) * 100.0, { precision: 1 });
-  },
+  }
 
   @discourseComputed("optionsCount")
   optionColors(optionsCount) {
     return getColors(optionsCount);
-  },
+  }
 
   @discourseComputed("highlighted")
   colorBackgroundStyle(highlighted) {
@@ -39,7 +39,7 @@ export default Component.extend({
       // TODO: Use CSS variables (#10341)
       return htmlSafe("background: rgba(0, 0, 0, 0.1);");
     }
-  },
+  }
 
   @discourseComputed("highlighted", "optionColors", "index")
   colorPreviewStyle(highlighted, optionColors, index) {
@@ -48,7 +48,7 @@ export default Component.extend({
       : optionColors[index];
 
     return htmlSafe(`background: ${color};`);
-  },
+  }
 
   @action
   onHover(active) {
@@ -57,5 +57,5 @@ export default Component.extend({
     } else {
       this.onMouseOut();
     }
-  },
+  }
-});
+}

plugins/poll/assets/javascripts/discourse/controllers/poll-breakdown.js

@@ -1,3 +1,4 @@
+import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
@@ -8,20 +9,22 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { htmlSafe } from "@ember/template";
 import loadScript from "discourse/lib/load-script";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend(ModalFunctionality, {
+export default class PollBreakdownController extends Controller.extend(
-  dialog: service(),
+  ModalFunctionality
-  model: null,
+) {
-  charts: null,
+  @service dialog;
-  groupedBy: null,
+
-  highlightedOption: null,
+  model = null;
-  displayMode: "percentage",
+  charts = null;
+  groupedBy = null;
+  highlightedOption = null;
+  displayMode = "percentage";
 
   @discourseComputed("model.poll.title", "model.post.topic.title")
   title(pollTitle, topicTitle) {
     return pollTitle ? htmlSafe(pollTitle) : topicTitle;
-  },
+  }
 
   @discourseComputed("model.groupableUserFields")
   groupableUserFields(fields) {
@@ -34,12 +37,12 @@ export default Controller.extend(ModalFunctionality, {
 
       return { id: field, label: transformed.join(" ") };
     });
-  },
+  }
 
   @discourseComputed("model.poll.options")
   totalVotes(options) {
     return options.reduce((sum, option) => sum + option.votes, 0);
-  },
+  }
 
   onShow() {
     this.set("charts", null);
@@ -51,7 +54,7 @@ export default Controller.extend(ModalFunctionality, {
       .then(() => {
         this.fetchGroupedPollData();
       });
-  },
+  }
 
   fetchGroupedPollData() {
     return ajax("/polls/grouped_poll_results.json", {
@@ -75,16 +78,16 @@ export default Controller.extend(ModalFunctionality, {
 
         this.set("charts", result.grouped_results);
       });
-  },
+  }
 
   @action
   setGrouping(value) {
     this.set("groupedBy", value);
     this.fetchGroupedPollData();
-  },
+  }
 
   @action
   onSelectPanel(panel) {
     this.set("displayMode", panel.id);
-  },
+  }
-});
+}

plugins/poll/assets/javascripts/discourse/controllers/poll-ui-builder.js

@@ -1,6 +1,6 @@
+import { gt, or } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
-import { gt, or } from "@ember/object/computed";
 import { next } from "@ember/runloop";
 import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
@@ -18,21 +18,25 @@ const VOTE_POLL_RESULT = "on_vote";
 const CLOSED_POLL_RESULT = "on_close";
 const STAFF_POLL_RESULT = "staff_only";
 
-export default Controller.extend(ModalFunctionality, {
+export default class PollUiBuilderController extends Controller.extend(
-  showAdvanced: false,
+  ModalFunctionality
+) {
+  showAdvanced = false;
+  pollType = REGULAR_POLL_TYPE;
+  pollTitle = "";
+  pollOptions = null;
+  pollOptionsText = null;
+  pollMin = 1;
+  pollMax = 2;
+  pollStep = 1;
+  pollGroups = null;
+  pollAutoClose = null;
+  pollResult = ALWAYS_POLL_RESULT;
+  chartType = BAR_CHART_TYPE;
+  publicPoll = null;
 
-  pollType: REGULAR_POLL_TYPE,
+  @or("showAdvanced", "isNumber") showNumber;
-  pollTitle: "",
+  @gt("pollOptions.length", 1) canRemoveOption;
-  pollOptions: null,
-  pollOptionsText: null,
-  pollMin: 1,
-  pollMax: 2,
-  pollStep: 1,
-  pollGroups: null,
-  pollAutoClose: null,
-  pollResult: ALWAYS_POLL_RESULT,
-  chartType: BAR_CHART_TYPE,
-  publicPoll: null,
 
   onShow() {
     this.setProperties({
@@ -50,7 +54,7 @@ export default Controller.extend(ModalFunctionality, {
       chartType: BAR_CHART_TYPE,
       publicPoll: false,
     });
-  },
+  }
 
   @discourseComputed
   pollResults() {
@@ -77,43 +81,39 @@ export default Controller.extend(ModalFunctionality, {
     }
 
     return options;
-  },
+  }
 
   @discourseComputed("pollType")
   isRegular(pollType) {
     return pollType === REGULAR_POLL_TYPE;
-  },
+  }
 
   @discourseComputed("pollType")
   isNumber(pollType) {
     return pollType === NUMBER_POLL_TYPE;
-  },
+  }
 
   @discourseComputed("pollType")
   isMultiple(pollType) {
     return pollType === MULTIPLE_POLL_TYPE;
-  },
+  }
-
-  showNumber: or("showAdvanced", "isNumber"),
 
   @discourseComputed("pollOptions.@each.value")
   pollOptionsCount(pollOptions) {
     return (pollOptions || []).filter((option) => option.value.length > 0)
       .length;
-  },
+  }
 
   @discourseComputed("site.groups")
   siteGroups(groups) {
     // prevents group "everyone" to be listed
     return groups.filter((g) => g.id !== 0);
-  },
+  }
 
   @discourseComputed("chartType", "pollType")
   isPie(chartType, pollType) {
     return pollType !== NUMBER_POLL_TYPE && chartType === PIE_CHART_TYPE;
-  },
+  }
-
-  canRemoveOption: gt("pollOptions.length", 1),
 
   @observes("pollType", "pollOptionsCount")
   _setPollMinMax() {
@@ -136,7 +136,7 @@ export default Controller.extend(ModalFunctionality, {
     } else if (this.isNumber) {
       this.set("pollMax", this.siteSettings.poll_maximum_options);
     }
-  },
+  }
 
   @discourseComputed(
     "pollType",
@@ -225,7 +225,7 @@ export default Controller.extend(ModalFunctionality, {
 
     output += "[/poll]\n";
     return output;
-  },
+  }
 
   @discourseComputed("isNumber", "pollOptionsCount")
   minNumOfOptionsValidation(isNumber, pollOptionsCount) {
@@ -250,12 +250,12 @@ export default Controller.extend(ModalFunctionality, {
     }
 
     return EmberObject.create(options);
-  },
+  }
 
   @discourseComputed("pollOptions.@each.value")
   showMinNumOfOptionsValidation(pollOptions) {
     return pollOptions.length !== 1 || pollOptions[0].value !== "";
-  },
+  }
 
   @discourseComputed(
     "isMultiple",
@@ -326,19 +326,19 @@ export default Controller.extend(ModalFunctionality, {
     }
 
     return EmberObject.create({ ok: true });
-  },
+  }
 
   @discourseComputed("minMaxValueValidation", "minNumOfOptionsValidation")
   disableInsert(minMaxValueValidation, minNumOfOptionsValidation) {
     return !minMaxValueValidation.ok || !minNumOfOptionsValidation.ok;
-  },
+  }
 
   _comboboxOptions(startIndex, endIndex) {
     return [...Array(endIndex - startIndex).keys()].map((number) => ({
       value: number + startIndex,
       name: number + startIndex,
     }));
-  },
+  }
 
   @action
   onOptionsTextChange(e) {
@@ -349,13 +349,13 @@ export default Controller.extend(ModalFunctionality, {
         .split("\n")
         .map((value) => EmberObject.create({ idx: idx++, value }))
     );
-  },
+  }
 
   @action
   insertPoll() {
     this.toolbarEvent.addText(this.pollOutput);
     this.send("closeModal");
-  },
+  }
 
   @action
   toggleAdvanced() {
@@ -366,7 +366,7 @@ export default Controller.extend(ModalFunctionality, {
         this.pollOptions.map((x) => x.value).join("\n")
       );
     }
-  },
+  }
 
   @action
   addOption(beforeOption, value, e) {
@@ -392,16 +392,16 @@ export default Controller.extend(ModalFunctionality, {
     if (e) {
       e.preventDefault();
     }
-  },
+  }
 
   @action
   removeOption(option) {
     this.pollOptions.removeObject(option);
-  },
+  }
 
   @action
   updatePollType(pollType, event) {
     event?.preventDefault();
     this.set("pollType", pollType);
-  },
+  }
-});
+}