DEV: Convert wizard components to native class syntax (#28606)

Changes made using the ember-native-class-codemod, plus some manual tweaks

app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js

@@ -1,5 +1,5 @@
 import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
 
-export default Component.extend({
-  tagName: "",
-});
+@tagName("")
+export default class Checkbox extends Component {}

app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js

@@ -1,9 +1,9 @@
 import Component from "@ember/component";
 import { action, set } from "@ember/object";
 
-export default Component.extend({
+export default class Checkboxes extends Component {
   init(...args) {
-    this._super(...args);
+    super.init(...args);
     this.set("field.value", this.field.value || []);
 
     for (let choice of this.field.choices) {
@@ -11,7 +11,7 @@ export default Component.extend({
         set(choice, "checked", true);
       }
     }
-  },
+  }
 
   @action
   changed(checkbox) {
@@ -29,5 +29,5 @@ export default Component.extend({
       }
     }
     this.set("field.value", newFieldValue);
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.js

@@ -4,9 +4,9 @@ import discourseComputed from "discourse-common/utils/decorators";
 import ColorPalettes from "select-kit/components/color-palettes";
 import ComboBox from "select-kit/components/combo-box";
 
-export default Component.extend({
+export default class Dropdown extends Component {
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     if (this.field.id === "color_scheme") {
       for (let choice of this.field.choices) {
@@ -15,19 +15,19 @@ export default Component.extend({
         }
       }
     }
-  },
+  }
 
   @discourseComputed("field.id")
   component(id) {
     return id === "color_scheme" ? ColorPalettes : ComboBox;
-  },
+  }
 
   keyPress(e) {
     e.stopPropagation();
-  },
+  }
 
   @action
   onChangeValue(value) {
     this.set("field.value", value);
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js

@@ -1,4 +1,5 @@
 import Component from "@ember/component";
-export default Component.extend({
-  classNameBindings: [":wizard-image-preview", "fieldClass"],
-});
+import { classNameBindings } from "@ember-decorators/component";
+
+@classNameBindings(":wizard-image-preview", "fieldClass")
+export default class Generic extends Component {}

app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js

@@ -2,29 +2,29 @@ import { action } from "@ember/object";
 import { drawHeader, LOREM } from "../../../lib/preview";
 import PreviewBaseComponent from "../styling-preview/-preview-base";
 
-export default PreviewBaseComponent.extend({
-  width: 375,
-  height: 100,
-  image: null,
+export default class LogoSmall extends PreviewBaseComponent {
+  width = 375;
+  height = 100;
+  image = null;
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.field.addListener(this.imageChanged);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
     this.field.removeListener(this.imageChanged);
-  },
+  }
 
   @action
   imageChanged() {
     this.reload();
-  },
+  }
 
   images() {
     return { image: this.field.value };
-  },
+  }
 
   paint(options) {
     const { ctx, colors, font, headingFont, width, height } = options;
@@ -85,5 +85,5 @@ export default PreviewBaseComponent.extend({
       const line = height * 0.55 + i * (LINE_HEIGHT * 1.5);
       ctx.fillText(lines[i], afterLogo, line);
     }
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo.js

@@ -2,29 +2,29 @@ import { action } from "@ember/object";
 import { drawHeader } from "../../../lib/preview";
 import PreviewBaseComponent from "../styling-preview/-preview-base";
 
-export default PreviewBaseComponent.extend({
-  width: 400,
-  height: 100,
-  image: null,
+export default class Logo extends PreviewBaseComponent {
+  width = 400;
+  height = 100;
+  image = null;
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.field.addListener(this.imageChanged);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
     this.field.removeListener(this.imageChanged);
-  },
+  }
 
   @action
   imageChanged() {
     this.reload();
-  },
+  }
 
   images() {
     return { image: this.field.value };
-  },
+  }
 
   paint({ ctx, colors, font, width, height }) {
     const headerHeight = height / 2;
@@ -46,5 +46,5 @@ export default PreviewBaseComponent.extend({
     );
 
     this.drawPills(colors, font, height / 2);
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/image.js

@@ -2,6 +2,7 @@ import Component from "@ember/component";
 import { warn } from "@ember/debug";
 import { service } from "@ember/service";
 import { dasherize } from "@ember/string";
+import { classNames } from "@ember-decorators/component";
 import Uppy from "@uppy/core";
 import DropTarget from "@uppy/drop-target";
 import XHRUpload from "@uppy/xhr-upload";
@@ -10,20 +11,21 @@ import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import imagePreviews from "./image-previews";
 
-export default Component.extend({
-  classNames: ["wizard-container__image-upload"],
-  dialog: service(),
-  uploading: false,
+@classNames("wizard-container__image-upload")
+export default class Image extends Component {
+  @service dialog;
+
+  uploading = false;
 
   @discourseComputed("field.id")
   previewComponent(id) {
     return imagePreviews[dasherize(id)] ?? imagePreviews.generic;
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.setupUploads();
-  },
+  }
 
   setupUploads() {
     const id = this.field.id;
@@ -80,5 +82,5 @@ export default Component.extend({
           }
         });
       });
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js

@@ -1,24 +1,24 @@
 import { darkLightDiff, LOREM } from "../../../lib/preview";
 import PreviewBaseComponent from "./-preview-base";
 
-export default PreviewBaseComponent.extend({
-  width: 628,
-  height: 322,
-  logo: null,
-  avatar: null,
+export default class HomepagePreview extends PreviewBaseComponent {
+  width = 628;
+  height = 322;
+  logo = null;
+  avatar = null;
 
   didUpdateAttrs() {
-    this._super(...arguments);
+    super.didUpdateAttrs(...arguments);
 
     this.triggerRepaint();
-  },
+  }
 
   images() {
     return {
       logo: this.wizard.logoUrl,
       avatar: "/images/wizard/trout.png",
     };
-  },
+  }
 
   paint({ ctx, colors, font, width, height }) {
     this.drawFullHeader(colors, font, this.logo);
@@ -47,7 +47,7 @@ export default PreviewBaseComponent.extend({
       this.drawPills(colors, font, height * 0.15, { categories: true });
       this.renderCategoriesWithTopics(ctx, colors, font, width, height);
     }
-  },
+  }
 
   renderCategoriesBoxes(ctx, colors, font, width, height, opts) {
     opts = opts || {};
@@ -122,7 +122,7 @@ export default PreviewBaseComponent.extend({
         ctx.textAlign = "left";
       }
     });
-  },
+  }
 
   renderCategories(ctx, colors, font, width, height) {
     const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
@@ -221,7 +221,7 @@ export default PreviewBaseComponent.extend({
         y += topicHeight;
       });
     }
-  },
+  }
 
   renderCategoriesWithTopics(ctx, colors, font, width, height) {
     const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
@@ -340,21 +340,21 @@ export default PreviewBaseComponent.extend({
 
       drawLine(width / 2, y);
     });
-  },
+  }
 
   getHomepageStyle() {
     return this.step.valueFor("homepage_style");
-  },
+  }
 
   getTitles() {
     return LOREM.split(".")
       .slice(0, 8)
       .map((t) => t.substring(0, 40));
-  },
+  }
 
   getDescriptions() {
     return LOREM.split(".");
-  },
+  }
 
   renderLatest(ctx, colors, font, width, height) {
     const rowHeight = height / 6.6;
@@ -437,7 +437,7 @@ export default PreviewBaseComponent.extend({
       drawLine(y + rowHeight * 1);
       y += rowHeight;
     });
-  },
+  }
 
   fillTextMultiLine(ctx, text, x, y, lineHeight, maxWidth) {
     const words = text.split(" ").filter((f) => f);
@@ -458,7 +458,7 @@ export default PreviewBaseComponent.extend({
     totalHeight += lineHeight;
 
     return totalHeight;
-  },
+  }
 
   // Edges expected in this order: NW to NE -> NE to SE -> SE to SW -> SW to NW
   drawSquare(ctx, from, to, edges = []) {
@@ -485,5 +485,5 @@ export default PreviewBaseComponent.extend({
       ctx.lineTo(path.to.x, path.to.y);
       ctx.stroke();
     });
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js

@@ -37,25 +37,25 @@ function canvasFor(image, w, h) {
 }
 
 const scale = window.devicePixelRatio;
-export default Component.extend({
+export default class PreviewBase extends Component {
+  ctx = null;
+  loaded = false;
+  loadingFontVariants = false;
+
   get elementWidth() {
     return this.width * scale;
-  },
+  }
 
   get elementHeight() {
     return this.height * scale;
-  },
+  }
 
   get canvasStyle() {
     return htmlSafe(`width:${this.width}px;height:${this.height}px`);
-  },
-
-  ctx: null,
-  loaded: false,
-  loadingFontVariants: false,
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.fontMap = PreloadStore.get("fontMap");
     this.loadedFonts = new Set();
     const c = this.element.querySelector("canvas");
@@ -72,10 +72,10 @@ export default Component.extend({
     }
 
     this.reload();
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     if (this.step) {
       this.step.findField("color_scheme")?.removeListener(this.themeChanged);
@@ -87,26 +87,26 @@ export default Component.extend({
         .findField("heading_font")
         ?.removeListener(this.themeHeadingFontChanged);
     }
-  },
+  }
 
   @action
   themeChanged() {
     this.triggerRepaint();
-  },
+  }
 
   @action
   themeBodyFontChanged() {
     if (!this.loadingFontVariants) {
       this.loadFontVariants(this.wizard.font);
     }
-  },
+  }
 
   @action
   themeHeadingFontChanged() {
     if (!this.loadingFontVariants) {
       this.loadFontVariants(this.wizard.headingFont);
     }
-  },
+  }
 
   loadFontVariants(font) {
     const fontVariantData = this.fontMap[font.id];
@@ -146,16 +146,16 @@ export default Component.extend({
     } else if (this.loadedFonts.has(font.id)) {
       this.triggerRepaint();
     }
-  },
+  }
 
-  images() {},
+  images() {}
 
   // NOTE: This works for fonts included in a style that is actually using the
   // @font-faces on load, but for fonts that we aren't using yet we need to
   // make sure they are loaded before rendering the canvas via loadFontVariants.
   loadFonts() {
     return document.fonts.ready;
-  },
+  }
 
   loadImages() {
     const images = this.images();
@@ -167,18 +167,18 @@ export default Component.extend({
       );
     }
     return Promise.resolve();
-  },
+  }
 
   reload() {
     Promise.all([this.loadFonts(), this.loadImages()]).then(() => {
       this.loaded = true;
       this.triggerRepaint();
     });
-  },
+  }
 
   triggerRepaint() {
     scheduleOnce("afterRender", this, "repaint");
-  },
+  }
 
   repaint() {
     if (!this.loaded) {
@@ -215,7 +215,7 @@ export default Component.extend({
       height: this.height,
     };
     this.paint(options);
-  },
+  }
 
   categories() {
     return [
@@ -223,7 +223,7 @@ export default Component.extend({
       { name: "ultrices", color: "#3AB54A" },
       { name: "placerat", color: "#25AAE2" },
     ];
-  },
+  }
 
   scaleImage(image, x, y, w, h) {
     w = Math.floor(w);
@@ -246,7 +246,7 @@ export default Component.extend({
     }
 
     ctx.drawImage(scaled[key], x, y, w, h);
-  },
+  }
 
   drawFullHeader(colors, font, logo) {
     const { ctx } = this;
@@ -311,7 +311,7 @@ export default Component.extend({
     ctx.scale(pathScale, pathScale);
     ctx.fill(hamburgerIcon);
     ctx.restore();
-  },
+  }
 
   drawPills(colors, font, headerHeight, opts) {
     opts = opts || {};
@@ -389,8 +389,8 @@ export default Component.extend({
 
     x += categoriesSize * 0.6;
     ctx.fillText("Top", x, headerHeight + headerMargin * 1.5 + fontSize);
-  },
-});
+  }
+}
 
 function loadImage(src) {
   if (!src) {

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js

@@ -1,5 +1,6 @@
 import { action } from "@ember/object";
-import { bind, observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
+import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import { chooseDarker, darkLightDiff } from "../../../lib/preview";
 import HomepagePreview from "./-homepage-preview";
@@ -11,42 +12,42 @@ Nullam eget sem non elit tincidunt rhoncus. Fusce
 velit nisl, porttitor sed nisl ac, consectetur interdum
 metus. Fusce in consequat augue, vel facilisis felis.`;
 
-export default PreviewBaseComponent.extend({
-  width: 628,
-  height: 322,
-  logo: null,
-  avatar: null,
-  previewTopic: true,
-  draggingActive: false,
-  startX: 0,
-  scrollLeft: 0,
-  HomepagePreview,
+export default class Index extends PreviewBaseComponent {
+  width = 628;
+  height = 322;
+  logo = null;
+  avatar = null;
+  previewTopic = true;
+  draggingActive = false;
+  startX = 0;
+  scrollLeft = 0;
+  HomepagePreview = HomepagePreview;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.step
       .findField("homepage_style")
       ?.addListener(this.onHomepageStyleChange);
-  },
+  }
 
   willDestroy() {
-    this._super(...arguments);
+    super.willDestroy(...arguments);
     this.step
       .findField("homepage_style")
       ?.removeListener(this.onHomepageStyleChange);
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.element.addEventListener("mouseleave", this.handleMouseLeave);
     this.element.addEventListener("mousemove", this.handleMouseMove);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
     this.element.removeEventListener("mouseleave", this.handleMouseLeave);
     this.element.removeEventListener("mousemove", this.handleMouseMove);
-  },
+  }
 
   mouseDown(e) {
     const slider = this.element.querySelector(".previews");
@@ -55,16 +56,16 @@ export default PreviewBaseComponent.extend({
       startX: e.pageX - slider.offsetLeft,
       scrollLeft: slider.scrollLeft,
     });
-  },
+  }
 
   @bind
   handleMouseLeave() {
     this.set("draggingActive", false);
-  },
+  }
 
   mouseUp() {
     this.set("draggingActive", false);
-  },
+  }
 
   @bind
   handleMouseMove(e) {
@@ -85,18 +86,18 @@ export default PreviewBaseComponent.extend({
     if (slider.scrollLeft > slider.offsetWidth - 50) {
       this.set("previewTopic", false);
     }
-  },
+  }
 
   didUpdateAttrs() {
-    this._super(...arguments);
+    super.didUpdateAttrs(...arguments);
 
     this.triggerRepaint();
-  },
+  }
 
   @bind
   onHomepageStyleChange() {
     this.set("previewTopic", false);
-  },
+  }
 
   @observes("previewTopic")
   scrollPreviewArea() {
@@ -106,14 +107,14 @@ export default PreviewBaseComponent.extend({
       left: this.previewTopic ? 0 : el.scrollWidth - el.offsetWidth,
       behavior: "smooth",
     });
-  },
+  }
 
   images() {
     return {
       logo: this.wizard.logoUrl,
       avatar: "/images/wizard/trout.png",
     };
-  },
+  }
 
   paint({ ctx, colors, font, headingFont, width, height }) {
     const headerHeight = height * 0.3;
@@ -207,17 +208,17 @@ export default PreviewBaseComponent.extend({
     ctx.font = `Bold ${bodyFontSize}em ${font}`;
     ctx.fillStyle = colors.primary;
     ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
-  },
+  }
 
   @action
   setPreviewHomepage(event) {
     event?.preventDefault();
     this.set("previewTopic", false);
-  },
+  }
 
   @action
   setPreviewTopic(event) {
     event?.preventDefault();
     this.set("previewTopic", true);
-  },
-});
+  }
+}

app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class Text extends Component {}