🎨 improve importer errors/warnings display (#711)

refs TryGhost/Ghost#5422
- handles errors and warnings from returned from the server and improves visual display
- adds a reset so that errors are cleared when leaving the labs screen
- removes the unnecessary "Import failed" alert - we already show the errors on the screen, no point bugging the user even further

app/controllers/settings/labs.js

@@ -11,10 +11,11 @@ import run from 'ember-runloop';
 const {Promise} = RSVP;
 
 export default Controller.extend({
-    uploadButtonText: 'Import',
-    importErrors: '',
-    submitting: false,
+    importErrors: null,
+    importSuccessful: false,
     showDeleteAllModal: false,
+    submitting: false,
+    uploadButtonText: 'Import',
 
     importMimeType: ['application/json', 'application/zip', 'application/x-zip-compressed'],
 
@@ -79,6 +80,11 @@ export default Controller.extend({
         }
     }).drop(),
 
+    reset() {
+        this.set('importErrors', null);
+        this.set('importSuccessful', false);
+    },
+
     actions: {
         onUpload(file) {
             let formData = new FormData();
@@ -87,7 +93,8 @@ export default Controller.extend({
             let dbUrl = this.get('ghostPaths.url').api('db');
 
             this.set('uploadButtonText', 'Importing');
-            this.set('importErrors', '');
+            this.set('importErrors', null);
+            this.set('importSuccessful', false);
 
             return this._validate(file).then(() => {
                 formData.append('importfile', file);
@@ -99,9 +106,15 @@ export default Controller.extend({
                     contentType: false,
                     processData: false
                 });
-            }).then(() => {
+            }).then((response) => {
                 let store = this.get('store');
 
+                this.set('importSuccessful', true);
+
+                if (response.problems) {
+                    this.set('importErrors', response.problems);
+                }
+
                 // Clear the store, so that all the new data gets fetched correctly.
                 store.unloadAll();
 
@@ -128,8 +141,6 @@ export default Controller.extend({
                 if (response && response.errors && isEmberArray(response.errors)) {
                     this.set('importErrors', response.errors);
                 }
-
-                notifications.showAlert('Import Failed', {type: 'error', key: 'import.upload.failed'});
             }).finally(() => {
                 this.set('uploadButtonText', 'Import');
             });

app/routes/settings/labs.js

@@ -18,5 +18,11 @@ export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
 
     model() {
         return this.get('settings').reload();
+    },
+
+    resetController(controller, isExiting) {
+        if (isExiting) {
+            controller.reset();
+        }
     }
 });

app/styles/layouts/settings.css

@@ -303,6 +303,53 @@
     }
 }
 
+.gh-import-errors {
+    position: relative;
+    padding: 12px 10px 14px 10px;
+    border: 1px solid var(--lightgrey);
+    border-left-width: 5px;
+    border-left-color: var(--red);
+    color: var(--midgrey);
+    line-height: 1.4em;
+    letter-spacing: 0.2px;
+    background: #fff;
+    border-radius: 5px;
+    margin-bottom: 25px;
+}
+
+.gh-import-errors-warning {
+    border-left-color: var(--orange);
+}
+
+.gh-import-errors-title {
+    margin-bottom: 1em;
+    font-size: 1.8rem;
+    line-height: 1.15em;
+    font-weight: 600;
+    color: var(--red);
+}
+
+.gh-import-errors-warning .gh-import-errors-title {
+    color: var(--orange);
+}
+
+.gh-import-error {
+    margin-bottom: 1.75em;
+}
+
+.gh-import-error:last-of-type {
+    margin-bottom: 0;
+}
+
+.gh-import-error-message {
+    margin-bottom: 0.5em;
+    font-weight: 200;
+}
+
+.gh-import-error-entry pre {
+    margin: 0;
+    font-size: 10px;
+}
 
 /* Themes
 /* ---------------------------------------------------------- */

app/templates/settings/labs.hbs

@@ -11,14 +11,40 @@
             <div class="gh-setting-content">
                 <div class="gh-setting-title">Import content</div>
                 <div class="gh-setting-desc">Import posts from another Ghost installation</div>
-                {{partial "import-errors"}}
             </div>
             <div class="gh-setting-action">
                 <form id="settings-import" enctype="multipart/form-data">
                     {{gh-file-upload id="importfile" classNames="flex" uploadButtonText=uploadButtonText onUpload="onUpload" acceptEncoding=importMimeType}}
                 </form>
             </div>
         </div>
+
+        {{#if importErrors}}
+            <div class="gh-import-errors {{if importSuccessful "gh-import-errors-warning"}}">
+                <div class="gh-import-errors-title">
+                    {{#if importSuccessful}}
+                        Import successful with warnings
+                    {{else}}
+                        Import failed
+                    {{/if}}
+                </div>
+
+                {{#each importErrors as |error|}}
+                    <div class="gh-import-error">
+                        <p class="gh-import-error-message">
+                            {{#if error.help}}{{error.help}}: {{/if}}{{error.message}}
+                        </p>
+
+                        {{#if error.context}}
+                            <div class="gh-import-error-entry">
+                                <pre>{{error.context}}</pre>
+                            </div>
+                        {{/if}}
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
+
         <div class="gh-setting">
             <div class="gh-setting-content">
                 <div class="gh-setting-title">Export your content</div>