Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

10 files changed, 112 insertions, 129 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index a93c70c75d3..fa235f72e35 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -98,7 +98,6 @@
 }
 
 .note-action-button,
-.toolbar-btn,
 .dropdown-toggle-caret {
   @include transition(color);
 }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 10481294df5..264373451d5 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -6,7 +6,7 @@
 
 .nothing-here-block {
   text-align: center;
-  padding: 20px;
+  padding: 16px;
   color: $gl-text-color;
   font-weight: $gl-font-weight-normal;
   font-size: 14px;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index f8b1735207c..61a20c7a8fd 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -839,6 +839,18 @@ table.code {
   }
 }
 
+.commits-container {
+  .diff-files-changed {
+    @include media-breakpoint-up(sm) {
+      top: $header-height;
+
+      .with-performance-bar & {
+        top: $header-height + $performance-bar-height;
+      }
+    }
+  }
+}
+
 .diff-files-changed {
   .inline-parallel-buttons {
     position: relative;
@@ -854,12 +866,12 @@ table.code {
   @include media-breakpoint-up(sm) {
     position: -webkit-sticky;
     position: sticky;
-    top: $header-height;
+    top: $header-height + $mr-tabs-height;
     background-color: $white;
     z-index: 200;
 
     .with-performance-bar & {
-      top: $header-height + $performance-bar-height;
+      top: $header-height + $mr-tabs-height + $performance-bar-height;
     }
 
     &.is-stuck {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 144a396ea65..b05fbfaae6c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -50,12 +50,6 @@
       width: 100%;
     }
 
-    &.frequent-items-dropdown-menu {
-      padding: 0;
-      overflow-y: initial;
-      max-height: initial;
-    }
-
     // `GlDropdown` specifies the `max-height` of `.gl-new-dropdown-inner`
     // as `$dropdown-max-height`, but the `max-height` rule above forces
     // the parent `.dropdown-menu` to be _slightly_ too small because of
@@ -834,61 +828,11 @@
   }
 }
 
-header.header-content .dropdown-menu.frequent-items-dropdown-menu {
-  padding: 0;
-}
-
 .frequent-items-dropdown-container {
   display: flex;
   flex-direction: row;
   height: $grid-size * 40;
 
-  &.with-deprecated-styles {
-    width: 500px;
-    height: 354px;
-
-    .section-header,
-    .frequent-items-list-container li.section-empty {
-      padding: 0 $gl-padding;
-    }
-
-    .search-input-container {
-      position: relative;
-      padding: 4px $gl-padding;
-
-      .search-icon {
-        position: absolute;
-        top: 13px;
-        right: 25px;
-        color: $gray-300;
-      }
-    }
-
-    @include media-breakpoint-down(xs) {
-      flex-direction: column;
-      width: 100%;
-      height: auto;
-      flex: 1;
-
-      .frequent-items-dropdown-sidebar,
-      .frequent-items-dropdown-content {
-        width: 100%;
-      }
-
-      .frequent-items-dropdown-sidebar {
-        border-bottom: 1px solid $border-color;
-        border-right: 0;
-      }
-    }
-
-    .frequent-items-list-container {
-      width: auto;
-      height: auto;
-      padding-bottom: 0;
-    }
-  }
-
-  .frequent-items-dropdown-sidebar,
   .frequent-items-dropdown-content {
     @include gl-pt-3;
   }
@@ -897,11 +841,6 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     color: $almost-black;
   }
 
-  .frequent-items-dropdown-sidebar {
-    width: 30%;
-    border-right: 1px solid $border-color;
-  }
-
   .frequent-items-dropdown-content {
     position: relative;
     width: 70%;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 5ad7ceecb2b..df78543f96d 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -15,6 +15,16 @@
   border-top: 0;
   border-radius: $border-radius-default;
 
+  &.file-holder-top-border {
+    border-top: 1px solid $border-color;
+
+    .file-title {
+      // Prevents the top border getting clipped by the background
+      border-top-left-radius: $border-radius-default;
+      border-top-right-radius: $border-radius-default;
+    }
+  }
+
   &.file-holder-no-border {
     border: 0;
   }
@@ -136,6 +146,13 @@
      *  Blame file
      */
     &.blame {
+      //
+      // IMPORTANT PERFORMANCE OPTIMIZATION
+      //
+      // When viewinng a blame with many commits a lot of content is rendered on the page.
+      // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser.
+      content-visibility: auto;
+
       table {
         border: 0;
         margin: 0;
@@ -150,6 +167,12 @@
       }
 
       td {
+        //
+        // IMPORTANT PERFORMANCE OPTIMIZATION
+        //
+        // When viewinng a blame with many commits a lot of content is rendered on the page.
+        // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser.
+        content-visibility: auto;
         border-top: 0;
         border-bottom: 0;
 
@@ -509,6 +532,24 @@ span.idiff {
   }
 }
 
+.version-link {
+  @include gl-display-inline-block;
+  @include gl-align-self-center;
+  @include gl-mt-2;
+  @include gl-w-5;
+  @include gl-h-5;
+  @include gl-float-left;
+  background-color: $gray-400;
+  mask-image: asset_url('icons-stacked.svg#doc-versions');
+  mask-repeat: no-repeat;
+  mask-size: cover;
+  mask-position: center;
+
+  &:hover {
+    background-color: $black;
+  }
+}
+
 //
 // IMPORTANT PERFORMANCE OPTIMIZATION BELOW
 //
@@ -530,3 +571,18 @@ span.idiff {
 // will always be expanded to the maximum needed width.
 .blob-viewer[data-loading] .file-content.code .line:nth-of-type(1n+70):not(:last-of-type),
 .blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(1n+70):not(:last-of-type) {display: none !important;}
+
+.blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type),
+.blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(69):not(:last-of-type) {
+  &::after {
+    @include gl-display-block;
+    @include gl-font-weight-bold;
+    content: '\2026';
+  }
+}
+
+.blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type) {
+  &::after {
+    @include gl-text-center;
+  }
+}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 65d914e47cf..ae46ff33ec0 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -27,17 +27,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
     display: none;
   }
 
-  .menu-expanded {
-    .more-icon {
-      display: none;
-    }
-
-    .close-icon {
-      display: block;
-      margin: auto;
-    }
-  }
-
   .header-content {
     width: 100%;
     display: flex;
@@ -103,18 +92,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
     .navbar-collapse > ul.nav > li:not(.d-none) {
       margin: 0 2px;
     }
-
-    &.menu-expanded {
-      @include media-breakpoint-down(xs) {
-        .hide-when-menu-expanded {
-          display: none;
-        }
-
-        .navbar-collapse {
-          display: flex;
-        }
-      }
-    }
   }
 
   .navbar-collapse {
@@ -673,19 +650,30 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 }
 
 .top-nav-responsive-open {
-  .hide-when-top-nav-responsive-open {
-    @include media-breakpoint-down(xs) {
+  .more-icon {
+    display: none;
+  }
+
+  .close-icon {
+    display: block;
+    margin: auto;
+  }
+
+  @include media-breakpoint-down(xs) {
+    .navbar-collapse {
+      display: flex;
+    }
+
+    .hide-when-top-nav-responsive-open {
       display: none !important;
     }
-  }
 
-  .top-nav-responsive {
-    @include media-breakpoint-down(xs) {
+    .top-nav-responsive {
       @include gl-display-block;
     }
-  }
 
-  .navbar-gitlab .header-content .title-container {
-    flex: 0;
+    .navbar-gitlab .header-content .title-container {
+      flex: 0;
+    }
   }
 }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 2a97009e605..7315bce1ed9 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -83,6 +83,7 @@
   li.md-header-toolbar {
     margin-left: auto;
     display: none;
+    padding-bottom: $gl-padding-8;
 
     &.active {
       display: block;
@@ -92,8 +93,8 @@
         display: flex;
         justify-content: center;
         width: 100%;
-        padding-top: $gl-padding-top;
-        padding-bottom: $gl-padding-top;
+        flex-wrap: wrap;
+        margin-top: $gl-padding-8;
       }
     }
   }
@@ -131,36 +132,6 @@
   width: 100%;
 }
 
-.toolbar-btn {
-  float: left;
-  padding: 0 7px;
-  background: transparent;
-  border: 0;
-  outline: 0;
-
-  svg {
-    width: 14px;
-    height: 14px;
-    vertical-align: middle;
-    fill: $gl-text-color-secondary;
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      fill: $blue-600;
-    }
-  }
-}
-
-.toolbar-fullscreen-btn {
-  margin-right: -5px;
-
-  @include media-breakpoint-down(xs) {
-    margin-right: 0;
-  }
-}
-
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index f904ef11f5b..06eebb95438 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -14,7 +14,6 @@
     a,
     button {
       padding: $gl-padding-8;
-      padding-bottom: $gl-padding-8 + 1;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e35feb8c62d..6b3201ba2b0 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -237,3 +237,7 @@
   @include side-panel-toggle;
   border-bottom: 1px solid $border-color;
 }
+
+.edit-link {
+  margin-right: -$gl-spacing-scale-2;
+}
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
index a967d9a71f1..8b694b9be05 100644
--- a/app/assets/stylesheets/framework/source_editor.scss
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -25,6 +25,21 @@
   height: 500px;
 }
 
+.source-editor-preview {
+  @include gl-display-flex;
+
+  .md {
+    @include gl-overflow-scroll;
+    @include gl-px-6;
+    @include gl-py-4;
+    @include gl-w-full;
+  }
+
+  .gl-source-editor {
+    @include gl-order-n1;
+  }
+}
+
 .monaco-editor.gl-source-editor {
   .margin-view-overlays {
     .line-numbers {