fix(pipelines): show indicator when deleting pipeline config (#4216)

spinnaker · Oct 4, 2017 · 8cf8f0d · 8cf8f0d
1 parent 2a3202f
commit 8cf8f0d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/app/scripts/modules/core/src/naming/naming.service.ts b/app/scripts/modules/core/src/naming/naming.service.ts
@@ -72,7 +72,7 @@ export class NamingService {
 
   public getSequence(monikerSequence: number): string {
     if (isNil(monikerSequence)) {
-      return "N/A";
+      return 'N/A';
     } else {
       return `v${padStart(monikerSequence.toString(), 3, '0')}`;
     }

diff --git a/app/scripts/modules/core/src/pipeline/config/actions/delete/delete.module.js b/app/scripts/modules/core/src/pipeline/config/actions/delete/delete.module.js
@@ -18,21 +18,24 @@ module.exports = angular.module('spinnaker.core.pipeline.config.actions.delete',
 
     $scope.pipeline = pipeline;
 
-    this.deletePipeline = function() {
+    this.deletePipeline = () => {
+      $scope.viewState.deleting = true;
       return pipelineConfigService.deletePipeline(application.name, pipeline, pipeline.name).then(
-        function() {
-          application.pipelineConfigs.data.splice(application.pipelineConfigs.data.indexOf(pipeline), 1);
-          application.pipelineConfigs.data.forEach(function(pipeline, index) {
+        () => {
+          const data = pipeline.strategy ? application.strategyConfigs.data : application.pipelineConfigs.data;
+          data.splice(data.findIndex(p => p.id === pipeline.id), 1);
+          data.forEach(function(pipeline, index) {
             if (pipeline.index !== index) {
               pipeline.index = index;
               pipelineConfigService.savePipeline(pipeline);
             }
           });
           $state.go('^.executions', null, { location: 'replace' });
         },
-        function(response) {
+        (response) => {
           $log.warn(response);
-          $scope.viewState.saveError = true;
+          $scope.viewState.deleting = false;
+          $scope.viewState.deleteError = true;
           $scope.viewState.errorMessage = response.message || 'No message provided';
         }
       );

diff --git a/...ts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.controller.spec.js b/...ts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.controller.spec.js
@@ -83,7 +83,7 @@ describe('Controller: deletePipelineModal', function() {
       expect(newStateOptions).toEqual({location: 'replace'});
     });
 
-    it('sets error flag, message when save is rejected', function() {
+    it('sets error flag, message when delete is rejected', function() {
       var $q = this.$q;
       spyOn(this.pipelineConfigService, 'deletePipeline').and.callFake(function () {
         return $q.reject({message: 'something went wrong'});
@@ -92,11 +92,11 @@ describe('Controller: deletePipelineModal', function() {
       this.controller.deletePipeline();
       this.$scope.$digest();
 
-      expect(this.$scope.viewState.saveError).toBe(true);
+      expect(this.$scope.viewState.deleteError).toBe(true);
       expect(this.$scope.viewState.errorMessage).toBe('something went wrong');
     });
 
-    it('provides default error message when none provided on failed save', function() {
+    it('provides default error message when none provided on failed delete', function() {
       var $q = this.$q;
       spyOn(this.pipelineConfigService, 'deletePipeline').and.callFake(function () {
         return $q.reject({});
@@ -106,7 +106,7 @@ describe('Controller: deletePipelineModal', function() {
       this.controller.deletePipeline();
       this.$scope.$digest();
 
-      expect(this.$scope.viewState.saveError).toBe(true);
+      expect(this.$scope.viewState.deleteError).toBe(true);
       expect(this.$scope.viewState.errorMessage).toBe('No message provided');
     });
   });

diff --git a/app/scripts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.html b/app/scripts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.html
@@ -4,10 +4,10 @@
     <h3>Really Delete {{pipeline.strategy === true ? 'Strategy' : 'Pipeline'}}?</h3>
   </div>
   <div class="modal-body">
-    <div class="alert alert-danger" ng-if="viewState.saveError">
+    <div class="alert alert-danger" ng-if="viewState.deleteError">
       <p>Could not delete {{pipeline.strategy === true ? 'strategy' : 'pipeline'}}.</p>
       <p><b>Reason: </b>{{viewState.errorMessage}}</p>
-      <p><a href ng-click="viewState.saveError = false">[dismiss]</a></p>
+      <p><a href ng-click="viewState.deleteError = false">[dismiss]</a></p>
     </div>
     <form role="form" name="form" class="form-horizontal">
       <div class="form-group">
@@ -21,7 +21,12 @@ <h3>Really Delete {{pipeline.strategy === true ? 'Strategy' : 'Pipeline'}}?</h3>
     <button class="btn btn-default" ng-click="deletePipelineModalCtrl.cancel()">Cancel</button>
     <button class="btn btn-primary"
             ng-click="deletePipelineModalCtrl.deletePipeline()">
-      <span class="glyphicon glyphicon-remove-circle"></span> Delete
+      <span ng-if="!viewState.deleting">
+        <span class="fa fa-check-circle-o"></span> Delete
+      </span>
+      <span ng-if="viewState.deleting" class="pulsing">
+        <span class="fa fa-cog fa-spin"></span> Deleting&hellip;
+      </span>
     </button>
   </div>
 </div>