Remove .block class from sidebar blocks

This change remove the block class that creates adds padding and a
border in favor of utility classes.

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"

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">

app/assets/javascripts/jobs/components/sidebar.vue

@@ -20,6 +20,7 @@ export default {
   i18n: {
     ...JOB_SIDEBAR,
   },
+  borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
   forwardDeploymentFailureModalId,
   components: {
     ArtifactsBlock,
@@ -72,7 +73,7 @@ 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 gl-display-flex gl-flex-nowrap gl-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 }}
@@ -107,38 +108,59 @@ export default {
           />
         </div>
 
-        <div v-if="job.terminal_path || job.new_issue_path" class="block retry-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"
             category="secondary"
             variant="confirm"
-            :href="job.new_issue_path"
-            class="float-left gl-mr-2"
             data-testid="job-new-issue"
-            >{{ $options.i18n.newIssue }}
+          >
+            {{ $options.i18n.newIssue }}
           </gl-button>
           <gl-button
             v-if="job.terminal_path"
             :href="job.terminal_path"
-            class="gl-md-display-block gl-lg-display-block float-left"
             target="_blank"
             data-testid="terminal-link"
           >
             {{ $options.i18n.debug }}
-            <gl-icon :size="14" name="external-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"

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"

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" />
 

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 }"

app/assets/stylesheets/page_bundles/build.scss

@@ -140,23 +140,6 @@
     width: 289px;
   }
 
-  .block {
-    width: 100%;
-    word-break: break-word;
-
-    &:last-child {
-      border-bottom: 1px solid $border-gray-normal;
-    }
-
-    &.coverage {
-      padding: 0 16px 11px;
-    }
-  }
-
-  .block-last {
-    padding: 16px 0;
-  }
-
   .trigger-variables-btn-container {
     justify-content: space-between;
     align-items: center;
@@ -198,18 +181,6 @@
     margin-left: 2px;
   }
 
-  .retry-link {
-    display: block;
-
-    .btn-inverted-secondary {
-      color: $blue-500;
-
-      &:hover {
-        color: $white;
-      }
-    }
-  }
-
   .stage-item {
     cursor: pointer;
 

changelogs/unreleased/300787-clean-up-block-class-for-jobs-feature.yml

+---
+title: Adjust debug button icon size in job detail page
+merge_request: 55886
+author:
+type: changed