Merge pull request #690 from appirio-tech/SUP-3017-error-page

Add error messages for all cases

Author: nlitwin

app/submissions/submission-error/submission-error.jade

@@ -0,0 +1,3 @@
+.panel-body
+  p.tc-error-messages.submissions-access-error(ng-bind="submissions.errorMessage")
+

app/submissions/submissions.controller.js

@@ -6,23 +6,30 @@
   SubmissionsController.$inject = ['challengeToSubmitTo', '$state'];
 
   function SubmissionsController(challengeToSubmitTo, $state) {
-
     var vm = this;
 
-    var challenge = challengeToSubmitTo.challenge;
-    vm.challengeTitle = challenge.name;
-    vm.challengeId = challenge.id;
-    vm.track = challenge.track.toLowerCase();
-
-    activate();
+    vm.error = !!challengeToSubmitTo.error;
 
-    function activate() {
-      var track = challengeToSubmitTo.challenge.track;
+    if (vm.error) {
+      vm.errorType = challengeToSubmitTo.error.type;
+      vm.errorMessage = challengeToSubmitTo.error.message;
+      vm.challengeError = vm.errorType === 'challenge';
+    }
 
-      if (track === 'DESIGN') {
-        $state.go('submissions.file.design');
-      } else if (track === 'DEVELOP') {
-        $state.go('submissions.file.develop')
+    if (challengeToSubmitTo.challenge) {
+      var challenge = challengeToSubmitTo.challenge;
+      vm.challengeTitle = challenge.name;
+      vm.challengeId = challenge.id;
+      vm.track = challenge.track.toLowerCase();
+
+      if (challengeToSubmitTo.error) {
+        $state.go('submissions.file.error');
+      } else {
+        if (challenge.track === 'DESIGN') {
+          $state.go('submissions.file.design');
+        } else if (challenge.track === 'DEVELOP') {
+          $state.go('submissions.file.develop')
+        }
       }
     }
   }

app/submissions/submissions.jade

@@ -1,5 +1,5 @@
 .panel-page
-  .panel-header.flex.space-between
+  .panel-header.flex.space-between(ng-if="!submissions.challengeError")
     a.panel-header__back-button.flex.space-between.middle(ng-href="https://www.{{DOMAIN}}/challenge-details/{{submissions.challengeId}}/?type={{submissions.track}}")
 
       //- TODO: Replace below with svg tag

app/submissions/submissions.routes.js

@@ -29,13 +29,18 @@
 
             var userHandle = UserService.getUserIdentity().handle;
 
+            var error = null;
+
             return ChallengeService.getUserChallenges(userHandle, params)
               .then(function(challenge) {
-                challenge = challenge[0];
+                challenge = challenge[0].plain();
 
                 if (!challenge) {
-                  // TODO: There should be a challenge, redirect?
-                  alert('User is not associated with this challenge.');
+                  setErrorMessage('challenge', 'This is not a valid challenge. Use your browser\'s back button to return.');
+                  return {
+                    error: error,
+                    challenge: null
+                  };
                 }
                 var phaseType;
                 var phaseId;
@@ -57,26 +62,43 @@
                   return false;
                 });
 
+                if (!isPhaseSubmission) {
+                  setErrorMessage('phase', 'Submission phases are not currently open for this challenge.')
+                }
+
                 var isSubmitter = _.some(challenge.userDetails.roles, function(role) {
                   return role === 'Submitter';
                 });
 
-                if (!isPhaseSubmission || !isSubmitter) {
-                // TODO: Where do we redirect if you can't submit?
-                  alert('You should not have access to this page');
+                if (!isSubmitter) {
+                  setErrorMessage('submitter', 'You do not have a submitter role for this challenge.')
                 }
 
                 return {
+                  error: error,
                   challenge: challenge,
                   phaseType: phaseType,
                   phaseId: phaseId
                 };
               })
               .catch(function(err) {
-                console.log('ERROR GETTING CHALLENGE: ', err);
-                alert('There was an error accessing this page');
-                // TODO: Where do we redirect if there is an error?
+                setErrorMessage('challenge', 'There was an error getting information for this challenge.');
+
+                return {
+                  error: error,
+                  challenge: null
+                };
               });
+
+            function setErrorMessage(type, message) {
+              // Sets the error as the first error encountered
+              if (!error) {
+                error = {
+                  type: type,
+                  message: message
+                };
+              }
+            }
           }]
         }
       },
@@ -85,6 +107,10 @@
         abstract: true,
         template: '<ui-view/>'
       },
+      'submissions.file.error': {
+        url: '',
+        templateUrl: 'submissions/submission-error/submission-error.html',
+      },
       'submissions.file.design': {
         url:'',
         templateUrl: 'submissions/submit-design-files/submit-design-files.html',
@@ -96,7 +122,7 @@
         templateUrl: 'submissions/submit-develop-files/submit-develop-files.html',
         controller: 'SubmitDevelopFilesController',
         controllerAs: 'vm',
-      },
+      }
     };
 
     for (var name in states) {

app/submissions/submissions.spec.js

@@ -33,20 +33,38 @@ describe('Submissions Controller', function() {
     expect(vm).to.exist;
   });
 
-  it('has properties on vm from the routes resolve', function() {
+  it('sets error properties when there is an error passed down', function() {
+    controller = $controller('SubmissionsController', {
+      challengeToSubmitTo: {
+        challenge: null,
+        error: {
+          type: 'challenge',
+          message: 'error getting challenge information'
+        }
+      },
+      $state: state
+    });
+    vm = controller;
+
+    expect(vm.errorType).to.equal('challenge');
+    expect(vm.errorMessage).to.equal('error getting challenge information');
+    expect(vm.challengeError).to.be.true;
+  });
+
+  it('sets challenge properties when there is a challenge from the routes resolve', function() {
     expect(vm.challengeTitle).to.equal(mockChallenge.challenge.name);
     expect(vm.challengeId).to.equal(30049240);
     expect(vm.track).to.equal(mockChallenge.challenge.track.toLowerCase());
   });
 
+
   describe('routes to the correct child state for', function() {
     it('design challenges', function() {
 
       expect(state.go).calledWith('submissions.file.design');
     });
 
     it('develop challenges', function() {
-
       controller = $controller('SubmissionsController', {
         challengeToSubmitTo: {
           challenge: {
@@ -62,5 +80,24 @@ describe('Submissions Controller', function() {
       expect(state.go).calledWith('submissions.file.develop');
     });
 
+    it('errors', function() {
+      controller = $controller('SubmissionsController', {
+        challengeToSubmitTo: {
+          challenge: {
+            name: 'Challenge Name',
+            track: 'DEVELOP',
+            id: 30049240
+          },
+          error: {
+            type: 'phase',
+            message: 'No open submissions phase'
+          }
+        },
+        $state: state
+      });
+      vm = controller;
+
+      expect(state.go).calledWith('submissions.file.error');
+    });
   });
 });

assets/css/submissions/submissions.scss

@@ -44,3 +44,9 @@
     }
   }
 }
+
+.submissions-access-error {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}