Add the artifact expiration help url

app/assets/javascripts/jobs/components/artifacts_block.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   components: {
     TimeagoTooltip,
+    GlIcon,
     GlLink,
   },
   mixins: [timeagoMixin],
@@ -14,6 +15,10 @@ export default {
       type: Object,
       required: true,
     },
+    helpUrl: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     isExpired() {
@@ -40,6 +45,14 @@ export default {
       <span v-if="isExpired">{{ s__('Job|The artifacts were removed') }}</span>
       <span v-if="willExpire">{{ s__('Job|The artifacts will be removed') }}</span>
       <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" />
+      <gl-link
+        :href="helpUrl"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        data-testid="artifact-expired-help-link"
+      >
+        <gl-icon name="question" />
+      </gl-link>
     </p>
     <p v-else-if="isLocked" class="build-detail-row">
       <span data-testid="job-locked-message">{{

app/assets/javascripts/jobs/components/job_app.vue

@@ -38,6 +38,11 @@ export default {
   },
   mixins: [delayedJobMixin],
   props: {
+    artifactHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     runnerSettingsUrl: {
       type: String,
       required: false,
@@ -319,6 +324,7 @@ export default {
         'right-sidebar-expanded': isSidebarOpen,
         'right-sidebar-collapsed': !isSidebarOpen,
       }"
+      :artifact-help-url="artifactHelpUrl"
       :runner-help-url="runnerHelpUrl"
       data-testid="job-sidebar"
     />

app/assets/javascripts/jobs/components/sidebar.vue

@@ -29,6 +29,11 @@ export default {
   },
   mixins: [timeagoMixin],
   props: {
+    artifactHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     runnerHelpUrl: {
       type: String,
       required: false,
@@ -208,7 +213,7 @@ export default {
           </p>
         </div>
 
-        <artifacts-block v-if="hasArtifact" :artifact="job.artifact" />
+        <artifacts-block v-if="hasArtifact" :artifact="job.artifact" :help-url="artifactHelpUrl" />
         <trigger-block v-if="hasTriggers" :trigger="job.trigger" />
         <commit-block
           :is-last-block="hasStages"

app/assets/javascripts/jobs/index.js

@@ -18,6 +18,7 @@ export default () => {
     },
     render(createElement) {
       const {
+        artifactHelpUrl,
         deploymentHelpUrl,
         runnerHelpUrl,
         runnerSettingsUrl,
@@ -32,6 +33,7 @@ export default () => {
 
       return createElement('job-app', {
         props: {
+          artifactHelpUrl,
           deploymentHelpUrl,
           runnerHelpUrl,
           runnerSettingsUrl,

app/helpers/ci/jobs_helper.rb

@@ -6,6 +6,7 @@ module Ci
       {
         "endpoint" => project_job_path(@project, @build, format: :json),
         "project_path" => @project.full_path,
+        "artifact_help_url" => help_page_path('user/gitlab_com/index.html', anchor: 'gitlab-cicd'),
         "deployment_help_url" => help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting'),
         "runner_help_url" => help_page_path('ci/runners/README.html', anchor: 'set-maximum-job-timeout-for-a-runner'),
         "runner_settings_url" => project_runners_path(@build.project, anchor: 'js-runners-settings'),

changelogs/unreleased/233425-add-artifact-expiration-help-url.yml

+---
+title: Add the artifact expiration help url
+merge_request: 39546
+author: Gilang Gumilar
+type: added

spec/frontend/jobs/components/artifacts_block_spec.js

@@ -8,7 +8,10 @@ describe('Artifacts block', () => {
 
   const createWrapper = propsData =>
     mount(ArtifactsBlock, {
-      propsData,
+      propsData: {
+        helpUrl: 'help-url',
+        ...propsData,
+      },
     });
 
   const findArtifactRemoveElt = () => wrapper.find('[data-testid="artifacts-remove-timeline"]');
@@ -68,6 +71,12 @@ describe('Artifacts block', () => {
       expect(trimText(findArtifactRemoveElt().text())).toBe(
         `The artifacts were removed ${formattedDate}`,
       );
+
+      expect(
+        findArtifactRemoveElt()
+          .find('[data-testid="artifact-expired-help-link"]')
+          .attributes('href'),
+      ).toBe('help-url');
     });
 
     it('does not show the keep button', () => {
@@ -94,6 +103,12 @@ describe('Artifacts block', () => {
       expect(trimText(findArtifactRemoveElt().text())).toBe(
         `The artifacts will be removed ${formattedDate}`,
       );
+
+      expect(
+        findArtifactRemoveElt()
+          .find('[data-testid="artifact-expired-help-link"]')
+          .attributes('href'),
+      ).toBe('help-url');
     });
 
     it('renders the keep button', () => {

spec/frontend/jobs/components/job_app_spec.js

@@ -33,6 +33,7 @@ describe('Job App', () => {
   };
 
   const props = {
+    artifactHelpUrl: 'help/artifact',
     runnerHelpUrl: 'help/runner',
     deploymentHelpUrl: 'help/deployment',
     runnerSettingsUrl: 'settings/ci-cd/runners',