Style and deprecation updates

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

@@ -5,7 +5,8 @@ import {
 import {
   actionTypes,
   generateName,
-  generateSelectKitContent
+  generateSelectKitContent,
+  profileFields
 } from '../lib/custom-wizard';
 
 export default Ember.Component.extend({
@@ -36,11 +37,6 @@ export default Ember.Component.extend({
     return ['create_topic', 'send_message'].indexOf(actionType) > -1;
   },
   
-  @computed('wizardFields')
-  builderWizardFields(fields) {
-    return fields.map((f) => ` w{${f.id}}`);
-  },
-  
   @computed('wizardFields')
   categoryFields(fields) {
     return fields.filter(f => f.type == 'category');
@@ -51,13 +47,6 @@ export default Ember.Component.extend({
     return fields.filter(f => f.type == 'tag');
   },
 
-  @computed()
-  builderUserFields() {
-    const noTheme = PROFILE_FIELDS.filter((f) => f !== 'theme_id');
-    const fields = noTheme.concat(['email', 'username']);
-    return fields.map((f) => ` u{${f}}`);
-  },
-
   @observes('action.custom_category_wizard_field')
   toggleCustomCategoryUserField() {
     const wizard = this.get('action.custom_category_wizard_field');

assets/javascripts/discourse/components/wizard-custom-input-selector.js.es6

@@ -2,9 +2,11 @@ import { alias, equal } from "@ember/object/computed";
 import { computed } from "@ember/object";
 import {
   default as discourseComputed,
-  observes
+  observes,
+  on
 } from "discourse-common/utils/decorators";
 import { defaultSelectionType } from '../lib/custom-wizard'; 
+import { getOwner } from 'discourse-common/lib/get-owner';
 
 export default Ember.Component.extend({
   classNames: 'input-selector',
@@ -13,6 +15,12 @@ export default Ember.Component.extend({
     return this.site.categories.map(c => ({ id: c.id, name: c.name }));
   }),
   
+  @discourseComputed
+  userFields() {
+    const controller = getOwner(this).lookup('controller:admin-wizard');
+    return controller.get('model.userFields');
+  },
+  
   @observes('options.@each')
   resetActiveType() {
     this.set('activeType', defaultSelectionType(this.selectorType, this.options));

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

@@ -1,19 +1,19 @@
 import { default as computed, on, observes } from 'discourse-common/utils/decorators';
+import { notEmpty } from "@ember/object/computed";
 
 export default Ember.Component.extend({
   classNames: 'wizard-links',
   items: Ember.A(),
+  anyLinks: notEmpty('links'),
 
   @on('didInsertElement')
   @observes('links.@each')
   didInsertElement() {
-    Ember.run.scheduleOnce('afterRender', () => {
-      this.applySortable();
-    });
+    Ember.run.scheduleOnce('afterRender', () => (this.applySortable()));
   },
 
   applySortable() {
-    this.$("ul").sortable({tolerance: 'pointer'}).on('sortupdate', (e, ui) => {
+    $(this.element).find("ul").sortable({tolerance: 'pointer'}).on('sortupdate', (e, ui) => {
       const itemId = ui.item.data('id');
       const index = ui.item.index();
       Ember.run.bind(this, this.updateItemOrder(itemId, index));
@@ -69,7 +69,6 @@ export default Ember.Component.extend({
       const newItem = Ember.Object.create(params);
       items.pushObject(newItem);
       this.set('current', newItem);
-      this.sendAction('isNew');
     },
 
     change(itemId) {

assets/javascripts/discourse/components/wizard-text-editor.js.es6

@@ -0,0 +1,40 @@
+import { default as discourseComputed } from 'discourse-common/utils/decorators';
+import { profileFields } from '../lib/custom-wizard';
+
+export default Ember.Component.extend({
+  classNames: 'wizard-text-editor',
+  
+  @discourseComputed('forcePreview')
+  previewLabel(forcePreview) {
+    return I18n.t("admin.wizard.editor.preview", {
+      action: I18n.t(`admin.wizard.editor.${forcePreview ? 'hide' : 'show'}`)
+    });
+  },
+  
+  @discourseComputed('showPopover')
+  popoverLabel(showPopover) {
+    return I18n.t("admin.wizard.editor.popover", {
+      action: I18n.t(`admin.wizard.editor.${showPopover ? 'hide' : 'show'}`)
+    });
+  },
+  
+  @discourseComputed()
+  userFieldList() {
+    return profileFields.map((f) => ` u{${f}}`);
+  },
+  
+  @discourseComputed('wizardFields')
+  wizardFieldList(wizardFields) {
+    return wizardFields.map((f) => ` w{${f.id}}`);
+  },
+  
+  actions: {
+    togglePreview() {
+      this.toggleProperty('forcePreview');
+    },
+    
+    togglePopover() {
+      this.toggleProperty('showPopover');
+    }
+  }
+});

assets/javascripts/discourse/controllers/admin-wizard.js.es6

@@ -9,7 +9,8 @@ export default Ember.Controller.extend({
 
   @computed('model.after_time_scheduled')
   nextSessionScheduledLabel(scheduled) {
-    return scheduled ? moment(scheduled).format('MMMM Do, HH:mm') :
+    return scheduled ?
+      moment(scheduled).format('MMMM Do, HH:mm') :
       I18n.t('admin.wizard.after_time_time_label');
   },
 
@@ -19,7 +20,9 @@ export default Ember.Controller.extend({
         saving: true,
         error: null
       });
+      
       const wizard = this.get('model');
+      
       wizard.save().then(() => {
         this.set('saving', false);
         if (this.get('newWizard')) {

assets/javascripts/discourse/routes/admin-wizard.js.es6

@@ -22,18 +22,20 @@ export default DiscourseRoute.extend({
 
   model(params) {
     const wizardId = params.wizard_id;
+    this.set('newWizard', wizardId === 'new');
     
-    if (wizardId === 'new') {
-      this.set('newWizard', true);
+    if (this.newWizard) {
       return CustomWizard.create();
-    };
-    this.set('newWizard', false);
-
-    const wizard = this.modelFor('admin-wizards-custom').findBy('id', wizardId.underscore());
-
-    if (!wizard) return this.transitionTo('adminWizard', 'new');
+    } else {      
+      const wizard = this.modelFor('admin-wizards-custom')
+        .findBy('id', wizardId.underscore());
       
+      if (!wizard) {
+        return this.transitionTo('adminWizard', 'new');
+      } else {
         return wizard;
+      }
+    }
   },
 
   afterModel(model) {
@@ -56,8 +58,14 @@ export default DiscourseRoute.extend({
   },
 
   _getThemes(model) {
-    return this.store.findAll('theme').then((result) => {
-      model.set('themes', result.content);
+    return ajax('/admin/themes')
+      .then((result) => {
+        model.set('themes', result.themes.map(t => {
+          return {
+            id: t.id,
+            name: t.name
+          }
+        }));
       });
   },
 
@@ -69,13 +77,17 @@ export default DiscourseRoute.extend({
   _getUserFields(model) {
     return this.store.findAll('user-field').then((result) => {
       if (result && result.content) {
-        let userContent = result.content.map((f) => {
-          return { id: `user_field_${f.id}`, name: f.name};
-        });
-        let profileContent = profileFields.map((f) => {
-          return { id: f, name: generateName(f) };
-        });
-        model.set('userFields', userContent.concat(profileContent));
+        model.set('userFields', 
+          result.content.map((f) => ({
+            id: `user_field_${f.id}`,
+            name: f.name
+          })).concat(
+            profileFields.map((f) => ({
+              id: f,
+              name: generateName(f)
+            }))
+          )
+        );
       }
     });
   },

assets/javascripts/discourse/templates/admin-wizard.hbs

@@ -1,15 +1,24 @@
 <div class="admin-wizard settings">
 
   <div class="wizard-header">
-    {{i18n 'admin.wizard.header'}}
+    <span>{{model.name}}</span>
+    
+    <div class="wizard-url">
+      <a href="{{wizardUrl}}" target="_blank">{{wizardUrl}}</a>
+    </div>
   </div>
   
+  <div class="wizard-basic-details">
     <div class="setting">
       <div class="setting-label">
         <h3>{{i18n 'admin.wizard.id'}}</h3>
       </div>
       <div class="setting-value">
-      {{input name="name" value=model.id placeholderKey="admin.wizard.id_placeholder" disabled=model.existingId}}
+        {{input
+          name="name"
+          value=model.id
+          placeholderKey="admin.wizard.id_placeholder"
+          disabled=model.existingId}}
       </div>
     </div>
 
@@ -18,16 +27,28 @@
         <h3>{{i18n 'admin.wizard.name'}}</h3>
       </div>
       <div class="setting-value">
-      {{input name="name" value=model.name placeholderKey="admin.wizard.name_placeholder"}}
+        {{input
+          name="name"
+          value=model.name
+          placeholderKey="admin.wizard.name_placeholder"}}
+      </div>
     </div>
   </div>
   
+  <div class="wizard-header medium">
+    {{i18n 'admin.wizard.label'}}
+  </div>
+  
+  <div class="wizard-settings">    
     <div class="setting">
       <div class="setting-label">
         <h3>{{i18n 'admin.wizard.background'}}</h3>
       </div>
       <div class="setting-value">
-      {{input name="background" value=model.background placeholderKey="admin.wizard.background_placeholder"}}
+        {{input
+          name="background"
+          value=model.background
+          placeholderKey="admin.wizard.background_placeholder"}}
       </div>
     </div>
     
@@ -78,7 +99,11 @@
       <div class="setting-value">
         {{input type='checkbox' checked=model.after_time}}
         <span>{{i18n 'admin.wizard.after_time_label'}}</span>
-      {{d-button action='setNextSessionScheduled' translatedLabel=nextSessionScheduledLabel icon='far-calendar'}}
+        {{d-button
+          action='setNextSessionScheduled'
+          translatedLabel=nextSessionScheduledLabel
+          class="btn-after-time"
+          icon='far-calendar'}}
       </div>
     </div>
 
@@ -111,6 +136,7 @@
           content=model.themes
           valueProperty='id'
           value=model.theme_id
+          onChange=(action (mut model.theme_id))
           options=(hash
             none='admin.wizard.no_theme'
           )}}
@@ -127,24 +153,43 @@
       </div>
     </div>
     
-  <div class="setting full">
+    <div class="setting full field-mapper-setting">
       <div class="setting-label">
-      <h3>{{i18n 'admin.wizard.url'}}</h3>
+        <h3>{{i18n 'admin.wizard.group'}}</h3>
+      </div>
+      <div class="setting-value">
+        {{wizard-field-mapper
+          inputs=model.group
+          options=(hash
+            hasOutput=true
+            enableConnectors=true
+            userFieldSelection='key,value'
+            groupSelection=true
+            textDisabled='output'
+          )}}
+      </div>
     </div>
-    <a href="{{wizardUrl}}" target="_blank">{{wizardUrl}}</a>
   </div>
 
   {{wizard-links type="step" current=currentStep items=model.steps}}
+  
   {{#if currentStep}}
     {{wizard-custom-step step=currentStep wizard=model}}
   {{/if}}
 
   <div class='buttons'>
-    <button {{action "save"}} disabled={{disableSave}} class='btn btn-primary'>{{i18n 'admin.wizard.save'}}</button>
+    <button {{action "save"}} disabled={{disableSave}} class='btn btn-primary'>
+      {{i18n 'admin.wizard.save'}}
+    </button>
+    
     {{#unless newWizard}}
-      <button {{action "remove"}} class='btn btn-danger remove'>{{d-icon "trash-o"}}{{i18n 'admin.wizard.remove'}}</button>
+      <button {{action "remove"}} class='btn btn-danger remove'>
+        {{d-icon "far-trash-alt"}}{{i18n 'admin.wizard.remove'}}
+      </button>
     {{/unless}}
+    
     {{conditional-loading-spinner condition=saving size='small'}}
+    
     {{#if error}}
       <span class="error">{{d-icon "times"}}{{error}}</span>
     {{/if}}

assets/javascripts/discourse/templates/admin-wizards-api.hbs

@@ -92,6 +92,7 @@
         {{combo-box
           value=api.authType 
           content=authorizationTypes
+          onChange=(action (mut authorizationTypes))
           options=(hash
             none='admin.wizard.api.auth.type_none'
           )}}
@@ -248,18 +249,21 @@
                   {{combo-box
                     content=endpointMethods
                     value=endpoint.method
+                    onChange=(action (mut endpoint.method))
                     options=(hash
                       none="admin.wizard.api.endpoint.method"
                     )}}
                   {{combo-box
                     content=contentTypes
                     value=endpoint.content_type
+                    onChange=(action (mut endpoint.content_type))
                     options=(hash
                       none="admin.wizard.api.endpoint.content_type"
                     )}}
                   {{multi-select
                     content=successCodes
                     values=endpoint.success_codes
+                    onChange=(action (mut endpoint.success_codes))
                     options=(hash
                       none="admin.wizard.api.endpoint.success_codes"
                     )}}

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

@@ -2,8 +2,12 @@
   <div class="setting-label">
     <h3>{{i18n "admin.wizard.id"}}</h3>
   </div>
+  
   <div class="setting-value">
-    {{input value=action.id placeholderKey='admin.wizard.id_placeholder' disabled=disableId}}
+    {{input
+      value=action.id
+      placeholderKey='admin.wizard.id_placeholder'
+      disabled=disableId}}
   </div>
 </div>
 
@@ -11,10 +15,12 @@
   <div class="setting-label">
     <h3>{{i18n "admin.wizard.type"}}</h3>
   </div>
+  
   <div class="setting-value">
     {{combo-box
       value=action.type
       content=types
+      onChange=(action (mut action.type))
       options=(hash
         none="admin.wizard.field.type"
       )}}
@@ -26,15 +32,18 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.title"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{combo-box
         value=action.title
         content=wizardFields
         nameProperty="label"
-        isDisabled=action.custom_title_enabled
+        onChange=(action (mut action.title))
         options=(hash
           none='admin.wizard.select_field'
+          isDisabled=action.custom_title_enabled
         )}}
+      
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.custom_title_enabled}}
         <span>{{i18n 'admin.wizard.action.custom_title'}}</span>
@@ -49,15 +58,18 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.post"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{combo-box
         value=action.post
         content=wizardFields
         nameProperty='label'
-        isDisabled=action.post_builder
+        onChange=(action (mut action.post))
         options=(hash
           none='admin.wizard.select_field'
+          isDisabled=action.post_builder
         )}}
+      
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.post_builder}}
         <span>{{i18n 'admin.wizard.action.post_builder.checkbox'}}</span>
@@ -70,15 +82,12 @@
       <div class="setting-label">
         <h3>{{i18n 'admin.wizard.action.post_builder.label'}}</h3>
       </div>
+      
       <div class="setting-value editor">
-        {{d-editor
+        {{wizard-text-editor
           value=action.post_template
-          placeholder='admin.wizard.action.interpolate_fields'
-          classNames='post-builder-editor'}}
-        <div>
-          <label>{{i18n 'admin.wizard.action.post_builder.user_fields'}}{{builderUserFields}}</label>
-          <label>{{i18n 'admin.wizard.action.post_builder.wizard_fields'}}{{builderWizardFields}}</label>
-        </div>
+          fieldsEnabled=true
+          wizardFields=wizardFields}}
       </div>
     </div>
   {{/if}}
@@ -89,13 +98,16 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.create_topic.category"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{category-chooser
         value=action.category_id
         isDisabled=action.custom_category_enabled}}
+      
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.custom_category_enabled}}
         <span>{{i18n 'admin.wizard.action.custom_category.label'}}</span>
+        
         {{#if action.custom_category_enabled}}
           <div class="custom-category">
             <div>
@@ -106,11 +118,13 @@
                   value=action.category_id
                   content=categoryFields
                   nameProperty="label"
+                  onChange=(action (mut action.category_id))
                   options=(hash
                     none='admin.wizard.select_field'
                   )}}
               {{/if}}
             </div>
+            
             <div>
               {{input type='checkbox' checked=action.custom_category_user_field}}
               <span>{{i18n 'admin.wizard.action.custom_category.user_field'}}</span>
@@ -139,12 +153,14 @@
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.custom_tag_enabled}}
         <span>{{i18n 'admin.wizard.action.custom_tag.label'}}</span>
+        
         {{#if action.custom_tag_enabled}}
           <div class="custom-tag">
             {{combo-box
               value=action.custom_tag_field
               content=tagFields
               nameProperty="label"
+              onChange=(action (mut action.custom_tag_field))
               options=(hash
                 none='admin.wizard.select_field'
               )}}
@@ -160,24 +176,32 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.skip_redirect.label"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{input type='checkbox' checked=action.skip_redirect}}
-      <span>{{i18n 'admin.wizard.action.skip_redirect.description' type='topic'}}</span>
+      
+      <span>
+        {{i18n 'admin.wizard.action.skip_redirect.description' type='topic'}}
+      </span>
     </div>
   </div>
 {{/if}}
 
 {{#if createTopic}}
-  <div class="setting full">
-    <label>{{i18n 'admin.wizard.action.add_fields' type='Topic'}}</label>
+  <div class="setting full field-mapper-setting">
+    <div class="setting-label">
+      <h3>{{i18n 'admin.wizard.action.add_fields'}}</h3>
+    </div>
+    
+    <div class="setting-value">
       {{wizard-field-mapper
         inputs=action.add_fields
-      userFields=userFields
         wizardFields=wizardFields
         options=(hash
           wizardFieldSelection=true
         )}}
     </div>
+  </div>
 {{/if}}
 
 {{#if sendMessage}}
@@ -191,6 +215,7 @@
         value=action.required
         content=wizardFields
         nameProperty='label'
+        onChange=(action (mut action.required))
         options=(hash
           none='admin.wizard.select_field'
         )}}
@@ -201,6 +226,7 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.send_message.recipient"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{user-selector
         single="true"
@@ -210,21 +236,25 @@
     </div>
   </div>
 
-  <div class="setting full">
-    <label>{{i18n "admin.wizard.action.add_fields" type='Message'}}</label>
+  <div class="setting full field-mapper-setting">
+    <div class="setting-label">
+      <h3>{{i18n 'admin.wizard.action.add_fields'}}</h3>
+    </div>
+    
     {{wizard-field-mapper
       inputs=action.add_fields
-      userFields=userFields
       wizardFields=wizardFields}}
   </div>
 {{/if}}
 
 {{#if updateProfile}}
-  <div class="setting full">
-    <label>{{i18n "admin.wizard.action.add_fields" type='Profile'}}</label>
+  <div class="setting full field-mapper-setting">
+    <div class="setting-label">
+      <h3>{{i18n 'admin.wizard.action.add_fields'}}</h3>
+    </div>
+    
     {{wizard-field-mapper 
       inputs=action.profile_updates
-      userFields=userFields
       wizardFields=wizardFields
       options=(hash
         wizardFieldSelection=true
@@ -238,12 +268,14 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.send_to_api.api"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{combo-box
         value=action.api
         content=availableApis
-        isDisabled=action.custom_title_enabled
+        onChange=(action (mut action.api))
         options=(hash
+          isDisabled=action.custom_title_enabled
           none='admin.wizard.action.send_to_api.select_an_api'
         )}}
     </div>
@@ -253,12 +285,14 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.send_to_api.endpoint"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{combo-box
         value=action.api_endpoint
         content=availableEndpoints
-        isDisabled=apiEmpty
+        onChange=(action (mut action.api_endpoint))
         options=(hash
+          isDisabled=apiEmpty
           none='admin.wizard.action.send_to_api.select_an_endpoint'
         )}}
     </div>
@@ -268,25 +302,25 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.send_to_api.body"}}</h3>
     </div>
+    
     <div class="setting-value">
-      <label>{{i18n 'admin.wizard.action.post_builder.user_fields'}}{{builderUserFields}}</label>
-      <label>{{i18n 'admin.wizard.action.post_builder.wizard_fields'}}{{builderWizardFields}}</label>
-      {{textarea
+      {{wizard-text-editor
         value=action.api_body
-        placeholder=(i18n 'admin.wizard.action.interpolate_fields')}}
+        fieldsEnabled=true
+        wizardFields=wizardFields}}
     </div>
   </div>
 {{/if}}
 
 {{#if addToGroup}}
-  <div class="setting full">
+  <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.add_to_group.group"}}</h3>
+      <h3>{{i18n "admin.wizard.group"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{wizard-field-mapper
         inputs=action.inputs
-        userFields=userFields
         wizardFields=wizardFields
         outputConnectorKey='admin.wizard.action.add_to_group.output_connector'
         options=(hash
@@ -305,14 +339,17 @@
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.route_to.url"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{input value=action.url}}
     </div>
   </div>
+  
   <div class="setting">
     <div class="setting-label">
       <h3>{{i18n "admin.wizard.action.route_to.code"}}</h3>
     </div>
+    
     <div class="setting-value">
       {{input value=action.code}}
     </div>

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

@@ -21,7 +21,7 @@
     <h3>{{i18n 'admin.wizard.field.label'}}</h3>
   </div>
   <div class="setting-value">
-    {{input name="label" value=field.label placeholder=(i18n "admin.wizard.custom_text_placeholder")}}
+    {{input name="label" value=field.label}}
   </div>
 </div>
 
@@ -30,7 +30,7 @@
     <h3>{{i18n 'admin.wizard.field.description'}}</h3>
   </div>
   <div class="setting-value">
-    {{textarea name="description" value=field.description placeholder=(i18n "admin.wizard.custom_text_placeholder")}}
+    {{textarea name="description" value=field.description}}
   </div>
 </div>
 
@@ -51,6 +51,7 @@
     {{combo-box
       value=field.type
       content=types
+      onChange=(action (mut field.type))
       options=(hash
         none="admin.wizard.field.type"
       )}}
@@ -87,6 +88,7 @@
     {{combo-box
       value=field.choices_type
       content=choicesTypes
+      onChange=(action (mut field.choices_type))
       options=(hash
         none="admin.wizard.field.choices_type"
       )}}
@@ -104,7 +106,6 @@
       </div>
       {{wizard-field-mapper
         inputs=field.choices
-        userFields=userFields
         wizardFields=wizardFields}}
     {{/if}}
 
@@ -144,8 +145,9 @@
     </div>
     <div class="setting-value">
       {{combo-box
-        content=categoryPropertyTypes
         value=field.property
+        content=categoryPropertyTypes
+        onChange=(action (mut field.property))
         options=(hash
           none='admin.wizard.select_property'
         )}}
@@ -153,28 +155,26 @@
   </div>
 {{/if}}
 
-<div class="setting full custom-inputs">
+<div class="setting full field-mapper-setting">
   <div class="setting-label">
     <h3>{{i18n 'admin.wizard.field.prefill'}}</h3>
   </div>
   <div class="setting-value">
     {{wizard-field-mapper
       inputs=field.prefill
-      userFields=userFields
       wizardFields=wizardFields
       options=prefillOptions}}
   </div>
 </div>
 
 {{#if canFilter}}
-  <div class="setting full custom-inputs">
+  <div class="setting full field-mapper-setting">
     <div class="setting-label">
       <h3>{{i18n 'admin.wizard.field.filter'}}</h3>
     </div>
     <div class="setting-value">
       {{wizard-field-mapper
         inputs=field.filters
-        userFields=userFields
         wizardFields=wizardFields
         options=filterOptions}}
     </div>

assets/javascripts/discourse/templates/components/wizard-custom-input-pair.hbs

@@ -2,7 +2,6 @@
   {{wizard-custom-input-selector
     selectorType='key'
     inputType=inputType
-    userFields=userFields
     wizardFields=wizardFields
     value=pair.key
     activeType=pair.key_type
@@ -15,7 +14,8 @@
     {{#if options.enableConnectors}}
       {{combo-box
         value=pair.connector
-        content=connectors}}
+        content=connectors
+        onChange=(action (mut pair.connector))}}
     {{/if}}
     
     {{#if connectorKey}}
@@ -30,7 +30,6 @@
   {{wizard-custom-input-selector
     selectorType='value'
     inputType=inputType
-    userFields=userFields
     wizardFields=wizardFields
     value=pair.value
     activeType=pair.value_type

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

@@ -2,7 +2,8 @@
   <div class="connector prefix">
     {{combo-box
       value=input.type
-      content=inputTypes}}
+      content=inputTypes
+      onChange=(action (mut input.type))}}
   </div>
 {{/if}}
 
@@ -15,7 +16,6 @@
         inputType=inputType
         keyPlaceholder=keyPlaceholder
         valuePlaceholder=valuePlaceholder
-        userFields=userFields
         wizardFields=wizardFields
         options=options
         removePair=(action 'removePair')}}
@@ -41,7 +41,6 @@
     {{wizard-custom-input-selector
       selectorType='output'
       inputType=inputType
-      userFields=userFields
       wizardFields=wizardFields
       value=input.output
       activeType=input.output_type

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

@@ -3,7 +3,11 @@
     <h3>{{i18n 'admin.wizard.id'}}</h3>
   </div>
   <div class="setting-value">
-    {{input name="id" value=step.id placeholderKey="admin.wizard.id_placeholder" disabled=disableId}}
+    {{input
+      name="id"
+      value=step.id
+      placeholderKey="admin.wizard.id_placeholder"
+      disabled=disableId}}
   </div>
 </div>
 
@@ -12,7 +16,10 @@
     <h3>{{i18n 'admin.wizard.key'}}</h3>
   </div>
   <div class="setting-value">
-    {{input name="key" value=step.key placeholderKey="admin.wizard.key_placeholder"}}
+    {{input
+      name="key"
+      value=step.key
+      placeholderKey="admin.wizard.key_placeholder"}}
   </div>
 </div>
 
@@ -21,7 +28,9 @@
     <h3>{{i18n 'admin.wizard.step.title'}}</h3>
   </div>
   <div class="setting-value">
-    {{input name="title" value=step.title placeholderKey="admin.wizard.custom_text_placeholder"}}
+    {{input
+      name="title"
+      value=step.title}}
   </div>
 </div>
 
@@ -30,7 +39,10 @@
     <h3>{{i18n 'admin.wizard.step.banner'}}</h3>
   </div>
   <div class="setting-value">
-    {{input name="banner" value=step.banner placeholderKey="admin.wizard.step.banner_placeholder"}}
+    {{input
+      name="banner"
+      value=step.banner
+      placeholderKey="admin.wizard.step.banner_placeholder"}}
   </div>
 </div>
 
@@ -39,20 +51,17 @@
     <h3>{{i18n 'admin.wizard.step.description'}}</h3>
   </div>
   <div class="setting-value">
-    {{d-editor
-      value=step.raw_description
-      placeholder="admin.wizard.custom_text_placeholder"}}
+    {{wizard-text-editor value=step.raw_description}}
   </div>
 </div>
 
-<div class="setting required-data full">
+<div class="setting full field-mapper-setting">
   <div class="setting-label">
     <h3>{{i18n 'admin.wizard.step.required_data.label'}}</h3>
   </div>
   <div class="setting-value">
     {{wizard-field-mapper
       inputs=step.required_data
-      userFields=userFields
       wizardFields=wizardFields
       keyPlaceholder="admin.wizard.submission_key"
       options=(hash
@@ -71,14 +80,13 @@
   </div>
 </div>
 
-<div class="setting full">
+<div class="setting full field-mapper-setting">
   <div class="setting-label">
     <h3>{{i18n 'admin.wizard.step.permitted_params.label'}}</h3>
   </div>
   <div class="setting-value">
     {{wizard-field-mapper
       inputs=step.permitted_params
-      userFields=userFields
       wizardFields=wizardFields
       keyPlaceholder='admin.wizard.param_key'
       valuePlaceholder='admin.wizard.submission_key'
@@ -93,7 +101,6 @@
     field=currentField
     types=wizard.fieldTypes
     removeField="removeField"
-    userFields=wizard.userFields
     wizardFields=wizardFields}}
 {{/if}}
 
@@ -104,8 +111,5 @@
     action=currentAction
     wizard=wizard
     removeAction="removeAction"
-    wizardFields=wizardFields
-    userFields=wizard.userFields}}
+    wizardFields=wizardFields}}
 {{/if}}
-
-<label>{{i18n 'admin.wizard.action.available_fields'}}</label>

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

@@ -1,7 +1,6 @@
 {{#each inputs as |input|}}
   {{wizard-custom-input 
     input=input
-    userFields=userFields
     wizardFields=wizardFields
     keyPlaceholder=keyPlaceholder
     valuePlaceholder=valuePlaceholder

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

@@ -1,5 +1,6 @@
 <div class="wizard-links {{type}}">
   <div class="wizard-header medium">{{{i18n header}}}</div>
+  {{#if anyLinks}}
     <ul>
       {{#each links as |l|}}
         <li data-id='{{l.id}}'>
@@ -8,5 +9,6 @@
         </li>
       {{/each}}
     </ul>
+  {{/if}}
   {{d-button action='add' label='admin.wizard.add' icon='plus'}}
 </div>

assets/javascripts/discourse/templates/components/wizard-text-editor.hbs

@@ -0,0 +1,28 @@
+{{d-editor
+  value=value
+  forcePreview=forcePreview}}
+
+<div class="wizard-editor-gutter">
+  {{d-button
+    action="togglePreview"
+    translatedLabel=previewLabel}}
+  
+  {{#if fieldsEnabled}}
+    {{d-button
+      action="togglePopover"
+      translatedLabel=popoverLabel}}
+    
+    {{#if showPopover}}
+      <div class="wizard-editor-gutter-popover">
+        <label>
+          {{i18n 'admin.wizard.action.post_builder.user_fields'}}
+          {{userFieldList}}
+        </label>
+        <label>
+          {{i18n 'admin.wizard.action.post_builder.wizard_fields'}}
+          {{wizardFieldList}}
+        </label>
+      </div>
+    {{/if}}
+  {{/if}}
+</div>

assets/javascripts/wizard/components/custom-user-selector.js.es6

@@ -64,7 +64,7 @@ export default Ember.TextField.extend({
       return usernames;
     }
 
-    this.$().val(this.get('usernames')).autocomplete({
+    $(this.element).val(this.get('usernames')).autocomplete({
       template,
       disabled: this.get('disabled'),
       single: this.get('single'),
@@ -121,7 +121,7 @@ export default Ember.TextField.extend({
 
   willDestroyElement() {
     this._super();
-    this.$().autocomplete('destroy');
+    $(this.element).autocomplete('destroy');
   },
 
   // THIS IS A HUGE HACK TO SUPPORT CLEARING THE INPUT
@@ -129,7 +129,7 @@ export default Ember.TextField.extend({
   _clearInput: function() {
     if (arguments.length > 1) {
       if (Em.isEmpty(this.get("usernames"))) {
-        this.$().parent().find("a").click();
+        $(this.element).parent().find("a").click();
       }
     }
   }

assets/javascripts/wizard/components/wizard-field-upload.js.es6

@@ -10,7 +10,7 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super();
 
-    const $upload = this.$();
+    const $upload = $(this.element);
 
     const id = this.get("field.id");
 

assets/stylesheets/wizard_custom_admin.scss

@@ -1,6 +1,35 @@
+$setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
+
 .wizard-list {
   float: left;
   width: 250px;
+  margin-top: 10px;
+}
+
+.wizard-settings-parent {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: $setting-background;
+}
+
+.wizard-settings-group {
+  display: flex;
+  justify-content: space-between;
+  flex-flow: wrap;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.wizard-settings,
+.wizard-custom-step {
+  @extend .wizard-settings-parent;
+  @extend .wizard-settings-group;
+}
+
+.wizard-basic-details,
+.wizard-custom-field,
+.wizard-custom-action {
+  @extend .wizard-settings-group;
 }
 
 .new-wizard {
@@ -8,11 +37,11 @@
 }
 
 .wizard-header {
-  font-size: 1.4em;
-  margin-bottom: 15px;
+  font-size: 1.5em;
+  margin-bottom: 20px;
 
   &.medium {
-    font-size: 1.2em;
+    font-size: 1.3em;
   }
 
   &.small {
@@ -23,6 +52,13 @@
   &.underline {
     text-decoration: underline;
   }
+  
+  .wizard-url {
+    display: inline-block;
+    font-size: 1rem;
+    margin-left: 20px;
+    background-color: $setting-background;
+  }
 }
 
 .content-list + .content {
@@ -30,18 +66,25 @@
 }
 
 .admin-wizard.settings {
+  margin-top: 10px;
   margin-left: 30px;
 
   .setting {
-    display: inline-block;
+    display: inline-flex;
     vertical-align: top;
-    width: 49%;
+    width: 48%;
 
     .setting-label {
-      width: 20%;
+      width: 80px;
     }
 
     .setting-value {
+      flex: 1;
+      overflow: initial;
+      float: initial;
+      width: initial;
+      padding: 0;
+    
       label {
         font-size: 0.85em;
       }
@@ -54,55 +97,25 @@
         display: block;
       }
       
-      .d-editor {
+      input[type="text"], textarea {
         width: 100%;
-
-        .d-editor-input {
-          height: 100px;
+        box-sizing: border-box;
       }
       
-        button {
-          margin: 0;
-        }
+      input[disabled] {
+        background-color: $primary-low;
+        cursor: not-allowed;
       }
     }
 
     &.full {
       width: 100%;
 
-      &.custom-inputs {
-        padding-bottom: 30px;
-        
-        .setting-label {
-          margin-top: 20px;
-        }
-        
-        .add-custom-input:first-child {
-          margin-top: 16px;
-        }
-        
-        .multi-select {
-          .multi-select-header, input {
-            min-height: 25px;
-          }
-          
-          .choices .choice {
-            height: 24px;
-          }
-        }
-      }
-
-      .setting-label {
-        width: 10%;
-      }
-
       .setting-value {
         width: initial;
         float: none;
-        display: flex;
         
         &.editor {
-          flex-flow: wrap;
           
           .d-editor {
             margin-bottom: 5px;
@@ -111,6 +124,14 @@
       }
     }
     
+    &.field-mapper-setting {
+      padding-bottom: 20px;
+      
+      .setting-label {
+        margin-top: 20px;
+      }
+    }
+
     label {
       margin: 5px 0;
     }
@@ -159,8 +180,95 @@
   }
 }
 
+.field-mapper {
+  width: 100%;
+  display: inline-block;
+  
+  > .custom-input, > .add-custom-input {
+    float: left;
+    clear: left;
+  }
+  
+  .add-custom-input:first-child {
+    margin-top: 15px;
+  }
+  
+  .multi-select {
+    .multi-select-header, input {
+      min-height: 25px;
+    }
+    
+    .choices .choice {
+      height: 24px;
+    }
+  }
+}
+
+.btn-after-time {
+  margin-top: 7px;
+}
+
+.wizard-text-editor {
+  .d-editor {
+    width: 100%;
+
+    .d-editor-input {
+      min-height: 120px;
+    }
+    
+    .d-editor-container {
+      display: block;
+    }
+    
+    .d-editor-textarea-wrapper {
+      display: grid;
+      margin-bottom: 10px;
+      
+      textarea {
+        resize: vertical;
+      }
+    }
+    
+    .d-editor-preview-wrapper {
+      display: none;
+      margin: 0 0 10px 0;
+      padding: 10px;
+      background-color: $secondary;
+      border: 1px solid $primary-medium;
+      max-width: 100%;
+      
+      &.force-preview {
+        display: block;
+      }
+    }
+
+    button {
+      margin: 0;
+    }
+  }
+  
+  .wizard-editor-gutter {
+    position: relative;
+    display: flex;
+    
+    .btn {
+      margin-right: 10px;
+    }
+    
+    .wizard-editor-gutter-popover {
+      position: absolute;
+      padding: 10px;
+      background-color: $secondary;
+      box-shadow: shadow('card');
+      z-index: 200;
+      top: 40px;
+    }
+  }
+}
+
 .wizard-links {
   margin-bottom: 20px;
+  width: 100%;
 
   ul {
     margin: 0;
@@ -190,17 +298,11 @@
   position: relative;
 }
 
-.wizard-custom-step {
-  display: inline-block;
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: dark-light-diff($primary, $secondary, 96%, -65%);
-}
-
 .wizard-dropdown-choices {
   padding: 15px;
   margin-bottom: 20px;
   background-color: $secondary;
+  width: 100%;
 
   .wizard-header:not(.underline) {
     margin-top: 15px;
@@ -208,7 +310,7 @@
 }
 
 .custom-input {
-  display: flex;
+  display: inline-flex;
   align-items: flex-start;
   margin-bottom: 10px;
   position: relative;
@@ -234,7 +336,7 @@
     position: relative;
     
     .add-pair {
-      margin-top: 4px;
+      margin-top: 10px;
     }
     
     .remove-pair {
@@ -255,7 +357,10 @@
     display: flex;
     align-items: flex-end;
     position: relative;
-    margin-bottom: 10px;
+    
+    &:not(:first-of-type) {
+      margin-top: 10px;
+    }
     
     &.no-connector div.input-block:not(:last-of-type) {
       margin-right: 10px;
@@ -281,7 +386,9 @@
   }
 
   a.remove-input {
-    margin: 25px 0 0 10px;
+    position: absolute;
+    right: -25px;
+    top: 25px;
   }
 
   .connector {
@@ -307,14 +414,11 @@
   }
 }
 
-.required-data .setting-value {
-  flex-flow: wrap;
+.required-data-message {
+  display: inline-block;
+  margin-top: 20px;
   
-  .custom-inputs {
-    margin-bottom: 20px;
-  }
-
-  .required-data-message .label {
+  .label {
     margin-bottom: 5px;
   }
 }

config/locales/client.en.yml

@@ -19,10 +19,10 @@ en:
         save_submissions_label: "Save wizard submissions."
         multiple_submissions: "Multiple"
         multiple_submissions_label: "Allow multiple submissions by the same user."
-        after_signup: "After Signup"
-        after_signup_label: "Users are directed to wizard after signup."
-        after_time: "After Time"
-        after_time_label: "Users are directed to wizard after the start time until wizard is completed or skipped."
+        after_signup: "Signup"
+        after_signup_label: "Users are directed to wizard after creating an account."
+        after_time: "Time"
+        after_time_label: "Users are directed to wizard after the start time."
         after_time_time_label: "Start Time"
         after_time_modal:
           title: "Wizard Start Time"
@@ -42,7 +42,6 @@ en:
         no_theme: "Select a Theme (optional)"
         save: "Save Changes"
         remove: "Delete Wizard"
-        header: "Wizard"
         add: "Add"
         url: "Url"
         key: "Key"
@@ -53,7 +52,6 @@ en:
         id: "Id"
         id_placeholder: "Underscored. Cannot be changed."
         key_placeholder: "Translation key"
-        custom_text_placeholder: "Overrides translation"
         type: "Type"
         none: "Make a selection"
         user_field: "User Field"
@@ -64,6 +62,13 @@ en:
         profile_field: "Profile Field"
         submission_key: 'submission key'
         param_key: 'param'
+        group: "Group"
+        
+        editor:
+          show: "Show"
+          hide: "Hide"
+          preview: "{{action}} Preview"
+          popover: "{{action}} Fields"
         
         input:
           conditional: 
@@ -91,10 +96,10 @@ en:
           banner_placeholder: "Image url"
           description: "Description"
           required_data:
-            label: "Required Data"
+            label: "Required"
             not_permitted_message: "Message shown when required data not present"
           permitted_params:
-            label: "Permitted Params"
+            label: "Params"
             connector: "save as"
         
         field:
@@ -126,17 +131,16 @@ en:
           filter: "Content"
         
         action:
-          header: "Actions<sup>*</sup>"
+          header: "Actions"
           include: "Include Fields"
           title: "Title"
           post: "Post"
-          add_fields: "{{type}} Fields"
-          available_fields: "* If 'Save wizard submissions' is disabled, only the fields of the current step are available to the current step's actions."
+          add_fields: "Fields"
           topic_attr: "Topic Attribute"
           interpolate_fields: "Insert wizard fields using the field_id in w{}. Insert user fields using field key in u{}."
 
           skip_redirect:
-            label: "Skip Redirect"
+            label: "No Redirect"
             description: "Don't redirect the user to this {{type}} after the wizard completes"
           send_message:
             label: "Send Message"
@@ -155,7 +159,6 @@ en:
             placeholder: "Insert wizard fields using the field_id in w{}. Insert user fields using field key in u{}."
           add_to_group:
             label: "Add to Group"
-            group: "Group"
             output_connector: "add to"
           route_to:
             label: "Route To"
@@ -173,7 +176,7 @@ en:
             endpoint: "Endpoint"
             select_an_api: "Select an API"
             select_an_endpoint: "Select an endpoint"
-            body: "Request body JSON"
+            body: "Body"
 
         api:
           label: "API"