5 files changed, 27 insertions, 2 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index b054bf36660..4d234a36fe5 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
+import { __ } from '../../../locale';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
 import ScrollButton from './detail/scroll_button.vue';
@@ -33,6 +34,9 @@ export default {
     isScrolledToTop() {
       return this.scrollPos === scrollPositions.top;
     },
+    jobOutput() {
+      return this.detailJob.output || __('No messages were logged');
+    },
   },
   mounted() {
     this.getTrace();
@@ -119,7 +123,7 @@ export default {
     >
       <code
         class="bash"
-        v-html="detailJob.output"
+        v-html="jobOutput"
       >
       </code>
       <div
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index 82881e2cc7f..c8e621504f0 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -32,6 +32,7 @@ export default {
     />
     <div class="ml-auto align-self-center">
       <button
+        v-if="job.started"
         type="button"
         class="btn btn-default btn-sm"
         @click="clickViewLog"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 83537e21f11..ffa8d13b09c 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1207,7 +1207,7 @@
     margin-left: -$gl-padding;
   }
 
-  .top-bar {
+  &.build-page .top-bar {
     top: 0;
     font-size: 12px;
     border-top-right-radius: $border-radius-default;
diff --git a/spec/javascripts/ide/components/jobs/detail_spec.js b/spec/javascripts/ide/components/jobs/detail_spec.js
index 00a2dc6c74c..641ba06f653 100644
--- a/spec/javascripts/ide/components/jobs/detail_spec.js
+++ b/spec/javascripts/ide/components/jobs/detail_spec.js
@@ -47,6 +47,16 @@ describe('IDE jobs detail view', () => {
     expect(vm.$el.querySelector('.bash').textContent).toContain('testing');
   });
 
+  it('renders empty message output', done => {
+    vm.$store.state.pipelines.detailJob.output = '';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged');
+
+      done();
+    });
+  });
+
   it('renders loading icon', () => {
     expect(vm.$el.querySelector('.build-loader-animation')).not.toBe(null);
     expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('');
diff --git a/spec/javascripts/ide/components/jobs/item_spec.js b/spec/javascripts/ide/components/jobs/item_spec.js
index 7c1dd4e475c..79e07f00e7b 100644
--- a/spec/javascripts/ide/components/jobs/item_spec.js
+++ b/spec/javascripts/ide/components/jobs/item_spec.js
@@ -26,4 +26,14 @@ describe('IDE jobs item', () => {
   it('renders CI icon', () => {
     expect(vm.$el.querySelector('.ic-status_passed_borderless')).not.toBe(null);
   });
+
+  it('does not render view logs button if not started', done => {
+    vm.job.started = false;
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.btn')).toBe(null);
+
+      done();
+    });
+  });
 });