Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

11 files changed, 61 insertions, 59 deletions

diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 0f34926f689..2018942a7e8 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -37,7 +37,7 @@ export default {
 };
 </script>
 <template>
-  <div class="block">
+  <div>
     <div class="title gl-font-weight-bold">{{ s__('Job|Job artifacts') }}</div>
     <p
       v-if="isExpired || willExpire"
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 222fae6d9a8..eae6b5d5419 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -18,20 +18,11 @@ export default {
       required: false,
       default: null,
     },
-    isLastBlock: {
-      type: Boolean,
-      required: true,
-    },
   },
 };
 </script>
 <template>
-  <div
-    :class="{
-      'block-last': isLastBlock,
-      block: !isLastBlock,
-    }"
-  >
+  <div>
     <span class="font-weight-bold">{{ __('Commit') }}</span>
 
     <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index e68368919ab..488d838db52 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -63,7 +63,7 @@ export default {
 
       <span class="text-truncate w-100">{{ job.name ? job.name : job.id }}</span>
 
-      <gl-icon v-if="job.retried" name="retry" class="js-retry-icon" />
+      <gl-icon v-if="job.retried" name="retry" />
     </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 fbdbfddff56..ce4a85b35b7 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,9 +1,7 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __, sprintf } from '~/locale';
-import scrollDown from '../svg/scroll_down.svg';
 
 export default {
   components: {
@@ -13,7 +11,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  scrollDown,
   props: {
     erasePath: {
       type: String,
@@ -87,7 +84,6 @@ export default {
         v-gl-tooltip.body
         :title="s__('Job|Show complete raw')"
         :href="rawPath"
-        class="controllers-buttons"
         data-testid="job-raw-link-controller"
         icon="doc-text"
       />
@@ -98,7 +94,7 @@ export default {
         :title="s__('Job|Erase job log')"
         :href="erasePath"
         :data-confirm="__('Are you sure you want to erase this build?')"
-        class="controllers-buttons"
+        class="gl-ml-3"
         data-testid="job-log-erase-link"
         data-method="post"
         icon="remove"
@@ -106,25 +102,24 @@ export default {
       <!-- eo links -->
 
       <!-- scroll buttons -->
-      <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
+      <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="gl-ml-3">
         <gl-button
           :disabled="isScrollTopDisabled"
-          class="btn-scroll btn-transparent btn-blank"
+          class="btn-scroll"
           data-testid="job-controller-scroll-top"
           icon="scroll_up"
           @click="handleScrollToTop"
         />
       </div>
 
-      <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
+      <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="gl-ml-3">
         <gl-button
           :disabled="isScrollBottomDisabled"
-          class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
+          class="js-scroll-bottom btn-scroll"
           data-testid="job-controller-scroll-bottom"
           icon="scroll_down"
           :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
-          v-html="$options.scrollDown"
         />
       </div>
       <!-- eo scroll buttons -->
diff --git a/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue b/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue
index 258b8cadd63..a43b3297d75 100644
--- a/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue
+++ b/app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue
@@ -36,10 +36,10 @@ export default {
     v-gl-modal="modalId"
     :aria-label="$options.i18n.retryLabel"
     category="primary"
-    variant="info"
+    variant="confirm"
     >{{ $options.i18n.retryLabel }}</gl-button
   >
-  <gl-link v-else :href="href" data-method="post" rel="nofollow"
+  <gl-link v-else :href="href" class="btn gl-button btn-confirm" data-method="post" rel="nofollow"
     >{{ $options.i18n.retryLabel }}
   </gl-link>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index f63fe72a71a..fcf03dff34e 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlLink } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
@@ -20,12 +20,12 @@ export default {
   i18n: {
     ...JOB_SIDEBAR,
   },
+  borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
   forwardDeploymentFailureModalId,
   components: {
     ArtifactsBlock,
     CommitBlock,
     GlButton,
-    GlLink,
     GlIcon,
     JobsContainer,
     JobSidebarRetryButton,
@@ -45,11 +45,8 @@ export default {
   computed: {
     ...mapGetters(['hasForwardDeploymentFailure']),
     ...mapState(['job', 'stages', 'jobs', 'selectedStage']),
-    retryButtonClass() {
-      let className = 'btn gl-button gl-text-decoration-none!';
-      className +=
-        this.job.status && this.job.recoverable ? ' btn-confirm' : ' btn-confirm-secondary';
-      return className;
+    retryButtonCategory() {
+      return this.job.status && this.job.recoverable ? 'primary' : 'secondary';
     },
     hasArtifact() {
       return !isEmpty(this.job.artifact);
@@ -76,71 +73,94 @@ export default {
   <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
     <div class="sidebar-container">
       <div class="blocks-container">
-        <div class="block d-flex flex-nowrap align-items-center">
+        <div class="gl-py-5 gl-display-flex gl-align-items-center">
           <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">
+          <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right">
             <job-sidebar-retry-button
               v-if="job.retry_path"
-              :class="retryButtonClass"
+              :category="retryButtonCategory"
               :href="job.retry_path"
               :modal-id="$options.forwardDeploymentFailureModalId"
+              variant="confirm"
               data-qa-selector="retry_button"
               data-testid="retry-button"
             />
-            <gl-link
+            <gl-button
               v-if="job.cancel_path"
               :href="job.cancel_path"
-              class="btn gl-button btn-default gl-text-decoration-none!"
               data-method="post"
               data-testid="cancel-button"
               rel="nofollow"
               >{{ $options.i18n.cancel }}
-            </gl-link>
+            </gl-button>
           </div>
 
           <gl-button
             :aria-label="$options.i18n.toggleSidebar"
             category="tertiary"
-            class="gl-md-display-none gl-ml-2 js-sidebar-build-toggle"
+            class="gl-md-display-none gl-ml-2"
             icon="chevron-double-lg-right"
             @click="toggleSidebar"
           />
         </div>
 
-        <div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
-          <gl-link
+        <div
+          v-if="job.terminal_path || job.new_issue_path"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
+        >
+          <gl-button
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
-            class="btn gl-button btn-success-secondary float-left mr-2 gl-text-decoration-none!"
+            category="secondary"
+            variant="confirm"
             data-testid="job-new-issue"
-            >{{ $options.i18n.newIssue }}
-          </gl-link>
-          <gl-link
+          >
+            {{ $options.i18n.newIssue }}
+          </gl-button>
+          <gl-button
             v-if="job.terminal_path"
             :href="job.terminal_path"
-            class="btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
             target="_blank"
             data-testid="terminal-link"
           >
             {{ $options.i18n.debug }}
-            <gl-icon :size="14" name="external-link" />
-          </gl-link>
+            <gl-icon name="external-link" />
+          </gl-button>
         </div>
-        <job-sidebar-details-container />
-        <artifacts-block v-if="hasArtifact" :artifact="job.artifact" :help-url="artifactHelpUrl" />
-        <trigger-block v-if="hasTriggers" :trigger="job.trigger" />
+
+        <job-sidebar-details-container class="gl-py-5" :class="$options.borderTopClass" />
+
+        <artifacts-block
+          v-if="hasArtifact"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
+          :artifact="job.artifact"
+          :help-url="artifactHelpUrl"
+        />
+
+        <trigger-block
+          v-if="hasTriggers"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
+          :trigger="job.trigger"
+        />
+
         <commit-block
           :commit="commit"
-          :is-last-block="hasStages"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
           :merge-request="job.merge_request"
         />
 
         <stages-dropdown
           v-if="job.pipeline"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
           :pipeline="job.pipeline"
           :selected-stage="selectedStage"
           :stages="stages"
diff --git a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
index 62cd30fb320..b20d58b6ffe 100644
--- a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
@@ -73,7 +73,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="shouldRenderBlock" class="block">
+  <div v-if="shouldRenderBlock">
     <detail-row v-if="job.duration" :value="duration" title="Duration" />
     <detail-row
       v-if="job.finished_at"
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 64c4031b002..18de849af88 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -43,7 +43,7 @@ export default {
 };
 </script>
 <template>
-  <div class="block-last dropdown">
+  <div class="dropdown">
     <div class="js-pipeline-info">
       <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index f6b98777011..fef5b37015c 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -61,7 +61,7 @@ export default {
 </script>
 
 <template>
-  <div class="block">
+  <div>
     <p
       v-if="trigger.short_token"
       :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }"
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 930a225857d..6cb96bee07d 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -1,7 +1,7 @@
 import { isEmpty, isString } from 'lodash';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 
-export const headerTime = (state) => state.job.started ?? state.job.created_at;
+export const headerTime = (state) => (state.job.started ? state.job.started : state.job.created_at);
 
 export const hasForwardDeploymentFailure = (state) =>
   state?.job?.failure_reason === 'forward_deployment_failure';
diff --git a/app/assets/javascripts/jobs/svg/scroll_down.svg b/app/assets/javascripts/jobs/svg/scroll_down.svg
deleted file mode 100644
index fb934f68704..00000000000
--- a/app/assets/javascripts/jobs/svg/scroll_down.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path class="scroll-arrow" d="M8 10.4142L4.29289 6.70711C3.90237 6.31658 3.90237 5.68342 4.29289 5.2929C4.68342 4.90237 5.31658 4.90237 5.70711 5.2929L7 6.58579L7 1C7 0.447715 7.44772 0 8 0C8.55229 0 9 0.447715 9 1L9 6.58579L10.2929 5.2929C10.6834 4.90237 11.3166 4.90237 11.7071 5.2929C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711L8 10.4142Z"/>
-<path class="scroll-dot" d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z"/>
-</svg>