Removes extra margin bottom in stuck block50904-api-adjustments-components

In the move to Vue, we had to use `p` elements to render the stuck info.
`p` tag will render with a margin-bottom, this commit removes that margin

5 files changed, 76 insertions, 66 deletions

diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
index 5ea75ef1dcd..0c04faeb2e3 100644
--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -19,7 +19,7 @@
     },
     computed: {
       erasedByUser() {
-        return _.isEmpty(this.user);
+        return !_.isEmpty(this.user);
       },
     },
   };
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index 18883fea950..a60643b2c65 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -24,14 +24,14 @@ export default {
   <div class="bs-callout bs-callout-warning">
     <p
       v-if="hasNoRunnersForProject"
-      class="js-stuck-no-runners"
+      class="js-stuck-no-runners append-bottom-0"
     >
       {{ s__(`Job|This job is stuck, because the project
   doesn't have any runners online assigned to it.`) }}
     </p>
     <p
       v-else-if="tags.length"
-      class="js-stuck-with-tags"
+      class="js-stuck-with-tags append-bottom-0"
     >
       {{ s__(`This job is stuck, because you don't have
   any active runners online with any of these tags assigned to them:`) }}
@@ -45,7 +45,7 @@ export default {
     </p>
     <p
       v-else
-      class="js-stuck-no-active-runner"
+      class="js-stuck-no-active-runner append-bottom-0"
     >
       {{ s__(`This job is stuck, because you don't
   have any active runners that can run this job.`) }}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 4d8f05a81cc..a9c5e45f9fa 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3338,9 +3338,6 @@ msgstr ""
 msgid "Jobs"
 msgstr ""
 
-msgid "Job|Are you sure you want to erase this job?"
-msgstr ""
-
 msgid "Job|Browse"
 msgstr ""
 
diff --git a/spec/javascripts/jobs/components/empty_state_spec.js b/spec/javascripts/jobs/components/empty_state_spec.js
index 872cc1e3864..a4c343e1e57 100644
--- a/spec/javascripts/jobs/components/empty_state_spec.js
+++ b/spec/javascripts/jobs/components/empty_state_spec.js
@@ -27,7 +27,7 @@ describe('Empty State', () => {
     });
 
     it('renders img with provided path and size', () => {
-      expect(vm.$el.querySelector('img').getAttribute('src')).toEqual(props.illustrationPath);
+      expect(vm.$el.querySelector('img').getAttribute('data-src')).toEqual(props.illustrationPath);
       expect(vm.$el.querySelector('.svg-content').classList).toContain(props.illustrationSizeClass);
     });
 
diff --git a/spec/javascripts/jobs/components/job_log_controllers_spec.js b/spec/javascripts/jobs/components/job_log_controllers_spec.js
index 08d20e15a2c..099aca602c4 100644
--- a/spec/javascripts/jobs/components/job_log_controllers_spec.js
+++ b/spec/javascripts/jobs/components/job_log_controllers_spec.js
@@ -10,40 +10,39 @@ describe('Job log controllers', () => {
     vm.$destroy();
   });
 
-  describe('Truncate information', () => {
+  const props = {
+    rawPath: '/raw',
+    erasePath: '/erase',
+    size: 511952,
+    isScrollTopDisabled: false,
+    isScrollBottomDisabled: false,
+    isScrollingDown: true,
+    isTraceSizeVisible: true,
+  };
 
-    beforeEach(() => {
-      vm = mountComponent(Component, {
-        rawPath: '/raw',
-        erasePath: '/erase',
-        size: 511952,
-        canScrollToTop: true,
-        canScrollToBottom: true,
+  describe('Truncate information', () => {
+    describe('with isTraceSizeVisible', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, props);
+      });
+      it('renders size information', () => {
+        expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
       });
-    });
-
-    it('renders size information', () => {
-      expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
-    });
 
-    it('renders link to raw trace', () => {
-      expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
+      it('renders link to raw trace', () => {
+        expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
+      });
     });
-
   });
 
   describe('links section', () => {
     describe('with raw trace path', () => {
       it('renders raw trace link', () => {
-        vm = mountComponent(Component, {
-          rawPath: '/raw',
-          erasePath: '/erase',
-          size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
-        });
+        vm = mountComponent(Component, props);
 
-        expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual('/raw');
+        expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual(
+          '/raw',
+        );
       });
     });
 
@@ -52,8 +51,10 @@ describe('Job log controllers', () => {
         vm = mountComponent(Component, {
           erasePath: '/erase',
           size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
+          isScrollTopDisabled: true,
+          isScrollBottomDisabled: true,
+          isScrollingDown: false,
+          isTraceSizeVisible: true,
         });
 
         expect(vm.$el.querySelector('.js-raw-link-controller')).toBeNull();
@@ -62,13 +63,7 @@ describe('Job log controllers', () => {
 
     describe('when is erasable', () => {
       beforeEach(() => {
-        vm = mountComponent(Component, {
-          rawPath: '/raw',
-          erasePath: '/erase',
-          size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
-        });
+        vm = mountComponent(Component, props);
       });
 
       it('renders erase job link', () => {
@@ -80,10 +75,11 @@ describe('Job log controllers', () => {
       it('does not render erase button', () => {
         vm = mountComponent(Component, {
           rawPath: '/raw',
-          canEraseJob: false,
           size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
+          isScrollTopDisabled: true,
+          isScrollBottomDisabled: true,
+          isScrollingDown: false,
+          isTraceSizeVisible: true,
         });
 
         expect(vm.$el.querySelector('.js-erase-link')).toBeNull();
@@ -95,13 +91,7 @@ describe('Job log controllers', () => {
     describe('scroll top button', () => {
       describe('when user can scroll top', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, {
-            rawPath: '/raw',
-            erasePath: '/erase',
-            size: 511952,
-            canScrollToTop: true,
-            canScrollToBottom: true,
-          });
+          vm = mountComponent(Component, props);
         });
 
         it('renders enabled scroll top button', () => {
@@ -122,13 +112,17 @@ describe('Job log controllers', () => {
             rawPath: '/raw',
             erasePath: '/erase',
             size: 511952,
-            canScrollToTop: false,
-            canScrollToBottom: true,
+            isScrollTopDisabled: true,
+            isScrollBottomDisabled: false,
+            isScrollingDown: false,
+            isTraceSizeVisible: true,
           });
         });
 
         it('renders disabled scroll top button', () => {
-          expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual('disabled');
+          expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual(
+            'disabled',
+          );
         });
 
         it('does not emit scrollJobLogTop event on click', () => {
@@ -143,13 +137,7 @@ describe('Job log controllers', () => {
     describe('scroll bottom button', () => {
       describe('when user can scroll bottom', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, {
-            rawPath: '/raw',
-            erasePath: '/erase',
-            size: 511952,
-            canScrollToTop: true,
-            canScrollToBottom: true,
-          });
+          vm = mountComponent(Component, props);
         });
 
         it('renders enabled scroll bottom button', () => {
@@ -170,14 +158,17 @@ describe('Job log controllers', () => {
             rawPath: '/raw',
             erasePath: '/erase',
             size: 511952,
-            canScrollToTop: true,
-            canScrollToBottom: false,
+            isScrollTopDisabled: false,
+            isScrollBottomDisabled: true,
+            isScrollingDown: false,
+            isTraceSizeVisible: true,
           });
         });
 
         it('renders disabled scroll bottom button', () => {
-          expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual('disabled');
-
+          expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual(
+            'disabled',
+          );
         });
 
         it('does not emit scrollJobLogBottom event on click', () => {
@@ -187,7 +178,29 @@ describe('Job log controllers', () => {
           expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom');
         });
       });
+
+      describe('while isScrollingDown is true', () => {
+        it('renders animate class for the scroll down button', () => {
+          vm = mountComponent(Component, props);
+
+          expect(vm.$el.querySelector('.js-scroll-bottom').className).toContain('animate');
+        });
+      });
+
+      describe('while isScrollingDown is false', () => {
+        it('does not render animate class for the scroll down button', () => {
+          vm = mountComponent(Component, {
+            rawPath: '/raw',
+            erasePath: '/erase',
+            size: 511952,
+            isScrollTopDisabled: true,
+            isScrollBottomDisabled: false,
+            isScrollingDown: false,
+            isTraceSizeVisible: true,
+          });
+          expect(vm.$el.querySelector('.js-scroll-bottom').className).not.toContain('animate');
+        });
+      });
     });
   });
 });
-