✨ display warnings after theme upload (#262)

refs TryGhost/Ghost#7362, requires TryGhost/Ghost#7367
- display any gscan warnings we get back from a successful upload to cater for the downgrade of missing `{{asset}}` helpers from an error to a warning

app/components/modals/upload-theme.js

@@ -8,6 +8,7 @@ import {
 } from 'ghost-admin/services/ajax';
 import run from 'ember-runloop';
 import injectService from 'ember-service/inject';
+import get from 'ember-metal/get';
 
 export default ModalComponent.extend({
 
@@ -92,7 +93,14 @@ export default ModalComponent.extend({
         },
 
         uploadSuccess(response) {
-            this.set('theme', response.themes[0]);
+            let [theme] = response.themes;
+
+            this.set('theme', theme);
+
+            if (get(theme, 'warnings.length') > 0) {
+                this.set('validationWarnings', theme.warnings);
+            }
+
             // invoke the passed in confirm action
             invokeAction(this, 'model.uploadSuccess', this.get('theme'));
         },

app/templates/components/modals/upload-theme.hbs

@@ -1,7 +1,11 @@
 <header class="modal-header">
     <h1>
         {{#if theme}}
-            Upload successful!
+            {{#if validationWarnings}}
+                Uploaded with warnings
+            {{else}}
+                Upload successful!
+            {{/if}}
         {{else if validationErrors}}
             Invalid theme
         {{else}}
@@ -13,10 +17,35 @@
 
 <div class="modal-body">
     {{#if theme}}
-        <p>
-            "{{themeName}}" uploaded successfully.
-            {{#if canActivateTheme}}Do you want to activate it now?{{/if}}
-        </p>
+        {{#if validationWarnings}}
+            <ul class="theme-validation-errors">
+                <li>
+                    <p>
+                        "{{themeName}}" uploaded successfully but some warnings were generated...
+                    </p>
+                </li>
+                {{#each validationWarnings as |error|}}
+                    <li>
+                        {{#if error.details}}
+                            {{{error.details}}}
+                        {{else}}
+                            {{{error.rule}}}
+                        {{/if}}
+
+                        <ul>
+                            {{#each error.failures as |failure|}}
+                                <li><code>{{failure.ref}}</code>{{#if failure.message}}: {{failure.message}}{{/if}}</li>
+                            {{/each}}
+                        </ul>
+                    </li>
+                {{/each}}
+            </ul>
+        {{else}}
+            <p>
+                "{{themeName}}" uploaded successfully.
+                {{#if canActivateTheme}}Do you want to activate it now?{{/if}}
+            </p>
+        {{/if}}
     {{else if displayOverwriteWarning}}
         <p>
             "{{fileThemeName}}" will overwrite an existing theme of the same name. Are you sure?

tests/acceptance/settings/general-test.js

@@ -516,7 +516,68 @@ describe('Acceptance: Settings - General', function () {
                 ).to.equal('Upload a theme');
             });
 
+            // theme upload handles validation warnings
+            andThen(() => {
+                server.post('/themes/upload/', function () {
+                    return new Mirage.Response(200, {}, {
+                        themes: [
+                            {
+                                name: 'blackpalm',
+                                package: {
+                                    name: 'BlackPalm',
+                                    version: '1.0.0'
+                                },
+                                warnings: [
+                                    {
+                                        level: 'warning',
+                                        rule: 'Assets such as CSS & JS must use the <code>{{asset}}</code> helper',
+                                        details: '<p>The listed files should be included using the <code>{{asset}}</code> helper.  For more information, please see the <a href="http://themes.ghost.org/docs/asset">asset helper documentation</a>.</p>',
+                                        failures: [
+                                            {
+                                                ref: '/assets/dist/img/apple-touch-icon.png'
+                                            },
+                                            {
+                                                ref: '/assets/dist/img/favicon.ico'
+                                            },
+                                            {
+                                                ref: '/assets/dist/css/blackpalm.min.css'
+                                            },
+                                            {
+                                                ref: '/assets/dist/js/blackpalm.min.js'
+                                            }
+                                        ],
+                                        code: 'GS030-ASSET-REQ'
+                                    }
+                                ]
+                            }
+                        ]
+                    });
+                });
+            });
+            fileUpload('.fullscreen-modal input[type="file"]', ['test'], {name: 'warning-theme.zip', type: 'application/zip'});
+            andThen(() => {
+                expect(
+                    find('.fullscreen-modal h1').text().trim(),
+                    'modal title after uploading theme with warnings'
+                ).to.equal('Uploaded with warnings');
+
+                expect(
+                    find('.theme-validation-errors').text(),
+                    'top-level warnings are displayed'
+                ).to.match(/The listed files should be included using the {{asset}} helper/);
+
+                expect(
+                    find('.theme-validation-errors').text(),
+                    'individual warning failures are displayed'
+                ).to.match(/\/assets\/dist\/img\/apple-touch-icon\.png/);
+
+                // reset to default mirage handlers
+                mockThemes(server);
+            });
+            click('button:contains("Close")');
+
             // theme upload handles success then close
+            click('a:contains("Upload a theme")');
             fileUpload('.fullscreen-modal input[type="file"]', ['test'], {name: 'theme-1.zip', type: 'application/zip'});
             andThen(() => {
                 expect(