Pass docsUrl to pipeline schedules callout component.pipeline-schedules-callout-docs-url

5 files changed, 37 insertions, 11 deletions

diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
index 27ffe6ea304..5109b110b31 100644
--- a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
+++ b/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js
@@ -4,8 +4,10 @@ import illustrationSvg from '../icons/intro_illustration.svg';
 const cookieKey = 'pipeline_schedules_callout_dismissed';
 
 export default {
+  name: 'PipelineSchedulesCallout',
   data() {
     return {
+      docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
       illustrationSvg,
       calloutDismissed: Cookies.get(cookieKey) === 'true',
     };
@@ -28,13 +30,15 @@ export default {
         <div class="svg-container" v-html="illustrationSvg"></div>
         <div class="user-callout-copy">
           <h4>Scheduling Pipelines</h4>
-          <p> 
-              The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. 
+          <p>
+              The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags.
               Those scheduled pipelines will inherit limited project access based on their associated user.
           </p>
           <p> Learn more in the
-            <!-- FIXME -->
-            <a href="random.com">pipeline schedules documentation</a>.
+            <a
+              :href="docsUrl"
+              target="_blank"
+              rel="nofollow">pipeline schedules documentation</a>. <!-- oneline to prevent extra space before period -->
           </p>
         </div>
       </div>
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
index e36dc5db2ab..6584549ad06 100644
--- a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
+++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
@@ -1,9 +1,12 @@
 import Vue from 'vue';
 import PipelineSchedulesCallout from './components/pipeline_schedules_callout';
 
-const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
-
-document.addEventListener('DOMContentLoaded', () => {
-  new PipelineSchedulesCalloutComponent()
-    .$mount('#scheduling-pipelines-callout');
-});
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#pipeline-schedules-callout',
+  components: {
+    'pipeline-schedules-callout': PipelineSchedulesCallout,
+  },
+  render(createElement) {
+    return createElement('pipeline-schedules-callout');
+  },
+}));
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index dd35c3055f2..a597d745e33 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -6,7 +6,7 @@
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
-  #scheduling-pipelines-callout
+  #pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipeline_schedules') } }
   .top-area
     - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
     = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
diff --git a/changelogs/unreleased/pipeline-schedules-callout-docs-url.yml b/changelogs/unreleased/pipeline-schedules-callout-docs-url.yml
new file mode 100644
index 00000000000..b21bb162380
--- /dev/null
+++ b/changelogs/unreleased/pipeline-schedules-callout-docs-url.yml
@@ -0,0 +1,4 @@
+---
+title: Pass docsUrl to pipeline schedules callout component.
+merge_request: !1126
+author:
diff --git a/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js b/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js
index 1d05f37cb36..6120d224ac0 100644
--- a/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js
+++ b/spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js
@@ -4,8 +4,15 @@ import PipelineSchedulesCallout from '~/pipeline_schedules/components/pipeline_s
 
 const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
 const cookieKey = 'pipeline_schedules_callout_dismissed';
+const docsUrl = 'help/ci/scheduled_pipelines';
 
 describe('Pipeline Schedule Callout', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div>
+    `);
+  });
+
   describe('independent of cookies', () => {
     beforeEach(() => {
       this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
@@ -18,6 +25,10 @@ describe('Pipeline Schedule Callout', () => {
     it('correctly sets illustrationSvg', () => {
       expect(this.calloutComponent.illustrationSvg).toContain('<svg');
     });
+
+    it('correctly sets docsUrl', () => {
+      expect(this.calloutComponent.docsUrl).toContain(docsUrl);
+    });
   });
 
   describe(`when ${cookieKey} cookie is set`, () => {
@@ -61,6 +72,10 @@ describe('Pipeline Schedule Callout', () => {
       expect(this.calloutComponent.$el.outerHTML).toContain('runs pipelines in the future');
     });
 
+    it('renders the documentation url', () => {
+      expect(this.calloutComponent.$el.outerHTML).toContain(docsUrl);
+    });
+
     it('updates calloutDismissed when close button is clicked', (done) => {
       this.calloutComponent.$el.querySelector('#dismiss-callout-btn').click();