FEATURE: Import customizations from a JSON file

app/assets/javascripts/admin/controllers/admin-customize-css-html.js.es6

@@ -1,3 +1,5 @@
+import showModal from 'discourse/lib/show-modal';
+
 /**
   This controller supports interface for creating custom CSS skins in Discourse.
 
@@ -21,6 +23,10 @@ export default Ember.ArrayController.extend({
       this.set('selectedItem', item);
     },
 
+    importModal: function() {
+      showModal('upload-customization');
+    },
+
     /**
       Select a given style
 

app/assets/javascripts/admin/models/site_customization.js

@@ -78,6 +78,7 @@ Discourse.SiteCustomization = Discourse.Model.extend({
       siteCustomization.set('savingStatus', I18n.t('saved'));
       siteCustomization.set('saving',false);
       siteCustomization.startTrackingChanges();
+      return siteCustomization;
     });
   },
 

app/assets/javascripts/admin/templates/customize_css_html.hbs

@@ -8,6 +8,7 @@
   <button {{action "newCustomization"}} class='btn'>
     {{fa-icon "plus"}}{{i18n 'admin.customize.new'}}
   </button>
+  {{d-button action="importModal" icon="upload" label="admin.customize.import"}}
 </div>
 
 {{#if selectedItem}}

app/assets/javascripts/discourse/components/json-file-uploader.js.es6

@@ -0,0 +1,76 @@
+
+export default Em.Component.extend({
+  fileInput: null,
+  loading: false,
+  expectedRootObjectName: null,
+
+  classNames: ['json-uploader'],
+
+  _initialize: function() {
+    const $this = this.$();
+    const self = this;
+
+    const $fileInput = $this.find('#js-file-input');
+    this.set('fileInput', $fileInput[0]);
+
+    $fileInput.on('change', function() {
+      self.fileSelected(this.files);
+    });
+
+    const $fileSelect = $this.find('.fileSelect');
+
+    $fileSelect.on('dragover dragenter', function(e) {
+      if (e.preventDefault) e.preventDefault();
+      return false;
+    });
+    $fileSelect.on('drop', function(e) {
+      if (e.preventDefault) e.preventDefault();
+
+      self.fileSelected(e.dataTransfer.files);
+      return false;
+    });
+
+  }.on('didInsertElement'),
+
+  setReady: function() {
+    let parsed;
+    try {
+      parsed = JSON.parse(this.get('value'));
+    } catch (e) {
+      this.set('ready', false);
+      return;
+    }
+
+    const rootObject = parsed[this.get('expectedRootObjectName')];
+
+    if (rootObject !== null && rootObject !== undefined) {
+      this.set('ready', true);
+    } else {
+      this.set('ready', false);
+    }
+  }.observes('destination', 'expectedRootObjectName'),
+
+  actions: {
+    selectFile: function() {
+      const $fileInput = $(this.get('fileInput'));
+      $fileInput.click();
+    }
+  },
+
+  fileSelected(fileList) {
+    const self = this;
+    const numFiles = fileList.length;
+    const firstFile = fileList[0];
+
+    this.set('loading', true);
+
+    let reader = new FileReader();
+    reader.onload = function(evt) {
+      self.set('value', evt.target.result);
+      self.set('loading', false);
+    };
+
+    reader.readAsText(firstFile);
+  }
+
+});

app/assets/javascripts/discourse/controllers/upload-customization.js.es6

@@ -0,0 +1,52 @@
+import ModalFunctionality from 'discourse/mixins/modal-functionality';
+
+export default Ember.Controller.extend(ModalFunctionality, {
+  notReady: Em.computed.not('ready'),
+
+  needs: ['admin-customize-css-html'],
+
+  title: "hi",
+
+  ready: function() {
+    let parsed;
+    try {
+      parsed = JSON.parse(this.get('customizationFile'));
+    } catch (e) {
+      return false;
+    }
+
+    return !!parsed["site_customization"];
+  }.property('customizationFile'),
+
+  actions: {
+    createCustomization: function() {
+      const self = this;
+      const object = JSON.parse(this.get('customizationFile')).site_customization;
+
+      // Slight fixup before creating object
+      object.enabled = false;
+      delete object.id;
+      delete object.key;
+
+      const customization = Discourse.SiteCustomization.create(object);
+
+      this.set('loading', true);
+      customization.save().then(function(customization) {
+        self.send('closeModal');
+        self.set('loading', false);
+
+        const parentController = self.get('controllers.admin-customize-css-html');
+        parentController.pushObject(customization);
+        parentController.set('selectedItem', customization);
+      }).catch(function(xhr) {
+        self.set('loading', false);
+        if (xhr.responseJSON) {
+          bootbox.alert(xhr.responseJSON.errors.join("<br>"));
+        } else {
+          bootbox.alert(I18n.t('generic_error'));
+        }
+      });
+    }
+  }
+
+});

app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs

@@ -0,0 +1,10 @@
+<div class="jsfu-file">
+  <input id="js-file-input" type="file" style="display:none;" accept=".json,application/json">
+  {{d-button class="fileSelect" action="selectFile" class="" icon="upload" label="upload_selector.select_file"}}
+  {{conditional-loading-spinner condition=loading size="small"}}
+</div>
+<div class="jsfu-separator">{{i18n "alternation"}}</div>
+<div class="jsfu-paste">
+  {{textarea value=value}}
+</div>
+

app/assets/javascripts/discourse/templates/modal/upload-customization.hbs

@@ -0,0 +1,8 @@
+<form {{action "dummy" on="submit"}}>
+  <div class='modal-body'>
+    {{json-file-uploader value=customizationFile}}
+  </div>
+  <div class="modal-footer">
+    {{d-button class='btn-primary' action='createCustomization' type='submit' disabled=notReady icon="plus" label='admin.customize.import'}}
+  </div>
+</form>

app/assets/javascripts/discourse/views/upload-customization.js.es6

@@ -0,0 +1,6 @@
+import ModalBodyView from "discourse/views/modal-body";
+
+export default ModalBodyView.extend({
+  templateName: 'modal/upload-customization',
+  title: I18n.t('admin.customize.import_title')
+});

app/assets/stylesheets/common/base/modal.scss

@@ -138,6 +138,29 @@
     .raw-email-textarea {
       height: 300px;
     }
+    .json-uploader {
+      display: table-row;
+      .jsfu-file {
+        display: table-cell;
+        vertical-align: middle;
+        min-width: 120px;
+      }
+      .jsfu-separator {
+        vertical-align: middle;
+        display: table-cell;
+        font-size: 36px;
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+      .jsfu-paste {
+        display: table-cell;
+        width: 100%;
+        textarea {
+          margin-bottom: 0;
+          margin-top: 4px;
+        }
+      }
+    }
   }
   .password-confirmation {
     display: none;

app/serializers/site_customization_serializer.rb

@@ -1,6 +1,6 @@
 class SiteCustomizationSerializer < ApplicationSerializer
 
-  attributes :name, :enabled, :created_at, :updated_at,
+  attributes :id, :name, :key, :enabled, :created_at, :updated_at,
              :stylesheet, :header, :footer, :top,
              :mobile_stylesheet, :mobile_header, :mobile_footer, :mobile_top,
              :head_tag, :body_tag

config/locales/client.en.yml

@@ -143,6 +143,7 @@ en:
     every_two_weeks: "every two weeks"
     every_three_days: "every three days"
     max_of_count: "max of {{count}}"
+    alternation: "or"
     character_count:
       one: "{{count}} character"
       other: "{{count}} characters"
@@ -849,6 +850,7 @@ en:
       hint: "(you can also drag & drop into the editor to upload them)"
       hint_for_supported_browsers: "(you can also drag and drop or paste images into the editor to upload them)"
       uploading: "Uploading"
+      select_file: "Select File"
       image_link: "link your image will point to"
 
     search:
@@ -1894,6 +1896,8 @@ en:
         save: "Save"
         new: "New"
         new_style: "New Style"
+        import: "Import"
+        import_title: "Select a file or paste text"
         delete: "Delete"
         delete_confirm: "Delete this customization?"
         about: "Modify CSS stylesheets and HTML headers on the site. Add a customization to start."