Hide job sidebar on mobile

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

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

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

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();
 };

changelogs/unreleased/52608-sidebar.yml

+---
+title: Hides sidebar for job page in mobile
+merge_request:
+author:
+type: fixed

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