From c85ad66d2a88f3129fff9f655c968350b1fc1a64 Mon Sep 17 00:00:00 2001
From: anotherchrisberry <anotherchrisberry@gmail.com>
Date: Wed, 4 Oct 2017 11:11:37 -0700
Subject: [PATCH] fix(pipelines): show indicator when deleting pipeline config

---
 .../modules/core/src/naming/naming.service.ts     |  2 +-
 .../config/actions/delete/delete.module.js        | 15 +++++++++------
 .../delete/deletePipelineModal.controller.spec.js |  8 ++++----
 .../actions/delete/deletePipelineModal.html       | 11 ++++++++---
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/app/scripts/modules/core/src/naming/naming.service.ts b/app/scripts/modules/core/src/naming/naming.service.ts
index a47f32bb4ce..24507eb654d 100644
--- 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
index 5468d27c7c8..46ddd1f3c73 100644
--- 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,11 +18,13 @@ 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);
@@ -30,9 +32,10 @@ module.exports = angular.module('spinnaker.core.pipeline.config.actions.delete',
           });
           $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/app/scripts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.controller.spec.js b/app/scripts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.controller.spec.js
index 4f21f81bea8..c1817e53355 100644
--- a/app/scripts/modules/core/src/pipeline/config/actions/delete/deletePipelineModal.controller.spec.js
+++ b/app/scripts/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
index 0cd485f243e..9521f59a4e6 100644
--- 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>