🎨 Improved theme validation messages (#812)

closes TryGhost/Ghost#8530

- Changed the wording for activation and uploading a theme to separate between error and warnings in the title and the body text for the modal
- Changed the wording of "Activated successful with warnings/errors" to "Activation successful with (warnings || errors)"

app/components/modals/theme-warnings.js

@@ -7,6 +7,7 @@ export default ModalComponent.extend({
     warnings: reads('model.warnings'),
     errors: reads('model.errors'),
     fatalErrors: reads('model.fatalErrors'),
+    canActivate: reads('model.canActivate'),
 
     'data-test-theme-warnings-modal': true
 });

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

@@ -1,5 +1,11 @@
 <header class="modal-header">
-    <h1 data-test-theme-warnings-title>{{title}}</h1>
+    <h1 data-test-theme-warnings-title>
+        {{#unless canActivate}}
+            {{title}}
+        {{else}}
+            {{title}} with {{#if errors}}errors{{else}}warnings{{/if}}
+        {{/unless}}
+    </h1>
 </header>
 <a class="close" href="#" title="Close" {{action "closeModal"}}>{{inline-svg "close"}}<span class="hidden">Close</span></a>
 

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

@@ -2,11 +2,11 @@
     <h1>
         {{#if theme}}
             {{#if hasWarningsOrErrors}}
-                Upload successful with warnings/errors!
+                Upload successful with {{#if validationErrors}}errors{{else}}warnings{{/if}}
             {{else}}
                 Upload successful!
             {{/if}}
-        {{else if validationErrors}}
+        {{else if (or validationErrors fatalValidationErrors)}}
             Invalid theme
         {{else}}
             Upload a theme
@@ -21,8 +21,8 @@
              <ul class="theme-validation-errors">
                 <li>
                     <p>
-                        "{{themeName}}" uploaded successfully but some warnings/errors were detected.
-                        You are still able to use and activate the theme. Here is your report...
+                        "{{themeName}}" uploaded successfully but some {{#if validationErrors}}errors{{else}}warnings{{/if}} were detected.
+                        You are still able to use and activate the theme. Here's your report...
                     </p>
                 </li>
 

app/templates/settings/design.hbs

@@ -46,10 +46,11 @@
             {{#if showThemeWarningsModal}}
                 {{gh-fullscreen-modal "theme-warnings"
                     model=(hash
-                        title="Activated successful with warnings/errors!"
+                        title="Activation successful"
                         warnings=themeWarnings
                         errors=themeErrors
                         message=message
+                        canActivate=true
                     )
                     close=(action "hideThemeWarningsModal")
                     modifier="action wide"}}
@@ -61,6 +62,7 @@
                         title="Activation failed"
                         errors=themeErrors
                         fatalErrors=themeFatalErrors
+                        canActivate=false
                     )
                     close=(action "hideThemeWarningsModal")
                     modifier="action wide"}}

tests/acceptance/settings/design-test.js

@@ -397,7 +397,7 @@ describe('Acceptance: Settings - Design', function () {
             expect(
                 find('.fullscreen-modal h1').text().trim(),
                 'modal title after uploading theme with warnings'
-            ).to.equal('Upload successful with warnings/errors!');
+            ).to.equal('Upload successful with warnings');
 
             await click(testSelector('toggle-details'));
 
@@ -576,7 +576,7 @@ describe('Acceptance: Settings - Design', function () {
             expect(
                 find(testSelector('theme-warnings-title')).text().trim(),
                 'modal title after activating theme with warnings'
-            ).to.equal('Activated successful with warnings/errors!');
+            ).to.equal('Activation successful with warnings');
 
             await click(testSelector('toggle-details'));