Hide job sidebar on mobile

This commit adds back `js-` classes needed to
automatically collapse the sidebar on resize.

5 files changed, 49 insertions, 5 deletions

diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 35d40c6898e..cc885ea8e1b 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -65,7 +65,7 @@ export default {
 };
 </script>
 <template>
-  <div class="top-bar">
+  <div class="top-bar affix js-top-bar">
     <!-- truncate information -->
     <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
       <template v-if="isTraceSizeVisible">
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 7f0f301d72a..047cc4fb663 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -110,7 +110,7 @@ export default {
 </script>
 <template>
   <aside
-    class="right-sidebar right-sidebar-expanded build-sidebar"
+    class="js-build-sidebar right-sidebar right-sidebar-expanded build-sidebar"
     data-offset-top="101"
     data-spy="affix"
   >
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index 22eef770687..15cd79b1c50 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -9,8 +9,7 @@ import createStore from './store';
 export default () => {
   const { dataset } = document.getElementById('js-job-details-vue');
 
-  // eslint-disable-next-line no-new
-  new Job();
+
 
   const store = createStore();
   store.dispatch('setJobEndpoint', dataset.endpoint);
@@ -71,4 +70,7 @@ export default () => {
       });
     },
   });
+
+  // eslint-disable-next-line no-new
+  new Job();
 };
diff --git a/changelogs/unreleased/52608-sidebar.yml b/changelogs/unreleased/52608-sidebar.yml
new file mode 100644
index 00000000000..9eca30f7b95
--- /dev/null
+++ b/changelogs/unreleased/52608-sidebar.yml
@@ -0,0 +1,5 @@
+---
+title: Hides sidebar for job page in mobile
+merge_request:
+author:
+type: fixed
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index d981a919fd8..6224cbffe9d 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -667,7 +667,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
     context 'with erased job', :js do
       let(:job) { create(:ci_build, :erased, pipeline: pipeline) }
 
-      it'renders erased job warning' do
+      it 'renders erased job warning' do
         visit project_job_path(project, job)
         wait_for_requests
 
@@ -676,6 +676,43 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
       end
     end
+
+    context 'without erased job', :js do
+      let(:job) { create(:ci_build, pipeline: pipeline) }
+
+      it 'does not render erased job warning' do
+        visit project_job_path(project, job)
+        wait_for_requests
+
+        expect(page).not_to have_css('.js-job-erased-block')
+      end
+    end
+
+    context 'on mobile', :js do
+      let(:job) { create(:ci_build, pipeline: pipeline) }
+
+      it 'renders collpased sidebar' do
+        page.current_window.resize_to(600, 800)
+
+        visit project_job_path(project, job)
+        wait_for_requests
+
+        expect(page).to have_css('.js-build-sidebar.right-sidebar-collapsed', visible: false)
+        expect(page).not_to have_css('.js-build-sidebar.right-sidebar-expanded', visible: false)
+      end
+    end
+
+    context 'on desktop', :js do
+      let(:job) { create(:ci_build, pipeline: pipeline) }
+
+      it 'renders expanded sidebar' do
+        visit project_job_path(project, job)
+        wait_for_requests
+
+        expect(page).to have_css('.js-build-sidebar.right-sidebar-expanded')
+        expect(page).not_to have_css('.js-build-sidebar.right-sidebar-collpased')
+      end
+    end
   end
 
   describe "POST /:project/jobs/:id/cancel", :js do