From 97c46cd1fb740cf2aa199b22bf246dcc190478d5 Mon Sep 17 00:00:00 2001
From: bkoval <bartlomiej.kowalczyk@wikia-inc.com>
Date: Fri, 24 Nov 2017 11:30:37 +0100
Subject: [PATCH 1/2] XW-3360 | User-friendly message for 403

---
 app/routes/application-error.js      | 14 ++++++++++++++
 app/templates/errors/application.hbs |  6 ++++--
 app/utils/errors.js                  | 15 +++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/routes/application-error.js b/app/routes/application-error.js
index 6f6eb3ba87e..118456a85ce 100644
--- a/app/routes/application-error.js
+++ b/app/routes/application-error.js
@@ -1,5 +1,6 @@
 import Route from '@ember/routing/route';
 import config from '../config/environment';
+import {getProductionErrorMessage, canAttemptRefresh} from '../utils/errors';
 
 export default Route.extend(
 	{
@@ -7,10 +8,23 @@ export default Route.extend(
 			if (config.wikiaEnv === 'dev') {
 				this.render('errors/application-dev');
 			} else {
+				this.get('controller.model').setProperties(
+					this.getProductionErrorContext()
+				);
+
 				this.render('errors/application');
 			}
 		},
 
+		getProductionErrorContext() {
+			const errorCode = this.get('controller.model.error.code');
+
+			return {
+				productionErrorMessage: getProductionErrorMessage(errorCode),
+				canAttemptRefresh: canAttemptRefresh(errorCode)
+			};
+		},
+
 		actions: {
 			reloadPage() {
 				window.location.reload();
diff --git a/app/templates/errors/application.hbs b/app/templates/errors/application.hbs
index b0dcb1995f8..623824c157d 100644
--- 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>{{model.productionErrorMessage}}</div>
+	{{#if model.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
index 04842b488d4..a29e6c616b2 100644
--- 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
 };

From 02fcdc1b47d5d2f12d37aef8a23f04373e623109 Mon Sep 17 00:00:00 2001
From: bkoval <bartlomiej.kowalczyk@wikia-inc.com>
Date: Fri, 24 Nov 2017 16:40:18 +0100
Subject: [PATCH 2/2] XW-4301 | Use controller to render error context

---
 app/controllers/application-error.js | 10 ++++++++++
 app/routes/application-error.js      | 14 --------------
 app/templates/errors/application.hbs |  4 ++--
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/controllers/application-error.js b/app/controllers/application-error.js
index a8ed6108ae7..907bf663e6e 100644
--- 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/routes/application-error.js b/app/routes/application-error.js
index 118456a85ce..6f6eb3ba87e 100644
--- a/app/routes/application-error.js
+++ b/app/routes/application-error.js
@@ -1,6 +1,5 @@
 import Route from '@ember/routing/route';
 import config from '../config/environment';
-import {getProductionErrorMessage, canAttemptRefresh} from '../utils/errors';
 
 export default Route.extend(
 	{
@@ -8,23 +7,10 @@ export default Route.extend(
 			if (config.wikiaEnv === 'dev') {
 				this.render('errors/application-dev');
 			} else {
-				this.get('controller.model').setProperties(
-					this.getProductionErrorContext()
-				);
-
 				this.render('errors/application');
 			}
 		},
 
-		getProductionErrorContext() {
-			const errorCode = this.get('controller.model.error.code');
-
-			return {
-				productionErrorMessage: getProductionErrorMessage(errorCode),
-				canAttemptRefresh: canAttemptRefresh(errorCode)
-			};
-		},
-
 		actions: {
 			reloadPage() {
 				window.location.reload();
diff --git a/app/templates/errors/application.hbs b/app/templates/errors/application.hbs
index 623824c157d..46f0e0992da 100644
--- a/app/templates/errors/application.hbs
+++ b/app/templates/errors/application.hbs
@@ -7,8 +7,8 @@
 </div>
 <div class="show-error-container">
 	<h1>Error</h1>
-	<div>{{model.productionErrorMessage}}</div>
-	{{#if model.canAttemptRefresh}}
+	<div>{{productionErrorContext.message}}</div>
+	{{#if productionErrorContext.canAttemptRefresh}}
 		<button class="wds-button" onclick="window.location.reload()">Refresh</button>
 	{{/if}}
 </div>