Adds documentation link to the autodevops popover

app/assets/javascripts/commit/pipelines/pipelines_bundle.js

@@ -35,6 +35,7 @@ document.addEventListener('DOMContentLoaded', () => {
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();
       pipelineTableViewEl.appendChild(table.$el);

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -13,6 +13,10 @@
         type: String,
         required: true,
       },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
     mixins: [
       pipelinesMixin,
@@ -95,6 +99,7 @@
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
+        :auto-devops-help-path="autoDevopsHelpPath"
         />
     </div>
   </div>

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -9,6 +9,10 @@
         type: Object,
         required: true,
       },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       userAvatarLink,
@@ -25,7 +29,7 @@
         return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>';
       },
       autoDevOpsContent() {
-        return '<a class="autodevops-link" href="">Learn more about Auto DevOps</a>';
+        return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`;
       },
     },
   };

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -27,6 +27,7 @@
         endpoint: pipelinesData.endpoint,
         cssClass: pipelinesData.cssClass,
         helpPagePath: pipelinesData.helpPagePath,
+        autoDevopsPath: pipelinesData.helpautoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
         allPath: pipelinesData.allPath,
@@ -200,6 +201,7 @@
         <pipelines-table-component
           :pipelines="state.pipelines"
           :update-graph-dropdown="updateGraphDropdown"
+          :auto-devops-help-path="autoDevopsPath"
           />
       </div>
 

app/assets/javascripts/pipelines/components/pipelines_table.vue

@@ -17,6 +17,10 @@
         required: false,
         default: false,
       },
+      autoDevopsHelpPath: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       pipelinesTableRowComponent,
@@ -54,6 +58,7 @@
       :key="model.id"
       :pipeline="model"
       :update-graph-dropdown="updateGraphDropdown"
+      :auto-devops-help-path="autoDevopsHelpPath"
     />
   </div>
 </template>

app/assets/javascripts/pipelines/components/pipelines_table_row.vue

@@ -25,6 +25,10 @@ export default {
       required: false,
       default: false,
     },
+    autoDevopsHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   components: {
     asyncButtonComponent,
@@ -218,7 +222,10 @@ export default {
       </div>
     </div>
 
-    <pipeline-url :pipeline="pipeline" />
+    <pipeline-url
+      :pipeline="pipeline"
+      :auto-devops-help-path="autoDevopsHelpPath"
+      />
 
     <div class="table-section section-25">
       <div

app/views/projects/commit/_pipelines_list.haml

@@ -2,6 +2,7 @@
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
   "help-page-path" => help_page_path('ci/quick_start/README'),
+  "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
 } }
 
 - content_for :page_specific_javascripts do

app/views/projects/pipelines/index.html.haml

@@ -5,6 +5,7 @@
 #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
   "css-class" => container_class,
   "help-page-path" => help_page_path('ci/quick_start/README'),
+  "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
   "new-pipeline-path" => new_project_pipeline_path(@project),
   "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
   "all-path" =>  project_pipelines_path(@project),

spec/javascripts/commit/pipelines/pipelines_spec.js

@@ -29,6 +29,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            autoDevopsHelpPath: 'foo',
           },
         }).$mount();
       });
@@ -64,6 +65,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            autoDevopsHelpPath: 'foo',
           },
         }).$mount();
       });
@@ -115,6 +117,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            autoDevopsHelpPath: 'foo',
           },
         }).$mount();
         element.appendChild(this.component.$el);
@@ -136,6 +139,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
         propsData: {
           endpoint: 'endpoint',
           helpPagePath: 'foo',
+          autoDevopsHelpPath: 'foo',
         },
       }).$mount();
     });

spec/javascripts/pipelines/pipeline_url_spec.js

@@ -16,6 +16,7 @@ describe('Pipeline Url Component', () => {
           path: 'foo',
           flags: {},
         },
+        autoDevopsHelpPath: 'foo',
       },
     }).$mount();
 
@@ -30,6 +31,7 @@ describe('Pipeline Url Component', () => {
           path: 'foo',
           flags: {},
         },
+        autoDevopsHelpPath: 'foo',
       },
     }).$mount();
 
@@ -50,6 +52,7 @@ describe('Pipeline Url Component', () => {
           path: '/',
         },
       },
+      autoDevopsHelpPath: 'foo',
     };
 
     const component = new PipelineUrlComponent({
@@ -73,6 +76,7 @@ describe('Pipeline Url Component', () => {
           path: 'foo',
           flags: {},
         },
+        autoDevopsHelpPath: 'foo',
       },
     }).$mount();
 
@@ -91,6 +95,7 @@ describe('Pipeline Url Component', () => {
             stuck: true,
           },
         },
+        autoDevopsHelpPath: 'foo',
       },
     }).$mount();
 
@@ -112,6 +117,7 @@ describe('Pipeline Url Component', () => {
             auto_devops: true,
           },
         },
+        autoDevopsHelpPath: 'foo',
       },
     }).$mount();
 

spec/javascripts/pipelines/pipelines_table_row_spec.js

@@ -9,7 +9,7 @@ describe('Pipelines Table Row', () => {
       el: document.querySelector('.test-dom-element'),
       propsData: {
         pipeline,
-        service: {},
+        autoDevopsHelpPath: 'foo',
       },
     }).$mount();
   };

spec/javascripts/pipelines/pipelines_table_spec.js

@@ -22,6 +22,7 @@ describe('Pipelines Table', () => {
       component = new PipelinesTableComponent({
         propsData: {
           pipelines: [],
+          autoDevopsHelpPath: 'foo',
         },
       }).$mount();
     });
@@ -47,6 +48,7 @@ describe('Pipelines Table', () => {
       const component = new PipelinesTableComponent({
         propsData: {
           pipelines: [],
+          autoDevopsHelpPath: 'foo',
         },
       }).$mount();
       expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
@@ -58,6 +60,7 @@ describe('Pipelines Table', () => {
       const component = new PipelinesTableComponent({
         propsData: {
           pipelines: [pipeline],
+          autoDevopsHelpPath: 'foo',
         },
       }).$mount();