Update create storage page to use toast notifications

Author: spadgett

app/scripts/controllers/createPersistentVolumeClaim.js

@@ -17,9 +17,9 @@ angular.module('openshiftConsole')
                        AuthorizationService,
                        DataService,
                        Navigate,
+                       NotificationsService,
                        ProjectsService,
                        keyValueEditorUtils) {
-    $scope.alerts = {};
     $scope.projectName = $routeParams.project;
     $scope.accessModes="ReadWriteOnce";
     $scope.claim = {};
@@ -38,6 +38,19 @@ angular.module('openshiftConsole')
       }
     ];
 
+    var hideErrorNotifications = function() {
+      NotificationsService.hideNotification("create-pvc-error");
+    };
+
+    var navigateBack = function() {
+      $window.history.back();
+    };
+
+    $scope.cancel = function() {
+      hideErrorNotifications();
+      navigateBack();
+    };
+
     ProjectsService
       .get($routeParams.project)
       .then(_.spread(function(project, context) {
@@ -51,21 +64,27 @@ angular.module('openshiftConsole')
         }
 
         $scope.createPersistentVolumeClaim = function() {
+          hideErrorNotifications();
           if ($scope.createPersistentVolumeClaimForm.$valid) {
             $scope.disableInputs = true;
             var claim = generatePersistentVolumeClaim();
             DataService.create('persistentvolumeclaims', null, claim, context)
-              .then(function() { // Success
-                // Return to the previous page
-                $window.history.back();
+              .then(function(claim) { // Success
+                NotificationsService.addNotification({
+                  type: "success",
+                  message: "Persistent volume claim " + claim.metadata.name + " successfully created."
+                });
+
+                navigateBack();
               },
               function(result) { // Failure
                 $scope.disableInputs = false;
-                $scope.alerts['create-persistent-volume-claim'] = {
-                    type: "error",
-                    message: "An error occurred requesting storage claim.",
-                    details: $filter('getErrorDetails')(result)
-                };
+                NotificationsService.addNotification({
+                  id: "create-pvc-error",
+                  type: "error",
+                  message: "An error occurred requesting storage.",
+                  details: $filter('getErrorDetails')(result)
+                });
               });
           }
         };

app/views/create-persistent-volume-claim.html

@@ -12,7 +12,6 @@
             <div class="row">
               <div class="col-md-10 col-md-offset-1">
                 <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
-                <alerts alerts="alerts"></alerts>
                 <div class="mar-top-xl">
                   <h1>Create Storage</h1>
                   <div class="help-block">
@@ -28,7 +27,7 @@ <h1>Create Storage</h1>
                                 ng-click="createPersistentVolumeClaim()"
                                 ng-disabled="createPersistentVolumeClaimForm.$invalid || disableInputs"
                                 value="">Create</button>
-                        <a class="btn btn-default btn-lg" href="" back>Cancel</a>
+                        <a class="btn btn-default btn-lg" href="" ng-click="cancel()" role="button">Cancel</a>
                       </div>
                     </fieldset>
                   </form>

app/views/directives/osc-persistent-volume-claim.html

@@ -69,6 +69,7 @@
           ng-pattern="nameValidation.pattern"
           ng-maxlength="nameValidation.maxlength"
           placeholder="my-storage-claim"
+          take-focus
           select-on-focus
           autocorrect="off"
           autocapitalize="off"

dist/scripts/scripts.js

@@ -8544,17 +8544,25 @@ kubernetes:c.VERSION.kubernetes
 c.withUser(), a.cliDownloadURL = d.CLI, a.cliDownloadURLPresent = a.cliDownloadURL && !_.isEmpty(a.cliDownloadURL), a.loginBaseURL = b.openshiftAPIBaseUrl(), a.sessionToken = c.UserStore().getToken(), a.showSessionToken = !1, a.toggleShowSessionToken = function() {
 a.showSessionToken = !a.showSessionToken;
 };
-} ]), angular.module("openshiftConsole").controller("CreatePersistentVolumeClaimController", [ "$filter", "$routeParams", "$scope", "$window", "ApplicationGenerator", "AuthorizationService", "DataService", "Navigate", "ProjectsService", "keyValueEditorUtils", function(a, b, c, d, e, f, g, h, i, j) {
-c.alerts = {}, c.projectName = b.project, c.accessModes = "ReadWriteOnce", c.claim = {}, c.breadcrumbs = [ {
+} ]), angular.module("openshiftConsole").controller("CreatePersistentVolumeClaimController", [ "$filter", "$routeParams", "$scope", "$window", "ApplicationGenerator", "AuthorizationService", "DataService", "Navigate", "NotificationsService", "ProjectsService", "keyValueEditorUtils", function(a, b, c, d, e, f, g, h, i, j, k) {
+c.projectName = b.project, c.accessModes = "ReadWriteOnce", c.claim = {}, c.breadcrumbs = [ {
 title:c.projectName,
 link:"project/" + c.projectName
 }, {
 title:"Storage",
 link:"project/" + c.projectName + "/browse/storage"
 }, {
 title:"Create Storage"
-} ], i.get(b.project).then(_.spread(function(e, i) {
-function k() {
+} ];
+var l = function() {
+i.hideNotification("create-pvc-error");
+}, m = function() {
+d.history.back();
+};
+c.cancel = function() {
+l(), m();
+}, j.get(b.project).then(_.spread(function(d, e) {
+function j() {
 var a = {
 kind:"PersistentVolumeClaim",
 apiVersion:"v1",
@@ -8572,23 +8580,27 @@ requests:{}
 a.spec.accessModes = [ c.claim.accessModes || "ReadWriteOnce" ];
 var b = c.claim.unit || "Mi";
 if (a.spec.resources.requests.storage = c.claim.amount + b, c.claim.selectedLabels) {
-var d = j.mapEntries(j.compactEntries(c.claim.selectedLabels));
+var d = k.mapEntries(k.compactEntries(c.claim.selectedLabels));
 _.isEmpty(d) || _.set(a, "spec.selector.matchLabels", d);
 }
 return c.claim.storageClass && "No Storage Class" !== c.claim.storageClass.metadata.name && (a.metadata.annotations["volume.beta.kubernetes.io/storage-class"] = c.claim.storageClass.metadata.name), a;
 }
-return c.project = e, c.breadcrumbs[0].title = a("displayName")(e), f.canI("persistentvolumeclaims", "create", b.project) ? void (c.createPersistentVolumeClaim = function() {
-if (c.createPersistentVolumeClaimForm.$valid) {
+return c.project = d, c.breadcrumbs[0].title = a("displayName")(d), f.canI("persistentvolumeclaims", "create", b.project) ? void (c.createPersistentVolumeClaim = function() {
+if (l(), c.createPersistentVolumeClaimForm.$valid) {
 c.disableInputs = !0;
-var b = k();
-g.create("persistentvolumeclaims", null, b, i).then(function() {
-d.history.back();
+var b = j();
+g.create("persistentvolumeclaims", null, b, e).then(function(a) {
+i.addNotification({
+type:"success",
+message:"Persistent volume claim " + a.metadata.name + " successfully created."
+}), m();
 }, function(b) {
-c.disableInputs = !1, c.alerts["create-persistent-volume-claim"] = {
+c.disableInputs = !1, i.addNotification({
+id:"create-pvc-error",
 type:"error",
-message:"An error occurred requesting storage claim.",
+message:"An error occurred requesting storage.",
 details:a("getErrorDetails")(b)
-};
+});
 });
 }
 }) :void h.toErrorPage("You do not have authority to create persistent volume claims in project " + b.project + ".", "access_denied");

dist/scripts/templates.js

@@ -4641,7 +4641,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"row\">\n" +
     "<div class=\"col-md-10 col-md-offset-1\">\n" +
     "<breadcrumbs breadcrumbs=\"breadcrumbs\"></breadcrumbs>\n" +
-    "<alerts alerts=\"alerts\"></alerts>\n" +
     "<div class=\"mar-top-xl\">\n" +
     "<h1>Create Storage</h1>\n" +
     "<div class=\"help-block\">\n" +
@@ -4653,7 +4652,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<osc-persistent-volume-claim model=\"claim\" project-name=\"projectName\"></osc-persistent-volume-claim>\n" +
     "<div class=\"button-group gutter-bottom\">\n" +
     "<button type=\"submit\" class=\"btn btn-primary btn-lg\" ng-click=\"createPersistentVolumeClaim()\" ng-disabled=\"createPersistentVolumeClaimForm.$invalid || disableInputs\" value=\"\">Create</button>\n" +
-    "<a class=\"btn btn-default btn-lg\" href=\"\" back>Cancel</a>\n" +
+    "<a class=\"btn btn-default btn-lg\" href=\"\" ng-click=\"cancel()\" role=\"button\">Cancel</a>\n" +
     "</div>\n" +
     "</fieldset>\n" +
     "</form>\n" +
@@ -7707,7 +7706,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"form-group\">\n" +
     "<label for=\"claim-name\" class=\"required\">Name</label>\n" +
     "<span ng-class=\"{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$touched && !claimDisabled }\">\n" +
-    "<input id=\"claim-name\" class=\"form-control\" type=\"text\" name=\"name\" ng-model=\"claim.name\" ng-required=\"true\" ng-pattern=\"nameValidation.pattern\" ng-maxlength=\"nameValidation.maxlength\" placeholder=\"my-storage-claim\" select-on-focus autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" aria-describedby=\"claim-name-help\">\n" +
+    "<input id=\"claim-name\" class=\"form-control\" type=\"text\" name=\"name\" ng-model=\"claim.name\" ng-required=\"true\" ng-pattern=\"nameValidation.pattern\" ng-maxlength=\"nameValidation.maxlength\" placeholder=\"my-storage-claim\" take-focus select-on-focus autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" aria-describedby=\"claim-name-help\">\n" +
     "</span>\n" +
     "<div>\n" +
     "<span id=\"claim-name-help\" class=\"help-block\">A unique name for the storage claim within the project.</span>\n" +