Merge branch '7203-sticky-logs-topbar' into 'master'

Fix Pod Log topbar position when perf bar is disabled

Closes #7203

See merge request gitlab-org/gitlab-ee!7853

app/assets/stylesheets/framework/mixins.scss

@@ -272,7 +272,7 @@
   }
 }
 
-@mixin build-trace-top-bar($height, $top-position) {
+@mixin build-trace-top-bar($height) {
   height: $height;
   min-height: $height;
   background: $gray-light;
@@ -280,8 +280,12 @@
   color: $gl-text-color;
   position: sticky;
   position: -webkit-sticky;
-  top: $top-position;
+  top: $header-height;
   padding: $grid-size;
+
+  .with-performance-bar & {
+    top: $header-height + $performance-bar-height;
+  }
 }
 
 /*

app/assets/stylesheets/framework/variables.scss

@@ -247,7 +247,6 @@ $input-horizontal-padding: 12px;
  * Misc
  */
 $header-height: 40px;
-$header-height-pod-logs: 75px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;

app/assets/stylesheets/pages/builds.scss

@@ -55,29 +55,10 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(35px, $header-height);
+    @include build-trace-top-bar(35px);
 
-    &.affix {
-      top: $header-height;
-
-      // with sidebar
-      &.sidebar-expanded {
-        right: 306px;
-        left: 16px;
-      }
-
-      // without sidebar
-      &.sidebar-collapsed {
-        right: 16px;
-        left: 16px;
-      }
-    }
-
-    &.affix-top {
-      position: absolute;
-      right: 0;
-      left: 0;
-      top: 0;
+    &.sidebar-expanded {
+      margin-right: calc(#{$gutter-width} - 16px);
     }
 
     .truncated-info {
@@ -159,16 +140,6 @@
   }
 }
 
-.with-performance-bar .build-page {
-  .top-bar {
-    top: $header-height + $performance-bar-height;
-
-    &.affix {
-      top: $header-height + $performance-bar-height;
-    }
-  }
-}
-
 .build-header {
   .ci-header-container,
   .header-action-buttons {

app/views/layouts/header/_default.html.haml

@@ -5,7 +5,7 @@
 - else
   - search_path_url = search_path
 
-%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.navbar-gitlab-new
+%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.navbar-gitlab-new.js-navbar
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
   .container-fluid
     .header-content

ee/app/assets/stylesheets/pages/builds.scss

@@ -8,7 +8,7 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(48px, $header-height-pod-logs);
+    @include build-trace-top-bar(48px);
     display: flex;
 
     .truncated-info {

ee/changelogs/unreleased/7203-sticky-logs-topbar.yml

+---
+title: Fix Pod Log topbar position when perf bar is disabled
+merge_request:
+author:
+type: fixed

ee/spec/features/projects/environments_pod_logs_spec.rb

@@ -3,6 +3,8 @@ require 'spec_helper'
 describe 'Environment > Pod Logs', :js do
   include KubernetesHelpers
 
+  SCROLL_DISTANCE = 400
+
   let(:pod_names) { %w(foo bar) }
   let(:pod_name) { pod_names.first }
   let(:project) { create(:project, :repository) }
@@ -39,4 +41,49 @@ describe 'Environment > Pod Logs', :js do
       expect(page).to have_content("Log 1\nLog 2\nLog 3")
     end
   end
+
+  context 'with perf bar enabled' do
+    before do
+      allow_any_instance_of(WithPerformanceBar).to receive(:peek_enabled?).and_return(true)
+    end
+
+    it 'log header sticks to top' do
+      load_and_scroll_down
+
+      expect(log_header_top).to eq(navbar_height + perf_bar_height)
+    end
+  end
+
+  context 'with perf bar disabled' do
+    it 'log header sticks to top' do
+      load_and_scroll_down
+
+      expect(log_header_top).to eq(navbar_height)
+    end
+  end
+
+  def load_and_scroll_down
+    visit logs_project_environment_path(environment.project, environment, pod_name: pod_name)
+
+    wait_for_requests
+
+    scroll_down_build_log
+  end
+
+  def scroll_down_build_log
+    page.execute_script("$('.js-build-output').height('200vh')")
+    page.execute_script("window.scrollTo(0, #{SCROLL_DISTANCE})")
+  end
+
+  def perf_bar_height
+    page.evaluate_script("$('#js-peek').height()")
+  end
+
+  def navbar_height
+    page.evaluate_script("$('.js-navbar').height()")
+  end
+
+  def log_header_top
+    page.evaluate_script("$('.js-top-bar').offset().top") - SCROLL_DISTANCE
+  end
 end