Adds a way to start multiple manual jobs in stage

- Adds an endpoint on PipelinesController
- Adds a service that iterates over every build in a stage and
plays it.
- Includes 'play_manual' details on EntitySerializer
- Builds a new Stage state: PlayManual. An stage can take this status if
it has manual builds or an skipped, scheduled or manual status
- Includes FE modifications and specs

9 files changed, 102 insertions, 5 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 8ca539351a7..3c85bb61ce8 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
@@ -20,6 +20,7 @@ export default {
   components: {
     Icon,
     GlButton,
+    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -41,6 +42,7 @@ export default {
   data() {
     return {
       isDisabled: false,
+      isLoading: false,
     };
   },
   computed: {
@@ -59,15 +61,19 @@ export default {
     onClickAction() {
       this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`);
       this.isDisabled = true;
+      this.isLoading = true;
 
       axios
         .post(`${this.link}.json`)
         .then(() => {
           this.isDisabled = false;
+          this.isLoading = false;
+
           this.$emit('pipelineActionRequestComplete');
         })
         .catch(() => {
           this.isDisabled = false;
+          this.isLoading = false;
 
           createFlash(__('An error occurred while making the request.'));
         });
@@ -82,10 +88,10 @@ export default {
     :title="tooltipText"
     :class="cssClass"
     :disabled="isDisabled"
-    class="js-ci-action btn btn-blank
-btn-transparent ci-action-icon-container ci-action-icon-wrapper"
+    class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     @click="onClickAction"
   >
-    <icon :name="actionIcon" />
+    <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
+    <icon v-else :name="actionIcon" />
   </gl-button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index a49dc311bd0..ba0dea626dc 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -24,6 +24,7 @@ export default {
           :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
+          :action="stage.status.action"
           @refreshPipelineGraph="refreshPipelineGraph"
         />
       </ul>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index 348c407f1b5..7e611b93087 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -3,11 +3,13 @@ import _ from 'underscore';
 import stageColumnMixin from 'ee_else_ce/pipelines/mixins/stage_column_mixin';
 import JobItem from './job_item.vue';
 import JobGroupDropdown from './job_group_dropdown.vue';
+import ActionComponent from './action_component.vue';
 
 export default {
   components: {
     JobItem,
     JobGroupDropdown,
+    ActionComponent,
   },
   mixins: [stageColumnMixin],
   props: {
@@ -29,6 +31,16 @@ export default {
       required: false,
       default: '',
     },
+    action: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    hasAction() {
+      return !_.isEmpty(this.action);
+    },
   },
   methods: {
     groupId(group) {
@@ -42,7 +54,18 @@ export default {
 </script>
 <template>
   <li :class="stageConnectorClass" class="stage-column">
-    <div class="stage-name">{{ title }}</div>
+    <div class="stage-name position-relative">
+      {{ title }}
+      <action-component
+        v-if="hasAction"
+        :action-icon="action.icon"
+        :tooltip-text="action.title"
+        :link="action.path"
+        class="js-stage-action position-absolute position-top-0 rounded"
+        @pipelineActionRequestComplete="pipelineActionRequestComplete"
+      />
+    </div>
+
     <div class="builds-container">
       <ul>
         <li
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 093fc89a56f..96fdf74267e 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -565,6 +565,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 2.2em;
   }
 
   .build {
diff --git a/app/controllers/projects/stages_controller.rb b/app/controllers/projects/stages_controller.rb
new file mode 100644
index 00000000000..c8db5b1277f
--- /dev/null
+++ b/app/controllers/projects/stages_controller.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class Projects::StagesController < Projects::PipelinesController
+  before_action :authorize_update_pipeline!
+
+  def play_manual
+    ::Ci::PlayManualStageService
+      .new(@project, current_user, pipeline: pipeline)
+      .execute(stage)
+
+    respond_to do |format|
+      format.json do
+        render json: StageSerializer
+          .new(project: @project, current_user: @current_user)
+          .represent(stage)
+      end
+    end
+  end
+
+  private
+
+  def stage
+    @pipeline_stage ||= pipeline.find_stage_by_name!(params[:stage_name])
+  end
+end
diff --git a/app/models/ci/legacy_stage.rb b/app/models/ci/legacy_stage.rb
index 96dbc7b6895..930c8a71453 100644
--- a/app/models/ci/legacy_stage.rb
+++ b/app/models/ci/legacy_stage.rb
@@ -58,5 +58,9 @@ module Ci
         statuses.latest.failed_but_allowed.any?
       end
     end
+
+    def manual_playable?
+      %[manual scheduled skipped].include?(status.to_s)
+    end
   end
 end
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index 2b7835d7fab..80401ca0a1e 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -771,6 +771,10 @@ module Ci
       Gitlab::Utils.slugify(source_ref.to_s)
     end
 
+    def find_stage_by_name!(name)
+      stages.find_by!(name: name)
+    end
+
     private
 
     def ci_yaml_from_repo
diff --git a/app/models/ci/stage.rb b/app/models/ci/stage.rb
index b25b0369666..d90339d90dc 100644
--- a/app/models/ci/stage.rb
+++ b/app/models/ci/stage.rb
@@ -120,5 +120,9 @@ module Ci
         .new(self, current_user)
         .fabricate!
     end
+
+    def manual_playable?
+      blocked? || skipped?
+    end
   end
 end
diff --git a/app/services/ci/play_manual_stage_service.rb b/app/services/ci/play_manual_stage_service.rb
new file mode 100644
index 00000000000..2497fc52e6b
--- /dev/null
+++ b/app/services/ci/play_manual_stage_service.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Ci
+  class PlayManualStageService < BaseService
+    def initialize(project, current_user, params)
+      super
+
+      @pipeline = params[:pipeline]
+    end
+
+    def execute(stage)
+      stage.builds.manual.each do |build|
+        next unless build.playable?
+
+        build.play(current_user)
+      rescue Gitlab::Access::AccessDeniedError
+        logger.error(message: 'Unable to play manual action', build_id: build.id)
+      end
+    end
+
+    private
+
+    attr_reader :pipeline, :current_user
+
+    def logger
+      Gitlab::AppLogger
+    end
+  end
+end