Add latest changes from gitlab-org/gitlab@master

6 files changed, 61 insertions, 44 deletions

diff --git a/app/assets/javascripts/ci/job_details/components/job_header.vue b/app/assets/javascripts/ci/job_details/components/job_header.vue
index 13f3eebd447..38bedb989c3 100644
--- a/app/assets/javascripts/ci/job_details/components/job_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_header.vue
@@ -89,18 +89,25 @@ export default {
 
 <template>
   <header
-    class="page-content-header gl-md-display-flex gl-min-h-7"
+    class="page-content-header gl-md-display-flex gl-flex-wrap gl-min-h-7 gl-pb-2! gl-w-full"
     data-testid="job-header-content"
   >
-    <section class="header-main-content gl-mr-3">
-      <ci-badge-link class="gl-mr-3" :status="status" />
+    <div
+      v-if="name"
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"
+    >
+      <h1 class="gl-font-size-h-display gl-my-0 gl-display-inline-block" data-testid="job-name">
+        {{ name }}
+      </h1>
+    </div>
 
-      <strong data-testid="job-name">{{ name }}</strong>
+    <section class="gl-md-display-flex gl-align-items-center gl-mr-3">
+      <ci-badge-link class="gl-mr-3" :status="status" />
 
-      <template v-if="shouldRenderTriggeredLabel">{{ __('started') }}</template>
-      <template v-else>{{ __('created') }}</template>
+      <template v-if="shouldRenderTriggeredLabel">{{ __('Started') }}</template>
+      <template v-else>{{ __('Created') }}</template>
 
-      <timeago-tooltip :time="time" />
+      <timeago-tooltip :time="time" class="gl-mx-2" />
 
       {{ __('by') }}
 
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
index 0ff3ed93847..860c4c83009 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
@@ -1,10 +1,12 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { forwardDeploymentFailureModalId } from '~/ci/constants';
 import { filterAnnotations } from '~/ci/job_details/utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
 import ArtifactsBlock from './artifacts_block.vue';
 import CommitBlock from './commit_block.vue';
 import ExternalLinksBlock from './external_links_block.vue';
@@ -16,9 +18,13 @@ import StagesDropdown from './stages_dropdown.vue';
 import TriggerBlock from './trigger_block.vue';
 
 export default {
+  i18n: {
+    toggleSidebar: __('Toggle Sidebar'),
+  },
   name: 'JobSidebar',
   forwardDeploymentFailureModalId,
   components: {
+    GlButton,
     ArtifactsBlock,
     CommitBlock,
     JobsContainer,
@@ -64,6 +70,15 @@ export default {
     externalLinks() {
       return filterAnnotations(this.job.annotations, 'external_link');
     },
+    jobHasPath() {
+      return Boolean(
+        this.job.erase_path ||
+          this.job.new_issue_path ||
+          this.job.terminal_path ||
+          this.job.retry_path ||
+          this.job.cancel_path,
+      );
+    },
   },
   watch: {
     job(value, oldValue) {
@@ -76,43 +91,62 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['fetchJobsForStage']),
+    ...mapActions(['fetchJobsForStage', 'toggleSidebar']),
   },
 };
 </script>
 <template>
   <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
     <div class="sidebar-container">
-      <div class="blocks-container gl-p-4">
+      <div class="blocks-container gl-p-4 gl-pt-0">
+        <div
+          class="gl-py-4 gl-border-b gl-border-gray-50 gl-display-flex gl-md-display-none! gl-justify-content-end"
+        >
+          <gl-button
+            :aria-label="$options.i18n.toggleSidebar"
+            category="tertiary"
+            icon="chevron-double-lg-right"
+            @click="toggleSidebar"
+          />
+        </div>
         <sidebar-header
-          class="block gl-pb-4! gl-mb-2"
+          v-if="jobHasPath"
+          class="gl-py-4 gl-border-b gl-border-gray-50"
           :rest-job="job"
           :job-id="job.id"
           @updateVariables="$emit('updateVariables')"
         />
 
-        <job-sidebar-details-container class="block gl-mb-2" />
+        <job-sidebar-details-container class="gl-py-4 gl-border-b gl-border-gray-50" />
 
         <artifacts-block
           v-if="hasArtifact"
-          class="block gl-mb-2"
+          class="gl-py-4 gl-border-b gl-border-gray-50"
           :artifact="artifact"
           :help-url="artifactHelpUrl"
         />
 
         <external-links-block
           v-if="hasExternalLinks"
-          class="block gl-mb-2"
+          class="gl-py-4 gl-border-b gl-border-gray-50"
           :external-links="externalLinks"
         />
 
-        <trigger-block v-if="hasTriggers" class="block gl-mb-2" :trigger="job.trigger" />
+        <trigger-block
+          v-if="hasTriggers"
+          class="gl-py-4 gl-border-b gl-border-gray-50"
+          :trigger="job.trigger"
+        />
 
-        <commit-block class="block gl-mb-2" :commit="commit" :merge-request="job.merge_request" />
+        <commit-block
+          class="gl-py-4 gl-border-b gl-border-gray-50"
+          :commit="commit"
+          :merge-request="job.merge_request"
+        />
 
         <stages-dropdown
           v-if="job.pipeline"
-          class="block gl-mb-2"
+          class="gl-py-4 gl-border-b gl-border-gray-50"
           :pipeline="job.pipeline"
           :selected-stage="selectedStage"
           :stages="stages"
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue
index 5b1bf354fd4..d7726b952de 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue
@@ -39,8 +39,8 @@ export default {
 };
 </script>
 <template>
-  <p class="build-sidebar-item gl-mb-2">
-    <b v-if="hasTitle" class="gl-display-flex">{{ title }}:</b>
+  <p class="build-sidebar-item gl-line-height-normal gl-display-flex gl-mb-3">
+    <b v-if="hasTitle" class="gl-mr-3">{{ title }}:</b>
     <gl-link
       v-if="path"
       :href="path"
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue
index 77e3ecb9b3c..2713b37e30e 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue
@@ -1,12 +1,9 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-// eslint-disable-next-line no-restricted-imports
-import { mapActions } from 'vuex';
 import { createAlert } from '~/alert';
 import { TYPENAME_COMMIT_STATUS } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { JOB_GRAPHQL_ERRORS, forwardDeploymentFailureModalId, PASSED_STATUS } from '~/ci/constants';
 import GetJob from '../../graphql/queries/get_job.query.graphql';
 import JobSidebarRetryButton from './job_sidebar_retry_button.vue';
@@ -20,7 +17,6 @@ export default {
     eraseLogConfirmText: s__('Job|Are you sure you want to erase this job log and artifacts?'),
     newIssue: __('New issue'),
     retryJobLabel: s__('Job|Retry'),
-    toggleSidebar: __('Toggle Sidebar'),
     runAgainJobButtonLabel: s__('Job|Run again'),
   },
   forwardDeploymentFailureModalId,
@@ -30,7 +26,6 @@ export default {
   components: {
     GlButton,
     JobSidebarRetryButton,
-    TooltipOnTruncate,
   },
   inject: ['projectPath'],
   apollo: {
@@ -86,17 +81,11 @@ export default {
       return this.restJob.status && this.restJob.recoverable ? 'primary' : 'secondary';
     },
   },
-  methods: {
-    ...mapActions(['toggleSidebar']),
-  },
 };
 </script>
 
 <template>
   <div>
-    <tooltip-on-truncate :title="job.name" truncate-target="child"
-      ><h4 class="gl-mt-0 gl-mb-3 gl-text-truncate" data-testid="job-name">{{ job.name }}</h4>
-    </tooltip-on-truncate>
     <div class="gl-display-flex gl-gap-3">
       <gl-button
         v-if="restJob.erase_path"
@@ -156,13 +145,6 @@ export default {
         data-testid="cancel-button"
         rel="nofollow"
       />
-      <gl-button
-        :aria-label="$options.i18n.toggleSidebar"
-        category="secondary"
-        class="gl-md-display-none gl-ml-2"
-        icon="chevron-double-lg-right"
-        @click="toggleSidebar"
-      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue
index ebef3ecaa3f..f04987a87b5 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue
@@ -44,14 +44,10 @@ export default {
           this.job.finished_at ||
           this.job.erased_at ||
           this.job.queued_duration ||
-          this.job.id ||
           this.job.runner ||
           this.job.coverage,
       );
     },
-    jobId() {
-      return this.job?.id ? `#${this.job.id}` : '';
-    },
     runnerId() {
       const { id, short_sha: token, description } = this.job.runner;
 
@@ -87,7 +83,6 @@ export default {
     RUNNER: __('Runner'),
     TAGS: __('Tags'),
     TIMEOUT: __('Timeout'),
-    ID: __('Job ID'),
   },
   TIMEOUT_HELP_URL: helpPagePath('/ci/pipelines/settings.md', {
     anchor: 'set-a-limit-for-how-long-jobs-can-run',
@@ -113,7 +108,6 @@ export default {
       data-testid="job-timeout"
       :title="$options.i18n.TIMEOUT"
     />
-    <detail-row v-if="job.id" :value="jobId" :title="$options.i18n.ID" />
     <detail-row
       v-if="job.runner"
       :value="runnerId"
diff --git a/app/assets/javascripts/ci/job_details/job_app.vue b/app/assets/javascripts/ci/job_details/job_app.vue
index 5137ebfeaa8..85a12a1dca9 100644
--- a/app/assets/javascripts/ci/job_details/job_app.vue
+++ b/app/assets/javascripts/ci/job_details/job_app.vue
@@ -130,7 +130,7 @@ export default {
     },
 
     jobName() {
-      return sprintf(__('Job %{jobName}'), { jobName: this.job.name });
+      return sprintf(__('%{jobName}'), { jobName: this.job.name });
     },
   },
   watch: {
@@ -224,7 +224,7 @@ export default {
       <div class="build-page" data-testid="job-content">
         <!-- Header Section -->
         <header>
-          <div class="build-header top-area">
+          <div class="build-header gl-display-flex">
             <job-header
               :status="job.status"
               :time="headerTime"