Merge pull request #278 from Wikia/XW-4301

XW-3360 | User-friendly message for 403
Wikia · Nov 27, 2017 · fbc4aa8 · fbc4aa8
2 parents 456e88f + 70e2131
commit fbc4aa8
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/app/controllers/application-error.js b/app/controllers/application-error.js
@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import {computed} from '@ember/object';
+import {getProductionErrorMessage, canAttemptRefresh} from '../utils/errors';
 
 export default Controller.extend({
 	additionalData: computed(function () {
@@ -13,5 +14,14 @@ export default Controller.extend({
 			.replace(new RegExp('\\n', 'g'), '<br />');
 
 		return stackTrace ? stackTrace : 'No stack trace available';
+	}),
+
+	productionErrorContext: computed(function () {
+		const errorCode = this.get('controller.model.error.code');
+
+		return {
+			message: getProductionErrorMessage(errorCode),
+			canAttemptRefresh: canAttemptRefresh(errorCode)
+		};
 	})
 });
diff --git a/app/templates/errors/application.hbs b/app/templates/errors/application.hbs
@@ -7,6 +7,8 @@
 </div>
 <div class="show-error-container">
 	<h1>Error</h1>
-	<div>Sorry, we couldn't load the page. Please try again.</div>
-	<button class="wds-button" onclick="window.location.reload()">Refresh</button>
+	<div>{{productionErrorContext.message}}</div>
+	{{#if productionErrorContext.canAttemptRefresh}}
+		<button class="wds-button" onclick="window.location.reload()">Refresh</button>
+	{{/if}}
 </div>
diff --git a/app/utils/errors.js b/app/utils/errors.js
@@ -1,5 +1,10 @@
 import {defineError} from 'ember-exex/error';
 
+const errorsMap = {
+	403: 'You do not have permissions to view this page.',
+	default: 'Sorry, we couldn\'t load the page. Please try again.'
+};
+
 const DesignSystemFetchError = defineError({
 	name: 'DesignSystemFetchError',
 	message: `Design System data couldn't be fetched`
@@ -56,6 +61,14 @@ const getFetchErrorMessage = function (response) {
 	}
 };
 
+const canAttemptRefresh = function (errorCode) {
+	return typeof errorCode === 'number' && errorCode >= 500;
+};
+
+const getProductionErrorMessage = function (errorCode) {
+	return errorsMap[errorCode] || errorsMap.default;
+};
+
 export {
 	getFetchErrorMessage,
 	DesignSystemFetchError,
@@ -67,4 +80,6 @@ export {
 	TrackingDimensionsFetchError,
 	WikiPageFetchError,
 	WikiVariablesFetchError,
+	canAttemptRefresh,
+	getProductionErrorMessage
 };