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

1 files changed, 10 insertions, 4 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>