Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

10 files changed, 83 insertions, 340 deletions

diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c96d8ecc782..19318d87731 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -33,12 +33,6 @@
       height: 22px;
     }
   }
-
-  .mr-widget-pipeline-graph {
-    .dropdown-menu {
-      margin-top: 11px;
-    }
-  }
 }
 
 .branch-info .commit-icon {
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
deleted file mode 100644
index c177d0b74a2..00000000000
--- a/app/assets/stylesheets/pages/editor.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-.file-editor {
-  .nav-links {
-    border-top: 1px solid $border-color;
-    border-right: 1px solid $border-color;
-    border-left: 1px solid $border-color;
-    border-bottom: 0;
-    border-radius: $border-radius-small $border-radius-small 0 0;
-    background: $gray-normal;
-  }
-
-  #editor,
-  .editor {
-    @include gl-border-0;
-    @include gl-m-0;
-    @include gl-p-0;
-    @include gl-relative;
-    @include gl-w-full;
-    height: 500px;
-
-    .editor-loading-content {
-      @include gl-h-full;
-      @include gl-border-0;
-    }
-  }
-
-  .ace_gutter-cell {
-    background-color: $gray-light;
-  }
-
-  .cancel-btn {
-    color: $red-600;
-
-    &:hover {
-      color: $red-600;
-    }
-  }
-
-  .file-title {
-    @include gl-font-monospace;
-  }
-
-  .editor-ref {
-    background: $gray-light;
-    padding-right: $gl-padding;
-    border-right: 1px solid $border-color;
-    display: block;
-    float: left;
-    margin-right: 10px;
-    max-width: 250px;
-  }
-
-  .new-file-name,
-  .new-file-path {
-    display: inline-block;
-    max-width: 250px;
-    float: left;
-
-    @media(max-width: map-get($grid-breakpoints, lg)-1) {
-      width: 180px;
-    }
-
-    @media (max-width: 1360px) {
-      width: auto;
-    }
-  }
-
-  .file-buttons {
-    flex: 1;
-  }
-
-  .soft-wrap-toggle {
-    font-family: $regular-font;
-    margin-left: $gl-padding-8;
-
-    .soft-wrap {
-      display: inline-flex;
-    }
-
-    .no-wrap {
-      display: none;
-    }
-
-    &.soft-wrap-active {
-      .soft-wrap {
-        display: none;
-      }
-
-      .no-wrap {
-        display: inline-flex;
-      }
-    }
-  }
-}
-
-
-@include media-breakpoint-down(md) {
-  .file-editor {
-    .file-title {
-      display: block;
-    }
-
-    .new-file-name,
-    .new-file-path {
-      max-width: none;
-      width: 100%;
-      margin-top: $gl-padding-8;
-    }
-
-    .file-buttons {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      .md-header-toolbar {
-        margin: $gl-padding 0;
-      }
-
-      .soft-wrap-toggle {
-        width: 100%;
-        margin-left: 0;
-      }
-
-      @media(max-width: map-get($grid-breakpoints, md)-1) {
-        clear: both;
-      }
-    }
-  }
-}
-
-.blob-new-page-title,
-.blob-edit-page-title {
-  margin: 19px 0 21px;
-  vertical-align: top;
-  display: inline-block;
-
-  @media(max-width: map-get($grid-breakpoints, lg)-1) {
-    display: block;
-    margin: 19px 0 12px;
-  }
-}
-
-.template-selectors-menu {
-  display: flex;
-  vertical-align: top;
-
-  @media(max-width: map-get($grid-breakpoints, lg)-1) {
-    display: inline-block;
-    width: 100%;
-    padding: 0;
-    border-left: 0;
-  }
-}
-
-.template-selector-dropdowns-wrap {
-  display: flex;
-  vertical-align: top;
-
-  @media(max-width: map-get($grid-breakpoints, lg)-1) {
-    display: block;
-    width: 100%;
-    margin: 0 0 16px;
-  }
-
-  .license-selector,
-  .gitignore-selector,
-  .gitlab-ci-yml-selector,
-  .dockerfile-selector,
-  .template-type-selector,
-  .metrics-dashboard-selector {
-    display: inline-block;
-    vertical-align: top;
-    font-family: $regular_font;
-    margin: 0 8px 0 0;
-
-    @media(max-width: map-get($grid-breakpoints, lg)-1) {
-      display: block;
-      width: 100%;
-      margin: 5px 0;
-    }
-
-    .dropdown {
-      line-height: 21px;
-    }
-
-    .dropdown-menu-toggle {
-      width: 200px;
-      vertical-align: top;
-
-      @media (max-width: map-get($grid-breakpoints, xl)-1) {
-        width: auto;
-      }
-
-      @media(max-width: map-get($grid-breakpoints, lg)-1) {
-        display: block;
-        width: 100%;
-        margin: 5px 0;
-      }
-    }
-  }
-}
-
-.popover.suggest-gitlab-ci-yml {
-  z-index: $header-zindex - 1;
-}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 69797c6b303..85205f4d5ac 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -297,7 +297,7 @@
           padding: 0;
 
           .issuable-context-form {
-            --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
+            --initial-top: calc(#{$header-height} + 76px);
             --top: var(--initial-top);
 
             @include gl-sticky;
@@ -613,7 +613,7 @@
 }
 
 .participants-author {
-  &:nth-of-type(7n) {
+  &:nth-of-type(8n) {
     padding-right: 0;
   }
 
@@ -962,40 +962,26 @@
     border-left: 2px solid $gray-50;
     position: absolute;
     left: 39px;
-    height: 80%;
+    height: calc(100% + #{$gl-spacing-scale-5});
+    top: -#{$gl-spacing-scale-5};
   }
 
-  &:first-child::before,
-  &:last-child::after {
+  &:first-child::before {
     content: none;
   }
 
   &:first-child {
     &::after {
-      top: 50%;
+      top: $gl-spacing-scale-5;
+      height: calc(100% + #{$gl-spacing-scale-5});
     }
   }
 
-  &:last-child {
+  &:last-child,
+  &.create-timeline-event {
     &::before {
-      bottom: 50%;
-    }
-  }
-
-  &:not(:first-child):not(:last-child) {
-    &::before {
-      top: -10%;
-    }
-
-    &::after {
-      bottom: -10%;
-    }
-  }
-
-  &.timeline-event-note-form {
-    &::before {
-      top: -15% !important; // Override default positioning
-      height: 20%;
+      top: - #{$gl-spacing-scale-5} !important; // Override default positioning
+      @include gl-h-8;
     }
 
     &::after {
@@ -1007,3 +993,22 @@
 .timeline-event-note-form {
   padding-left: 20px;
 }
+
+.timeline-entry:not(:last-child) {
+  .timeline-event-border {
+    @include gl-pb-5;
+    @include gl-border-gray-50;
+    @include gl-border-1;
+    @include gl-border-b-solid;
+  }
+}
+
+.timeline-group:last-child {
+  .timeline-entry:last-child,
+  .create-timeline-event {
+    .timeline-event-bottom-border {
+      @include gl-border-b;
+      @include gl-pt-5;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index a151c28fe93..843daec8cda 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -259,13 +259,15 @@ ul.related-merge-requests > li gl-emoji {
 }
 
 .issue-sticky-header {
+  --width: 100%;
+
   @include gl-left-0;
-  @include gl-w-full;
+  width: var(--width);
   top: $header-height;
 
   // collapsed right sidebar
   @include media-breakpoint-up(sm) {
-    width: calc(100% - #{$gutter-collapsed-width});
+    --width: calc(100% - #{$gutter-collapsed-width});
   }
 }
 
@@ -283,12 +285,12 @@ ul.related-merge-requests > li gl-emoji {
   // collapsed left sidebar + collapsed right sidebar
   .issue-sticky-header {
     left: $contextual-sidebar-collapsed-width;
-    width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
+    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
   }
 
   // collapsed left sidebar + expanded right sidebar
   .right-sidebar-expanded .issue-sticky-header {
-    width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
+    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
   }
 }
 
@@ -296,23 +298,23 @@ ul.related-merge-requests > li gl-emoji {
   // expanded left sidebar + collapsed right sidebar
   .issue-sticky-header {
     left: $contextual-sidebar-width;
-    width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width});
+    --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width});
   }
 
   // collapsed left sidebar + collapsed right sidebar
   .page-with-icon-sidebar .issue-sticky-header {
     left: $contextual-sidebar-collapsed-width;
-    width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
+    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
   }
 
   // expanded left sidebar + expanded right sidebar
   .right-sidebar-expanded .issue-sticky-header {
-    width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width});
+    --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width});
   }
 
   // collapsed left sidebar + expanded right sidebar
   .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header {
-    width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
+    --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
   }
 }
 
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 1beb9f05b6c..d4ad6da7f4d 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -1,3 +1,4 @@
+@import 'framework/variables';
 /* Login Page */
 .login-page {
   .container {
@@ -41,6 +42,13 @@
     font-size: 13px;
   }
 
+  .signin-text {
+    p {
+      margin-bottom: 0;
+      line-height: 1.5;
+    }
+  }
+
   .borderless {
     .login-box,
     .omniauth-container {
@@ -118,6 +126,18 @@
   }
 
   .new-session-tabs {
+    &.nav-links-unboxed {
+      border-color: transparent;
+      box-shadow: none;
+
+      .nav-item {
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 1px solid $gray-100;
+        background-color: transparent;
+      }
+    }
+
     display: flex;
     box-shadow: 0 0 0 1px $border-color;
     border-top-right-radius: $border-radius-default;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 9692becef4f..cb77c31d59a 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -48,7 +48,7 @@
 
 .common-note-form {
   .md-area {
-    padding: $gl-padding-8 $gl-padding;
+    padding: 0 $gl-padding;
     border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
@@ -305,7 +305,6 @@ table {
 }
 
 .comment-toolbar {
-  padding-top: $gl-padding-top;
   color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }
@@ -336,8 +335,7 @@ table {
 
 .toolbar-text {
   font-size: 14px;
-  line-height: 16px;
-  margin-top: 2px;
+  line-height: $gl-spacing-scale-7;
 
   @include media-breakpoint-up(md) {
     float: left;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index db07f16dfd0..fc1b78bf730 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -164,7 +164,7 @@ $system-note-svg-size: 16px;
     }
 
     .note-body {
-      padding: $gl-padding-4;
+      padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding-8;
       overflow-x: auto;
       overflow-y: hidden;
 
@@ -305,7 +305,7 @@ $system-note-svg-size: 16px;
       height: $system-note-icon-size;
       border: 1px solid $gray-10;
       border-radius: $system-note-icon-size;
-      margin: -6px 20px 0 0;
+      margin: -6px 0 0;
 
       svg {
         width: $system-note-svg-size;
@@ -334,10 +334,14 @@ $system-note-svg-size: 16px;
     border-radius: 0;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
-      top: calc(#{$mr-tabs-height} + #{$header-height});
+      --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
+
+      &.is-sidebar-moved {
+        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 28px});
+      }
 
       .with-performance-bar & {
-        top: 123px;
+        --top: 123px;
       }
     }
 
@@ -551,6 +555,7 @@ $system-note-svg-size: 16px;
 .note-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   flex-wrap: wrap;
 
   > .note-header-info,
@@ -581,7 +586,7 @@ $system-note-svg-size: 16px;
 
 .note-header-info {
   min-width: 0;
-  padding-left: $gl-padding-4;
+  padding-left: $gl-padding-8;
 
   &.discussion {
     padding-bottom: 0;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
deleted file mode 100644
index c7d7aacceec..00000000000
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.application-theme {
-  $ui-gray-bg: #303030;
-  $ui-light-gray-bg: #f0f0f0;
-  $ui-dark-mode-bg: #1f1f1f;
-
-  .preview {
-    font-size: 0;
-    height: 48px;
-    border-radius: 4px;
-    min-width: 112px;
-    margin-bottom: $gl-padding-8;
-
-    &.ui-indigo {
-      background-color: $indigo-900;
-    }
-
-    &.ui-light-indigo {
-      background-color: $indigo-700;
-    }
-
-    &.ui-blue {
-      background-color: $theme-blue-900;
-    }
-
-    &.ui-light-blue {
-      background-color: $theme-light-blue-700;
-    }
-
-    &.ui-green {
-      background-color: $theme-green-900;
-    }
-
-    &.ui-light-green {
-      background-color: $theme-light-green-700;
-    }
-
-    &.ui-red {
-      background-color: $theme-red-900;
-    }
-
-    &.ui-light-red {
-      background-color: $theme-light-red-700;
-    }
-
-    &.ui-gray {
-      background-color: $ui-gray-bg;
-      border: solid 1px $border-color;
-    }
-
-    &.ui-light-gray {
-      background-color: $ui-light-gray-bg;
-    }
-
-    &.gl-dark {
-      background-color: $ui-dark-mode-bg;
-      border: solid 1px $border-color;
-    }
-  }
-
-  .preview-row {
-    display: block;
-  }
-}
-
-.syntax-theme {
-  label {
-    margin-right: $gl-padding-32;
-    margin-bottom: $gl-padding;
-    text-align: center;
-
-    .preview {
-      margin-bottom: 10px;
-      width: 160px;
-
-      img {
-        border-radius: 4px;
-        max-width: 100%;
-      }
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 6c909b8d9fa..e8f71c8a21c 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -49,7 +49,7 @@ input[type='checkbox']:hover {
   }
 
   &.header-search-is-active {
-    .navbar-collapse {
+    .global-search-container {
       flex-grow: 1;
     }
 
@@ -59,12 +59,6 @@ input[type='checkbox']:hover {
         overflow: hidden;
       }
     }
-
-    @include media-breakpoint-up(xl) {
-      .navbar-nav {
-        padding-left: 1rem;
-      }
-    }
   }
 }
 
@@ -383,6 +377,10 @@ input[type='checkbox']:hover {
   .line_holder {
     pre {
       padding: 0; // This overrides the existing style that will add space between each line.
+      .line {
+        @include gl-word-break-word;
+        white-space: break-spaces;
+      }
     }
 
     svg {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 935595d1b3b..56acf6de828 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -349,3 +349,9 @@
     }
   }
 }
+
+.gl-md-flex-wrap-nowrap.gl-md-flex-wrap-nowrap {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-wrap-nowrap;
+  }
+}