💅🏼 Imprve theme activation error messages (#756)
refs TryGhost/Ghost#8530 This PR takes care that the modals for theme activation gets the same treatment as theme upload modal: - differentiate between normal and fatal errors - list headings for each error type (fatal, normal or warning) - update test
This commit is contained in:
Aileen Nowak
Katharina Irrgang
parent
13f23d9125
commit
a270d2b183
|
|
@ -5,6 +5,8 @@ export default ModalComponent.extend({
|
|||
title: reads('model.title'),
|
||||
message: reads('model.message'),
|
||||
warnings: reads('model.warnings'),
|
||||
errors: reads('model.errors'),
|
||||
fatalErrors: reads('model.fatalErrors'),
|
||||
|
||||
'data-test-theme-warnings-modal': true
|
||||
});
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ export default Controller.extend({
|
|||
try {
|
||||
yield RSVP.all(validationPromises);
|
||||
return yield this.get('model').save();
|
||||
|
||||
} catch (error) {
|
||||
if (error) {
|
||||
notifications.showAPIError(error);
|
||||
|
|
@ -125,13 +124,43 @@ export default Controller.extend({
|
|||
|
||||
activateTheme(theme) {
|
||||
return theme.activate().then((theme) => {
|
||||
let themeName = theme.get('name');
|
||||
|
||||
if (!isEmpty(theme.get('warnings'))) {
|
||||
this.set('themeWarnings', theme.get('warnings'));
|
||||
this.set('showThemeWarningsModal', true);
|
||||
}
|
||||
|
||||
if (!isEmpty(theme.get('errors'))) {
|
||||
this.set('themeErrors', theme.get('errors'));
|
||||
this.set('showThemeWarningsModal', true);
|
||||
}
|
||||
|
||||
if (this.get('themeErrors') || this.get('themeWarnings')) {
|
||||
let message = `${themeName} activated successfully but some warnings/errors were detected.
|
||||
You are still able to use and activate the theme. Here is your report...`;
|
||||
this.set('message', message);
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (isThemeValidationError(error)) {
|
||||
this.set('themeWarnings', error.errors[0].errorDetails);
|
||||
let errors = error.errors[0].errorDetails;
|
||||
let fatalErrors = [];
|
||||
let normalErrors = [];
|
||||
|
||||
// to have a proper grouping of fatal errors and none fatal, we need to check
|
||||
// our errors for the fatal property
|
||||
if (errors.length > 0) {
|
||||
for (let i = 0; i < errors.length; i++) {
|
||||
if (errors[i].fatal) {
|
||||
fatalErrors.push(errors[i]);
|
||||
} else {
|
||||
normalErrors.push(errors[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.set('themeErrors', normalErrors);
|
||||
this.set('themeFatalErrors', fatalErrors);
|
||||
this.set('showThemeErrorsModal', true);
|
||||
return;
|
||||
}
|
||||
|
|
@ -167,6 +196,8 @@ export default Controller.extend({
|
|||
|
||||
hideThemeWarningsModal() {
|
||||
this.set('themeWarnings', null);
|
||||
this.set('themeErrors', null);
|
||||
this.set('themeFatalErrors', null);
|
||||
this.set('showThemeWarningsModal', false);
|
||||
this.set('showThemeErrorsModal', false);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,9 +10,35 @@
|
|||
<p data-test-theme-warnings-message>{{message}}</p>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if fatalErrors}}
|
||||
<div class="theme-validation-errordescription">
|
||||
<h2 class="theme-validation-errortype fatal">Fatal Errors</h2>
|
||||
<p><em>(Must-fix to activate theme)</em></p>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each fatalErrors as |error|}}
|
||||
{{gh-theme-error-li error=error}}
|
||||
{{/each}}
|
||||
|
||||
{{#if errors}}
|
||||
<div class="theme-validation-errordescription">
|
||||
<h2 class="theme-validation-errortype">Errors</h2>
|
||||
<p><em>(Very recommended to fix, functionality <span>could</span> be restricted)</em></p>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each errors as |error|}}
|
||||
{{gh-theme-error-li error=error}}
|
||||
{{/each}}
|
||||
|
||||
{{#if warnings}}
|
||||
<div class="theme-validation-errordescription">
|
||||
<h2 class="theme-validation-errortype">Warnings</h2>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each warnings as |error|}}
|
||||
{{gh-theme-error-li error=error}}
|
||||
{{/each}}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<header class="modal-header">
|
||||
<h1>
|
||||
{{#if theme}}
|
||||
{{#if validationWarnings}}
|
||||
{{#if hasWarningsOrErrors}}
|
||||
Upload successful with warnings/errors!
|
||||
{{else}}
|
||||
Upload successful!
|
||||
|
|
|
|||
|
|
@ -46,8 +46,10 @@
|
|||
{{#if showThemeWarningsModal}}
|
||||
{{gh-fullscreen-modal "theme-warnings"
|
||||
model=(hash
|
||||
title="Theme activated with warnings"
|
||||
title="Activated successful with warnings/errors!"
|
||||
warnings=themeWarnings
|
||||
errors=themeErrors
|
||||
message=message
|
||||
)
|
||||
close=(action "hideThemeWarningsModal")
|
||||
modifier="action wide"}}
|
||||
|
|
@ -56,8 +58,9 @@
|
|||
{{#if showThemeErrorsModal}}
|
||||
{{gh-fullscreen-modal "theme-warnings"
|
||||
model=(hash
|
||||
title="Theme activation failed"
|
||||
warnings=themeWarnings
|
||||
title="Activation failed"
|
||||
errors=themeErrors
|
||||
fatalErrors=themeFatalErrors
|
||||
)
|
||||
close=(action "hideThemeWarningsModal")
|
||||
modifier="action wide"}}
|
||||
|
|
|
|||
|
|
@ -511,7 +511,7 @@ describe('Acceptance: Settings - Design', function () {
|
|||
expect(
|
||||
find(testSelector('theme-warnings-title')).text().trim(),
|
||||
'modal title after activating invalid theme'
|
||||
).to.equal('Theme activation failed');
|
||||
).to.equal('Activation failed');
|
||||
|
||||
expect(
|
||||
find(testSelector('theme-warnings')).text(),
|
||||
|
|
@ -570,7 +570,7 @@ describe('Acceptance: Settings - Design', function () {
|
|||
expect(
|
||||
find(testSelector('theme-warnings-title')).text().trim(),
|
||||
'modal title after activating theme with warnings'
|
||||
).to.equal('Theme activated with warnings');
|
||||
).to.equal('Activated successful with warnings/errors!');
|
||||
|
||||
expect(
|
||||
find(testSelector('theme-warnings')).text(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue