Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

13 files changed, 204 insertions, 113 deletions

diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index c1647c16c77..b8934d2797a 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -15,10 +15,6 @@
 
 .broadcast-banner-message {
   text-align: center;
-
-  .broadcast-message-dismiss {
-    color: inherit;
-  }
 }
 
 .broadcast-notification-message {
@@ -36,10 +32,6 @@
   &.preview {
     position: static;
   }
-
-  .broadcast-message-dismiss {
-    color: $gray-700;
-  }
 }
 
 .toggle-colors {
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index de767ac3fe0..5b7f1a3f38b 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -14,14 +14,11 @@
   .str-truncated {
     max-width: 70%;
   }
-
-  .user-calendar-activities-loading {
-    font-size: 24px;
-  }
 }
 
 .user-calendar {
   text-align: center;
+  min-height: 172px;
 
   .calendar {
     display: inline-block;
@@ -42,12 +39,9 @@
 
 .calendar-hint {
   font-size: 12px;
-
-  &.bottom-right {
-    direction: ltr;
-    margin-top: -23px;
-    float: right;
-  }
+  direction: ltr;
+  margin-top: -23px;
+  float: right;
 }
 
 .pika-single.gitlab-theme {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 8dbed9c03f2..deb2d6c4641 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -424,7 +424,6 @@ img.emoji {
 .w-15p { width: 15%; }
 .w-30p { width: 30%; }
 .w-60p { width: 60%; }
-.w-70p { width: 70%; }
 
 .h-12em { height: 12em; }
 .h-32-px { height: 32px;}
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index c0a2350d080..e16ab5ee72f 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -6,11 +6,18 @@
     border-top: 1px solid $border-color;
   }
 
+  &.has-body {
+    .file-title {
+      box-shadow: 0 -2px 0 0 var(--white);
+    }
+  }
+
+  table.code tr:last-of-type td:last-of-type {
+    @include gl-rounded-bottom-right-base();
+  }
+
   .file-title,
   .file-title-flex-parent {
-    border-top-left-radius: $border-radius-default;
-    border-top-right-radius: $border-radius-default;
-    box-shadow: 0 -2px 0 0 var(--white);
     cursor: pointer;
 
     .dropdown-menu {
@@ -113,7 +120,6 @@
   .diff-content {
     background: $white;
     color: $gl-text-color;
-    border-radius: 0 0 3px 3px;
 
     .unfold {
       cursor: pointer;
@@ -443,6 +449,7 @@
   }
 }
 
+.diff-table.code,
 table.code {
   width: 100%;
   font-family: $monospace-font;
@@ -453,14 +460,20 @@ table.code {
   table-layout: fixed;
   border-radius: 0 0 $border-radius-default $border-radius-default;
 
+  .diff-tr:first-of-type.line_expansion > .diff-td,
   tr:first-of-type.line_expansion > td {
     border-top: 0;
   }
 
-  tr:nth-last-of-type(2).line_expansion > td {
-    border-bottom: 0;
+  .diff-tr:nth-last-of-type(2).line_expansion > .diff-td,
+  tr:nth-last-of-type(2).line_expansion,
+  tr:last-of-type.line_expansion {
+    > td {
+      border-bottom: 0;
+    }
   }
 
+  .diff-tr.line_holder .diff-td,
   tr.line_holder td {
     line-height: $code-line-height;
     font-size: $code-font-size;
@@ -556,24 +569,95 @@ table.code {
   }
 
   .line_holder:last-of-type {
+    .diff-td:first-child,
     td:first-child {
       border-bottom-left-radius: $border-radius-default;
     }
   }
 
   &.left-side-selected {
+    .diff-td.line_content.parallel.right-side,
     td.line_content.parallel.right-side {
       user-select: none;
     }
   }
 
   &.right-side-selected {
+    .diff-td.line_content.parallel.left-side,
     td.line_content.parallel.left-side {
       user-select: none;
     }
   }
 }
 
+// Merge request diff grid layout
+.diff-grid {
+  .diff-grid-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .diff-grid-left,
+  .diff-grid-right {
+    display: grid;
+    grid-template-columns: 50px 8px 1fr;
+
+    .diff-td:nth-child(2) {
+      display: none;
+    }
+  }
+
+  .diff-grid-comments {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .diff-grid-drafts {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  &.inline {
+    .diff-grid-comments {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    .diff-grid-drafts {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    .diff-grid-row {
+      grid-template-columns: 1fr;
+    }
+
+    .diff-grid-left,
+    .diff-grid-right {
+      grid-template-columns: 50px 50px 8px 1fr;
+
+      .diff-td:nth-child(2) {
+        display: block;
+      }
+    }
+
+    .diff-grid-left .old:nth-child(1) [data-linenumber],
+    .diff-grid-right .new:nth-child(2) [data-linenumber] {
+      display: inline;
+    }
+
+    .diff-grid-left .old:nth-child(2) [data-linenumber],
+    .diff-grid-right .new:nth-child(1) [data-linenumber] {
+      display: none;
+    }
+  }
+}
+
+// Merge request diff grid layout overrides
+.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel {
+  width: unset;
+}
+
 .diff-stats {
   align-items: center;
   padding: 0 1rem;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ca20b18f851..2094c824286 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -407,7 +407,8 @@
         }
       }
 
-      &.droplab-item-selected i {
+      &.droplab-item-selected i,
+      &.droplab-item-selected svg {
         visibility: visible;
       }
 
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index 20fea7a82ca..c3b287a6c3d 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -1,3 +1,21 @@
+[data-editor-loading] {
+  @include gl-relative;
+  @include gl-display-flex;
+  @include gl-justify-content-center;
+  @include gl-align-items-center;
+
+  &::before {
+    content: '';
+    @include spinner(32px, 3px);
+    @include gl-absolute;
+    @include gl-z-index-1;
+  }
+
+  pre {
+    opacity: 0;
+  }
+}
+
 [id^='editor-lite-'] {
   height: 500px;
 }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index f8710cc1346..fe8c27ae9b6 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -45,11 +45,6 @@
     }
 
     .file-actions {
-      position: absolute;
-      top: 5px;
-      right: 15px;
-      margin-left: auto;
-
       .btn:not(.btn-icon) {
         padding: 0 10px;
         font-size: 13px;
@@ -342,30 +337,14 @@ span.idiff {
     padding: $gl-padding-8 $gl-padding;
     margin: 0;
     border-radius: $border-radius-default $border-radius-default 0 0;
-  }
-
-  .file-header-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 30px;
-    position: relative;
-    width: auto;
-
-    @media (max-width: map-get($grid-breakpoints, sm)-1) {
-      width: 100%;
-    }
-  }
 
-  .file-holder & {
-    .file-actions {
-      position: static;
+    @include media-breakpoint-up(md) {
+      flex-wrap: nowrap;
     }
   }
 
-  .btn-clipboard {
-    position: absolute;
-    right: 0;
+  .file-header-content {
+    padding-right: 30px;
   }
 
   a {
@@ -384,15 +363,11 @@ span.idiff {
     z-index: 2;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     display: block;
 
     .file-actions {
-      white-space: normal;
-
-      .btn-group {
-        padding-top: 5px;
-      }
+      margin-top: 5px;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 0fb91db0afb..d5f7ec68454 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -9,9 +9,15 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
 
   &.sticky {
     position: sticky;
-    position: -webkit-sticky;
     top: $flash-container-top;
     z-index: 251;
+
+    .flash-alert,
+    .flash-notice,
+    .flash-success,
+    .flash-warning {
+      @include gl-mb-4;
+    }
   }
 
   &.flash-container-page {
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 63be2bdef8e..20d44b71bf6 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -3,6 +3,38 @@
  * Mixins with fixed values
  */
 
+@keyframes blinking-dot {
+  0% {
+    opacity: 1;
+  }
+
+  25% {
+    opacity: 0.4;
+  }
+
+  75% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blinking-scroll-button {
+  0% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
+}
+
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index f8c46a4495e..372e3bed6e0 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -117,12 +117,6 @@ body.modal-open {
       border-bottom-right-radius: $modal-border-radius;
     }
   }
-
-  @include media-breakpoint-up(sm) {
-    .modal-dialog {
-      margin: 64px auto;
-    }
-  }
 }
 
 .recaptcha-modal .recaptcha-form {
@@ -134,7 +128,7 @@ body.modal-open {
 }
 
 .issues-import-modal,
-.issues-export-modal {
+.issuable-export-modal {
   .modal-header {
     justify-content: flex-start;
 
@@ -166,8 +160,4 @@ body.modal-open {
       min-height: $modal-body-height;
     }
   }
-
-  .checkmark {
-    color: $green-400;
-  }
 }
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 7ebc972ac37..3e218de6af9 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -69,7 +69,7 @@
     line-height: 28px;
     white-space: normal;
 
-    /* Small devices (phones, tablets, 768px and lower) */
+    /* Small devices (phones, 768px and lower) */
     @include media-breakpoint-down(xs) {
       width: 100%;
     }
@@ -92,7 +92,7 @@
       padding: 16px 15px 11px;
     }
 
-    /* Small devices (phones, tablets, 768px and lower) */
+    /* Small devices (phones, 768px and lower) */
     @include media-breakpoint-down(sm) {
       width: 100%;
     }
@@ -102,15 +102,6 @@
     display: inline-block;
     text-align: right;
 
-    @include media-breakpoint-down(sm) {
-      margin-top: $gl-padding-8;
-    }
-
-    @include media-breakpoint-up(md) {
-      display: flex;
-      align-items: center;
-    }
-
     > .btn,
     > .btn-group,
     > .btn-container,
@@ -146,6 +137,35 @@
       }
     }
 
+    @include media-breakpoint-up(md) {
+      display: flex;
+      align-items: center;
+    }
+
+    @include media-breakpoint-down(md) {
+      $controls-margin: $btn-margin-5 - 2px;
+      flex: 0 0 100%;
+      margin-top: $gl-padding-8;
+
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
+
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
+      }
+
+      .controls-item-full {
+        flex: 1 1 100%;
+      }
+    }
+
     @include media-breakpoint-down(sm) {
       padding-bottom: 0;
       width: 100%;
@@ -239,32 +259,6 @@
   pre {
     width: 100%;
   }
-
-  @include media-breakpoint-down(md) {
-    .nav-controls {
-      $controls-margin: $btn-margin-5 - 2px;
-      flex: 0 0 100%;
-      margin-top: $gl-padding-8;
-
-      .controls-item,
-      .controls-item-full,
-      .controls-item:last-child {
-        flex: 1 1 35%;
-        display: block;
-        width: 100%;
-        margin: $controls-margin;
-
-        .btn,
-        .dropdown {
-          margin: 0;
-        }
-      }
-
-      .controls-item-full {
-        flex: 1 1 100%;
-      }
-    }
-  }
 }
 
 .scrolling-tabs-container {
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index a74aeb9f220..2aa0ab6c1eb 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -20,7 +20,7 @@
   }
 }
 
-.spinner {
+@mixin spinner($size: 16px, $border-width: 2px, $color: $orange-400) {
   border-radius: 50%;
   position: relative;
   margin: 0 auto;
@@ -30,8 +30,12 @@
   animation-iteration-count: infinite;
   border-style: solid;
   display: inline-flex;
-  @include spinner-size(16px, 2px);
-  @include spinner-color($orange-400);
+  @include spinner-size($size, $border-width);
+  @include spinner-color($color);
+}
+
+.spinner {
+  @include spinner;
 
   &.spinner-md {
     @include spinner-size(32px, 3px);
@@ -56,3 +60,7 @@
     vertical-align: text-bottom;
   }
 }
+
+.spin {
+  animation: spinner-rotate 2s infinite linear;
+}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index c15d46d43b2..3d09edfe181 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -453,11 +453,9 @@
   h4,
   h5,
   h6 {
-    position: relative;
-
     a.anchor {
-      left: -16px;
-      position: absolute;
+      float: left;
+      margin-left: -16px;
       text-decoration: none;
       outline: none;