1 files changed, 18 insertions, 7 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 6695c6179cf..0700d9e5439 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
@@ -16,6 +16,7 @@ import deletePipelineScheduleMutation from '../graphql/mutations/delete_pipeline
 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 { ALL_SCOPE } from '../constants';
 import PipelineSchedulesTable from './table/pipeline_schedules_table.vue';
 import TakeOwnershipModal from './take_ownership_modal.vue';
 import DeletePipelineScheduleModal from './delete_pipeline_schedule_modal.vue';
@@ -58,6 +59,9 @@ export default {
     pipelinesPath: {
       default: '',
     },
+    newSchedulePath: {
+      default: '',
+    },
   },
   apollo: {
     schedules: {
@@ -65,7 +69,9 @@ export default {
       variables() {
         return {
           projectPath: this.fullPath,
-          status: this.scope,
+          // we need to ensure we send null to the API when
+          // the scope is 'ALL'
+          status: this.scope === ALL_SCOPE ? null : this.scope,
         };
       },
       update(data) {
@@ -111,7 +117,7 @@ export default {
         {
           text: s__('PipelineSchedules|All'),
           count: limitedCounterWithDelimiter(this.count),
-          scope: null,
+          scope: ALL_SCOPE,
           showBadge: true,
           attrs: { 'data-testid': 'pipeline-schedules-all-tab' },
         },
@@ -134,7 +140,7 @@ export default {
     // this watcher ensures that the count on the all tab
     //  is not updated when switching to other tabs
     schedulesCount(newCount) {
-      if (!this.scope) {
+      if (!this.scope || this.scope === ALL_SCOPE) {
         this.count = newCount;
       }
     },
@@ -253,10 +259,10 @@ export default {
     </gl-alert>
 
     <gl-tabs
-      v-if="isLoading || count > 0"
+      v-if="isLoading || schedulesCount > 0"
       sync-active-tab-with-query-params
       query-param-name="scope"
-      nav-class="gl-flex-grow-1 gl-align-items-center"
+      nav-class="gl-flex-grow-1 gl-align-items-center gl-mt-2"
     >
       <gl-tab
         v-for="tab in tabs"
@@ -289,13 +295,18 @@ export default {
       </gl-tab>
 
       <template #tabs-end>
-        <gl-button variant="confirm" class="gl-ml-auto" data-testid="new-schedule-button">
+        <gl-button
+          :href="newSchedulePath"
+          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" />
+    <pipeline-schedule-empty-state v-else-if="!isLoading && schedulesCount === 0" />
 
     <take-ownership-modal
       :visible="showTakeOwnershipModal"