1 files changed, 100 insertions, 47 deletions
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
index fe16cb7a92e..d03de91ea07 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
@@ -1,14 +1,25 @@
 <script>
-import { GlAlert, GlBadge, GlButton, GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlBadge,
+  GlButton,
+  GlLoadingIcon,
+  GlTabs,
+  GlTab,
+  GlSprintf,
+  GlLink,
+} from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import { limitedCounterWithDelimiter } from '~/lib/utils/text_utility';
 import { queryToObject } from '~/lib/utils/url_utility';
 import deletePipelineScheduleMutation from '../graphql/mutations/delete_pipeline_schedule.mutation.graphql';
+import playPipelineScheduleMutation from '../graphql/mutations/play_pipeline_schedule.mutation.graphql';
 import takeOwnershipMutation from '../graphql/mutations/take_ownership.mutation.graphql';
 import getPipelineSchedulesQuery from '../graphql/queries/get_pipeline_schedules.query.graphql';
 import PipelineSchedulesTable from './table/pipeline_schedules_table.vue';
 import TakeOwnershipModal from './take_ownership_modal.vue';
 import DeletePipelineScheduleModal from './delete_pipeline_schedule_modal.vue';
+import PipelineScheduleEmptyState from './pipeline_schedules_empty_state.vue';
 
 export default {
   i18n: {
@@ -16,11 +27,15 @@ export default {
     scheduleDeleteError: s__(
       'PipelineSchedules|There was a problem deleting the pipeline schedule.',
     ),
+    schedulePlayError: s__('PipelineSchedules|There was a problem playing the pipeline schedule.'),
     takeOwnershipError: s__(
       'PipelineSchedules|There was a problem taking ownership of the pipeline schedule.',
     ),
     newSchedule: s__('PipelineSchedules|New schedule'),
     deleteSuccess: s__('PipelineSchedules|Pipeline schedule successfully deleted.'),
+    playSuccess: s__(
+      'PipelineSchedules|Successfully scheduled a pipeline to run. Go to the %{linkStart}Pipelines page%{linkEnd} for details. ',
+    ),
   },
   components: {
     DeletePipelineScheduleModal,
@@ -30,13 +45,19 @@ export default {
     GlLoadingIcon,
     GlTabs,
     GlTab,
+    GlSprintf,
+    GlLink,
     PipelineSchedulesTable,
     TakeOwnershipModal,
+    PipelineScheduleEmptyState,
   },
   inject: {
     fullPath: {
       default: '',
     },
+    pipelinesPath: {
+      default: '',
+    },
   },
   apollo: {
     schedules: {
@@ -68,6 +89,7 @@ export default {
       },
       scope,
       hasError: false,
+      playSuccess: false,
       errorMessage: '',
       scheduleId: null,
       showDeleteModal: false,
@@ -185,6 +207,27 @@ export default {
         this.reportError(this.$options.i18n.takeOwnershipError);
       }
     },
+    async playPipelineSchedule(id) {
+      try {
+        const {
+          data: {
+            pipelineSchedulePlay: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: playPipelineScheduleMutation,
+          variables: { id },
+        });
+
+        if (errors.length > 0) {
+          throw new Error();
+        } else {
+          this.playSuccess = true;
+        }
+      } catch {
+        this.playSuccess = false;
+        this.reportError(this.$options.i18n.schedulePlayError);
+      }
+    },
     fetchPipelineSchedulesByStatus(scope) {
       this.scope = scope;
       this.$apollo.queries.schedules.refetch();
@@ -195,62 +238,72 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="hasError" class="gl-mb-2" variant="danger" @dismiss="hasError = false">
+    <gl-alert v-if="hasError" class="gl-my-3" variant="danger" @dismiss="hasError = false">
       {{ errorMessage }}
     </gl-alert>
 
-    <template v-else>
-      <gl-tabs
-        sync-active-tab-with-query-params
-        query-param-name="scope"
-        nav-class="gl-flex-grow-1 gl-align-items-center"
+    <gl-alert v-if="playSuccess" class="gl-my-3" variant="info" @dismiss="playSuccess = false">
+      <gl-sprintf :message="$options.i18n.playSuccess">
+        <template #link="{ content }">
+          <gl-link :href="pipelinesPath" class="gl-text-decoration-none!">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+
+    <gl-tabs
+      v-if="isLoading || count > 0"
+      sync-active-tab-with-query-params
+      query-param-name="scope"
+      nav-class="gl-flex-grow-1 gl-align-items-center"
+    >
+      <gl-tab
+        v-for="tab in tabs"
+        :key="tab.text"
+        :title-link-attributes="tab.attrs"
+        :query-param-value="tab.scope"
+        @click="fetchPipelineSchedulesByStatus(tab.scope)"
       >
-        <gl-tab
-          v-for="tab in tabs"
-          :key="tab.text"
-          :title-link-attributes="tab.attrs"
-          :query-param-value="tab.scope"
-          @click="fetchPipelineSchedulesByStatus(tab.scope)"
-        >
-          <template #title>
-            <span>{{ tab.text }}</span>
+        <template #title>
+          <span>{{ tab.text }}</span>
 
-            <template v-if="tab.showBadge">
-              <gl-loading-icon v-if="tab.scope === scope && isLoading" class="gl-ml-2" />
+          <template v-if="tab.showBadge">
+            <gl-loading-icon v-if="tab.scope === scope && isLoading" class="gl-ml-2" />
 
-              <gl-badge v-else-if="tab.count" size="sm" class="gl-tab-counter-badge">
-                {{ tab.count }}
-              </gl-badge>
-            </template>
+            <gl-badge v-else-if="tab.count" size="sm" class="gl-tab-counter-badge">
+              {{ tab.count }}
+            </gl-badge>
           </template>
+        </template>
 
-          <gl-loading-icon v-if="isLoading" size="lg" />
-          <pipeline-schedules-table
-            v-else
-            :schedules="schedules.list"
-            @showTakeOwnershipModal="setTakeOwnershipModal"
-            @showDeleteModal="setDeleteModal"
-          />
-        </gl-tab>
+        <gl-loading-icon v-if="isLoading" size="lg" />
+        <pipeline-schedules-table
+          v-else
+          :schedules="schedules.list"
+          @showTakeOwnershipModal="setTakeOwnershipModal"
+          @showDeleteModal="setDeleteModal"
+          @playPipelineSchedule="playPipelineSchedule"
+        />
+      </gl-tab>
 
-        <template #tabs-end>
-          <gl-button variant="confirm" class="gl-ml-auto" data-testid="new-schedule-button">
-            {{ $options.i18n.newSchedule }}
-          </gl-button>
-        </template>
-      </gl-tabs>
+      <template #tabs-end>
+        <gl-button variant="confirm" class="gl-ml-auto" data-testid="new-schedule-button">
+          {{ $options.i18n.newSchedule }}
+        </gl-button>
+      </template>
+    </gl-tabs>
+
+    <pipeline-schedule-empty-state v-else-if="!isLoading && count === 0" />
 
-      <take-ownership-modal
-        :visible="showTakeOwnershipModal"
-        @takeOwnership="takeOwnership"
-        @hideModal="hideModal"
-      />
+    <take-ownership-modal
+      :visible="showTakeOwnershipModal"
+      @takeOwnership="takeOwnership"
+      @hideModal="hideModal"
+    />
 
-      <delete-pipeline-schedule-modal
-        :visible="showDeleteModal"
-        @deleteSchedule="deleteSchedule"
-        @hideModal="hideModal"
-      />
-    </template>
+    <delete-pipeline-schedule-modal
+      :visible="showDeleteModal"
+      @deleteSchedule="deleteSchedule"
+      @hideModal="hideModal"
+    />
   </div>
 </template>