Only render job sidebar block if it has content

Change sidebar's renderBlock() to return true only if
any of the block's <detail-row>s will be rendered
Change block to render only if renderBlock() returns true

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

@@ -73,15 +73,14 @@ export default {
     },
     renderBlock() {
       return (
-        this.job.merge_request ||
         this.job.duration ||
-        this.job.finished_data ||
+        this.job.finished_at ||
         this.job.erased_at ||
         this.job.queued ||
+        this.hasTimeout ||
         this.job.runner ||
         this.job.coverage ||
-        this.job.tags.length ||
-        this.job.cancel_path
+        this.job.tags.length
       );
     },
     hasArtifact() {
@@ -160,7 +159,7 @@ export default {
           </gl-link>
         </div>
-        <div :class="{ block: renderBlock }">
+        <div v-if="renderBlock" class="block">
           <detail-row
             v-if="job.duration"
             :value="duration"

changelogs/unreleased/59521-job-sidebar-has-a-blank-block.yml

+---
+title: Remove blank block from job sidebar
+merge_request: 30754
+author:
+type: fixed

spec/javascripts/jobs/components/job_app_spec.js

@@ -486,6 +486,31 @@ describe('Job App ', () => {
         });
       });
     });
+
+    describe('sidebar', () => {
+      it('has no blank blocks', done => {
+        mock.onGet(props.endpoint).replyOnce(
+          200,
+          Object.assign({}, job, {
+            duration: null,
+            finished_at: null,
+            erased_at: null,
+            queued: null,
+            runner: null,
+            coverage: null,
+            tags: [],
+            cancel_path: null,
+          }),
+        );
+
+        vm.$nextTick(() => {
+          vm.$el.querySelectorAll('.blocks-container > *').forEach(block => {
+            expect(block.textContent.trim()).not.toBe('');
+          });
+          done();
+        });
+      });
+    });
   });
   describe('archived job', () => {