Handle changes via callbacks instead of observers

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

@@ -25,8 +25,10 @@ export default Component.extend({
     }
   },
   
-  @observes('connector')
+  actions: {
-  updated() {
+    changeConnector(value) {
-    this.onUpdate('connector');
+      this.set('connector', value);
+      this.onUpdate('connector', this.connectorType);
+    }
   }
 });

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

@@ -24,10 +24,14 @@ export default Component.extend({
       this.send('addPair');
     }
     
-    if (this.hasOutput && !this.input.outputConnector) {
+    if (this.hasOutput) {
-      const options = this.options;
+      this.set('input.output', null);
-      this.set('input.output_type', defaultSelectionType('output', options));
+      
-      this.set('input.output_connector', defaultConnector('output', this.inputType, options));
+      if (!this.input.outputConnector) {
+        const options = this.options;
+        this.set('input.output_type', defaultSelectionType('output', options));
+        this.set('input.output_connector', defaultConnector('output', this.inputType, options));
+      }
     }
   },
     

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

@@ -72,16 +72,6 @@ export default Component.extend({
     return type ? I18n.t(`admin.wizard.selector.label.${snakeCase(type)}`) : null;
   },
   
-  @observes('inputType')
-  resetActiveType() {
-    this.set('activeType', defaultSelectionType(this.selectorType, this.options));
-  },
-  
-  @observes('activeType')
-  clearValue() {
-    this.set('value', null);
-  },
-  
   @discourseComputed('activeType')
   comboBoxContent(activeType) {
     const controller = getOwner(this).lookup('controller:admin-wizards-wizard-show');
@@ -167,19 +157,38 @@ export default Component.extend({
     return this.activeType === type && this[`${type}Enabled`];
   },
   
-  @observes('activeType', 'value')
+  changeValue(value) {
-  updated() {
+    this.set('value', value);
-    this.onUpdate('selector');
+    this.onUpdate('selector', this.activeType);
+  },
+  
+  @observes('inputType')
+  resetActiveType() {
+    this.set('activeType', defaultSelectionType(this.selectorType, this.options));
   },
   
   actions: {
     toggleType(type) {
       this.set('activeType', type);
       this.set('showTypes', false);
+      this.set('value', null);
+      this.onUpdate('selector');
     },
     
     toggleTypes() {
       this.toggleProperty('showTypes');
+    },
+    
+    changeValue(value) {
+      this.changeValue(value);
+    },
+    
+    changeInputValue(event) {
+      this.changeValue(event.target.value);
+    },
+    
+    changeUserValue(previousValue, value) {
+      this.changeValue(value);
     }
   }
 })

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

@@ -77,8 +77,8 @@ export default Component.extend({
       this.onUpdate(this.property, 'input');
     },
     
-    inputUpdated(type) {
+    inputUpdated(component, type) {
-      this.onUpdate(this.property, type);
+      this.onUpdate(this.property, component, type);
     }
   }
 });

assets/javascripts/discourse/components/wizard-value-list.js.es6

@@ -0,0 +1,12 @@
+import ValueList from 'admin/components/value-list';
+
+export default ValueList.extend({
+  _saveValues() {
+    if (this.inputType === "array") {
+      this.onChange(this.collection);
+      return;
+    }
+
+    this.onChange(this.collection.join(this.inputDelimiter || "\n"));
+  }
+})

assets/javascripts/discourse/mixins/undo-changes.js.es6

@@ -117,8 +117,9 @@ export default Mixin.create({
       this.setupObservers(type);
     },
     
-    mappedFieldUpdated(property, type) {
+    mappedFieldUpdated(property, mappedComponent, type) {
-      this.get(this.componentType).notifyPropertyChange(property);
+      const obj = this.get(this.componentType);
+      obj.notifyPropertyChange(property); 
     }
   }
 })

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

@@ -2,7 +2,7 @@
   {{combo-box
     value=connector
     content=connectors
-    onChange=(action (mut connector))}}
+    onChange=(action "changeConnector")}}
 {{else}}
   {{#if connector}}
     <span class="connector-single">

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

@@ -24,14 +24,15 @@
     {{input
       type="text"
       value=value
-      placeholder=(i18n placeholderKey)}}
+      placeholder=(i18n placeholderKey)
+      change=(action "changeInputValue")}}
   {{/if}}
 
   {{#if showComboBox}}
     {{combo-box
       value=value
       content=comboBoxContent
-      onChange=(action (mut value))
+      onChange=(action "changeValue")
       options=(hash
         none=placeholderKey
       )}}
@@ -41,19 +42,21 @@
     {{multi-select
       content=multiSelectContent
       value=value
-      onChange=(action (mut value))
+      onChange=(action "changeValue")
       options=multiSelectOptions}}
   {{/if}}
   
   {{#if showList}}
-    {{value-list
+    {{wizard-value-list
       values=value
-      addKey=placeholderKey}}
+      addKey=placeholderKey
+      onChange=(action "changeValue")}}
   {{/if}}
   
   {{#if showTag}}
     {{tag-chooser
       tags=value
+      onChange=(action "changeValue")
       options=(hash
         none=placeholderKey
         filterable=true
@@ -65,6 +68,7 @@
       includeMessageableGroups='true'
       placeholderKey=placeholderKey
       usernames=value
-      autocomplete="discourse"}}
+      autocomplete="discourse"
+      onChangeCallback=(action "changeUserValue")}}
   {{/if}}
 </div>