1 files changed, 25 insertions, 9 deletions

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 7f2f4fc0331..231f45d7ae6 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue
@@ -4,6 +4,8 @@ import { isEmpty } from 'lodash';
 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';
@@ -15,6 +17,9 @@ import StagesDropdown from './stages_dropdown.vue';
 import TriggerBlock from './trigger_block.vue';
 
 export default {
+  i18n: {
+    toggleSidebar: __('Toggle Sidebar'),
+  },
   name: 'JobSidebar',
   forwardDeploymentFailureModalId,
   components: {
@@ -42,6 +47,9 @@ export default {
       // the artifact object will always have a locked property
       return Object.keys(this.job.artifact).length > 1;
     },
+    artifact() {
+      return convertObjectPropsToCamelCase(this.job.artifact, { deep: true });
+    },
     hasExternalLinks() {
       return this.externalLinks.length > 0;
     },
@@ -79,36 +87,44 @@ export default {
 <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">
         <sidebar-header
-          class="block gl-pb-4! gl-mb-2"
+          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"
-          :artifact="job.artifact"
+          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"