Add latest changes from gitlab-org/gitlab@master

1 files changed, 42 insertions, 14 deletions

diff --git a/app/assets/javascripts/jobs/components/job/sidebar/artifacts_block.vue b/app/assets/javascripts/jobs/components/job/sidebar/artifacts_block.vue
index 1c7ba1d331b..a78cacf110f 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/artifacts_block.vue
@@ -1,14 +1,32 @@
 <script>
-import { GlButton, GlButtonGroup, GlIcon, GlLink } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlIcon, GlLink, GlPopover } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
+  i18n: {
+    jobArtifacts: s__('Job|Job artifacts'),
+    artifactsHelpText: s__(
+      'Job|Job artifacts are files that are configured to be uploaded when a job finishes execution. Artifacts could be compiled files, unit tests or scanning reports, or any other files generated by a job.',
+    ),
+    expiredText: s__('Job|The artifacts were removed'),
+    willExpireText: s__('Job|The artifacts will be removed'),
+    lockedText: s__(
+      'Job|These artifacts are the latest. They will not be deleted (even if expired) until newer artifacts are available.',
+    ),
+    keepText: s__('Job|Keep'),
+    downloadText: s__('Job|Download'),
+    browseText: s__('Job|Browse'),
+  },
+  artifactsHelpPath: helpPagePath('ci/jobs/job_artifacts'),
   components: {
     GlButton,
     GlButtonGroup,
     GlIcon,
     GlLink,
+    GlPopover,
     TimeagoTooltip,
   },
   mixins: [timeagoMixin],
@@ -38,16 +56,28 @@ export default {
 </script>
 <template>
   <div>
-    <div class="title gl-font-weight-bold">{{ s__('Job|Job artifacts') }}</div>
+    <div class="title gl-font-weight-bold">
+      <span class="gl-mr-2">{{ $options.i18n.jobArtifacts }}</span>
+      <gl-link :href="$options.artifactsHelpPath" data-testid="artifacts-help-link">
+        <gl-icon id="artifacts-help" name="question-o" />
+      </gl-link>
+      <gl-popover
+        target="artifacts-help"
+        :title="$options.i18n.jobArtifacts"
+        triggers="hover focus"
+      >
+        {{ $options.i18n.artifactsHelpText }}
+      </gl-popover>
+    </div>
     <p
       v-if="isExpired || willExpire"
       class="build-detail-row"
       data-testid="artifacts-remove-timeline"
     >
-      <span v-if="isExpired">{{ s__('Job|The artifacts were removed') }}</span>
-      <span v-if="willExpire" data-qa-selector="artifacts_unlocked_message_content">{{
-        s__('Job|The artifacts will be removed')
-      }}</span>
+      <span v-if="isExpired">{{ $options.i18n.expiredText }}</span>
+      <span v-if="willExpire" data-qa-selector="artifacts_unlocked_message_content">
+        {{ $options.i18n.willExpireText }}
+      </span>
       <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" />
       <gl-link
         :href="helpUrl"
@@ -59,11 +89,9 @@ export default {
       </gl-link>
     </p>
     <p v-else-if="isLocked" class="build-detail-row">
-      <span data-testid="job-locked-message" data-qa-selector="artifacts_locked_message_content">{{
-        s__(
-          'Job|These artifacts are the latest. They will not be deleted (even if expired) until newer artifacts are available.',
-        )
-      }}</span>
+      <span data-testid="job-locked-message" data-qa-selector="artifacts_locked_message_content">
+        {{ $options.i18n.lockedText }}
+      </span>
     </p>
     <gl-button-group class="gl-display-flex gl-mt-3">
       <gl-button
@@ -71,7 +99,7 @@ export default {
         :href="artifact.keep_path"
         data-method="post"
         data-testid="keep-artifacts"
-        >{{ s__('Job|Keep') }}</gl-button
+        >{{ $options.i18n.keepText }}</gl-button
       >
       <gl-button
         v-if="artifact.download_path"
@@ -79,14 +107,14 @@ export default {
         rel="nofollow"
         data-testid="download-artifacts"
         download
-        >{{ s__('Job|Download') }}</gl-button
+        >{{ $options.i18n.downloadText }}</gl-button
       >
       <gl-button
         v-if="artifact.browse_path"
         :href="artifact.browse_path"
         data-testid="browse-artifacts"
         data-qa-selector="browse_artifacts_button"
-        >{{ s__('Job|Browse') }}</gl-button
+        >{{ $options.i18n.browseText }}</gl-button
       >
     </gl-button-group>
   </div>