1 files changed, 64 insertions, 16 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
index 50d34070e61..262e82677a7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
@@ -8,8 +8,10 @@ import Tracking from '~/tracking';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import eventHub from '../../event_hub';
 import { TRACKING_CATEGORIES } from '../../constants';
+import getPipelineActionsQuery from '../../graphql/queries/get_pipeline_actions.query.graphql';
 
 export default {
+  name: 'PipelinesManualActions',
   directives: {
     GlTooltip: GlTooltipDirective,
   },
@@ -18,22 +20,52 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlIcon,
+    GlLoadingIcon,
   },
   mixins: [Tracking.mixin()],
+  inject: ['fullPath', 'manualActionsLimit'],
   props: {
-    actions: {
-      type: Array,
+    iid: {
+      type: Number,
       required: true,
     },
   },
+  apollo: {
+    actions: {
+      query: getPipelineActionsQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          iid: this.iid,
+          limit: this.manualActionsLimit,
+        };
+      },
+      skip() {
+        return !this.hasDropdownBeenShown;
+      },
+      update({ project }) {
+        return project?.pipeline?.jobs?.nodes || [];
+      },
+    },
+  },
   data() {
     return {
       isLoading: false,
+      actions: [],
+      hasDropdownBeenShown: false,
     };
   },
+  computed: {
+    isActionsLoading() {
+      return this.$apollo.queries.actions.loading;
+    },
+    isDropdownLimitReached() {
+      return this.actions.length === this.manualActionsLimit;
+    },
+  },
   methods: {
     async onClickAction(action) {
-      if (action.scheduled_at) {
+      if (action.scheduledAt) {
         const confirmationMessage = sprintf(
           s__(
             'DelayedJobs|Are you sure you want to run %{jobName} immediately? Otherwise this job will run automatically after its timer finishes.',
@@ -54,12 +86,12 @@ export default {
        * Ideally, the component would not make an api call directly.
        * However, in order to use the eventhub and know when to
        * toggle back the `isLoading` property we'd need an ID
-       * to track the request with a wacther - since this component
+       * to track the request with a watcher - since this component
        * is rendered at least 20 times in the same page, moving the
        * api call directly here is the most performant solution
        */
       axios
-        .post(`${action.path}.json`)
+        .post(`${action.playPath}.json`)
         .then(() => {
           this.isLoading = false;
           eventHub.$emit('updateTable');
@@ -69,12 +101,12 @@ export default {
           createAlert({ message: __('An error occurred while making the request.') });
         });
     },
-    isActionDisabled(action) {
-      if (action.playable === undefined) {
-        return false;
-      }
+    fetchActions() {
+      this.hasDropdownBeenShown = true;
+
+      this.$apollo.queries.actions.refetch();
 
-      return !action.playable;
+      this.trackClick();
     },
     trackClick() {
       this.track('click_manual_actions', { label: TRACKING_CATEGORIES.table });
@@ -91,21 +123,37 @@ export default {
     right
     lazy
     icon="play"
-    @shown="trackClick"
+    @shown="fetchActions"
   >
+    <gl-dropdown-item v-if="isActionsLoading">
+      <div class="gl-display-flex">
+        <gl-loading-icon class="mr-2" />
+        <span>{{ __('Loading...') }}</span>
+      </div>
+    </gl-dropdown-item>
+
     <gl-dropdown-item
       v-for="action in actions"
-      :key="action.path"
-      :disabled="isActionDisabled(action)"
+      v-else
+      :key="action.id"
+      :disabled="!action.canPlayJob"
       @click="onClickAction(action)"
     >
       <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap">
         {{ action.name }}
-        <span v-if="action.scheduled_at">
+        <span v-if="action.scheduledAt">
           <gl-icon name="clock" />
-          <gl-countdown :end-date-string="action.scheduled_at" />
+          <gl-countdown :end-date-string="action.scheduledAt" />
         </span>
       </div>
     </gl-dropdown-item>
+
+    <template #footer>
+      <gl-dropdown-item v-if="isDropdownLimitReached">
+        <span class="gl-font-sm gl-text-gray-300!" data-testid="limit-reached-msg">
+          {{ __('Showing first 50 actions.') }}
+        </span>
+      </gl-dropdown-item>
+    </template>
   </gl-dropdown>
 </template>