Merge pull request #297 from paviliondev/fix_tests_and_deprecations

FIX: tests and deprecations

.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "eslint-config-discourse"
-}

.prettierrc

@@ -1 +0,0 @@
-{}

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

.template-lintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  plugins: ["ember-template-lint-plugin-discourse"],
-  extends: "discourse:recommended",
-};

.travis.yml

@@ -1,10 +0,0 @@
-services:
-  - docker
-
-before_install:
-  - git clone --depth=1 https://github.com/discourse/discourse-plugin-ci
-
-install: true
-
-script:
-  - discourse-plugin-ci/script.sh

assets/javascripts/discourse/components/custom-field-input.hbs

@@ -1,19 +1,19 @@
-{{#if showInputs}}
+{{#if this.showInputs}}
   <td>
     {{wizard-subscription-selector
-      value=field.klass
+      value=this.field.klass
       feature="custom_field"
       attribute="klass"
-      onChange=(action (mut field.klass))
+      onChange=(action (mut this.field.klass))
       options=(hash none="admin.wizard.custom_field.klass.select")
     }}
   </td>
   <td>
     {{wizard-subscription-selector
-      value=field.type
+      value=this.field.type
       feature="custom_field"
       attribute="type"
-      onChange=(action (mut field.type))
+      onChange=(action (mut this.field.type))
       options=(hash none="admin.wizard.custom_field.type.select")
     }}
   </td>
@@ -25,48 +25,52 @@
   </td>
   <td class="multi-select">
     {{multi-select
-      value=field.serializers
-      content=serializerContent
-      onChange=(action (mut field.serializers))
+      value=this.field.serializers
+      content=this.serializerContent
+      onChange=(action (mut this.field.serializers))
       options=(hash none="admin.wizard.custom_field.serializers.select")
     }}
   </td>
   <td class="actions">
-    {{#if loading}}
+    {{#if this.loading}}
       {{loading-spinner size="small"}}
     {{else}}
-      {{#if saveIcon}}
-        {{d-icon saveIcon}}
+      {{#if this.saveIcon}}
+        {{d-icon this.saveIcon}}
       {{/if}}
     {{/if}}
     {{d-button
       action=(action "destroy")
       icon="trash-alt"
       class="destroy"
-      disabled=destroyDisabled
+      disabled=this.destroyDisabled
     }}
     {{d-button
       icon="save"
       action=(action "save")
-      disabled=saveDisabled
+      disabled=this.saveDisabled
       class="save"
     }}
-    {{d-button action=(action "close") icon="times" disabled=closeDisabled}}
+    {{d-button
+      action=(action "close")
+      icon="times"
+      disabled=this.closeDisabled
+    }}
   </td>
 {{else}}
-  <td><label>{{field.klass}}</label></td>
-  <td><label>{{field.type}}</label></td>
-  <td class="input"><label>{{field.name}}</label></td>
+  <td><label>{{this.field.klass}}</label></td>
+  <td><label>{{this.field.type}}</label></td>
+  <td class="input"><label>{{this.field.name}}</label></td>
   <td class="multi-select">
-    {{#if isExternal}}
+    {{#if this.isExternal}}
       &mdash;
     {{else}}
-      {{#each field.serializers as |serializer|}}
+      {{#each this.field.serializers as |serializer|}}
         <label>{{serializer}}</label>
       {{/each}}
     {{/if}}
   </td>
-  {{#if isExternal}}
+  {{#if this.isExternal}}
     <td class="external">
       <label title={{i18n "admin.wizard.custom_field.external.title"}}>
         {{i18n "admin.wizard.custom_field.external.label"}}

assets/javascripts/discourse/components/custom-field-input.js

@@ -1,6 +1,6 @@
 import Component from "@ember/component";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import { alias, equal, or } from "@ember/object/computed";
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import I18n from "I18n";
 
 export default Component.extend({
@@ -17,6 +17,7 @@ export default Component.extend({
   isExternal: equal("field.id", "external"),
 
   didInsertElement() {
+    this._super(...arguments);
     this.set("originalField", JSON.parse(JSON.stringify(this.field)));
   },
 
@@ -119,7 +120,12 @@ export default Component.extend({
         } else {
           this.set("saveIcon", "times");
         }
-        setTimeout(() => this.set("saveIcon", null), 10000);
+        setTimeout(() => {
+          if (this.isDestroyed) {
+            return;
+          }
+          this.set("saveIcon", null);
+        }, 10000);
       });
     },
   },

assets/javascripts/discourse/components/custom-user-selector.js

@@ -1,13 +1,14 @@
+import { isEmpty } from "@ember/utils";
+import Handlebars from "handlebars";
+import $ from "jquery";
+import TextField from "discourse/components/text-field";
+import { renderAvatar } from "discourse/helpers/user-avatar";
+import userSearch from "discourse/lib/user-search";
 import {
   default as computed,
   observes,
 } from "discourse-common/utils/decorators";
-import { renderAvatar } from "discourse/helpers/user-avatar";
-import userSearch from "discourse/lib/user-search";
 import I18n from "I18n";
-import Handlebars from "handlebars";
-import { isEmpty } from "@ember/utils";
-import TextField from "discourse/components/text-field";
 
 const template = function (params) {
   const options = params.options;

assets/javascripts/discourse/components/custom-wizard-category-selector.js

@@ -1,6 +1,6 @@
-import CategorySelector from "select-kit/components/category-selector";
 import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
+import CategorySelector from "select-kit/components/category-selector";
 
 export default CategorySelector.extend({
   classNames: ["category-selector", "wizard-category-selector"],

assets/javascripts/discourse/components/custom-wizard-composer-editor.hbs

@@ -1,21 +1,21 @@
 <div class={{this.fieldClass}}>
   <DEditor
-    @tabindex={{field.tabindex}}
-    @value={{composer.reply}}
-    @placeholderOverride={{replyPlaceholder}}
+    @tabindex={{this.field.tabindex}}
+    @value={{this.composer.reply}}
+    @placeholderOverride={{this.replyPlaceholder}}
     @previewUpdated={{this.previewUpdated}}
-    @markdownOptions={{markdownOptions}}
+    @markdownOptions={{this.markdownOptions}}
     @extraButtons={{this.extraButtons}}
     @importQuote={{this.importQuote}}
     @showUploadModal={{this.showUploadModal}}
     @togglePreview={{this.togglePreview}}
-    @validation={{validation}}
-    @loading={{composer.loading}}
-    @showLink={{showLink}}
+    @validation={{this.validation}}
+    @loading={{this.composer.loading}}
+    @showLink={{this.showLink}}
     @wizardComposer={{true}}
-    @fieldId={{field.id}}
-    @disabled={{disableTextarea}}
-    @outletArgs={{hash composer=composer editorType="composer"}}
+    @fieldId={{this.field.id}}
+    @disabled={{this.disableTextarea}}
+    @outletArgs={{hash composer=this.composer editorType="composer"}}
   />
 
   <input

assets/javascripts/discourse/components/custom-wizard-composer-editor.js

@@ -1,11 +1,11 @@
-import ComposerEditor from "discourse/components/composer-editor";
-import discourseComputed, { bind } from "discourse-common/utils/decorators";
-import { alias } from "@ember/object/computed";
-import { uploadIcon } from "discourse/lib/uploads";
-import { dasherize } from "@ember/string";
-import InsertHyperlink from "discourse/components/modal/insert-hyperlink";
-import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
+import { alias } from "@ember/object/computed";
+import { service } from "@ember/service";
+import { dasherize } from "@ember/string";
+import ComposerEditor from "discourse/components/composer-editor";
+import InsertHyperlink from "discourse/components/modal/insert-hyperlink";
+import { uploadIcon } from "discourse/lib/uploads";
+import discourseComputed, { bind } from "discourse-common/utils/decorators";
 
 export const wizardComposerEdtiorEventPrefix = "wizard-editor";
 
@@ -33,6 +33,9 @@ export default class CustomWizardComposerEditor extends ComposerEditor {
       this.field.type
     )}-${dasherize(this.field.id)} .d-editor-input`;
     this.uppyComposerUpload.composerModel = this.composer;
+    if (!this.currentUser) {
+      this.currentUser = {};
+    }
   }
 
   @discourseComputed

assets/javascripts/discourse/components/custom-wizard-date-time-input.hbs

@@ -0,0 +1,30 @@
+{{#unless this.timeFirst}}
+  {{custom-wizard-date-input
+    date=this.date
+    relativeDate=this.relativeDate
+    onChange=(action "onChangeDate")
+    tabindex=this.dateTabindex
+  }}
+{{/unless}}
+
+{{#if this.showTime}}
+  {{custom-wizard-time-input
+    date=this.date
+    relativeDate=this.relativeDate
+    onChange=(action "onChangeTime")
+    tabindex=this.timeTabindex
+  }}
+{{/if}}
+
+{{#if this.timeFirst}}
+  {{custom-wizard-date-input
+    date=this.date
+    relativeDate=this.relativeDate
+    onChange=(action "onChangeDate")
+    tabindex=this.dateTabindex
+  }}
+{{/if}}
+
+{{#if this.clearable}}
+  {{d-button class="clear-date-time" icon="times" action=(action "onClear")}}
+{{/if}}

assets/javascripts/discourse/components/custom-wizard-editor.hbs

@@ -1,27 +1,29 @@
 <div class="d-editor-overlay hidden"></div>
 
 <div class="d-editor-container">
-  {{#if showPreview}}
-    <div class="d-editor-preview-wrapper {{if forcePreview 'force-preview'}}">
+  {{#if this.showPreview}}
+    <div
+      class="d-editor-preview-wrapper {{if this.forcePreview 'force-preview'}}"
+    >
       <div class="d-editor-preview">
-        {{html-safe preview}}
+        {{html-safe this.preview}}
       </div>
     </div>
   {{else}}
     <div class="d-editor-textarea-wrapper">
       <div class="d-editor-button-bar">
-        {{#each toolbar.groups as |group|}}
+        {{#each this.toolbar.groups as |group|}}
           {{#each group.buttons as |b|}}
             {{#if b.popupMenu}}
               {{toolbar-popup-menu-options
-                onPopupMenuAction=onPopupMenuAction
+                onPopupMenuAction=this.onPopupMenuAction
                 onExpand=(action b.action b)
                 class=b.className
-                content=popupMenuOptions
+                content=this.popupMenuOptions
                 options=(hash popupTitle=b.title icon=b.icon)
               }}
             {{else}}
-              <div>{{d.icon}}</div>
+              <div>{{b.icon}}</div>
               <button
                 class="wizard-btn {{b.className}}"
                 {{action b.action b}}
@@ -42,7 +44,7 @@
         {{/each}}
       </div>
 
-      {{conditional-loading-spinner condition=loading}}
+      {{conditional-loading-spinner condition=this.loading}}
       <Textarea
         tabindex={{this.tabindex}}
         @value={{this.value}}

assets/javascripts/discourse/components/custom-wizard-field-category.hbs

@@ -0,0 +1,8 @@
+{{custom-wizard-category-selector
+  categories=this.categories
+  class=this.fieldClass
+  whitelist=this.field.content
+  onChange=(action (mut this.categories))
+  tabindex=this.field.tabindex
+  options=(hash maximum=this.field.limit)
+}}

assets/javascripts/discourse/components/custom-wizard-field-category.js

@@ -1,11 +1,12 @@
-import { observes } from "discourse-common/utils/decorators";
-import Category from "discourse/models/category";
 import Component from "@ember/component";
+import Category from "discourse/models/category";
+import { observes } from "discourse-common/utils/decorators";
 
 export default Component.extend({
   categories: [],
 
   didInsertElement() {
+    this._super(...arguments);
     const property = this.field.property || "id";
     const value = this.field.value;
 

assets/javascripts/discourse/components/custom-wizard-field-composer-preview.hbs

@@ -1,5 +1,5 @@
 <div class="wizard-composer-preview d-editor-preview-wrapper">
   <div class="d-editor-preview">
-    {{html-safe field.preview_template}}
+    {{html-safe this.field.preview_template}}
   </div>
 </div>

assets/javascripts/discourse/components/custom-wizard-field-composer-preview.js

@@ -1,9 +1,10 @@
 import Component from "@ember/component";
-import { loadOneboxes } from "discourse/lib/load-oneboxes";
 import { schedule } from "@ember/runloop";
-import discourseDebounce from "discourse-common/lib/debounce";
+import $ from "jquery";
 import { resolveAllShortUrls } from "pretty-text/upload-short-url";
 import { ajax } from "discourse/lib/ajax";
+import { loadOneboxes } from "discourse/lib/load-oneboxes";
+import discourseDebounce from "discourse-common/lib/debounce";
 import { on } from "discourse-common/utils/decorators";
 
 export default Component.extend({

assets/javascripts/discourse/components/custom-wizard-field-composer.hbs

@@ -14,10 +14,10 @@
   <DButton
     @action={{this.togglePreview}}
     class="wizard-btn toggle-preview"
-    @label={{togglePreviewLabel}}
+    @label={{this.togglePreviewLabel}}
   />
 
   {{#if this.field.char_counter}}
-    {{wizard-char-counter this.field.value field.max_length}}
+    {{wizard-char-counter this.field.value this.field.max_length}}
   {{/if}}
 </div>

assets/javascripts/discourse/components/custom-wizard-field-composer.js

@@ -1,9 +1,9 @@
+import Component from "@ember/component";
+import EmberObject, { action } from "@ember/object";
 import {
   default as computed,
   observes,
 } from "discourse-common/utils/decorators";
-import Component from "@ember/component";
-import EmberObject, { action } from "@ember/object";
 
 export default Component.extend({
   showPreview: false,
@@ -19,6 +19,7 @@ export default Component.extend({
       EmberObject.create({
         loading: false,
         reply: this.get("field.value") || "",
+        afterRefresh: () => {},
       })
     );
   },

assets/javascripts/discourse/components/custom-wizard-field-date-time.hbs

@@ -1,5 +1,5 @@
 {{custom-wizard-date-time-input
-  date=dateTime
+  date=this.dateTime
   onChange=(action "onChange")
-  tabindex=field.tabindex
+  tabindex=this.field.tabindex
 }}

assets/javascripts/discourse/components/custom-wizard-field-date.hbs

@@ -0,0 +1,6 @@
+{{custom-wizard-date-input
+  date=this.date
+  onChange=(action "onChange")
+  tabindex=this.field.tabindex
+  format=this.field.format
+}}

assets/javascripts/discourse/components/custom-wizard-field-dropdown.hbs

@@ -0,0 +1,8 @@
+{{combo-box
+  class=this.fieldClass
+  value=this.field.value
+  content=this.field.content
+  tabindex=this.field.tabindex
+  onChange=(action "onChangeValue")
+  options=(hash none="select_kit.default_header_text")
+}}

assets/javascripts/discourse/components/custom-wizard-field-group.hbs

@@ -0,0 +1,10 @@
+{{custom-wizard-group-selector
+  groups=this.site.groups
+  class=this.fieldClass
+  field=this.field
+  whitelist=this.field.content
+  value=this.field.value
+  tabindex=this.field.tabindex
+  onChange=(action (mut this.field.value))
+  options=(hash none="select_kit.default_header_text")
+}}

assets/javascripts/discourse/components/custom-wizard-field-tag.hbs

@@ -0,0 +1,8 @@
+{{custom-wizard-tag-chooser
+  tags=this.field.value
+  class=this.fieldClass
+  tabindex=this.field.tabindex
+  tagGroups=this.field.tag_groups
+  everyTag=true
+  options=(hash maximum=this.field.limit allowAny=this.field.can_create_tag)
+}}

assets/javascripts/discourse/components/custom-wizard-field-time.hbs

@@ -1,5 +1,5 @@
 {{custom-wizard-time-input
-  date=time
+  date=this.time
   onChange=(action "onChange")
-  tabindex=field.tabindex
+  tabindex=this.field.tabindex
 }}

assets/javascripts/discourse/components/custom-wizard-field-topic.hbs

@@ -0,0 +1,6 @@
+{{custom-wizard-topic-selector
+  topics=this.topics
+  category=this.field.category
+  onChange=(action "setValue")
+  options=(hash maximum=this.field.limit)
+}}

assets/javascripts/discourse/components/custom-wizard-field-topic.js

@@ -4,6 +4,7 @@ export default Component.extend({
   topics: [],
 
   didInsertElement() {
+    this._super(...arguments);
     const value = this.field.value;
 
     if (value) {

assets/javascripts/discourse/components/custom-wizard-field-upload.js

@@ -1,10 +1,10 @@
-import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
-import { action } from "@ember/object";
 
 export default class CustomWizardFieldUpload extends Component {
   @service siteSettings;

assets/javascripts/discourse/components/custom-wizard-field-user-selector.hbs

@@ -0,0 +1,5 @@
+{{custom-user-selector
+  usernames=this.field.value
+  placeholderKey=this.field.placeholder
+  tabindex=this.field.tabindex
+}}

assets/javascripts/discourse/components/custom-wizard-field.hbs

@@ -0,0 +1,38 @@
+<label for={{this.field.id}} class="field-label">
+  {{html-safe this.field.translatedLabel}}
+</label>
+
+{{#if this.field.image}}
+  <div class="field-image"><img src={{this.field.image}} /></div>
+{{/if}}
+
+{{#if this.field.description}}
+  <div class="field-description">{{this.cookedDescription}}</div>
+{{/if}}
+
+{{#field-validators field=this.field as |validators|}}
+  {{#if this.inputComponentName}}
+    <div class="input-area">
+      {{component
+        this.inputComponentName
+        field=this.field
+        step=this.step
+        fieldClass=this.fieldClass
+        wizard=this.wizard
+        autocomplete=validators.autocomplete
+      }}
+    </div>
+  {{/if}}
+{{/field-validators}}
+
+{{#if this.field.char_counter}}
+  {{#if this.textType}}
+    {{wizard-char-counter this.field.value this.field.max_length}}
+  {{/if}}
+{{/if}}
+
+{{#if this.field.errorDescription}}
+  <div class="field-error-description">{{html-safe
+      this.field.errorDescription
+    }}</div>
+{{/if}}

assets/javascripts/discourse/components/custom-wizard-field.js

@@ -1,7 +1,7 @@
 import Component from "@ember/component";
 import { dasherize } from "@ember/string";
-import discourseComputed from "discourse-common/utils/decorators";
 import { cook } from "discourse/lib/text";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
   classNameBindings: [

assets/javascripts/discourse/components/custom-wizard-group-selector.js

@@ -1,6 +1,6 @@
-import ComboBox from "select-kit/components/combo-box";
 import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
+import ComboBox from "select-kit/components/combo-box";
 
 export default ComboBox.extend({
   content: computed("groups.[]", "field.content.[]", function () {

assets/javascripts/discourse/components/custom-wizard-no-access.hbs

@@ -1,9 +1,9 @@
-<div>{{text}}</div>
+<div>{{this.text}}</div>
 <div class="no-access-gutter">
   <a class="return-to-site" {{action "skip"}} role="button">
-    {{i18n "wizard.return_to_site" siteName=siteName}}
+    {{i18n "wizard.return_to_site" siteName=this.siteName}}
   </a>
-  {{#if showLoginButton}}
+  {{#if this.showLoginButton}}
     <DButton
       class="btn-primary btn-small login-button"
       @action={{action "showLogin"}}

assets/javascripts/discourse/components/custom-wizard-no-access.js

@@ -1,10 +1,10 @@
-import CustomWizard from "../models/custom-wizard";
-import discourseComputed from "discourse-common/utils/decorators";
+import { getOwner } from "@ember/application";
 import Component from "@ember/component";
 import { dasherize } from "@ember/string";
-import getURL from "discourse-common/lib/get-url";
 import cookie from "discourse/lib/cookie";
-import { getOwner } from "@ember/application";
+import getURL from "discourse-common/lib/get-url";
+import discourseComputed from "discourse-common/utils/decorators";
+import CustomWizard from "../models/custom-wizard";
 
 export default Component.extend({
   classNameBindings: [":wizard-no-access", "reasonClass"],

assets/javascripts/discourse/components/custom-wizard-similar-topic.hbs

@@ -0,0 +1,6 @@
+<a href={{this.topic.url}} target="_blank" rel="noopener noreferrer">
+  <span class="title">{{html-safe this.topic.fancy_title}}</span>
+  <div class="blurb"><RelativeDate @date={{@topic.created_at}} />
+    -
+    {{html-safe this.topic.blurb}}</div>
+</a>

assets/javascripts/discourse/components/custom-wizard-similar-topics.hbs

@@ -1,6 +1,6 @@
-{{#if showTopics}}
+{{#if this.showTopics}}
   <ul>
-    {{#each topics as |topic|}}
+    {{#each this.topics as |topic|}}
       <li>{{custom-wizard-similar-topic topic=topic}}</li>
     {{/each}}
   </ul>

assets/javascripts/discourse/components/custom-wizard-similar-topics.js

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { bind } from "@ember/runloop";
+import $ from "jquery";
 import { observes } from "discourse-common/utils/decorators";
 
 export default Component.extend({
@@ -7,10 +8,12 @@ export default Component.extend({
   showTopics: true,
 
   didInsertElement() {
+    this._super(...arguments);
     $(document).on("click", bind(this, this.documentClick));
   },
 
   willDestroyElement() {
+    this._super(...arguments);
     $(document).off("click", bind(this, this.documentClick));
   },
 

assets/javascripts/discourse/components/custom-wizard-step.hbs

@@ -1,21 +1,21 @@
 <div class="wizard-step-contents">
-  {{#if step.title}}
-    <h1 class="wizard-step-title">{{cookedTitle}}</h1>
+  {{#if this.step.title}}
+    <h1 class="wizard-step-title">{{this.cookedTitle}}</h1>
   {{/if}}
 
-  {{#if bannerImage}}
+  {{#if this.bannerImage}}
     <div class="wizard-step-banner">
-      <img src={{bannerImage}} />
+      <img src={{this.bannerImage}} />
     </div>
   {{/if}}
 
-  {{#if step.description}}
-    <div class="wizard-step-description">{{cookedDescription}}</div>
+  {{#if this.step.description}}
+    <div class="wizard-step-description">{{this.cookedDescription}}</div>
   {{/if}}
 
-  {{#custom-wizard-step-form step=step}}
-    {{#each step.fields as |field|}}
-      {{custom-wizard-field field=field step=step wizard=wizard}}
+  {{#custom-wizard-step-form step=this.step}}
+    {{#each this.step.fields as |field|}}
+      {{custom-wizard-field field=field step=this.step wizard=this.wizard}}
     {{/each}}
   {{/custom-wizard-step-form}}
 </div>
@@ -24,57 +24,57 @@
 
   <div class="wizard-progress">
     <div class="white"></div>
-    <div class="black" style={{barStyle}}></div>
+    <div class="black" style={{this.barStyle}}></div>
     <div class="screen"></div>
     <span>{{i18n
         "wizard.step"
-        current=step.displayIndex
-        total=wizard.totalSteps
+        current=this.step.displayIndex
+        total=this.wizard.totalSteps
       }}</span>
   </div>
 
   <div class="wizard-buttons">
-    {{#if saving}}
+    {{#if this.saving}}
       {{loading-spinner size="small"}}
     {{else}}
-      {{#if showQuitButton}}
+      {{#if this.showQuitButton}}
         <a
           href
           {{action "quit"}}
           class="action-link quit"
-          tabindex={{secondaryButtonIndex}}
+          tabindex={{this.secondaryButtonIndex}}
         >{{i18n "wizard.quit"}}</a>
       {{/if}}
-      {{#if showBackButton}}
+      {{#if this.showBackButton}}
         <a
           href
           {{action "backStep"}}
           class="action-link back"
-          tabindex={{secondaryButtonIndex}}
+          tabindex={{this.secondaryButtonIndex}}
         >{{i18n "wizard.back"}}</a>
       {{/if}}
     {{/if}}
 
-    {{#if showNextButton}}
+    {{#if this.showNextButton}}
       <button
         type="button"
         class="wizard-btn next primary"
         {{action "nextStep"}}
-        disabled={{btnsDisabled}}
-        tabindex={{primaryButtonIndex}}
+        disabled={{this.btnsDisabled}}
+        tabindex={{this.primaryButtonIndex}}
       >
         {{i18n "wizard.next"}}
         {{d-icon "chevron-right"}}
       </button>
     {{/if}}
 
-    {{#if showDoneButton}}
+    {{#if this.showDoneButton}}
       <button
         type="button"
         class="wizard-btn done"
         {{action "done"}}
-        disabled={{btnsDisabled}}
-        tabindex={{primaryButtonIndex}}
+        disabled={{this.btnsDisabled}}
+        tabindex={{this.primaryButtonIndex}}
       >
         {{i18n "wizard.done_custom"}}
       </button>

assets/javascripts/discourse/components/custom-wizard-step.js

@@ -1,14 +1,15 @@
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
-import getUrl from "discourse-common/lib/get-url";
-import { htmlSafe } from "@ember/template";
+import { alias, not, or } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
+import { htmlSafe } from "@ember/template";
+import $ from "jquery";
 import { cook } from "discourse/lib/text";
+import getUrl from "discourse-common/lib/get-url";
+import discourseLater from "discourse-common/lib/later";
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import CustomWizard, {
   updateCachedWizard,
 } from "discourse/plugins/discourse-custom-wizard/discourse/models/custom-wizard";
-import { alias, not, or } from "@ember/object/computed";
-import discourseLater from "discourse-common/lib/later";
 import { wizardComposerEdtiorEventPrefix } from "./custom-wizard-composer-editor";
 
 const uploadStartedEventKeys = ["upload-started"];
@@ -181,7 +182,7 @@ export default Component.extend({
     },
 
     showMessage(message) {
-      this.sendAction(message);
+      this.showMessage(message);
     },
 
     stylingDropdownChanged(id, value) {

assets/javascripts/discourse/components/custom-wizard-tag-selector.js

@@ -1,5 +1,5 @@
-import TagChooser from "select-kit/components/tag-chooser";
 import { makeArray } from "discourse-common/lib/helpers";
+import TagChooser from "select-kit/components/tag-chooser";
 
 export default TagChooser.extend({
   _transformJson(context, json) {

assets/javascripts/discourse/components/custom-wizard-text-field.js

@@ -1,7 +1,7 @@
-import computed from "discourse-common/utils/decorators";
-import { isLTR, isRTL, siteDir } from "discourse/lib/text-direction";
-import I18n from "I18n";
 import TextField from "discourse/components/text-field";
+import { isLTR, isRTL, siteDir } from "discourse/lib/text-direction";
+import computed from "discourse-common/utils/decorators";
+import I18n from "I18n";
 
 export default TextField.extend({
   attributeBindings: [

assets/javascripts/discourse/components/custom-wizard-textarea-editor.js

@@ -0,0 +1,40 @@
+import TextareaEditor from "discourse/components/composer/textarea-editor";
+
+export default class CustomWizardTextareaEditor extends TextareaEditor {
+  setupSmartList() {
+    // These must be bound manually because itsatrap does not support
+    // beforeinput or input events.
+    //
+    // beforeinput is better used to detect line breaks because it is
+    // fired before the actual value of the textarea is changed,
+    // and sometimes in the input event no `insertLineBreak` event type
+    // is fired.
+    //
+    // c.f. https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event
+    if (this.currentUser?.user_option.enable_smart_lists) {
+      this.textarea.addEventListener(
+        "beforeinput",
+        this.onBeforeInputSmartList
+      );
+      this.textarea.addEventListener(
+        "keydown",
+        this.onBeforeInputSmartListShiftDetect
+      );
+      this.textarea.addEventListener("input", this.onInputSmartList);
+    }
+  }
+
+  destroySmartList() {
+    if (this.currentUser?.user_option.enable_smart_lists) {
+      this.textarea.removeEventListener(
+        "beforeinput",
+        this.onBeforeInputSmartList
+      );
+      this.textarea.removeEventListener(
+        "keydown",
+        this.onBeforeInputSmartListShiftDetect
+      );
+      this.textarea.removeEventListener("input", this.onInputSmartList);
+    }
+  }
+}

assets/javascripts/discourse/components/custom-wizard-time-input.hbs

@@ -1,7 +1,7 @@
 {{combo-box
-  value=time
-  content=timeOptions
-  tabindex=tabindex
+  value=this.time
+  content=this.timeOptions
+  tabindex=this.tabindex
   onChange=(action "onChangeTime")
   options=(hash
     translatedNone="--:--"

assets/javascripts/discourse/components/custom-wizard-topic-selector.js

@@ -1,7 +1,7 @@
-import MultiSelectComponent from "select-kit/components/multi-select";
 import { isEmpty } from "@ember/utils";
 import { searchForTerm } from "discourse/lib/search";
 import { makeArray } from "discourse-common/lib/helpers";
+import MultiSelectComponent from "select-kit/components/multi-select";
 
 export default MultiSelectComponent.extend({
   classNames: ["topic-selector", "wizard-topic-selector"],

assets/javascripts/discourse/components/field-validators.hbs

@@ -1,8 +1,8 @@
-{{#if field.validations}}
-  {{#each-in field.validations.above as |type validation|}}
+{{#if this.field.validations}}
+  {{#each-in this.field.validations.above as |type validation|}}
     {{component
       validation.component
-      field=field
+      field=this.field
       type=type
       validation=validation
     }}
@@ -10,10 +10,10 @@
 
   {{yield (hash perform=(action "perform") autocomplete="off")}}
 
-  {{#each-in field.validations.below as |type validation|}}
+  {{#each-in this.field.validations.below as |type validation|}}
     {{component
       validation.component
-      field=field
+      field=this.field
       type=type
       validation=validation
     }}

assets/javascripts/discourse/components/modal/admin-wizards-columns.hbs

@@ -1,5 +1,5 @@
 <DModal @closeModal={{@closeModal}} @title={{this.title}}>
-  {{#if loading}}
+  {{#if this.loading}}
     <LoadingSpinner size="large" />
   {{else}}
     <div class="edit-directory-columns-container">

assets/javascripts/discourse/components/similar-topics-validator.hbs

@@ -0,0 +1,13 @@
+<label class={{this.currentStateClass}}>
+  {{#if this.currentState}}
+    {{#if this.insufficientCharactersCategories}}
+      {{html-safe (i18n this.currentStateKey catLinks=this.catLinks)}}
+    {{else}}
+      {{i18n this.currentStateKey}}
+    {{/if}}
+  {{/if}}
+</label>
+
+{{#if this.showSimilarTopics}}
+  {{custom-wizard-similar-topics topics=this.similarTopics}}
+{{/if}}

assets/javascripts/discourse/components/similar-topics-validator.js

@@ -1,12 +1,12 @@
-import WizardFieldValidator from "discourse/plugins/discourse-custom-wizard/discourse/components/validator";
-import { deepMerge } from "discourse-common/lib/object";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
-import { cancel, later } from "@ember/runloop";
 import { A } from "@ember/array";
 import EmberObject, { computed } from "@ember/object";
 import { and, equal, notEmpty } from "@ember/object/computed";
-import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import { cancel, later } from "@ember/runloop";
 import { dasherize } from "@ember/string";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import { deepMerge } from "discourse-common/lib/object";
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import WizardFieldValidator from "discourse/plugins/discourse-custom-wizard/discourse/components/validator";
 
 export default WizardFieldValidator.extend({
   classNames: ["similar-topics-validator"],

assets/javascripts/discourse/components/validator.hbs

@@ -0,0 +1,5 @@
+{{#if this.isValid}}
+  {{i18n this.validMessageKey}}
+{{else}}
+  {{i18n this.invalidMessageKey}}
+{{/if}}

assets/javascripts/discourse/components/validator.js

@@ -28,10 +28,12 @@ export default Component.extend({
   },
 
   didInsertElement() {
+    this._super(...arguments);
     this.appEvents.on("custom-wizard:validate", this, this.checkIsValid);
   },
 
   willDestroyElement() {
+    this._super(...arguments);
     this.appEvents.off("custom-wizard:validate", this, this.checkIsValid);
   },
 

assets/javascripts/discourse/components/wizard-custom-action.hbs

@@ -1,8 +1,8 @@
-{{#if showUndo}}
+{{#if this.showUndo}}
   {{d-button
     action=(action "undoChanges")
-    icon=undoIcon
-    label=undoKey
+    icon=this.undoIcon
+    label=this.undoKey
     class="undo-changes"
   }}
 {{/if}}
@@ -18,7 +18,7 @@
       feature="action"
       attribute="type"
       onChange=(action "changeType")
-      wizard=wizard
+      wizard=this.wizard
       options=(hash none="admin.wizard.select_type")
     }}
   </div>
@@ -32,15 +32,15 @@
   <div class="setting-value">
     {{combo-box
       value=this.action.run_after
-      content=runAfterContent
+      content=this.runAfterContent
       onChange=(action (mut this.action.run_after))
     }}
   </div>
 </div>
 
-{{wizard-message key=messageKey url=messageUrl component="action"}}
+{{wizard-message key=this.messageKey url=this.messageUrl component="action"}}
 
-{{#if basicTopicFields}}
+{{#if this.basicTopicFields}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.title"}}</label>
@@ -68,12 +68,12 @@
     <div class="setting-value">
       {{combo-box
         value=this.action.post
-        content=wizardFields
+        content=this.wizardFields
         nameProperty="label"
         onChange=(action (mut this.action.post))
         options=(hash
           none="admin.wizard.selector.placeholder.wizard_field"
-          isDisabled=showPostBuilder
+          isDisabled=this.showPostBuilder
         )
       }}
 
@@ -93,14 +93,14 @@
       <div class="setting-value editor">
         {{wizard-text-editor
           value=this.action.post_template
-          wizardFields=wizardFields
+          wizardFields=this.wizardFields
         }}
       </div>
     </div>
   {{/if}}
 {{/if}}
 
-{{#if publicTopicFields}}
+{{#if this.publicTopicFields}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.create_topic.category"}}</label>
@@ -163,7 +163,7 @@
     </div>
   </div>
 
-  {{#if hasEventField}}
+  {{#if this.hasEventField}}
     <div class="setting full">
       <div class="setting-label">
         <label>{{i18n "admin.wizard.action.create_topic.add_event"}}</label>
@@ -180,7 +180,7 @@
     </div>
   {{/if}}
 
-  {{#if hasLocationField}}
+  {{#if this.hasLocationField}}
     <div class="setting full">
       <div class="setting-label">
         <label>{{i18n "admin.wizard.action.create_topic.add_location"}}</label>
@@ -198,7 +198,7 @@
   {{/if}}
 {{/if}}
 
-{{#if sendMessage}}
+{{#if this.sendMessage}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.send_message.recipient"}}</label>
@@ -224,7 +224,7 @@
   </div>
 {{/if}}
 
-{{#if updateProfile}}
+{{#if this.updateProfile}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.update_profile.setting"}}</label>
@@ -247,7 +247,7 @@
   </div>
 {{/if}}
 
-{{#if sendToApi}}
+{{#if this.sendToApi}}
   <div class="setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.send_to_api.api"}}</label>
@@ -256,7 +256,7 @@
     <div class="setting-value">
       {{combo-box
         value=this.action.api
-        content=availableApis
+        content=this.availableApis
         onChange=(action (mut this.action.api))
         options=(hash
           isDisabled=this.action.custom_title_enabled
@@ -274,10 +274,10 @@
     <div class="setting-value">
       {{combo-box
         value=this.action.api_endpoint
-        content=availableEndpoints
+        content=this.availableEndpoints
         onChange=(action (mut this.action.api_endpoint))
         options=(hash
-          isDisabled=apiEmpty
+          isDisabled=this.apiEmpty
           none="admin.wizard.action.send_to_api.select_an_endpoint"
         )
       }}
@@ -294,14 +294,14 @@
         value=this.action.api_body
         previewEnabled=false
         barEnabled=false
-        wizardFields=wizardFields
+        wizardFields=this.wizardFields
         placeholder="admin.wizard.action.send_to_api.body_placeholder"
       }}
     </div>
   </div>
 {{/if}}
 
-{{#if addToGroup}}
+{{#if this.addToGroup}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.group"}}</label>
@@ -326,7 +326,7 @@
   </div>
 {{/if}}
 
-{{#if routeTo}}
+{{#if this.routeTo}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.route_to.url"}}</label>
@@ -350,7 +350,7 @@
   </div>
 {{/if}}
 
-{{#if watchCategories}}
+{{#if this.watchCategories}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.watch_categories.categories"}}</label>
@@ -404,7 +404,7 @@
     <div class="setting-value">
       {{combo-box
         value=this.action.notification_level
-        content=availableNotificationLevels
+        content=this.availableNotificationLevels
         onChange=(action (mut this.action.notification_level))
         options=(hash
           isDisabled=this.action.custom_title_enabled
@@ -445,7 +445,7 @@
   </div>
 {{/if}}
 
-{{#if watchTags}}
+{{#if this.watchTags}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.watch_tags.tags"}}</label>
@@ -478,7 +478,7 @@
     <div class="setting-value">
       {{combo-box
         value=this.action.notification_level
-        content=availableNotificationLevels
+        content=this.availableNotificationLevels
         onChange=(action (mut this.action.notification_level))
         options=(hash
           isDisabled=this.action.custom_title_enabled
@@ -519,7 +519,7 @@
   </div>
 {{/if}}
 
-{{#if createGroup}}
+{{#if this.createGroup}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.create_group.name"}}</label>
@@ -743,7 +743,7 @@
   </div>
 {{/if}}
 
-{{#if createCategory}}
+{{#if this.createCategory}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.create_category.name"}}</label>
@@ -871,7 +871,7 @@
   </div>
 {{/if}}
 
-{{#if hasCustomFields}}
+{{#if this.hasCustomFields}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.custom_fields.label"}}</label>
@@ -889,14 +889,14 @@
           wizardActionSelection="value"
           userFieldSelection="value"
           keyPlaceholder="admin.wizard.action.custom_fields.key"
-          context=customFieldsContext
+          context=this.customFieldsContext
         )
       }}
     </div>
   </div>
 {{/if}}
 
-{{#if sendMessage}}
+{{#if this.sendMessage}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.required"}}</label>
@@ -919,7 +919,7 @@
   </div>
 {{/if}}
 
-{{#if showPostAdvanced}}
+{{#if this.showPostAdvanced}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.poster.label"}}</label>
@@ -994,7 +994,7 @@
   </div>
 {{/if}}
 
-{{#if routeTo}}
+{{#if this.routeTo}}
   <div class="setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.action.route_to.code"}}</label>

assets/javascripts/discourse/components/wizard-custom-action.js

@@ -1,10 +1,10 @@
-import { default as discourseComputed } from "discourse-common/utils/decorators";
-import { empty, equal, or } from "@ember/object/computed";
-import { notificationLevels, selectKitContent } from "../lib/wizard";
-import { computed } from "@ember/object";
-import UndoChanges from "../mixins/undo-changes";
 import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { empty, equal, or } from "@ember/object/computed";
+import { default as discourseComputed } from "discourse-common/utils/decorators";
 import I18n from "I18n";
+import { notificationLevels, selectKitContent } from "../lib/wizard";
+import UndoChanges from "../mixins/undo-changes";
 
 export default Component.extend(UndoChanges, {
   componentType: "action",

assets/javascripts/discourse/components/wizard-custom-field.hbs

@@ -1,8 +1,8 @@
-{{#if showUndo}}
+{{#if this.showUndo}}
   {{d-button
     action=(action "undoChanges")
-    icon=undoIcon
-    label=undoKey
+    icon=this.undoIcon
+    label=this.undoKey
     class="undo-changes"
   }}
 {{/if}}
@@ -42,12 +42,12 @@
   </div>
   <div class="setting-value">
     {{uppy-image-uploader
-      imageUrl=field.image
+      imageUrl=this.field.image
       onUploadDone=(action "imageUploadDone")
       onUploadDeleted=(action "imageUploadDeleted")
       type="wizard-field-image"
       class="no-repeat contain-image"
-      id=(concat "wizard-field-" field.id "-image-upload")
+      id=(concat "wizard-field-" this.field.id "-image-upload")
     }}
   </div>
 </div>
@@ -59,19 +59,19 @@
 
   <div class="setting-value">
     {{wizard-subscription-selector
-      value=field.type
+      value=this.field.type
       feature="field"
       attribute="type"
       onChange=(action "changeType")
-      wizard=wizard
+      wizard=this.wizard
       options=(hash none="admin.wizard.select_type")
     }}
   </div>
 </div>
 
-{{wizard-message key=messageKey url=messageUrl component="field"}}
+{{wizard-message key=this.messageKey url=this.messageUrl component="field"}}
 
-{{#if isTextType}}
+{{#if this.isTextType}}
   <div class="setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.min_length"}}</label>
@@ -128,7 +128,7 @@
   </div>
 {{/if}}
 
-{{#if isComposerPreview}}
+{{#if this.isComposerPreview}}
   <div class="setting full">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.preview_template"}}</label>
@@ -144,7 +144,7 @@
   </div>
 {{/if}}
 
-{{#if isUpload}}
+{{#if this.isUpload}}
   <div class="setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.file_types"}}</label>
@@ -156,7 +156,7 @@
   </div>
 {{/if}}
 
-{{#if showLimit}}
+{{#if this.showLimit}}
   <div class="setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.limit"}}</label>
@@ -168,7 +168,7 @@
   </div>
 {{/if}}
 
-{{#if isDateTime}}
+{{#if this.isDateTime}}
   <div class="setting">
     <div class="setting-label">
       <label>{{html-safe
@@ -185,7 +185,7 @@
   </div>
 {{/if}}
 
-{{#if showPrefill}}
+{{#if this.showPrefill}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.prefill"}}</label>
@@ -193,16 +193,16 @@
 
     <div class="setting-value">
       {{wizard-mapper
-        inputs=field.prefill
+        inputs=this.field.prefill
         property="prefill"
         onUpdate=(action "mappedFieldUpdated")
-        options=prefillOptions
+        options=this.prefillOptions
       }}
     </div>
   </div>
 {{/if}}
 
-{{#if showContent}}
+{{#if this.showContent}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.content"}}</label>
@@ -210,16 +210,16 @@
 
     <div class="setting-value">
       {{wizard-mapper
-        inputs=field.content
+        inputs=this.field.content
         property="content"
         onUpdate=(action "mappedFieldUpdated")
-        options=contentOptions
+        options=this.contentOptions
       }}
     </div>
   </div>
 {{/if}}
 
-{{#if isTag}}
+{{#if this.isTag}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.tag_groups"}}</label>
@@ -227,9 +227,9 @@
 
     <div class="setting-value">
       {{tag-group-chooser
-        id=(concat field.id "-tag-groups")
-        tagGroups=field.tag_groups
-        onChange=(action (mut field.tag_groups))
+        id=(concat this.field.id "-tag-groups")
+        tagGroups=this.field.tag_groups
+        onChange=(action (mut this.field.tag_groups))
       }}
     </div>
   </div>
@@ -245,7 +245,7 @@
   </div>
 {{/if}}
 
-{{#if isTopic}}
+{{#if this.isTopic}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <label>{{i18n "admin.wizard.field.category.label"}}</label>
@@ -271,7 +271,10 @@
     </div>
 
     <div class="setting-value">
-      {{wizard-mapper inputs=field.condition options=fieldConditionOptions}}
+      {{wizard-mapper
+        inputs=this.field.condition
+        options=this.fieldConditionOptions
+      }}
     </div>
   </div>
 
@@ -281,11 +284,11 @@
     </div>
 
     <div class="setting-value">
-      {{wizard-mapper inputs=field.index options=fieldIndexOptions}}
+      {{wizard-mapper inputs=this.field.index options=this.fieldIndexOptions}}
     </div>
   </div>
 
-  {{#if isCategory}}
+  {{#if this.isCategory}}
     <div class="setting">
       <div class="setting-label">
         <label>{{i18n "admin.wizard.field.property"}}</label>
@@ -293,16 +296,19 @@
 
       <div class="setting-value">
         {{combo-box
-          value=field.property
-          content=categoryPropertyTypes
-          onChange=(action (mut field.property))
+          value=this.field.property
+          content=this.categoryPropertyTypes
+          onChange=(action (mut this.field.property))
           options=(hash none="admin.wizard.selector.placeholder.property")
         }}
       </div>
     </div>
   {{/if}}
 
-  {{#if validations}}
-    {{wizard-realtime-validations field=field validations=validations}}
+  {{#if this.validations}}
+    {{wizard-realtime-validations
+      field=this.field
+      validations=this.validations
+    }}
   {{/if}}
 {{/wizard-subscription-container}}

assets/javascripts/discourse/components/wizard-custom-field.js

@@ -1,10 +1,10 @@
-import { default as discourseComputed } from "discourse-common/utils/decorators";
-import { equal, or } from "@ember/object/computed";
-import { computed } from "@ember/object";
-import { selectKitContent } from "../lib/wizard";
-import UndoChanges from "../mixins/undo-changes";
 import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { equal, or } from "@ember/object/computed";
+import { default as discourseComputed } from "discourse-common/utils/decorators";
+import { selectKitContent } from "../lib/wizard";
 import wizardSchema from "../lib/wizard-schema";
+import UndoChanges from "../mixins/undo-changes";
 
 export default Component.extend(UndoChanges, {
   componentType: "field",

assets/javascripts/discourse/components/wizard-custom-step.hbs

@@ -13,12 +13,12 @@
   </div>
   <div class="setting-value">
     {{uppy-image-uploader
-      imageUrl=step.banner
+      imageUrl=this.step.banner
       onUploadDone=(action "bannerUploadDone")
       onUploadDeleted=(action "bannerUploadDeleted")
       type="wizard-step-banner"
       class="no-repeat contain-image"
-      id=(concat "wizard-step-" step.id "-banner-upload")
+      id=(concat "wizard-step-" this.step.id "-banner-upload")
     }}
   </div>
 </div>
@@ -28,7 +28,7 @@
     <label>{{i18n "admin.wizard.step.description"}}</label>
   </div>
   <div class="setting-value">
-    {{wizard-text-editor value=step.raw_description}}
+    {{wizard-text-editor value=this.step.raw_description}}
   </div>
 </div>
 
@@ -39,7 +39,10 @@
     </div>
 
     <div class="setting-value">
-      {{wizard-mapper inputs=step.condition options=stepConditionOptions}}
+      {{wizard-mapper
+        inputs=this.step.condition
+        options=this.stepConditionOptions
+      }}
     </div>
   </div>
 
@@ -59,7 +62,7 @@
 
     <div class="setting-value">
       {{wizard-mapper
-        inputs=step.required_data
+        inputs=this.step.required_data
         options=(hash
           inputTypes="validation"
           inputConnector="and"
@@ -69,7 +72,7 @@
           context="step"
         )
       }}
-      {{#if step.required_data}}
+      {{#if this.step.required_data}}
         <div class="required-data-message">
           <div class="label">
             {{i18n "admin.wizard.step.required_data.not_permitted_message"}}
@@ -86,7 +89,7 @@
     </div>
     <div class="setting-value">
       {{wizard-mapper
-        inputs=step.permitted_params
+        inputs=this.step.permitted_params
         options=(hash
           pairConnector="set"
           inputTypes="association"
@@ -101,20 +104,20 @@
 
 {{wizard-links
   itemType="field"
-  current=currentField
-  items=step.fields
-  parentId=step.id
+  current=this.currentField
+  items=this.step.fields
+  parentId=this.step.id
 }}
 
-{{#each step.fields as |field|}}
+{{#each this.step.fields as |field|}}
   {{wizard-custom-field
     field=field
-    step=step
-    wizard=wizard
-    currentFieldId=currentField.id
-    fieldTypes=fieldTypes
+    step=this.step
+    wizard=this.wizard
+    currentFieldId=this.currentField.id
+    fieldTypes=this.fieldTypes
     removeField="removeField"
-    wizardFields=wizardFields
-    subscribed=subscribed
+    wizardFields=this.wizardFields
+    subscribed=this.subscribed
   }}
 {{/each}}

assets/javascripts/discourse/components/wizard-links.hbs

@@ -1,8 +1,8 @@
-<div class="wizard-header medium">{{html-safe (i18n header)}}</div>
+<div class="wizard-header medium">{{html-safe (i18n this.header)}}</div>
 
 <div class="link-list">
-  {{#if anyLinks}}
-    {{#each links as |link|}}
+  {{#if this.anyLinks}}
+    {{#each this.links as |link|}}
       <div data-id={{link.id}}>
         {{d-button
           action=(action "change")

assets/javascripts/discourse/components/wizard-links.js

@@ -1,13 +1,13 @@
+import { A } from "@ember/array";
+import Component from "@ember/component";
+import EmberObject from "@ember/object";
+import { notEmpty } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { generateName } from "../lib/wizard";
 import {
-  setWizardDefaults,
   default as wizardSchema,
+  setWizardDefaults,
 } from "../lib/wizard-schema";
-import { notEmpty } from "@ember/object/computed";
-import EmberObject from "@ember/object";
-import Component from "@ember/component";
-import { A } from "@ember/array";
 
 export default Component.extend({
   classNameBindings: [":wizard-links", "itemType"],

assets/javascripts/discourse/components/wizard-mapper-connector.hbs

@@ -1,13 +1,13 @@
-{{#if hasMultiple}}
+{{#if this.hasMultiple}}
   {{combo-box
-    value=connector
-    content=connectors
+    value=this.connector
+    content=this.connectors
     onChange=(action "changeConnector")
   }}
 {{else}}
-  {{#if connector}}
+  {{#if this.connector}}
     <span class="connector-single">
-      {{connectorLabel}}
+      {{this.connectorLabel}}
     </span>
   {{/if}}
 {{/if}}

assets/javascripts/discourse/components/wizard-mapper-connector.js

@@ -1,9 +1,9 @@
 import Component from "@ember/component";
-import { gt } from "@ember/object/computed";
 import { computed } from "@ember/object";
-import { defaultConnector } from "../lib/wizard-mapper";
+import { gt } from "@ember/object/computed";
 import { later } from "@ember/runloop";
 import I18n from "I18n";
+import { defaultConnector } from "../lib/wizard-mapper";
 
 export default Component.extend({
   classNameBindings: [
@@ -19,6 +19,7 @@ export default Component.extend({
   }),
 
   didReceiveAttrs() {
+    this._super();
     if (!this.connector) {
       later(() => {
         this.set(

assets/javascripts/discourse/components/wizard-mapper-input.hbs

@@ -8,7 +8,7 @@
   onUpdate=this.onUpdate
 }}
 
-{{#if hasPairs}}
+{{#if this.hasPairs}}
   <div class="mapper-pairs mapper-block">
     {{#each this.input.pairs as |pair|}}
       {{wizard-mapper-pair
@@ -21,7 +21,7 @@
       }}
     {{/each}}
 
-    {{#if canAddPair}}
+    {{#if this.canAddPair}}
       <a role="button" {{action "addPair"}} class="add-pair">
         {{d-icon "plus"}}
       </a>
@@ -29,8 +29,8 @@
   </div>
 {{/if}}
 
-{{#if hasOutput}}
-  {{#if hasPairs}}
+{{#if this.hasOutput}}
+  {{#if this.hasPairs}}
     {{wizard-mapper-connector
       connector=this.input.output_connector
       connectors=this.connectors
@@ -53,6 +53,6 @@
   </div>
 {{/if}}
 
-<a role="button" class="remove-input" {{action remove this.input}}>
+<a role="button" class="remove-input" {{action this.remove this.input}}>
   {{d-icon "times"}}
 </a>

assets/javascripts/discourse/components/wizard-mapper-input.js

@@ -1,5 +1,8 @@
+import { A } from "@ember/array";
+import Component from "@ember/component";
 import { computed, set } from "@ember/object";
 import { alias, equal, not, or } from "@ember/object/computed";
+import { observes } from "discourse-common/utils/decorators";
 import {
   connectorContent,
   defaultConnector,
@@ -7,9 +10,6 @@ import {
   inputTypesContent,
   newPair,
 } from "../lib/wizard-mapper";
-import Component from "@ember/component";
-import { observes } from "discourse-common/utils/decorators";
-import { A } from "@ember/array";
 
 export default Component.extend({
   classNameBindings: [":mapper-input", "inputType"],

assets/javascripts/discourse/components/wizard-mapper-pair.hbs

@@ -0,0 +1,43 @@
+<div class="key mapper-block">
+  {{wizard-mapper-selector
+    selectorType="key"
+    inputType=this.inputType
+    value=this.pair.key
+    activeType=this.pair.key_type
+    options=this.options
+    onUpdate=this.onUpdate
+  }}
+</div>
+
+{{wizard-mapper-connector
+  connector=this.pair.connector
+  connectors=this.connectors
+  connectorType="pair"
+  inputType=this.inputType
+  options=this.options
+  onUpdate=this.onUpdate
+}}
+
+<div class="value mapper-block">
+  {{wizard-mapper-selector
+    selectorType="value"
+    inputType=this.inputType
+    value=this.pair.value
+    activeType=this.pair.value_type
+    options=this.options
+    onUpdate=this.onUpdate
+    connector=this.pair.connector
+  }}
+</div>
+
+{{#if this.showJoin}}
+  <span class="join-pair">&</span>
+{{/if}}
+
+{{#if this.showRemove}}
+  <a
+    role="button"
+    {{action this.removePair this.pair}}
+    class="remove-pair"
+  >{{d-icon "times"}}</a>
+{{/if}}

assets/javascripts/discourse/components/wizard-mapper-pair.js

@@ -1,7 +1,7 @@
-import { connectorContent } from "../lib/wizard-mapper";
-import { alias, gt } from "@ember/object/computed";
-import { computed } from "@ember/object";
 import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { alias, gt } from "@ember/object/computed";
+import { connectorContent } from "../lib/wizard-mapper";
 
 export default Component.extend({
   classNameBindings: [":mapper-pair", "hasConnector::no-connector"],

assets/javascripts/discourse/components/wizard-mapper-selector-type.hbs

@@ -0,0 +1 @@
+{{this.item.label}}

assets/javascripts/discourse/components/wizard-mapper-selector-type.js

@@ -1,5 +1,5 @@
-import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
   tagName: "a",

assets/javascripts/discourse/components/wizard-mapper-selector.hbs

@@ -1,14 +1,14 @@
 <div class="type-selector">
-  {{#if hasTypes}}
+  {{#if this.hasTypes}}
     <a role="button" {{action "toggleTypes"}} class="active">
-      {{activeTypeLabel}}
+      {{this.activeTypeLabel}}
     </a>
 
-    {{#if showTypes}}
+    {{#if this.showTypes}}
       <div class="selector-types">
-        {{#each selectorTypes as |item|}}
+        {{#each this.selectorTypes as |item|}}
           {{wizard-mapper-selector-type
-            activeType=activeType
+            activeType=this.activeType
             item=item
             toggle=(action "toggleType")
           }}
@@ -16,62 +16,62 @@
       </div>
     {{/if}}
   {{else}}
-    <span>{{activeTypeLabel}}</span>
+    <span>{{this.activeTypeLabel}}</span>
   {{/if}}
 </div>
 
 <div class="input">
-  {{#if showText}}
+  {{#if this.showText}}
     <Input
       @type="text"
       @value={{this.value}}
-      placeholder={{i18n placeholderKey}}
+      placeholder={{i18n this.placeholderKey}}
       {{on "change" (action "changeInputValue")}}
     />
   {{/if}}
 
-  {{#if showComboBox}}
+  {{#if this.showComboBox}}
     {{combo-box
-      value=value
-      content=comboBoxContent
+      value=this.value
+      content=this.comboBoxContent
       onChange=(action "changeValue")
-      options=(hash none=placeholderKey allowAny=comboBoxAllowAny)
+      options=(hash none=this.placeholderKey allowAny=this.comboBoxAllowAny)
     }}
   {{/if}}
 
-  {{#if showMultiSelect}}
+  {{#if this.showMultiSelect}}
     {{multi-select
-      content=multiSelectContent
-      value=value
+      content=this.multiSelectContent
+      value=this.value
       onChange=(action "changeValue")
-      options=multiSelectOptions
+      options=this.multiSelectOptions
     }}
   {{/if}}
 
-  {{#if showList}}
+  {{#if this.showList}}
     {{wizard-value-list
-      values=value
-      addKey=placeholderKey
+      values=this.value
+      addKey=this.placeholderKey
       onChange=(action "changeValue")
     }}
   {{/if}}
 
-  {{#if showTag}}
+  {{#if this.showTag}}
     {{tag-chooser
-      tags=value
+      tags=this.value
       onChange=(action "changeValue")
       everyTag=true
-      options=(hash none=placeholderKey filterable=true)
+      options=(hash none=this.placeholderKey filterable=true)
     }}
   {{/if}}
 
-  {{#if showUser}}
+  {{#if this.showUser}}
     {{wizard-user-chooser
-      placeholderKey=placeholderKey
-      value=value
+      placeholderKey=this.placeholderKey
+      value=this.value
       autocomplete="discourse"
       onChange=(action "changeUserValue")
-      options=userOptions
+      options=this.userOptions
     }}
   {{/if}}
 </div>

assets/javascripts/discourse/components/wizard-mapper-selector.js

@@ -1,21 +1,22 @@
-import { alias, gt, or } from "@ember/object/computed";
+import { getOwner } from "@ember/application";
+import Component from "@ember/component";
 import { computed } from "@ember/object";
+import { alias, equal, gt, or } from "@ember/object/computed";
+import { bind, later } from "@ember/runloop";
+import { service } from "@ember/service";
+import $ from "jquery";
 import {
   default as discourseComputed,
   observes,
 } from "discourse-common/utils/decorators";
-import { getOwner } from "@ember/application";
-import { defaultSelectionType, selectionTypes } from "../lib/wizard-mapper";
+import I18n from "I18n";
 import {
   generateName,
   sentenceCase,
   snakeCase,
   userProperties,
 } from "../lib/wizard";
-import Component from "@ember/component";
-import { bind, later } from "@ember/runloop";
-import I18n from "I18n";
-import { inject as service } from "@ember/service";
+import { defaultSelectionType, selectionTypes } from "../lib/wizard-mapper";
 
 const customFieldActionMap = {
   topic: ["create_topic", "send_message"],
@@ -134,9 +135,7 @@ export default Component.extend({
   listEnabled: computed("options.listSelection", "inputType", function () {
     return this.optionEnabled("listSelection");
   }),
-  valueEnabled: computed("connector", function () {
-    return this.connector === "is";
-  }),
+  valueEnabled: equal("connector", "is"),
 
   @discourseComputed(
     "site.groups",
@@ -179,6 +178,7 @@ export default Component.extend({
   showTypes: false,
 
   didInsertElement() {
+    this._super(...arguments);
     if (
       !this.activeType ||
       (this.activeType && !this[`${this.activeType}Enabled`])
@@ -190,6 +190,7 @@ export default Component.extend({
   },
 
   willDestroyElement() {
+    this._super(...arguments);
     $(document).off("click", bind(this, this.documentClick));
   },
 

assets/javascripts/discourse/components/wizard-mapper.hbs

@@ -1,4 +1,4 @@
-{{#each inputs as |input|}}
+{{#each this.inputs as |input|}}
   {{#if input.connector}}
     {{wizard-mapper-connector
       connector=input.connector
@@ -9,13 +9,13 @@
 
   {{wizard-mapper-input
     input=input
-    options=inputOptions
+    options=this.inputOptions
     remove=(action "remove")
     onUpdate=(action "inputUpdated")
   }}
 {{/each}}
 
-{{#if canAdd}}
+{{#if this.canAdd}}
   <span class="add-mapper-input">
     {{d-button action=(action "add") label="admin.wizard.add" icon="plus"}}
   </span>

assets/javascripts/discourse/components/wizard-mapper.js

@@ -1,13 +1,14 @@
-import { newInput, selectionTypes } from "../lib/wizard-mapper";
-import discourseComputed from "discourse-common/utils/decorators";
-import { later } from "@ember/runloop";
-import Component from "@ember/component";
 import { A } from "@ember/array";
+import Component from "@ember/component";
+import { later } from "@ember/runloop";
+import discourseComputed from "discourse-common/utils/decorators";
+import { newInput, selectionTypes } from "../lib/wizard-mapper";
 
 export default Component.extend({
   classNames: "wizard-mapper",
 
   didReceiveAttrs() {
+    this._super();
     if (this.inputs && this.inputs.constructor !== Array) {
       later(() => this.set("inputs", null));
     }

assets/javascripts/discourse/components/wizard-message.hbs

@@ -1,11 +1,11 @@
 <div class="message-block primary">
-  {{#if showIcon}}
-    {{d-icon icon}}
+  {{#if this.showIcon}}
+    {{d-icon this.icon}}
   {{/if}}
-  <span class="message-content">{{html-safe message}}</span>
-  {{#if hasItems}}
+  <span class="message-content">{{html-safe this.message}}</span>
+  {{#if this.hasItems}}
     <ul>
-      {{#each items as |item|}}
+      {{#each this.items as |item|}}
         <li>
           <span>{{d-icon item.icon}}</span>
           <span>{{html-safe item.html}}</span>
@@ -15,12 +15,12 @@
   {{/if}}
 </div>
 
-{{#if showDocumentation}}
+{{#if this.showDocumentation}}
   <div class="message-block">
     {{d-icon "question-circle"}}
 
-    <a href={{url}} target="_blank" rel="noopener noreferrer">
-      {{documentation}}
+    <a href={{this.url}} target="_blank" rel="noopener noreferrer">
+      {{this.documentation}}
     </a>
   </div>
 {{/if}}

assets/javascripts/discourse/components/wizard-message.js

@@ -1,6 +1,6 @@
-import { default as discourseComputed } from "discourse-common/utils/decorators";
-import { not, notEmpty } from "@ember/object/computed";
 import Component from "@ember/component";
+import { not, notEmpty } from "@ember/object/computed";
+import { default as discourseComputed } from "discourse-common/utils/decorators";
 import I18n from "I18n";
 
 const icons = {

assets/javascripts/discourse/components/wizard-realtime-validations.hbs

@@ -3,7 +3,7 @@
 </div>
 <div class="setting-value full">
   <ul>
-    {{#each-in field.validations as |type props|}}
+    {{#each-in this.field.validations as |type props|}}
       <li>
         <span class="setting-title">
           <h4>{{i18n (concat "admin.wizard.field.validations." type)}}</h4>
@@ -42,7 +42,7 @@
               />
               {{combo-box
                 value=(readonly props.time_unit)
-                content=timeUnits
+                content=this.timeUnits
                 class="time-unit-selector"
                 onChange=(action (mut props.time_unit))
               }}
@@ -54,13 +54,13 @@
             </div>
             <div class="setting-value">
               {{radio-button
-                name=(concat type field.id)
+                name=(concat type this.field.id)
                 value="above"
                 selection=props.position
               }}
               <span>{{i18n "admin.wizard.field.validations.above"}}</span>
               {{radio-button
-                name=(concat type field.id)
+                name=(concat type this.field.id)
                 value="below"
                 selection=props.position
               }}

assets/javascripts/discourse/components/wizard-realtime-validations.js

@@ -1,7 +1,7 @@
 import Component from "@ember/component";
 import EmberObject from "@ember/object";
-import { cloneJSON } from "discourse-common/lib/object";
 import Category from "discourse/models/category";
+import { cloneJSON } from "discourse-common/lib/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";