1 files changed, 63 insertions, 0 deletions
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>