Add latest changes from gitlab-org/gitlab@master

2 files changed, 68 insertions, 0 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 db55fd96ad0..d03de91ea07 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue
@@ -19,6 +19,7 @@ import getPipelineSchedulesQuery from '../graphql/queries/get_pipeline_schedules
 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: {
@@ -48,6 +49,7 @@ export default {
     GlLink,
     PipelineSchedulesTable,
     TakeOwnershipModal,
+    PipelineScheduleEmptyState,
   },
   inject: {
     fullPath: {
@@ -249,6 +251,7 @@ export default {
     </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"
@@ -289,6 +292,8 @@ export default {
       </template>
     </gl-tabs>
 
+    <pipeline-schedule-empty-state v-else-if="!isLoading && count === 0" />
+
     <take-ownership-modal
       :visible="showTakeOwnershipModal"
       @takeOwnership="takeOwnership"
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue
new file mode 100644
index 00000000000..f633ba053ee
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules_empty_state.vue
@@ -0,0 +1,63 @@
+<script>
+import scheduleSvg from '@gitlab/svgs/dist/illustrations/schedule-md.svg';
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    pipelineSchedules: s__('PipelineSchedules|Pipeline schedules'),
+    description: s__(
+      'PipelineSchedules|A scheduled pipeline starts automatically at regular intervals, like daily or weekly. The pipeline: ',
+    ),
+    learnMore: s__(
+      'PipelineSchedules|Learn more in the %{linkStart}scheduled pipelines documentation.%{linkEnd}',
+    ),
+    listElements: [
+      s__('PipelineSchedules|Runs for a specific branch or tag.'),
+      s__('PipelineSchedules|Can have custom CI/CD variables.'),
+      s__('PipelineSchedules|Runs with the same project permissions as the schedule owner.'),
+    ],
+    createNew: s__('PipelineSchedules|Create a new pipeline schedule'),
+  },
+  components: {
+    GlEmptyState,
+    GlLink,
+    GlSprintf,
+  },
+  computed: {
+    scheduleSvgPath() {
+      return `data:image/svg+xml;utf8,${encodeURIComponent(scheduleSvg)}`;
+    },
+    schedulesHelpPath() {
+      return helpPagePath('ci/pipelines/schedules');
+    },
+  },
+};
+</script>
+<template>
+  <gl-empty-state
+    :svg-path="scheduleSvgPath"
+    :primary-button-text="$options.i18n.createNew"
+    primary-button-link="#"
+  >
+    <template #title>
+      <h3>
+        {{ $options.i18n.pipelineSchedules }}
+      </h3>
+    </template>
+    <template #description>
+      <p class="gl-mb-0">{{ $options.i18n.description }}</p>
+      <ul class="gl-list-style-position-inside" data-testid="pipeline-schedules-characteristics">
+        <li v-for="(el, index) in $options.i18n.listElements" :key="index">{{ el }}</li>
+      </ul>
+      <p>
+        <gl-sprintf :message="$options.i18n.learnMore">
+          <template #link="{ content }">
+            <gl-link :href="schedulesHelpPath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-empty-state>
+</template>