Update to select-kit-2

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

@@ -1,4 +1,5 @@
 import { default as computed, observes, on } from 'ember-addons/ember-computed-decorators';
+import { generateSelectKitContent } from '../lib/custom-wizard';
 
 export default Ember.Component.extend({
   classNames: 'wizard-custom-field',
@@ -6,11 +7,11 @@ export default Ember.Component.extend({
   isUpload: Ember.computed.equal('field.type', 'upload'),
   isCategory: Ember.computed.equal('field.type', 'category'),
   disableId: Ember.computed.not('field.isNew'),
-  choicesTypes: ['translation', 'preset', 'custom'],
+  choicesTypes: generateSelectKitContent(['translation', 'preset', 'custom']),
   choicesTranslation: Ember.computed.equal('field.choices_type', 'translation'),
   choicesPreset: Ember.computed.equal('field.choices_type', 'preset'),
   choicesCustom: Ember.computed.equal('field.choices_type', 'custom'),
-  categoryPropertyTypes: ['id', 'slug'],
+  categoryPropertyTypes: generateSelectKitContent(['id', 'slug']),
 
   @computed('field.type')
   isInput: (type) => type === 'text' || type === 'textarea',

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

@@ -2,17 +2,18 @@ import { ajax } from 'discourse/lib/ajax';
 import { popupAjaxError } from 'discourse/lib/ajax-error';
 import CustomWizardApi from '../models/custom-wizard-api';
 import { default as computed } from 'ember-addons/ember-computed-decorators';
+import { generateSelectKitContent } from '../lib/custom-wizard';
 
 export default Ember.Controller.extend({
   queryParams: ['refresh_list'],
   loadingSubscriptions: false,
   notAuthorized: Ember.computed.not('api.authorized'),
-  endpointMethods: ['GET', 'PUT', 'POST', 'PATCH', 'DELETE'],
+  endpointMethods: generateSelectKitContent(['GET', 'PUT', 'POST', 'PATCH', 'DELETE']),
   showRemove: Ember.computed.not('isNew'),
   showRedirectUri: Ember.computed.and('threeLeggedOauth', 'api.name'),
   responseIcon: null,
-  contentTypes: ['application/json', 'application/x-www-form-urlencoded'],
+  contentTypes: generateSelectKitContent(['application/json', 'application/x-www-form-urlencoded']),
-  successCodes: [100, 101, 102, 200, 201, 202, 203, 204, 205, 206, 207, 208, 226, 300, 301, 302, 303, 303, 304, 305, 306, 307, 308],
+  successCodes: generateSelectKitContent([100, 101, 102, 200, 201, 202, 203, 204, 205, 206, 207, 208, 226, 300, 301, 302, 303, 303, 304, 305, 306, 307, 308]),
 
   @computed('saveDisabled', 'api.authType', 'api.authUrl', 'api.tokenUrl', 'api.clientId', 'api.clientSecret', 'threeLeggedOauth')
   authDisabled(saveDisabled, authType, authUrl, tokenUrl, clientId, clientSecret, threeLeggedOauth) {
@@ -26,7 +27,7 @@ export default Ember.Controller.extend({
     return !name || !authType;
   },
 
-  authorizationTypes: ['none', 'basic', 'oauth_2', 'oauth_3'],
+  authorizationTypes: generateSelectKitContent(['none', 'basic', 'oauth_2', 'oauth_3']),
   isBasicAuth: Ember.computed.equal('api.authType', 'basic'),
 
   @computed('api.authType')

assets/javascripts/discourse/lib/custom-wizard.js.es6

@@ -0,0 +1,5 @@
+function generateSelectKitContent(content) {
+  return content.map(i => ({id: i, name: i}))
+}
+
+export { generateSelectKitContent };

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

@@ -1,5 +1,6 @@
 import CustomWizard from '../models/custom-wizard';
 import { ajax } from 'discourse/lib/ajax';
+import { generateSelectKitContent } from '../lib/custom-wizard';
 
 export default Discourse.Route.extend({
   beforeModel() {
@@ -40,7 +41,12 @@ export default Discourse.Route.extend({
 
   _getFieldTypes(model) {
     return ajax('/admin/wizards/field-types')
-      .then((result) => model.set('fieldTypes', result.types));
+      .then((result) => {
+        model.set(
+          'fieldTypes',
+          generateSelectKitContent([...result.types])
+        )
+      });
   },
 
   _getThemes(model) {

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

@@ -107,7 +107,13 @@
       <h3>{{i18n 'admin.wizard.theme_id'}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box content=model.themes valueAttribute='id' value=model.theme_id none='admin.wizard.no_theme'}}
+      {{combo-box
+        content=model.themes
+        valueProperty='id'
+        value=model.theme_id
+        options=(hash
+          none='admin.wizard.no_theme'
+        )}}
     </div>
   </div>
 

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

@@ -89,7 +89,12 @@
     <div class="control-group auth-type">
       <label>{{i18n 'admin.wizard.api.auth.type'}}</label>
       <div class="controls">
-        {{combo-box value=api.authType content=authorizationTypes none='admin.wizard.api.auth.type_none'}}
+        {{combo-box
+          value=api.authType 
+          content=authorizationTypes
+          options=(hash
+            none='admin.wizard.api.auth.type_none'
+          )}}
       </div>
     </div>
 
@@ -240,15 +245,24 @@
                              class='remove-endpoint'}}
                 </div>
                 <div class="bottom">
-                  {{combo-box content=endpointMethods
+                  {{combo-box
-                              value=endpoint.method
+                    content=endpointMethods
-                              none="admin.wizard.api.endpoint.method"}}
+                    value=endpoint.method
-                  {{combo-box content=contentTypes
+                    options=(hash
-                              value=endpoint.content_type
+                      none="admin.wizard.api.endpoint.method"
-                              none="admin.wizard.api.endpoint.content_type"}}
+                    )}}
-                  {{multi-select content=successCodes
+                  {{combo-box
-                                 values=endpoint.success_codes
+                    content=contentTypes
-                                 none="admin.wizard.api.endpoint.success_codes"}}
+                    value=endpoint.content_type
+                    options=(hash
+                      none="admin.wizard.api.endpoint.content_type"
+                    )}}
+                  {{multi-select
+                    content=successCodes
+                    values=endpoint.success_codes
+                    options=(hash
+                      none="admin.wizard.api.endpoint.success_codes"
+                    )}}
                 </div>
               </div>
             </div>

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

@@ -12,7 +12,12 @@
     <h3>{{i18n "admin.wizard.type"}}</h3>
   </div>
   <div class="setting-value">
-    {{combo-box value=action.type content=types none="admin.wizard.field.type"}}
+    {{combo-box
+      value=action.type
+      content=types
+      options=(hash
+        none="admin.wizard.field.type"
+      )}}
   </div>
 </div>
 
@@ -22,11 +27,14 @@
       <h3>{{i18n "admin.wizard.action.title"}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box value=action.title
+      {{combo-box
-                  content=availableFields
+        value=action.title
-                  nameProperty="label"
+        content=availableFields
-                  none='admin.wizard.select_field'
+        nameProperty="label"
-                  isDisabled=action.custom_title_enabled}}
+        isDisabled=action.custom_title_enabled
+        options=(hash
+          none='admin.wizard.select_field'
+        )}}
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.custom_title_enabled}}
         <span>{{i18n 'admin.wizard.action.custom_title'}}</span>
@@ -42,10 +50,14 @@
       <h3>{{i18n "admin.wizard.action.post"}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box value=action.post content=availableFields
+      {{combo-box
-                                    nameProperty='label'
+        value=action.post
-                                    none='admin.wizard.select_field'
+        content=availableFields
-                                    isDisabled=action.post_builder}}
+        nameProperty='label'
+        isDisabled=action.post_builder
+        options=(hash
+          none='admin.wizard.select_field'
+        )}}
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.post_builder}}
         <span>{{i18n 'admin.wizard.action.post_builder.checkbox'}}</span>
@@ -77,7 +89,9 @@
       <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}}
+      {{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>
@@ -87,10 +101,13 @@
               {{input type='checkbox' checked=action.custom_category_wizard_field}}
               <span>{{i18n 'admin.wizard.action.custom_category.wizard_field'}}</span>
               {{#if action.custom_category_wizard_field}}
-                {{combo-box value=action.category_id
+                {{combo-box
-                            content=categoryFields
+                  value=action.category_id
-                            nameProperty="label"
+                  content=categoryFields
-                            none='admin.wizard.select_field'}}
+                  nameProperty="label"
+                  options=(hash
+                    none='admin.wizard.select_field'
+                  )}}
               {{/if}}
             </div>
             <div>
@@ -111,19 +128,23 @@
       <h3>{{i18n "admin.wizard.action.create_topic.tags"}}</h3>
     </div>
     <div class="setting-value">
-      {{tag-chooser tags=action.tags
+      {{tag-chooser
-                    filterable=true
+        tags=action.tags
-                    allowCreate=true
+        filterable=true
-                    isDisabled=action.custom_tag_enabled}}
+        allowCreate=true
+        isDisabled=action.custom_tag_enabled}}
       <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
+            {{combo-box
-                        content=tagFields
+              value=action.custom_tag_field
-                        nameProperty="label"
+              content=tagFields
-                        none='admin.wizard.select_field'}}
+              nameProperty="label"
+              options=(hash
+                none='admin.wizard.select_field'
+              )}}
           </div>
         {{/if}}
       </div>
@@ -160,10 +181,13 @@
       <h3>{{i18n 'admin.wizard.required'}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box content=availableFields
+      {{combo-box
-                  nameProperty='label'
+        value=action.required
-                  none='admin.wizard.select_field'
+        content=availableFields
-                  value=action.required}}
+        nameProperty='label'
+        options=(hash
+          none='admin.wizard.select_field'
+        )}}
     </div>
   </div>
   <div class="setting">
@@ -204,10 +228,13 @@
       <h3>{{i18n "admin.wizard.action.send_to_api.api"}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box value=action.api
+      {{combo-box
-                  content=availableApis
+        value=action.api
-                  none='admin.wizard.action.send_to_api.select_an_api'
+        content=availableApis
-                  isDisabled=action.custom_title_enabled}}
+        isDisabled=action.custom_title_enabled
+        options=(hash
+          none='admin.wizard.action.send_to_api.select_an_api'
+        )}}
     </div>
   </div>
 
@@ -216,10 +243,13 @@
       <h3>{{i18n "admin.wizard.action.send_to_api.endpoint"}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box value=action.api_endpoint
+      {{combo-box
-                  content=availableEndpoints
+        value=action.api_endpoint
-                  none='admin.wizard.action.send_to_api.select_an_endpoint'
+        content=availableEndpoints
-                  isDisabled=apiEmpty}}
+        isDisabled=apiEmpty
+        options=(hash
+          none='admin.wizard.action.send_to_api.select_an_endpoint'
+        )}}
     </div>
   </div>
 
@@ -242,11 +272,14 @@
       <h3>{{i18n "admin.wizard.action.add_to_group.group_selection"}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box value=action.group_id
+      {{combo-box
-                  content=availableFields
+        value=action.group_id
-                  nameProperty="label"
+        content=availableFields
-                  none='admin.wizard.select_field'
+        isDisabled=action.custom_group_enabled
-                  isDisabled=action.custom_group_enabled}}
+        nameProperty="label"
+        options=(hash
+          none='admin.wizard.select_field'
+        )}}
       <div class="setting-gutter">
         {{input type='checkbox' checked=action.custom_group_enabled}}
         <span>{{i18n 'admin.wizard.action.add_to_group.custom_group'}}</span>

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

@@ -48,7 +48,12 @@
     <h3>{{i18n 'admin.wizard.type'}}</h3>
   </div>
   <div class="setting-value">
-    {{combo-box value=field.type content=types none="admin.wizard.field.type"}}
+    {{combo-box
+      value=field.type
+      content=types
+      options=(hash
+        none="admin.wizard.field.type"
+      )}}
   </div>
 </div>
 
@@ -79,7 +84,12 @@
       {{i18n 'admin.wizard.field.choices_label'}}
     </div>
 
-    {{combo-box value=field.choices_type content=choicesTypes none="admin.wizard.field.choices_type"}}
+    {{combo-box
+      value=field.choices_type
+      content=choicesTypes
+      options=(hash
+        none="admin.wizard.field.choices_type"
+      )}}
 
     {{#if choicesTranslation}}
       <div class="wizard-header small">
@@ -92,7 +102,12 @@
       <div class="wizard-header small">
         {{i18n 'admin.wizard.field.choices_preset.label'}}
       </div>
-      {{combo-box value=field.choices_preset content=presetChoices none='admin.wizard.none'}}
+      {{combo-box
+        value=field.choices_preset
+        content=presetChoices
+        options=(hash
+          none='admin.wizard.none'
+        )}}
       <div class="wizard-header small">
         {{i18n 'admin.wizard.field.choices_preset.filter'}}
       </div>
@@ -141,7 +156,9 @@
       <h3>{{i18n 'admin.wizard.field.property'}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box content=categoryPropertyTypes value=field.property}}
+      {{combo-box
+        content=categoryPropertyTypes
+        value=field.property}}
     </div>
   </div>
 {{/if}}

assets/javascripts/wizard-custom.js

@@ -64,6 +64,9 @@
 //= require discourse/helpers/category-link
 //= require discourse/helpers/user-avatar
 //= require discourse/helpers/format-username
+//= require discourse/helpers/component-for-collection
+//= require discourse/helpers/component-for-row
+//= require discourse/helpers/discourse-tag
 
 //= require discourse/services/app-events
 //= require discourse/services/emoji-store
@@ -97,6 +100,7 @@
 //= require jquery.putcursoratend.js
 //= require template_include.js
 //= require caret_position.js
+//= require popper.js
 
 //= require ./wizard/custom-wizard
 //= require_tree ./wizard/components

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

@@ -16,10 +16,12 @@
               {{toolbar-popup-menu-options
                 onPopupMenuAction=onPopupMenuAction
                 onExpand=(action b.action b)
-                title=b.title
-                headerIcon=b.icon
                 class=b.className
-                content=popupMenuOptions}}
+                content=popupMenuOptions
+                options=(hash
+                  popupTitle=b.title
+                  icon=b.icon
+                )}}
             {{else}}
               <div>{{d.icon}}</div>
               <button class='wizard-btn {{b.className}}' {{action b.action b}} title="{{b.title}}">