Add latest changes from gitlab-org/gitlab@13-4-stable-ee

10 files changed, 85 insertions, 53 deletions

diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 6183779acd4..2850a8e86fd 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -1,11 +1,12 @@
 <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">{{
@@ -71,6 +84,7 @@ export default {
         :href="artifact.browse_path"
         class="btn btn-sm btn-default"
         data-testid="browse-artifacts"
+        data-qa-selector="browse_artifacts_button"
         >{{ s__('Job|Browse') }}</gl-link
       >
     </div>
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index e760706c97e..00ff3fb939d 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,13 +1,13 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import Callout from '~/vue_shared/components/callout.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import EmptyState from './empty_state.vue';
 import EnvironmentsBlock from './environments_block.vue';
 import ErasedBlock from './erased_block.vue';
@@ -27,7 +27,7 @@ export default {
     EmptyState,
     EnvironmentsBlock,
     ErasedBlock,
-    Icon,
+    GlIcon,
     Log,
     LogTopBar,
     StuckBlock,
@@ -38,6 +38,11 @@ export default {
   },
   mixins: [delayedJobMixin],
   props: {
+    artifactHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     runnerSettingsUrl: {
       type: String,
       required: false,
@@ -266,7 +271,7 @@ export default {
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
           data-testid="archived-job"
         >
-          <icon name="lock" class="align-text-bottom" />
+          <gl-icon name="lock" class="align-text-bottom" />
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!-- job log -->
@@ -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"
     />
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 7bd299bcfa0..79e6623eca8 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -1,15 +1,14 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { sprintf } from '~/locale';
 
 export default {
   components: {
     CiIcon,
-    Icon,
+    GlIcon,
     GlLink,
   },
   directives: {
@@ -56,7 +55,7 @@ export default {
       data-boundary="viewport"
       class="js-job-link d-flex"
     >
-      <icon
+      <gl-icon
         v-if="isActive"
         name="arrow-right"
         class="js-arrow-right icon-arrow-right position-absolute d-block"
@@ -66,7 +65,7 @@ export default {
 
       <span class="text-truncate w-100">{{ job.name ? job.name : job.id }}</span>
 
-      <icon v-if="job.retried" name="retry" class="js-retry-icon" />
+      <gl-icon v-if="job.retried" name="retry" class="js-retry-icon" />
     </gl-link>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 4d314eaa106..7e7d9a0549b 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,16 +1,15 @@
 <script>
-import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
+/* eslint-disable vue/no-v-html */
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
-import Icon from '~/vue_shared/components/icon.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __, sprintf } from '~/locale';
 import scrollDown from '../svg/scroll_down.svg';
 
 export default {
   components: {
-    Icon,
     GlLink,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -87,18 +86,17 @@ export default {
 
     <div class="controllers float-right">
       <!-- links -->
-      <gl-link
+      <gl-button
         v-if="rawPath"
         v-gl-tooltip.body
         :title="s__('Job|Show complete raw')"
         :href="rawPath"
         class="controllers-buttons"
         data-testid="job-raw-link-controller"
-      >
-        <icon name="doc-text" />
-      </gl-link>
+        icon="doc-text"
+      />
 
-      <gl-link
+      <gl-button
         v-if="erasePath"
         v-gl-tooltip.body
         :title="s__('Job|Erase job log')"
@@ -107,30 +105,28 @@ export default {
         class="controllers-buttons"
         data-testid="job-log-erase-link"
         data-method="post"
-      >
-        <icon name="remove" />
-      </gl-link>
+        icon="remove"
+      />
       <!-- eo links -->
 
       <!-- scroll buttons -->
       <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
-        <gl-deprecated-button
+        <gl-button
           :disabled="isScrollTopDisabled"
-          type="button"
           class="btn-scroll btn-transparent btn-blank"
           data-testid="job-controller-scroll-top"
+          icon="scroll_up"
           @click="handleScrollToTop"
-        >
-          <icon name="scroll_up" />
-        </gl-deprecated-button>
+        />
       </div>
 
       <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
-        <gl-deprecated-button
+        <gl-button
           :disabled="isScrollBottomDisabled"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
-          :class="{ animate: isScrollingDown }"
           data-testid="job-controller-scroll-bottom"
+          icon="scroll_down"
+          :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
           v-html="$options.scrollDown"
         />
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
index 48f669ae8ed..e68d5b8eda4 100644
--- a/app/assets/javascripts/jobs/components/log/line.vue
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -20,7 +20,7 @@ export default {
       return h(
         'span',
         {
-          class: ['ws-pre-wrap', content.style],
+          class: ['gl-white-space-pre-wrap', content.style],
         },
         content.text,
       );
diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue
index 85ccd5996b5..4c1c00cb2a7 100644
--- a/app/assets/javascripts/jobs/components/log/line_header.vue
+++ b/app/assets/javascripts/jobs/components/log/line_header.vue
@@ -1,11 +1,11 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import LineNumber from './line_number.vue';
 import DurationBadge from './duration_badge.vue';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     LineNumber,
     DurationBadge,
   },
@@ -47,12 +47,12 @@ export default {
     role="button"
     @click="handleOnClick"
   >
-    <icon :name="iconName" class="arrow position-absolute" />
+    <gl-icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
     <span
       v-for="(content, i) in line.content"
       :key="i"
-      class="line-text w-100 ws-pre-wrap"
+      class="line-text w-100 gl-white-space-pre-wrap"
       :class="content.style"
       >{{ content.text }}</span
     >
diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue
index 9236624a191..bf1930c9a37 100644
--- a/app/assets/javascripts/jobs/components/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -1,15 +1,14 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ManualVariablesForm',
   components: {
-    GlDeprecatedButton,
-    Icon,
+    GlButton,
   },
   props: {
     action: {
@@ -137,12 +136,12 @@ export default {
         <div class="table-section section-10">
           <div class="table-mobile-header" role="rowheader"></div>
           <div class="table-mobile-content justify-content-end">
-            <gl-deprecated-button
-              class="btn-transparent btn-blank w-25"
+            <gl-button
+              category="tertiary"
+              icon="clear"
+              :aria-label="__('Delete variable')"
               @click="deleteVariable(variable.id)"
-            >
-              <icon name="clear" />
-            </gl-deprecated-button>
+            />
           </div>
         </div>
       </div>
@@ -176,9 +175,14 @@ export default {
       <p class="text-muted" v-html="helpText"></p>
     </div>
     <div class="d-flex justify-content-center">
-      <gl-deprecated-button variant="primary" @click="triggerManualJob(variables)">
+      <gl-button
+        variant="info"
+        category="primary"
+        :aria-label="__('Trigger manual job')"
+        @click="triggerManualJob(variables)"
+      >
         {{ action.button_title }}
-      </gl-deprecated-button>
+      </gl-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 517da16dcf8..aa589989e8a 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,11 +1,11 @@
 <script>
 import { isEmpty } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlLink, GlDeprecatedButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import DetailRow from './sidebar_detail_row.vue';
 import ArtifactsBlock from './artifacts_block.vue';
 import TriggerBlock from './trigger_block.vue';
@@ -19,15 +19,21 @@ export default {
     ArtifactsBlock,
     CommitBlock,
     DetailRow,
-    Icon,
+    GlIcon,
     TriggerBlock,
     StagesDropdown,
     JobsContainer,
     GlLink,
     GlDeprecatedButton,
+    TooltipOnTruncate,
   },
   mixins: [timeagoMixin],
   props: {
+    artifactHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     runnerHelpUrl: {
       type: String,
       required: false,
@@ -112,7 +118,11 @@ export default {
     <div class="sidebar-container">
       <div class="blocks-container">
         <div class="block d-flex flex-nowrap align-items-center">
-          <h4 class="my-0 mr-2 text-break-word">{{ job.name }}</h4>
+          <tooltip-on-truncate :title="job.name" truncate-target="child"
+            ><h4 class="my-0 mr-2 gl-text-truncate">
+              {{ job.name }}
+            </h4>
+          </tooltip-on-truncate>
           <div class="flex-grow-1 flex-shrink-0 text-right">
             <gl-link
               v-if="job.retry_path"
@@ -157,7 +167,7 @@ export default {
             class="js-terminal-link btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
             target="_blank"
           >
-            {{ __('Debug') }} <icon name="external-link" :size="14" />
+            {{ __('Debug') }} <gl-icon name="external-link" :size="14" />
           </gl-link>
         </div>
 
@@ -203,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"
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index b826007ec2c..7d541f93bad 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 
 export default {
   name: 'SidebarDetailRow',
   components: {
+    GlIcon,
     GlLink,
   },
   props: {
@@ -37,7 +38,7 @@ export default {
     <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
     <span v-if="hasHelpURL" class="help-button float-right">
       <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
-        <i class="fa fa-question-circle" aria-hidden="true"></i>
+        <gl-icon name="question-o" />
       </gl-link>
     </span>
   </p>
diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js
index 024a13ce102..6e15360b66c 100644
--- a/app/assets/javascripts/jobs/index.js
+++ b/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,