Merge "Add toast message support for projects page"

3 files changed, 88 insertions, 42 deletions

diff --git a/testapi/opnfv_testapi/tests/UI/e2e/projectsControllerSpec.js b/testapi/opnfv_testapi/tests/UI/e2e/projectsControllerSpec.js
index 1117ef5..da86389 100644
--- a/testapi/opnfv_testapi/tests/UI/e2e/projectsControllerSpec.js
+++ b/testapi/opnfv_testapi/tests/UI/e2e/projectsControllerSpec.js
@@ -324,8 +324,12 @@ describe('testing the Project Link for user who is in submitter group', function
         name.sendKeys('testproject');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Project is successfully created."))
+
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Project is successfully created."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('Show error if user doesnt have permission to Create the Project', function () {
@@ -340,7 +344,10 @@ describe('testing the Project Link for user who is in submitter group', function
         description.sendKeys('demoDescription');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.css(".alert.alert-danger")).isDisplayed()).toBe(true);
+        browser.ignoreSynchronization = true;
+        expect(element(by.css(".error")).isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('Showing error when creating with a empty name ', function () {
@@ -352,8 +359,11 @@ describe('testing the Project Link for user who is in submitter group', function
         browser.wait(EC.visibilityOf(name), 5000);
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
+        browser.ignoreSynchronization = true;
         expect(element(by.cssContainingText(".alert","Name is missing."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('Show error when user click the create button with an already existing name', function () {
@@ -368,7 +378,10 @@ describe('testing the Project Link for user who is in submitter group', function
         description.sendKeys('demoDescription');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.css(".alert.alert-danger")).isDisplayed()).toBe(true);
+        browser.ignoreSynchronization = true;
+        expect(element(by.css(".error")).isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('cancel the delete confimation modal of the project ', function () {
@@ -388,8 +401,11 @@ describe('testing the Project Link for user who is in submitter group', function
         .isDisplayed()).toBe(true);
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Projects is successfully deleted"))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Projects is successfully deleted"))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it(' Show error if user doesnt has permission to delete the projects ', function () {
@@ -442,7 +458,10 @@ describe('testing the Project Link for user who is in submitter group', function
         deleteOperation.click();
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.css(".alert.alert-danger")).isDisplayed()).toBe(true);
+        browser.ignoreSynchronization = true;
+        expect(element(by.css(".error")).isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('cancel the Edit modal of the Project ', function () {
@@ -468,8 +487,12 @@ describe('testing the Project Link for user who is in submitter group', function
         name.sendKeys('test1');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click()
-        expect(element(by.cssContainingText(".alert","Project is successfully updated."))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Project is successfully updated."))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
+
     });
 
     it('Show error if user doesnt has permission to edit the projects ', function () {
@@ -526,7 +549,10 @@ describe('testing the Project Link for user who is in submitter group', function
         name.sendKeys('test1');
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click()
-        expect(element(by.css(".alert.alert-danger")).isDisplayed()).toBe(true);
+        browser.ignoreSynchronization = true;
+        expect(element(by.css(".error")).isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 
     it('Batch Delete the projects ', function () {
@@ -537,8 +563,12 @@ describe('testing the Project Link for user who is in submitter group', function
         buttonDelete.click();
         var buttonOK = element(by.buttonText('Ok'));
         buttonOK.click();
-        expect(element(by.cssContainingText(".alert","Projects is successfully deleted"))
+        browser.ignoreSynchronization = true;
+        expect(element(by.cssContainingText(".success.show","Projects is successfully deleted"))
         .isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
+
     });
 
     it('If backend is not responding then show error when user click the create button',function(){
@@ -570,8 +600,10 @@ describe('testing the Project Link for user who is in submitter group', function
         name.sendKeys('testproject');
         details.sendKeys('demoDescription');
         var buttonOK = element(by.buttonText('Ok'));
-        buttonOK.click().then(function(){
-            expect(element(by.css(".alert.alert-danger")).isDisplayed()).toBe(true);
-        });
+        buttonOK.click()
+        browser.ignoreSynchronization = true;
+        expect(element(by.css(".error")).isDisplayed()).toBe(true);
+        browser.sleep(500);
+        browser.ignoreSynchronization = false;
     });
 })
diff --git a/testapi/opnfv_testapi/ui/components/projects/projects.html b/testapi/opnfv_testapi/ui/components/projects/projects.html
index 5d514d1..3098aa2 100644
--- a/testapi/opnfv_testapi/ui/components/projects/projects.html
+++ b/testapi/opnfv_testapi/ui/components/projects/projects.html
@@ -21,16 +21,12 @@
         <input type="text" class="form-control search" ng-enter="ctrl.listProjects()" ng-Model="ctrl.filterText" style="width:80%;" placeholder="Search By Name">
     </div>
 </div>
-<div class='clo-md-12'>
-    <div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.error}}</span>
-        <span class="glyphicon glyphicon-exclamation-sign pull-right" aria-hidden="true" >Error:</span>
-    </div>
-    <div ng-show="ctrl.showSuccess" class="alert alert-success" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.success}}</span>
-        <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span>
-    </div>
-</div>
+<div ng-class="{'show': ctrl.showError}" id="toast" class="error">
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" ></span>
+    {{ctrl.error}}</div>
+<div ng-class="{'show': ctrl.showSuccess}" id="toast" class="success">
+    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+    {{ctrl.success}}</div>
 <div class='clo-md-12' style="padding-right:0px">
     <div class="table-responsive">
         <table class="table table-bordered table-hover"  ng-data="ctrl.data.projects">
diff --git a/testapi/opnfv_testapi/ui/components/projects/projectsController.js b/testapi/opnfv_testapi/ui/components/projects/projectsController.js
index 4f0af0f..42100bd 100644
--- a/testapi/opnfv_testapi/ui/components/projects/projectsController.js
+++ b/testapi/opnfv_testapi/ui/components/projects/projectsController.js
@@ -21,7 +21,7 @@
 
         ProjectsController.$inject = [
         '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl',
-        'raiseAlert', 'confirmModal', 'authenticate', 'keepState', 'sortService'
+        'raiseAlert', 'confirmModal', 'authenticate', 'keepState', 'sortService', '$timeout'
     ];
 
     /**
@@ -30,7 +30,7 @@
      * through projects declared in TestAPI.
      */
     function ProjectsController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
-        raiseAlert, confirmModal, authenticate, keepState, sortService) {
+        raiseAlert, confirmModal, authenticate, keepState, sortService, $timeout) {
         var ctrl = this;
         ctrl.url = testapiApiUrl + '/projects';
 
@@ -51,27 +51,41 @@
         ctrl.name = '';
         ctrl.details = '';
         ctrl.ascending = false;
+        ctrl.toastError = toastError
+        ctrl.toastSuccess = toastSuccess
+
+        function toastError() {
+            ctrl.showError = true
+            $timeout(function(){ ctrl.showError = false;}, 7000);
+        }
+
+        function toastSuccess() {
+            ctrl.showSuccess = true
+            $timeout(function(){ ctrl.showSuccess = false;}, 7000);
+        }
 
         /**
          * This will contact the TestAPI to create a new project.
          */
         function create(project) {
-            ctrl.showError = false;
-            ctrl.showSuccess = false;
             var projects_url = ctrl.url;
             var body = {
                 name: project.name,
                 description: project.description
             };
-            ctrl.projectsRequest =
-                $http.post(projects_url, body).success(function (data){
-                    ctrl.showSuccess = true ;
-                    ctrl.success = "Project is successfully created."
+            ctrl.projectsRequest = $http.post(projects_url, body)
+            ctrl.projectsRequest.success(function (data){
+                    ctrl.success = "Project is successfully created.";
                     ctrl.listProjects();
+                    ctrl.toastSuccess();
+                    ctrl.request = true;
                 }).catch(function (data) {
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError();
+                    ctrl.request = false;
                 });
+
+            return ctrl.projectsRequest
         }
 
         function sortByName(){
@@ -135,16 +149,17 @@
             ctrl.showError = false;
             ctrl.showSuccess = false;
             var projectUrl = ctrl.url + '/' + name;
-            ctrl.testCasesRequest =
-                $http.put(projectUrl, project).success(function (data){
-                    ctrl.showSuccess = true ;
+            ctrl.projectRequest = $http.put(projectUrl, project)
+            ctrl.projectRequest.success(function (data){
                     ctrl.success = "Project is successfully updated."
-                    listProjects();
+                    ctrl.listProjects();
+                    ctrl.toastSuccess();
                 })
                 .catch(function (data) {
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError();
                 });
+            return ctrl.projectRequest
         }
 
         /**
@@ -174,8 +189,8 @@
                     }
                 }).catch(function (data)  {
                     ctrl.data = null;
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError();
                 });
         }
 
@@ -190,13 +205,12 @@
         function projectDelete(projectName){
             var projectUrl = ctrl.url + "/" + projectName
             $http.delete(projectUrl).success(function(){
-                ctrl.showSuccess = true ;
                 ctrl.success = "Projects is successfully deleted"
+                ctrl.toastSuccess();
                 ctrl.listProjects();
             }).catch(function (data)  {
-                ctrl.showError = true;
-                ctrl.showSuccess = false;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
         }
 
@@ -277,11 +291,15 @@
         function confirm() {
             if (angular.isDefined(ctrl.data.successHandler)) {
                 if(ctrl.project.name != ""){
-                    $uibModalInstance.close();
+                    var success = false;
                     if(ctrl.data.project){
-                        ctrl.data.successHandler(ctrl.projectName, ctrl.project);
+                       ctrl.data.successHandler(ctrl.projectName, ctrl.project).success(function (data){
+                            $uibModalInstance.close();
+                       })
                     }else{
-                        ctrl.data.successHandler(ctrl.project);
+                        ctrl.data.successHandler(ctrl.project).success(function (data){
+                            $uibModalInstance.close();
+                        })
                     }
                 }else{
                     ctrl.showCreateError = true;