Merge branch '320949-auto-devops-help-path-remove-prop' into 'master'

Remove autodevops popover link href props

See merge request gitlab-org/gitlab!54225

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

@@ -34,7 +34,6 @@ export default () => {
               helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
               emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
               errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
-              autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
             },
           });
         },

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

@@ -29,10 +29,6 @@ export default {
       type: String,
       required: true,
     },
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
     errorStateSvgPath: {
       type: String,
       required: true,
@@ -212,7 +208,6 @@ export default {
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
-        :auto-devops-help-path="autoDevopsHelpPath"
         :view-type="viewType"
       >
         <template #table-header-actions>

app/assets/javascripts/merge_request_tabs.js

@@ -364,7 +364,6 @@ export default class MergeRequestTabs {
             helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
             emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
             errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
-            autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
             canCreatePipelineInTargetProject: Boolean(
               mrWidgetData?.can_create_pipeline_in_target_project,
             ),

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

 <script>
 import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { SCHEDULE_ORIGIN } from '../../constants';
 
 export default {
@@ -26,10 +27,6 @@ export default {
       type: String,
       required: true,
     },
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     user() {
@@ -44,6 +41,12 @@ export default {
           this.pipeline?.project?.full_path !== `/${this.targetProjectFullPath}`,
       );
     },
+    autoDevopsTagId() {
+      return `pipeline-url-autodevops-${this.pipeline.id}`;
+    },
+    autoDevopsHelpPath() {
+      return helpPagePath('topics/autodevops/index.md');
+    },
   },
 };
 </script>
@@ -103,38 +106,43 @@ export default {
         data-testid="pipeline-url-failure"
         >{{ __('error') }}</gl-badge
       >
-      <gl-link
-        v-if="pipeline.flags.auto_devops"
-        :id="`pipeline-url-autodevops-${pipeline.id}`"
-        tabindex="0"
-        data-testid="pipeline-url-autodevops"
-        role="button"
-        ><gl-badge variant="info" size="sm">{{ __('Auto DevOps') }}</gl-badge></gl-link
-      >
-      <gl-popover
-        :target="`pipeline-url-autodevops-${pipeline.id}`"
-        triggers="focus"
-        placement="top"
-      >
-        <template #title>
-          <div class="gl-font-weight-normal gl-line-height-normal">
-            <gl-sprintf
-              :message="
-                __(
-                  'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}',
-                )
-              "
-            >
-              <template #strong="{ content }">
-                <b>{{ content }}</b>
-              </template>
-            </gl-sprintf>
-          </div>
-        </template>
-        <gl-link :href="autoDevopsHelpPath" target="_blank" rel="noopener noreferrer nofollow">{{
-          __('Learn more about Auto DevOps')
-        }}</gl-link>
-      </gl-popover>
+      <template v-if="pipeline.flags.auto_devops">
+        <gl-link
+          :id="autoDevopsTagId"
+          tabindex="0"
+          data-testid="pipeline-url-autodevops"
+          role="button"
+        >
+          <gl-badge variant="info" size="sm">
+            {{ __('Auto DevOps') }}
+          </gl-badge>
+        </gl-link>
+        <gl-popover :target="autoDevopsTagId" triggers="focus" placement="top">
+          <template #title>
+            <div class="gl-font-weight-normal gl-line-height-normal">
+              <gl-sprintf
+                :message="
+                  __(
+                    'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}',
+                  )
+                "
+              >
+                <template #strong="{ content }">
+                  <b>{{ content }}</b>
+                </template>
+              </gl-sprintf>
+            </div>
+          </template>
+          <gl-link
+            :href="autoDevopsHelpPath"
+            data-testid="pipeline-url-autodevops-link"
+            target="_blank"
+          >
+            {{ __('Learn more about Auto DevOps') }}
+          </gl-link>
+        </gl-popover>
+      </template>
+
       <gl-badge
         v-if="pipeline.flags.stuck"
         variant="warning"

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

@@ -68,10 +68,6 @@ export default {
       type: String,
       required: true,
     },
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
     hasGitlabCi: {
       type: Boolean,
       required: true,
@@ -362,7 +358,6 @@ export default {
           :pipelines="state.pipelines"
           :pipeline-schedule-url="pipelineScheduleUrl"
           :update-graph-dropdown="updateGraphDropdown"
-          :auto-devops-help-path="autoDevopsHelpPath"
           :view-type="viewType"
         />
       </div>

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

@@ -32,10 +32,6 @@ export default {
       required: false,
       default: false,
     },
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
     viewType: {
       type: String,
       required: true,
@@ -102,7 +98,6 @@ export default {
       :pipeline="model"
       :pipeline-schedule-url="pipelineScheduleUrl"
       :update-graph-dropdown="updateGraphDropdown"
-      :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
       :canceling-pipeline="cancelingPipeline"
     />

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

@@ -47,10 +47,6 @@ export default {
       required: false,
       default: false,
     },
-    autoDevopsHelpPath: {
-      type: String,
-      required: true,
-    },
     viewType: {
       type: String,
       required: true,
@@ -194,11 +190,7 @@ export default {
       </div>
     </div>
 
-    <pipeline-url
-      :pipeline="pipeline"
-      :pipeline-schedule-url="pipelineScheduleUrl"
-      :auto-devops-help-path="autoDevopsHelpPath"
-    />
+    <pipeline-url :pipeline="pipeline" :pipeline-schedule-url="pipelineScheduleUrl" />
     <pipeline-triggerer :pipeline="pipeline" />
 
     <div class="table-section section-wrap section-20">

app/assets/javascripts/pipelines/pipelines_index.js

@@ -27,7 +27,6 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     emptyStateSvgPath,
     errorStateSvgPath,
     noPipelinesSvgPath,
-    autoDevopsHelpPath,
     newPipelinePath,
     canCreatePipeline,
     hasGitlabCi,
@@ -60,7 +59,6 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
           emptyStateSvgPath,
           errorStateSvgPath,
           noPipelinesSvgPath,
-          autoDevopsHelpPath,
           newPipelinePath,
           canCreatePipeline: parseBoolean(canCreatePipeline),
           hasGitlabCi: parseBoolean(hasGitlabCi),

app/views/projects/commit/_pipelines_list.haml

@@ -2,7 +2,6 @@
 #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'),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
   "project-id": @project.id,

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

@@ -8,7 +8,6 @@
   project_id: @project.id,
   params: params.to_json,
   "help-page-path" => help_page_path('ci/quick_start/README'),
-  "auto-devops-help-path" => help_page_path('topics/autodevops/index.md'),
   "pipeline-schedule-url" => pipeline_schedules_path(@project),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),

spec/frontend/commit/pipelines/pipelines_spec.js

@@ -16,7 +16,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
     helpPagePath: 'foo',
     emptyStateSvgPath: 'foo',
     errorStateSvgPath: 'foo',
-    autoDevopsHelpPath: 'foo',
   };
 
   preloadFixtures(jsonFixtureName);

spec/frontend/pipelines/pipeline_url_spec.js

 import { shallowMount } from '@vue/test-utils';
-import $ from 'jquery';
 import { trimText } from 'helpers/text_helper';
 import PipelineUrlComponent from '~/pipelines/components/pipelines_list/pipeline_url.vue';
 
-$.fn.popover = () => {};
+const projectPath = 'test/test';
 
 describe('Pipeline Url Component', () => {
   let wrapper;
@@ -14,6 +13,7 @@ describe('Pipeline Url Component', () => {
   const findYamlTag = () => wrapper.find('[data-testid="pipeline-url-yaml"]');
   const findFailureTag = () => wrapper.find('[data-testid="pipeline-url-failure"]');
   const findAutoDevopsTag = () => wrapper.find('[data-testid="pipeline-url-autodevops"]');
+  const findAutoDevopsTagLink = () => wrapper.find('[data-testid="pipeline-url-autodevops-link"]');
   const findStuckTag = () => wrapper.find('[data-testid="pipeline-url-stuck"]');
   const findDetachedTag = () => wrapper.find('[data-testid="pipeline-url-detached"]');
   const findForkTag = () => wrapper.find('[data-testid="pipeline-url-fork"]');
@@ -23,9 +23,9 @@ describe('Pipeline Url Component', () => {
     pipeline: {
       id: 1,
       path: 'foo',
+      project: { full_path: `/${projectPath}` },
       flags: {},
     },
-    autoDevopsHelpPath: 'foo',
     pipelineScheduleUrl: 'foo',
   };
 
@@ -33,7 +33,7 @@ describe('Pipeline Url Component', () => {
     wrapper = shallowMount(PipelineUrlComponent, {
       propsData: { ...defaultProps, ...props },
       provide: {
-        targetProjectFullPath: 'test/test',
+        targetProjectFullPath: projectPath,
       },
     });
   };
@@ -57,6 +57,19 @@ describe('Pipeline Url Component', () => {
     expect(findPipelineUrlLink().text()).toBe('#1');
   });
 
+  it('should not render tags when flags are not set', () => {
+    createComponent();
+
+    expect(findStuckTag().exists()).toBe(false);
+    expect(findLatestTag().exists()).toBe(false);
+    expect(findYamlTag().exists()).toBe(false);
+    expect(findAutoDevopsTag().exists()).toBe(false);
+    expect(findFailureTag().exists()).toBe(false);
+    expect(findScheduledTag().exists()).toBe(false);
+    expect(findForkTag().exists()).toBe(false);
+    expect(findTrainTag().exists()).toBe(false);
+  });
+
   it('should render the stuck tag when flag is provided', () => {
     createComponent({
       pipeline: {
@@ -96,6 +109,7 @@ describe('Pipeline Url Component', () => {
   it('should render an autodevops badge when flag is provided', () => {
     createComponent({
       pipeline: {
+        ...defaultProps.pipeline,
         flags: {
           auto_devops: true,
         },
@@ -103,6 +117,11 @@ describe('Pipeline Url Component', () => {
     });
 
     expect(trimText(findAutoDevopsTag().text())).toBe('Auto DevOps');
+
+    expect(findAutoDevopsTagLink().attributes()).toMatchObject({
+      href: '/help/topics/autodevops/index.md',
+      target: '_blank',
+    });
   });
 
   it('should render a detached badge when flag is provided', () => {
@@ -147,7 +166,7 @@ describe('Pipeline Url Component', () => {
     createComponent({
       pipeline: {
         flags: {},
-        project: { fullPath: 'test/forked' },
+        project: { fullPath: '/test/forked' },
       },
     });
 

spec/frontend/pipelines/pipelines_spec.js

@@ -34,7 +34,6 @@ describe('Pipelines', () => {
   let origWindowLocation;
 
   const paths = {
-    autoDevopsHelpPath: '/help/topics/autodevops/index.md',
     helpPagePath: '/help/ci/quick_start/README',
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
     errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
@@ -45,7 +44,6 @@ describe('Pipelines', () => {
   };
 
   const noPermissions = {
-    autoDevopsHelpPath: '/help/topics/autodevops/index.md',
     helpPagePath: '/help/ci/quick_start/README',
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
     errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',

spec/frontend/pipelines/pipelines_table_row_spec.js

@@ -9,7 +9,6 @@ describe('Pipelines Table Row', () => {
     mount(PipelinesTableRowComponent, {
       propsData: {
         pipeline,
-        autoDevopsHelpPath: 'foo',
         viewType: 'root',
       },
     });

spec/frontend/pipelines/pipelines_table_spec.js

@@ -9,7 +9,6 @@ describe('Pipelines Table', () => {
 
   const defaultProps = {
     pipelines: [],
-    autoDevopsHelpPath: 'foo',
     viewType: 'root',
   };
 
@@ -58,7 +57,7 @@ describe('Pipelines Table', () => {
 
   describe('with data', () => {
     it('should render rows', () => {
-      createComponent({ pipelines: [pipeline], autoDevopsHelpPath: 'foo', viewType: 'root' });
+      createComponent({ pipelines: [pipeline], viewType: 'root' });
 
       expect(findRows()).toHaveLength(1);
     });