client-side improvements

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

@@ -1,67 +1,97 @@
 import { ajax } from 'discourse/lib/ajax';
+import { default as computed } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend({
   init() {
     this._super();
-    this.set('selected', Ember.A());
-    this.set('filePath', Ember.A());
+    this.setProperties({
+      selected: Ember.A()
+    });
   },
 
+  @computed('successIds', 'failureIds')
+  logs(successIds, failureIds) {
+    let logs = [];
+
+    if (successIds) {
+      logs.push(...successIds.map(id => {
+        return { id, type: 'success' };
+      }));
+    }
+
+    if (failureIds) {
+      logs.push(...failureIds.map(id => {
+        return { id, type: 'failure' };
+      }));
+    }
+
+    return logs;
+  },
+
+  hasLogs: Ember.computed.notEmpty('logs'),
+
   actions: {
     checkChanged(event) {
-      this.set('noneSelected','')
+      this.set('exportMessage', '');
+
       let selected = this.get('selected');
+
       if (event.target.checked) {
-        selected.addObject(event.target.id)
+        selected.addObject(event.target.id);
       } else if (!event.target.checked) {
-        selected.removeObject(event.target.id)
+        selected.removeObject(event.target.id);
       }
-      this.set('selected', selected)
+
+      this.set('selected', selected);
     },
 
     export() {
-      let wizards = this.get('selected');
+      const wizards = this.get('selected');
+
+      if (!wizards.length) {
+        this.set('exportMessage', I18n.t("admin.wizard.transfer.export.none_selected"));
+      } else {
+        this.set('exportMessage', '');
+
         let url = Discourse.BaseUrl;
         let route = '/admin/wizards/transfer/export';
         url += route + '?';
-      if (!wizards.length) {
-        this.set('noneSelected', I18n.t("admin.wizard.transfer.export.noneSelected"))
-      } else {
-        this.set('noneSelected', '')
+
         wizards.forEach((wizard) => {
           let step = 'wizards[]=' + wizard;
           step += '&';
-          url += step
+          url += step;
         });
+
         location.href = url;
       }
     },
 
     setFilePath(event) {
-      this.set('noFile', '')
+      this.set('importMessage', '');
+
       // 512 kb is the max file size
       let maxFileSize = 512 * 1024;
+
       if (event.target.files[0] === undefined) {
-        this.get('filePath').length = 0
-        return
+        this.set('filePath', null);
+        return;
       }
+
       if (maxFileSize < event.target.files[0].size) {
-        this.set('fileSizeError', I18n.t('admin.wizard.transfer.import.fileSizeError'))
+        this.set('importMessage', I18n.t('admin.wizard.transfer.import.file_size_error'));
       } else {
-        this.set('fileSizeError', '')
-        // emptying the array as we allow only one file upload at a time
-        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])
+        this.set('filePath', event.target.files[0]);
       }
     },
 
     import() {
+      const filePath = this.get('filePath');
       let $formData = new FormData();
-      if (this.get('filePath').length) {
-        this.set('noFile', '')
-        $formData.append('file', this.get('filePath')[0]);
+
+      if (filePath) {
+        $formData.append('file', filePath);
+
         ajax('/admin/wizards/transfer/import', {
           type: 'POST',
           data: $formData,
@@ -69,14 +99,20 @@ export default Ember.Controller.extend({
           contentType: false,
         }).then(result => {
           if (result.error) {
-            this.set('error', result.error)
+            this.set('error', result.error);
           } else {
-            this.set('success_ids', result.success)
-            this.set('failure_ids', result.failed)
+            this.setProperties({
+              successIds: result.success,
+              failureIds: result.failed,
+              fileName: $('#file-url')[0].files[0].name
+            });
           }
-        })
+
+          this.set('filePath', null);
+          $('#file-url').val('');
+        });
       } else {
-        this.set('noFile',I18n.t("admin.wizard.transfer.import.noFile"))
+        this.set('importMessage', I18n.t("admin.wizard.transfer.import.no_file"));
       }
     }
   }

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

@@ -1,44 +1,61 @@
 <div class="container export">
   <h2>{{i18n 'admin.wizard.transfer.export.label'}}</h2>
+  
   <ul class="wizard-list-select">
     {{#each model as |w|}}
       <li>
-      {{input type="checkbox" id=(dasherize w.id) change=(action 'checkChanged')}}
-      {{#link-to "adminWizard" (dasherize w.id)}}{{w.name}}{{/link-to}}
+        {{input type="checkbox"
+                id=(dasherize w.id)
+                change=(action 'checkChanged')}}
+        {{#link-to "adminWizard" (dasherize w.id)}}
+          {{w.name}}
+        {{/link-to}}
       </li>
     {{/each}}
   </ul>
-  {{d-button id="export-button" class="btn btn-primary side" label="admin.wizard.transfer.export.label" action=(action "export")}}
-  {{#if this.noneSelected}}
-    <p>{{this.noneSelected}}</p>
+  
+  {{d-button id="export-button"
+             class="btn btn-primary side"
+             label="admin.wizard.transfer.export.label"
+             action=(action "export")}}
+  
+  {{#if exportMessage}}
+    <div class="export-message">
+      {{exportMessage}}
+    </div>
   {{/if}}
 </div>
 
 <div class="container import">
   <h2>{{i18n 'admin.wizard.transfer.import.label'}}</h2>
-{{input id='file_url'  type="file" change=(action "setFilePath")}}
-{{d-button id="import-button" class="btn btn-primary side" label="admin.wizard.transfer.import.label" action=(action "import")}}
-  {{#if this.noFile}}
-    <p>{{this.noFile}}</p>
-  {{/if}}
 
-  {{#if this.fileSizeError}}
-    <p>{{this.fileSizeError}}</p>
-  {{/if}}
+  <div class="controls">
+    {{input id='file-url' type="file" change=(action "setFilePath")}}
+    {{d-button id="import-button"
+               class="btn btn-primary side"
+               label="admin.wizard.transfer.import.label"
+               action=(action "import")}}
     
-  {{#if this.success_ids}}
-    {{#each this.success_ids as |id|}}
-      <p>{{i18n "admin.wizard.transfer.import.success" id=id}}</p>
-    {{/each}}
-  {{/if}}
-
-  {{#if this.failure_ids}}
-    {{#each this.failure_ids as |id|}}
-      <p>{{i18n "admin.wizard.transfer.import.failure" id=id}}</p>
-    {{/each}}
+    {{#if importMessage}}
+      <div class="import-message">
+        {{importMessage}}
+      </div>
     {{/if}}
   </div>
-{{!-- server side error--}}
-{{#if this.error}}
-  <p>{{this.error}}</p>
+  
+  {{#if hasLogs}}
+    <div class="import-logs">
+      <div class="title">
+        {{i18n 'admin.wizard.transfer.import.logs' fileName=fileName}}
+      </div>
+      
+      <ul>
+        {{#each logs as |l|}}
+          <li class="import-log">
+            {{i18n (concat 'admin.wizard.transfer.import.' l.type) id=l.id}}
+          </li>
+        {{/each}}
+      </ul>
+    </div>
   {{/if}}
+</div>

assets/stylesheets/wizard_custom_admin.scss

@@ -482,7 +482,12 @@
 }
 
 // Tansfer tab
-#file_url {
+
+.admin-wizards-transfer .admin-container .container {
+  padding-top: 20px;
+}
+
+#file-url {
   display: block;
   margin-bottom: 10px;
 }
@@ -495,7 +500,16 @@
   flex-direction: column;
 }
 
-.container{
-  margin-bottom: 20px;
+.import-logs {
+  margin-top: 20px;
+  
+  .title {
+    font-weight: 800;
+    margin-bottom: 10px;
+  }
+  
+  ul {
+    list-style: none;
+  }
 }
 

config/locales/client.en.yml

@@ -219,13 +219,14 @@ en:
           nav_label: "Transfer"
           export:
             label: "Export"
-            noneSelected: "Please select atleast one wizard"
+            none_selected: "Please select atleast one wizard"
           import:
             label: "Import"
-            success: "Wizard: {{id}} saved successfully"
-            failure: "Wizard: {{id}} could not be saved"
-            noFile: "Please choose a file to import"
-            fileSizeError: "The file size is too big"
+            logs: "Import logs for {{fileName}}"
+            success: 'Wizard "{{id}}" saved successfully'
+            failure: 'Wizard "{{id}}" could not be saved'
+            no_file: "Please choose a file to import"
+            file_size_error: "The file size is too big"
 
   wizard_js:
     location: