Merge branch 'ee-46591-fix-ide-height-issues' into 'master'

EE Port (Resolve "Persistent banner creates problem for web ide")

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

app/assets/javascripts/flash.js

@@ -10,6 +10,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
+    window.dispatchEvent(new Event('resize'));
     if (document.body.classList.contains('flash-shown')) document.body.classList.remove('flash-shown');
   }, {
     once: true,

app/assets/javascripts/ide/components/ide.vue

@@ -78,13 +78,13 @@ export default {
 </script>
 
 <template>
-  <article class="ide">
+  <article class="ide position-relative d-flex flex-column align-items-stretch">
     <error-message
       v-if="errorMessage"
       :message="errorMessage"
     />
     <div
-      class="ide-view"
+      class="ide-view flex-grow d-flex"
     >
       <find-file
         v-show="fileFindVisible"

app/assets/stylesheets/framework/layout.scss

@@ -111,3 +111,42 @@ body {
 .with-performance-bar .layout-page {
   margin-top: $header-height + $performance-bar-height;
 }
+
+.fullscreen-layout {
+  padding-top: 0;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+
+  > #js-peek,
+  > .navbar-gitlab {
+    position: static;
+    top: auto;
+  }
+
+  .flash-container {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .alert-wrapper .flash-container .flash-alert:last-child,
+  .alert-wrapper .flash-container .flash-notice:last-child {
+    margin-bottom: 0;
+  }
+
+  .content-wrapper {
+    margin-top: 0;
+    padding-bottom: 0;
+    flex: 1;
+    min-height: 0;
+  }
+
+  &.flash-shown {
+    .content-wrapper {
+      margin-top: 0;
+    }
+  }
+}

app/assets/stylesheets/page_bundles/ide.scss

@@ -28,11 +28,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .ide-view {
   position: relative;
-  display: flex;
-  height: calc(100vh - #{$header-height});
   margin-top: 0;
   padding-bottom: $ide-statusbar-height;
   color: $gl-text-color;
+  min-height: 0; // firefox fix
 
   &.is-collapsed {
     .ide-file-list {
@@ -50,7 +49,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   display: flex;
   flex-direction: column;
   flex: 1;
-  min-height: 0;
+  min-height: 0; // firefox fix
 
   .file {
     height: 32px;
@@ -357,7 +356,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .multi-file-editor-holder {
   height: 100%;
-  min-height: 0;
+  min-height: 0; // firefox fix
 
   &.is-readonly,
   .editor.original {
@@ -546,7 +545,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
     border-left: 1px solid $white-dark;
     border-top: 1px solid $white-dark;
     border-top-left-radius: $border-radius-small;
-    min-height: 0;
+    min-height: 0; // firefox fix
   }
 }
 
@@ -758,7 +757,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .ide-loading {
   display: flex;
-  height: 100vh;
+  height: 100%;
   align-items: center;
   justify-content: center;
 }
@@ -772,60 +771,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .ide {
   overflow: hidden;
-
-  &.nav-only {
-    padding-top: $header-height;
-
-    .with-performance-bar & {
-      padding-top: $header-height + $performance-bar-height;
-    }
-
-    .flash-container {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .alert-wrapper .flash-container .flash-alert:last-child,
-    .alert-wrapper .flash-container .flash-notice:last-child {
-      margin-bottom: 0;
-    }
-
-    .content-wrapper {
-      margin-top: 0;
-      padding-bottom: 0;
-    }
-
-    &.flash-shown {
-      .content-wrapper {
-        margin-top: 0;
-      }
-
-      .ide-view {
-        height: calc(100vh - #{$header-height + $flash-height});
-      }
-    }
-  }
-}
-
-.with-performance-bar .ide.nav-only {
-  .flash-container {
-    margin-top: 0;
-  }
-
-  .content-wrapper {
-    margin-top: 0;
-    padding-bottom: 0;
-  }
-
-  .ide-view {
-    height: calc(100vh - #{$header-height + $performance-bar-height});
-  }
-
-  &.flash-shown {
-    .ide-view {
-      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
-    }
-  }
+  flex: 1;
 }
 
 .drag-handle {
@@ -1209,7 +1155,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .ide-context-body {
-  min-height: 0;
+  min-height: 0; // firefox fix
 }
 
 .ide-sidebar-project-title {

app/controllers/ide_controller.rb

 class IdeController < ApplicationController
-  layout 'nav_only'
+  layout 'fullscreen'
 
   def index
   end

app/views/ide/index.html.haml

-- @body_class = 'ide'
+- @body_class = 'ide-layout'
 - page_title 'IDE'
 
 - content_for :page_specific_javascripts do

app/views/layouts/nav_only.html.haml → app/views/layouts/fullscreen.html.haml

 !!! 5
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
-  %body{ class: "#{user_application_theme} #{@body_class} nav-only", data: { page: body_data_page } }
+  %body{ class: "#{user_application_theme} #{@body_class} fullscreen-layout", data: { page: body_data_page } }
     = render 'peek/bar'
     = header_message
     = render "layouts/header/default"
@@ -11,6 +11,6 @@
       = render "layouts/broadcast"
       = yield :flash_message
       = render "layouts/flash"
-    .content-wrapper{ id: "content-body" }
+    .content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
       = yield
     = footer_message

changelogs/unreleased/46591-fix-ide-height-issues.yml

+---
+title: Fix IDE issues with persistent banners
+merge_request: 21283
+author:
+type: fixed

ee/app/assets/stylesheets/framework/system_messages.scss

@@ -55,15 +55,6 @@
     margin-top: $system-header-height + $header-height;
   }
 
-  .ide.nav-only {
-    // body element on WebIDE page
-    padding-top: $header-height + $system-header-height;
-
-    .ide-view {
-      height: calc(100vh - #{$header-height + $system-header-height});
-    }
-  }
-
   // Performance Bar
   // System Header
   &.with-performance-bar {
@@ -82,13 +73,6 @@
     .right-sidebar {
       top: $header-height + $performance-bar-height + $system-header-height;
     }
-
-    // IDE adjustments
-
-    // body element on WebIDe view
-    .ide.nav-only {
-      padding-top: $header-height + $performance-bar-height + $system-header-height;
-    }
   }
 }
 
@@ -98,8 +82,6 @@
   // right sidebar eg: mr page
   .nav-sidebar,
   .right-sidebar,
-  // web IDE status bar
-  .ide-status-bar,
   // navless pages' footer eg: login page
   // navless pages' footer border eg: login page
   &.devise-layout-html body .footer-container,
@@ -108,83 +90,21 @@
   }
 }
 
-@mixin ide-height-with($map) {
-  $height: 0;
-  $height: $height + $header-height; // header is always present
-
-  @if (map-get($map, performance) == true) {
-    $height: $height + $performance-bar-height;
-  }
-
-  @if (map-get($map, system-header) == true) {
-    $height: $height + $system-header-height;
-  }
-
-  @if (map-get($map, system-footer) == true) {
-    $height: $height + $system-header-height;
-  }
-
-  @if (map-get($map, flash) == true) {
-    $height: $height + $flash-height;
-  }
-
-  height: calc(100vh - #{$height});
-}
-
-// Space adjustments for the IDE UI
-.ide.nav-only {
-  .ide-view {
-    .with-system-header & {
-      @include ide-height-with((system-header: true));
-    }
-
-    .with-system-footer & {
-      @include ide-height-with((system-footer: true));
-    }
-
-    .with-system-header.with-system-footer & {
-      @include ide-height-with((system-header: true, system-footer: true));
+.fullscreen-layout {
+  .header-message,
+  .footer-message {
+    position: static;
+    top: auto;
+    bottom: auto;
   }
 
-    .with-performance-bar.with-system-header & {
-      @include ide-height-with((system-header: true, performance: true));
-    }
-
-    .with-performance-bar.with-system-footer & {
-      @include ide-height-with((system-footer: true, performance: true));
-    }
-
-    .with-performance-bar.with-system-header.with-system-footer & {
-      @include ide-height-with((system-header: true, system-footer: true, performance: true));
-    }
-  }
-
-  // Repeat previous block of selectors but with addition of Flash
-  &.flash-shown .ide-view {
+  .content-wrapper {
     .with-system-header & {
-      @include ide-height-with((system-header: true, flash: true));
+      margin-top: 0;
     }
 
     .with-system-footer & {
-      @include ide-height-with((system-footer: true, flash: true));
-    }
-
-    .with-system-header.with-system-footer & {
-      @include ide-height-with((system-header: true, system-footer: true, flash: true));
-    }
-
-    .with-performance-bar.with-system-header & {
-      @include ide-height-with((system-header: true, performance: true, flash: true));
-    }
-
-    .with-performance-bar.with-system-footer & {
-      @include ide-height-with((system-footer: true, performance: true, flash: true));
-    }
-
-    .with-performance-bar.with-system-header.with-system-footer & {
-      @include ide-height-with(
-        (system-header: true, system-footer: true, performance: true, flash: true)
-      );
+      margin-top: 0;
     }
   }
 }