Add field and action messages

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

@@ -1,5 +1,5 @@
 import { default as discourseComputed } from 'discourse-common/utils/decorators';
-import { equal, empty, or } from "@ember/object/computed";
+import { equal, empty, or, and } from "@ember/object/computed";
 import { generateName, selectKitContent } from '../lib/wizard';
 import { computed } from "@ember/object";
 import wizardSchema from '../lib/wizard-schema';
@@ -10,7 +10,6 @@ export default Component.extend(UndoChanges, {
   componentType: 'action',
   classNameBindings: [':wizard-custom-action', 'visible'],
   visible: computed('currentActionId', function() { return this.action.id === this.currentActionId }),
-  actionTypes: Object.keys(wizardSchema.action.types).map(t => ({ id: t, name: generateName(t) })),
   createTopic: equal('action.type', 'create_topic'),
   updateProfile: equal('action.type', 'update_profile'),
   sendMessage: equal('action.type', 'send_message'),
@@ -21,10 +20,28 @@ export default Component.extend(UndoChanges, {
   apiEmpty: empty('action.api'),
   groupPropertyTypes: selectKitContent(['id', 'name']),
   hasAdvanced: or('hasCustomFields', 'routeTo'),
+  showAdvanced: and('hasAdvanced', 'action.type'),
   hasCustomFields: or('basicTopicFields', 'updateProfile'),
   basicTopicFields: or('createTopic', 'sendMessage', 'openComposer'),
   publicTopicFields: or('createTopic', 'openComposer'),
   showSkipRedirect: or('createTopic', 'sendMessage'),
+  actionTypes: Object.keys(wizardSchema.action.types).map(type => {
+    return {
+      id: type,
+      name: I18n.t(`admin.wizard.action.${type}.label`)
+    };
+  }),
+  
+  messageUrl: 'https://thepavilion.io/t/2810',
+  
+  @discourseComputed('action.type')
+  messageKey(type) {
+    let key = 'type';
+    if (type) {
+      key = 'edit';
+    }
+    return key;
+  },
   
   @discourseComputed('wizard.steps')
   runAfterContent(steps) {

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

@@ -1,5 +1,5 @@
 import { default as discourseComputed } from 'discourse-common/utils/decorators';
-import { equal, or } from "@ember/object/computed";
+import { equal, or, alias } from "@ember/object/computed";
 import { computed } from "@ember/object";
 import { selectKitContent } from '../lib/wizard';
 import UndoChanges from '../mixins/undo-changes';
@@ -22,6 +22,17 @@ export default Component.extend(UndoChanges, {
   showLimit: or('isCategory', 'isTag'),
   showMinLength: or('isText', 'isTextarea', 'isUrl', 'isComposer'),
   categoryPropertyTypes: selectKitContent(['id', 'slug']),
+  showAdvanced: alias('field.type'),
+  messageUrl: 'https://thepavilion.io/t/2809',
+  
+  @discourseComputed('field.type')
+  messageKey(type) {
+    let key = 'type';
+    if (type) {
+      key = 'edit';
+    }
+    return key;
+  },
   
   setupTypeOutput(fieldType, options) {    
     const selectionType = {

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

@@ -0,0 +1,16 @@
+import { default as discourseComputed } from 'discourse-common/utils/decorators';
+import Component from "@ember/component";
+
+export default Component.extend({
+  classNames: 'wizard-message',
+  
+  @discourseComputed('key', 'component')
+  message(key, component) {
+    return I18n.t(`admin.wizard.message.${component}.${key}`);
+  },
+  
+  @discourseComputed('component')
+  documentation(component) {
+    return I18n.t(`admin.wizard.message.${component}.documentation`);
+  }
+})

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

@@ -11,15 +11,15 @@ export default Controller.extend({
   },
   
   @discourseComputed('creating', 'wizardId')
-  message(creating, wizardId) {
+  messageKey(creating, wizardId) {
-    let type = 'select';
+    let key = 'select';
-          
     if (creating) {
-      type = 'create';
+      key = 'create';
     } else if (wizardId) {
-      type = 'edit';
+      key = 'edit';
     }
+    return key;  
+  },
   
-    return I18n.t(`admin.wizard.message.${type}`);  
+  messageUrl: "https://thepavilion.io/c/knowledge/custom-wizard"
-  }
 });

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

@@ -1,7 +1,6 @@
 import CustomWizard from '../models/custom-wizard';
 import { ajax } from 'discourse/lib/ajax';
 import DiscourseRoute from "discourse/routes/discourse";
-import { selectKitContent } from '../lib/wizard';
 
 export default DiscourseRoute.extend({
   model(params) {
@@ -21,10 +20,16 @@ export default DiscourseRoute.extend({
   setupController(controller, model) {
     const parentModel = this.modelFor('adminWizardsWizard');
     const wizard = CustomWizard.create((!model || model.create) ? {} : model);
+    const fieldTypes = Object.keys(parentModel.field_types).map(type => {
+      return {
+        id: type,
+        name: I18n.t(`admin.wizard.field.type.${type}`)
+      };
+    })
           
     let props = {
       wizardList: parentModel.wizard_list,
-      fieldTypes: selectKitContent(Object.keys(parentModel.field_types)),
+      fieldTypes,
       userFields: parentModel.userFields,
       apis: parentModel.apis,
       themes: parentModel.themes,

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

@@ -13,24 +13,10 @@
     icon="plus"}}
 </div>
 
-<div class="admin-wizard-message">
+{{wizard-message
-  <div class="wizard-message">
+  key=messageKey
-    {{d-icon 'info-circle'}}
+  url=messageUrl
-    <span>{{message}}</span>
+  component='wizard'}}
-  </div>
-  
-  <div class="wizard-message">
-    {{d-icon 'question-circle'}}
-        
-    <a href="https://thepavilion.io/c/knowledge/custom-wizard" target="_blank">
-      {{i18n 'admin.wizard.message.documentation'}}
-    </a>
-    
-    {{!--<a href="mailto:help@thepavilion.io" target="_blank">
-      {{i18n 'admin.wizard.message.contact'}}
-    </a>--}}
-  </div>
-</div>
 
 <div class="admin-wizard-container settings">
   {{outlet}}

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

@@ -17,7 +17,7 @@
       content=actionTypes
       onChange=(action "changeType")
       options=(hash
-        none="admin.wizard.field.type"
+        none="admin.wizard.select_type"
       )}}
   </div>
 </div>
@@ -35,6 +35,11 @@
   </div>
 </div>
 
+{{wizard-message
+  key=messageKey
+  url=messageUrl
+  component='action'}}
+
 {{#if basicTopicFields}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
@@ -267,7 +272,7 @@
   </div>
 {{/if}}
 
-{{#if hasAdvanced}}
+{{#if showAdvanced}}
   {{wizard-advanced-toggle showAdvanced=action.showAdvanced}}
 
   {{#if action.showAdvanced}}

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

@@ -60,11 +60,16 @@
       content=fieldTypes
       onChange=(action "changeType")
       options=(hash
-        none="admin.wizard.field.type"
+        none="admin.wizard.select_type"
       )}}
   </div>
 </div>
 
+{{wizard-message
+  key=messageKey
+  url=messageUrl
+  component='field'}}
+
 {{#if showMinLength}}
   <div class="setting">
     <div class="setting-label">
@@ -137,41 +142,43 @@
   </div>
 {{/if}}
 
-{{wizard-advanced-toggle showAdvanced=field.showAdvanced}}
+{{#if showAdvanced}}
+  {{wizard-advanced-toggle showAdvanced=field.showAdvanced}}
 
-{{#if field.showAdvanced}}
+  {{#if field.showAdvanced}}
-  <div class="advanced-settings">
+    <div class="advanced-settings">
+      
+      {{#if isCategory}}
+        <div class="setting">
+          <div class="setting-label">
+            <label>{{i18n 'admin.wizard.field.property'}}</label>
+          </div>
+          
+          <div class="setting-value">
+            {{combo-box
+              value=field.property
+              content=categoryPropertyTypes
+              onChange=(action (mut field.property))
+              options=(hash
+                none='admin.wizard.selector.placeholder.property'
+              )}}
+          </div>
+        </div>
+      {{/if}}
       
-    {{#if isCategory}}
       <div class="setting">
         <div class="setting-label">
-          <label>{{i18n 'admin.wizard.field.property'}}</label>
+          <label>{{i18n 'admin.wizard.translation'}}</label>
         </div>
-        
+        <div class="setting-value medium">
-        <div class="setting-value">
+          {{input
-          {{combo-box
+            name="key"
-            value=field.property
+            value=field.key
-            content=categoryPropertyTypes
+            class="medium"
-            onChange=(action (mut field.property))
+            placeholderKey="admin.wizard.translation_placeholder"}}
-            options=(hash
-              none='admin.wizard.selector.placeholder.property'
-            )}}
         </div>
       </div>
-    {{/if}}
       
-    <div class="setting">
-      <div class="setting-label">
-        <label>{{i18n 'admin.wizard.translation'}}</label>
-      </div>
-      <div class="setting-value medium">
-        {{input
-          name="key"
-          value=field.key
-          class="medium"
-          placeholderKey="admin.wizard.translation_placeholder"}}
-      </div>
     </div>
-    
+  {{/if}}
-  </div>
 {{/if}}

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

@@ -0,0 +1,12 @@
+<div class="message-block">
+  {{d-icon 'info-circle'}}
+  <span>{{message}}</span>
+</div>
+
+<div class="message-block">
+  {{d-icon 'question-circle'}}
+      
+  <a href={{url}} target="_blank">
+    {{documentation}}
+  </a>
+</div>

assets/stylesheets/common/wizard-admin.scss

@@ -7,15 +7,21 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
+  
+  &+ .wizard-message + div {
+    margin-top: 20px;
+  }
 }
 
-.admin-wizard-message {
+.wizard-message {
   background-color: $primary-low;
+  width: 100%;
   padding: 10px;
+  box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   
-  .wizard-message {
+  .message-block {
     .d-icon {
       margin-right: 4px;
     }
@@ -26,10 +32,10 @@
       margin-left: 5px;
     }
   }
-}
   
-.admin-wizard-container {
+  & + div {
-  margin-top: 20px;
+    margin-top: 30px;
+  }
 }
 
 .wizard-submissions {
@@ -55,7 +61,6 @@
 }
 
 .wizard-settings-parent {
-  margin-bottom: 30px;
   padding: 20px;
   border: 1px solid $primary-low;
 }
@@ -419,7 +424,7 @@
 }
 
 .wizard-links {
-  margin: 20px 0;
+  margin: 40px 0 20px 0;
   display: inline-block;
   width: 100%;
 

config/locales/client.en.yml

@@ -55,13 +55,23 @@ en:
         advanced: "Advanced"
         undo: "Undo"
         clear: "Clear"
+        select_type: "Select a type"
         
         message:
-          select: "Select a wizard, or create a new one"
+          wizard:
-          edit: "You're editing a wizard"
+            select: "Select a wizard, or create a new one"
-          create: "You're creating a new wizard"
+            edit: "You're editing a wizard"
-          documentation: "Check out the documentation"
+            create: "You're creating a new wizard"
-          contact: "Contact the developer"
+            documentation: "Check out the wizard documentation"
+            contact: "Contact the developer"
+          field:
+            type: "Select a field type"
+            edit: "You're editing a field"
+            documentation: "Check out the field documentation"
+          action:
+            type: "Select an action type"
+            edit: "You're editing an action"
+            documentation: "Check out the action documentation"
         
         editor:
           show: "Show"
@@ -124,7 +134,6 @@ en:
             label: "Params"
         
         field:
-          type: "Choose a type"
           header: "Fields"
           label: "Label"
           description: "Description"
@@ -135,13 +144,26 @@ en:
           min_length: "Min Length"
           min_length_placeholder: "Minimum length in characters"
           file_types: "File Types"
-          tag: "Tag"
-          category: "Category"
           limit: "Limit"
           property: "Property"
           prefill: "Prefill"
           content: "Content"
           
+          type:
+            text: "Text"
+            textarea: Textarea
+            composer: Composer
+            text_only: Text Only
+            number: Number
+            checkbox: Checkbox
+            url: Url
+            upload: Upload
+            dropdown: Dropdown
+            tag: Tag
+            category: Category
+            group: Group
+            user_selector: User Selector
+        
         connector:
           and: "and"
           or: "or"
@@ -166,7 +188,6 @@ en:
           run_after: 
             label: "Run After"
             wizard_completion: "Wizard Completion"
-          
           custom_fields:
             label: "Custom"
             key: "field"
@@ -180,6 +201,8 @@ en:
             label: "Create Topic"
             category: "Category"
             tags: "Tags"
+          open_composer:
+            label: "Open Composer"
           update_profile:
             label: "Fields"
             key: "field"
@@ -195,12 +218,6 @@ en:
             label: "Route To"
             url: "Url"
             code: "Code"
-          custom_title: "Custom Title"
-          custom_category:
-            label: "Custom Category"
-            user_field: "User Field"
-          custom_tag:
-            label: "Custom Tag"
           send_to_api:
             label: "Send to API"
             api: "API"