made the changes discussed with Angus, some UI improvements and some edge-case validations

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

@@ -2,97 +2,84 @@ import {ajax} from 'discourse/lib/ajax';
 
 export default Ember.Controller.extend({
   init() {
-
     this._super();
-    this.set('selected', new Set());
+    this.set('selected', Ember.A());
-    this.set('filePath', []);
+    this.set('filePath', Ember.A());
-
-
   },
 
 
   actions: {
-
     checkChanged(event) {
-
       let selected = this.get('selected');
-
-
       if (event.target.checked) {
-
+        selected.addObject(event.target.id)
-
-        selected.add(event.target.id)
-
       } else if (!event.target.checked) {
-        selected.delete(event.target.id)
+        selected.removeObject(event.target.id)
       }
       console.log(selected);
       this.set('selected', selected)
-
-
     },
 
-
     export() {
       let wizards = this.get('selected');
       let url = Discourse.BaseUrl;
       let route = '/admin/wizards/transfer/export';
       url += route + '?';
-
+      if (!wizards.length) {
+        this.set('noneSelected', "Please select atleast one wizard")
+      } else {
+        this.set('noneSelected', '')
         wizards.forEach((wizard) => {
           let step = 'wizards[]=' + wizard;
           step += '&';
           url += step
         });
-
         location.href = url;
-
+      }
-      console.log(url)
-
     },
 
     setFilePath(event) {
-      console.log(event.target.files[0]);
-
       // 512 kb is the max file size
       let maxFileSize = 512 * 1024;
-
+      if (event.target.files[0] === undefined) {
+        this.get('filePath').length = 0
+        return
+      }
       if (maxFileSize < event.target.files[0].size) {
         this.set('fileError', 'The file size is too big')
       } else {
-
+        // emptying the array as we allow only one file upload at a time
-        this.set('filePath', event.target.files[0])
+        this.get('filePath').length = 0
-
+        // interestingly, this.get gives us the actual reference to the object so modifying it
+        // actually modifies the actual value
+        this.get('filePath').addObject(event.target.files[0])
+        console.log(this.get('filePath'))
       }
+    },
 
-    }
-
-    ,
     import() {
-
       let $formData = new FormData();
-      $formData.append('file', this.get('filePath'));
+      console.log(this.get('filePath'))
+      if (this.get('filePath').length) {
+        this.set('noFile', '')
+        $formData.append('file', this.get('filePath')[0]);
         console.log($formData);
-
         ajax('/admin/wizards/transfer/import', {
           type: 'POST',
           data: $formData,
           processData: false,
           contentType: false,
-
         }).then(result => {
           if (result.error) {
-          alert(result.error)
+            this.set('error', result.error)
-
           } else {
-          alert(result.success)
+            this.set('success_ids', result.success)
+            this.set('failure_ids', result.failed)
           }
         })
-
+      } else {
+        this.set('noFile', 'Please choose a file to export')
+      }
     }
-
-
   }
-
-
 });

assets/javascripts/discourse/custom-wizard-admin-route-map.js.es6

@@ -14,7 +14,6 @@ export default {
 
       this.route('adminWizardsTransfer', { path: '/transfer', resetNamespace: true });
 
-
     });
   }
 };

assets/javascripts/discourse/routes/admin-wizards-transfer.js.es6

@@ -1,11 +1,7 @@
 import CustomWizard from '../models/custom-wizard';
-export default Discourse.Route.extend({
 
+export default Discourse.Route.extend({
   model() {
     return CustomWizard.all()
   },
-  isEmberized: true
-  // isEmberized(){
-  //   return true;
-  // }
 })

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

@@ -1,8 +1,6 @@
-<h3>Select Wizards to export</h3>
+<h2>Export</h2>
-{{log this}}
 
-<form {{action 'export' wizards on="submit"}} class="form">
+<ul class="wizard-list-select">
-  <ul>
   {{#each model as |w|}}
 
     <li style="list-style-type: none;">
@@ -13,22 +11,45 @@
   {{/each}}
 
 </ul>
-  {{!--  <button type='submit' class='btn btn-primary'>--}}
+
-  {{!--    {{ i18n 'admin.wizard.transfer.export' }}--}}
+{{d-button id="export-button" class="btn btn-primary side" label="admin.wizard.transfer.export"
-  {{!--  </button>--}}
+           action=(action "export")}}
-  {{d-button label="admin.wizard.transfer.export" action=(action "export")}}
 
 
-</form>
 
+<h2>Import</h2>
 {{input id='file_url'  type="file" change=(action "setFilePath")}}
-<br />
-<br />
-{{d-button label="admin.wizard.transfer.import" action=(action "import")}}
 
-{{!--{{resumable-upload--}}
+
-{{!--  target="transfer/import"--}}
+
-{{!--  success=(action "jsonSuccess")--}}
+{{d-button id="import-button" class="btn btn-primary side" label="admin.wizard.transfer.import"
-{{!--  error=(action "jsonError")--}}
+           action=(action "import")}}
-{{!--  uploadText="Import"--}}
+
+{{#if this.noneSelected}}
+  <p>{{this.noneSelected}}</p>
+{{/if}}
+
+{{#if this.noFile}}
+  <p>{{this.noFile}}</p>
+{{/if}}
+{{#if this.fileError}}
+  <p>{{this.fileError}}</p>
+{{/if}}
+
+{{#if this.error}}
+  <p>{{this.error}}</p>
+{{/if}}
+
+{{#if this.success_ids}}
+  {{#each this.success_ids as |id|}}
+    <p>Wizard: {{id}} saved successfully</p>
+  {{/each}}
+{{/if}}
+
+{{#if this.failure_ids}}
+  {{#each this.failure_ids as |id|}}
+    <p>Wizard: {{id}} could not be saved</p>
+  {{/each}}
+{{/if}}
+
 

assets/stylesheets/wizard/wizard_transfer.scss

@@ -0,0 +1,19 @@
+#export-button{
+  margin-left: 30px;
+}
+#import-button{
+  margin-left: 15px;
+}
+#file_url {
+  display: inline;
+}
+
+.wizard-list-select {
+  display: inline-block;
+
+}
+
+.wizard-action-buttons{
+  display: inline-flex;
+  flex-direction: column;
+}

controllers/transfer.rb

@@ -1,27 +1,23 @@
 class CustomWizard::TransferController < ::ApplicationController
   before_action :ensure_logged_in
   before_action :ensure_admin
-
   skip_before_action :check_xhr, :only => [:export]
 
-
   def index
-
   end
 
   def export
-
     wizards = params['wizards']
     wizard_objects = []
-    wizards.each do
+    if wizards.nil?
-    |w|
+      render json: {error: 'Please select atleast one wizard'}
-      # p w
+      return
-
-      wizard_objects.push(PluginStore.get('custom_wizard', w.tr('-', '_')))
-
     end
-    puts 'wizard_objects'
+
-    p wizard_objects
+    wizards.each do |w|
+      wizard_objects.push(PluginStore.get('custom_wizard', w.tr('-', '_')))
+    end
+
     send_data wizard_objects.to_json, type: "application/json", disposition: 'attachment', filename: 'wizards.json'
 
   end
@@ -36,6 +32,10 @@ class CustomWizard::TransferController < ::ApplicationController
 
   def import
     file = File.read(params['file'].tempfile)
+    if file.nil?
+      render json: {error: "No file selected"}
+      return
+    end
     fileSize = file.size
     maxFileSize = 512 * 1024
     if maxFileSize < fileSize
@@ -49,25 +49,26 @@ class CustomWizard::TransferController < ::ApplicationController
     jsonObject = JSON.parse file
 
     countValid = 0
+    success_ids = []
+    failed_ids = []
     jsonObject.each do |o|
       # validate whether the given json is a valid "wizard"
       next unless CustomWizard::Template.new(o)
       countValid += 1
-
-
-      puts 'json entity'
       pluginStoreEntry = PluginStore.new 'custom_wizard'
       #plugin store detects the json object type and sets proper `type_name` for the entry
-      pluginStoreEntry.set(o['id'], o)
+      # this condition helps us avoid updating an existing wizard instead of adding a new one
-
+      saved = pluginStoreEntry.set(o['id'], o) unless pluginStoreEntry.get(o['id'])
+      success_ids.push o['id'] if !!saved
+      failed_ids.push o['id'] if !saved
     end
 
     if countValid == 0
       render json: {error: "File doesn't contain any valid wizards"}
     else
-      render json: {success: "Wizards imported successfully"}
+      render json: {success: success_ids, failed: failed_ids}
     end
   end
-  # admin/wizards/transfer/import
+
 
 end

plugin.rb

@@ -5,6 +5,7 @@
 # url: https://github.com/angusmcleod/discourse-custom-wizard
 
 register_asset 'stylesheets/wizard_custom_admin.scss'
+register_asset 'stylesheets/wizard/wizard_transfer.scss'
 register_asset 'lib/jquery.timepicker.min.js'
 register_asset 'lib/jquery.timepicker.scss'
 
@@ -12,6 +13,7 @@ config = Rails.application.config
 config.assets.paths << Rails.root.join('plugins', 'discourse-custom-wizard', 'assets', 'javascripts')
 config.assets.paths << Rails.root.join('plugins', 'discourse-custom-wizard', 'assets', 'stylesheets', 'wizard')
 
+
 if Rails.env.production?
   config.assets.precompile += %w{
     wizard-custom-lib.js