From 8553b1ed7602c6796fe5d9afeb50507f9892ca63 Mon Sep 17 00:00:00 2001
From: spinnakerbot <spinbot@spinnaker.io>
Date: Mon, 15 Jul 2019 14:29:59 -0400
Subject: [PATCH] fix(core): Render template triggers, notif, params for manual
 execution (#7223) (#7224)

https://github.com/spinnaker/spinnaker/issues/4565
---
 .../manualPipelineExecution.controller.js     | 75 ++++++++++++-------
 ...manualPipelineExecution.controller.spec.js |  7 ++
 .../manualPipelineExecution.html              | 35 +++++----
 3 files changed, 75 insertions(+), 42 deletions(-)

diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.js b/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.js
index 3088dcb521f..3cf6ee4ac65 100644
--- a/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.js
+++ b/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.js
@@ -30,7 +30,8 @@ module.exports = angular
     'pipeline',
     'application',
     'trigger',
-    function($scope, $uibModalInstance, pipeline, application, trigger) {
+    '$q',
+    function($scope, $uibModalInstance, pipeline, application, trigger, $q) {
       let applicationNotifications = [];
       let pipelineNotifications = [];
 
@@ -136,21 +137,39 @@ module.exports = angular
         }
       };
 
-      const updatePipelinePlan = pipeline => {
-        if (pipeline.type === 'templatedPipeline' && (pipeline.stages === undefined || pipeline.stages.length === 0)) {
-          PipelineTemplateReader.getPipelinePlan(pipeline)
-            .then(plan => (this.stageComponents = getManualExecutionComponents(plan.stages)))
-            .catch(() => getManualExecutionComponents(pipeline.stages));
-        } else {
-          this.stageComponents = getManualExecutionComponents(pipeline.stages);
-        }
-      };
+      const getPlannedPipeline = pipeline =>
+        $q(resolve => {
+          const isV1PipelineMissingStages =
+            pipeline.type === 'templatedPipeline' && (pipeline.stages === undefined || pipeline.stages.length === 0);
+          const isV2Pipeline = PipelineTemplateV2Service.isV2PipelineConfig(pipeline);
+
+          if (isV1PipelineMissingStages || isV2Pipeline) {
+            PipelineTemplateReader.getPipelinePlan(pipeline)
+              .then(plan => {
+                updateStageComponents(plan.stages);
+                resolve(isV2Pipeline ? plan : pipeline);
+              })
+              .catch(() => {
+                if (isV2Pipeline) {
+                  this.planError = true;
+                }
+                updateStageComponents(pipeline.stages);
+                resolve(pipeline);
+              });
+          } else {
+            updateStageComponents(pipeline.stages);
+            resolve(pipeline);
+          }
+        });
 
       const getManualExecutionComponents = stages => {
         const additionalComponents = stages.map(stage => Registry.pipeline.getManualExecutionComponentForStage(stage));
         return _.uniq(_.compact(additionalComponents));
       };
 
+      const updateStageComponents = pipelineStages =>
+        (this.stageComponents = getManualExecutionComponents(pipelineStages));
+
       /**
        * Controller API
        */
@@ -172,26 +191,26 @@ module.exports = angular
       };
 
       this.pipelineSelected = () => {
-        const pipeline = this.command.pipeline,
-          executions = application.executions.data || [];
+        getPlannedPipeline(this.command.pipeline).then(pipeline => {
+          this.command.pipeline = pipeline;
+          const executions = application.executions.data || [];
 
-        pipelineNotifications = pipeline.notifications || [];
-        synchronizeNotifications();
+          pipelineNotifications = pipeline.notifications || [];
+          synchronizeNotifications();
 
-        this.currentlyRunningExecutions = executions.filter(
-          execution => execution.pipelineConfigId === pipeline.id && execution.isActive,
-        );
-        addTriggers();
-        this.triggerUpdated();
-
-        updatePipelinePlan(pipeline);
-
-        if (pipeline.parameterConfig && pipeline.parameterConfig.length) {
-          this.parameters = {};
-          this.hasRequiredParameters = pipeline.parameterConfig.some(p => p.required);
-          pipeline.parameterConfig.forEach(p => this.addParameter(p));
-          this.updateParameters();
-        }
+          this.currentlyRunningExecutions = executions.filter(
+            execution => execution.pipelineConfigId === pipeline.id && execution.isActive,
+          );
+          addTriggers();
+          this.triggerUpdated();
+
+          if (pipeline.parameterConfig && pipeline.parameterConfig.length) {
+            this.parameters = {};
+            this.hasRequiredParameters = pipeline.parameterConfig.some(p => p.required);
+            pipeline.parameterConfig.forEach(p => this.addParameter(p));
+            this.updateParameters();
+          }
+        });
       };
 
       this.addParameter = parameterConfig => {
diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.spec.js b/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.spec.js
index d51866881c5..28f9d205f9e 100644
--- a/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.spec.js
+++ b/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.controller.spec.js
@@ -51,7 +51,9 @@ describe('Controller: ManualPipelineExecution', function() {
           },
         };
 
+        spyOn(AppNotificationsService, 'getNotificationsForApplication').and.returnValue(this.$q.when({}));
         this.initializeController(application, application.pipelineConfigs.data[0]);
+        this.scope.$digest();
         expect(this.ctrl.currentlyRunningExecutions).toEqual([application.executions.data[1]]);
       });
 
@@ -75,7 +77,9 @@ describe('Controller: ManualPipelineExecution', function() {
           executions: { data: [] },
         };
 
+        spyOn(AppNotificationsService, 'getNotificationsForApplication').and.returnValue(this.$q.when({}));
         this.initializeController(application, application.pipelineConfigs.data[0]);
+        this.scope.$digest();
         expect(this.ctrl.parameters).toEqual({ foo: undefined, bar: 'mr. peanutbutter', baz: '', bojack: null });
       });
     });
@@ -153,6 +157,7 @@ describe('Controller: ManualPipelineExecution', function() {
       expect(this.ctrl.notifications).toEqual([notifications[1], notifications[0]]);
       this.ctrl.command.pipeline = application.pipelineConfigs.data[1];
       this.ctrl.pipelineSelected();
+      this.scope.$digest();
       expect(this.ctrl.notifications).toEqual([notifications[1], notifications[2]]);
     });
   });
@@ -209,7 +214,9 @@ describe('Controller: ManualPipelineExecution', function() {
         executions: { data: [] },
       };
 
+      spyOn(AppNotificationsService, 'getNotificationsForApplication').and.returnValue(this.$q.when({}));
       this.initializeController(application, application.pipelineConfigs.data[0], this.modalInstance);
+      this.scope.$digest();
       this.ctrl.execute();
       expect(this.command.trigger.parameters).toEqual({ bar: 'mr. peanutbutter' });
     });
diff --git a/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.html b/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.html
index 5292d8c58b9..b1769bf72ba 100644
--- a/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.html
+++ b/app/scripts/modules/core/src/pipeline/manualExecution/manualPipelineExecution.html
@@ -7,7 +7,10 @@ <h3 ng-if="vm.command.pipeline && !vm.triggers.length">Confirm Execution</h3>
     <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
   </div>
   <ng-form name="manualExecutionForm">
-    <div class="modal-body container-fluid form-horizontal">
+    <div ng-if="vm.planError" class="alert alert-danger">
+      <p>Could not load pipeline plan. Please try reloading.</p>
+    </div>
+    <div class="modal-body container-fluid form-horizontal" ng-if="!vm.planError">
       <div class="form-group" ng-if="vm.pipelineOptions">
         <label class="col-md-4 sm-label-right">Pipeline</label>
         <div class="col-md-6">
@@ -18,12 +21,14 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
             on-select="vm.pipelineSelected()"
           >
             <ui-select-match>
-              <strong>{{$select.selected.name}}</strong>
+              <strong>{{ $select.selected.name }}</strong>
             </ui-select-match>
             <ui-select-choices
               repeat="pipeline as pipeline in vm.pipelineOptions | anyFieldFilter: {name: $select.search }"
             >
-              <div><strong>{{pipeline.name}}</strong></div>
+              <div>
+                <strong>{{ pipeline.name }}</strong>
+              </div>
             </ui-select-choices>
           </ui-select>
         </div>
@@ -31,7 +36,7 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
 
       <div class="form-group" ng-if="vm.command.pipeline">
         <div class="col-md-10">
-          <p>This will start a new run of <strong>{{vm.command.pipeline.name}}</strong>.</p>
+          <p>This will start a new run of <strong>{{ vm.command.pipeline.name }}</strong>.</p>
         </div>
       </div>
 
@@ -43,17 +48,17 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
           </strong>
         </p>
         <div ng-repeat="execution in vm.currentlyRunningExecutions | limitTo: 1" class="pad-left">
-          <strong>Execution started: </strong>{{execution.startTime | timestamp }}
+          <strong>Execution started: </strong>{{ execution.startTime | timestamp }}
           <div>
             <strong>Current stage:</strong>
             <span ng-repeat="stage in execution.currentStages">
-              {{stage.name}}
+              {{ stage.name }}
             </span>
           </div>
         </div>
         <div ng-if="vm.currentlyRunningExecutions.length > 1">
           <em>
-            &hellip;and {{vm.currentlyRunningExecutions.length - 1}} other execution<span
+            &hellip;and {{ vm.currentlyRunningExecutions.length - 1 }} other execution<span
               ng-if="vm.currentlyRunningExecutions.length > 2"
               >s</span
             >
@@ -65,7 +70,7 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
         <div class="form-group">
           <label class="col-md-4 sm-label-right">Trigger</label>
           <div class="col-md-6">
-            <p class="form-control-static" ng-if="vm.triggers.length === 1">{{vm.triggers[0].description}}</p>
+            <p class="form-control-static" ng-if="vm.triggers.length === 1">{{ vm.triggers[0].description }}</p>
             <select
               class="form-control input-sm"
               ng-if="vm.triggers.length > 1"
@@ -89,9 +94,9 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
           ng-if="!vm.hiddenParameters.has(parameter.name)"
         >
           <div class="col-md-4 sm-label-right break-word">
-            {{parameter.label || parameter.name}}
+            {{ parameter.label || parameter.name }}
             <span ng-if="parameter.required">*</span>
-            <help-field content="{{parameter.description}}" ng-if="parameter.description"></help-field>
+            <help-field content="{{ parameter.description }}" ng-if="parameter.description"></help-field>
           </div>
           <div class="col-md-6" ng-if="!parameter.hasOptions && parameter.constraint === 'date'">
             <p class="input-group">
@@ -136,10 +141,12 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
               class="form-control input-sm"
             >
               <ui-select-match>
-                <strong>{{$select.selected.value}}</strong>
+                <strong>{{ $select.selected.value }}</strong>
               </ui-select-match>
               <ui-select-choices repeat="option.value as option in parameter.options | filter: $select.search">
-                <div><strong>{{option.value}}</strong></div>
+                <div>
+                  <strong>{{ option.value }}</strong>
+                </div>
               </ui-select-choices>
             </ui-select>
           </div>
@@ -160,7 +167,7 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
       <div class="form-group" ng-if="vm.command.trigger.artifacts.length > 0">
         <label class="col-md-4 sm-label-right">Artifacts</label>
         <div class="col-md-8">
-          <artifact-list artifacts="vm.command.trigger.artifacts" />
+          <artifact-list artifacts="vm.command.trigger.artifacts"></artifact-list>
         </div>
       </div>
 
@@ -180,7 +187,7 @@ <h3 ng-if="!vm.command.pipeline">Select Pipeline</h3>
           <div ng-if="vm.notifications.length > 1" class="small">
             There are
             <a uib-popover-template="vm.notificationTooltip" popover-placement="bottom" popover-trigger="'mouseenter'"
-              >{{vm.notifications.length}} notifications</a
+              >{{ vm.notifications.length }} notifications</a
             >
             configured for this pipeline
           </div>