Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

9 files changed, 45 insertions, 332 deletions

diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 2ec2da9241b..ca6c9b9a073 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -1,7 +1,3 @@
-.milestone-row {
-  @include str-truncated(90%);
-}
-
 .dashboard .side .card .card-header .input-group {
   .form-control {
     height: 42px;
@@ -49,195 +45,6 @@
   color: $gray-700;
 }
 
-.group-nav-container .nav-controls {
-  .group-filter-form {
-    flex: 1 1 auto;
-    margin-right: $gl-padding-8;
-  }
-
-  .dropdown-menu-right {
-    margin-top: 0;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      display: block;
-    }
-
-    .group-filter-form,
-    .dropdown {
-      margin-bottom: 10px;
-      margin-right: 0;
-    }
-
-    &,
-    .group-filter-form,
-    .group-filter-form-field,
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      width: 100%;
-    }
-  }
-}
-
-.group-home-panel {
-  margin-top: $gl-padding;
-  margin-bottom: $gl-padding;
-
-  .home-panel-avatar {
-    width: $home-panel-title-row-height;
-    height: $home-panel-title-row-height;
-    flex-shrink: 0;
-    flex-basis: $home-panel-title-row-height;
-  }
-
-  .home-panel-title {
-    font-size: 20px;
-    line-height: $gl-line-height-24;
-    font-weight: bold;
-
-    .icon {
-      vertical-align: -1px;
-    }
-
-    .home-panel-topic-list {
-      font-size: $gl-font-size;
-      font-weight: $gl-font-weight-normal;
-
-      .icon {
-        position: relative;
-        top: 3px;
-        margin-right: $gl-padding-4;
-      }
-    }
-  }
-
-  .home-panel-title-row {
-    @include media-breakpoint-down(sm) {
-      .home-panel-avatar {
-        width: $home-panel-avatar-mobile-size;
-        height: $home-panel-avatar-mobile-size;
-        flex-basis: $home-panel-avatar-mobile-size;
-
-        .avatar {
-          font-size: 20px;
-          line-height: 46px;
-        }
-      }
-
-      .home-panel-title {
-        margin-top: 4px;
-        margin-bottom: 2px;
-        font-size: $gl-font-size;
-        line-height: $gl-font-size-large;
-      }
-
-      .home-panel-topic-list,
-      .home-panel-metadata {
-        font-size: $gl-font-size-small;
-      }
-    }
-  }
-
-  .home-panel-metadata {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: $gl-btn-line-height;
-  }
-
-  .home-panel-description {
-    @include media-breakpoint-up(md) {
-      font-size: $gl-font-size-large;
-    }
-  }
-}
-
-.home-panel-buttons {
-  .home-panel-action-button {
-    vertical-align: top;
-  }
-
-  .new-project-subgroup {
-    .dropdown-primary {
-      min-width: 115px;
-    }
-
-    .dropdown-toggle {
-      .dropdown-btn-icon {
-        pointer-events: none;
-        color: inherit;
-        margin-left: 0;
-      }
-    }
-
-    .dropdown-menu {
-      min-width: 280px;
-      margin-top: 2px;
-    }
-
-    li:not(.divider) {
-      padding: 0;
-
-      &.droplab-item-selected {
-        .icon-container {
-          .list-item-checkmark {
-            visibility: visible;
-          }
-        }
-      }
-
-      .menu-item {
-        padding: 8px 4px;
-
-        &:hover {
-          background-color: $gray-darker;
-          color: $gray-900;
-        }
-      }
-
-      .icon-container {
-        float: left;
-        padding-left: 6px;
-
-        .list-item-checkmark {
-          visibility: hidden;
-        }
-      }
-
-      .description {
-        font-size: 14px;
-
-        strong {
-          display: block;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-
-      @include media-breakpoint-down(sm) {
-        display: flex;
-        align-items: flex-start;
-
-        .dropdown-primary {
-          flex: 1;
-        }
-
-        .dropdown-toggle {
-          width: auto;
-        }
-
-        .dropdown-menu {
-          width: 100%;
-          max-width: inherit;
-          min-width: inherit;
-        }
-      }
-    }
-  }
-}
-
 .card {
   .shared_runners_limit_under_quota {
     color: $green-500;
@@ -269,28 +76,10 @@
   }
 }
 
-.user-settings-pipeline-quota {
-  margin-top: $gl-padding;
-
-  .pipeline-quota {
-    border-top: 0;
-  }
-}
-
 table.pipeline-project-metrics tr td {
   padding: $gl-padding;
 }
 
-.mattermost-team-name {
-  color: $gl-text-color-secondary;
-}
-
-.mattermost-info {
-  display: block;
-  color: $gl-text-color-secondary;
-  margin-top: 10px;
-}
-
 .explore-groups.landing {
   .inner-content {
     padding: 0;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 0437fa19752..1bc6dfbd84a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -67,10 +67,6 @@
 
   .emoji-block {
     padding: $gl-padding-4 0;
-
-    @include media-breakpoint-down(md) {
-      padding: $gl-padding-8 0;
-    }
   }
 }
 
@@ -271,11 +267,6 @@
 
     .value {
       line-height: 1;
-
-      .assign-yourself {
-        margin-top: 10px;
-        display: block;
-      }
     }
 
     .issuable-sidebar {
@@ -292,10 +283,6 @@
       }
     }
 
-    .assign-yourself .btn-link {
-      padding-left: 0;
-    }
-
     .light {
       font-weight: $gl-font-weight-normal;
     }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 97c8182bab8..461d6a29b3a 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -130,10 +130,6 @@ ul.related-merge-requests > li {
     &:not(:only-child) {
       margin-right: $gl-padding-8;
     }
-
-    @include media-breakpoint-down(md) {
-      margin-top: $gl-padding-8;
-    }
   }
 }
 
@@ -154,10 +150,6 @@ ul.related-merge-requests > li {
 
   .btn-group:not(.hidden) {
     display: flex;
-
-    @include media-breakpoint-down(md) {
-      margin-top: $gl-padding-8;
-    }
   }
 
   .js-create-merge-request {
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 9d437531e6d..b537a46a6f2 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -106,6 +106,10 @@
         width: 100%;
       }
     }
+
+    .omniauth-btn {
+      width: 100%;
+    }
   }
 
   .new-session-tabs {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 36d39c1a613..1abaff40bc9 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -43,8 +43,6 @@ $tabs-holder-z-index: 250;
 }
 
 .mr-widget-section {
-  border-radius: $border-radius-default $border-radius-default 0 0;
-
   .code-text {
     flex: 1;
   }
@@ -88,7 +86,6 @@ $tabs-holder-z-index: 250;
 .mr-section-container {
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-  border-top: 0;
   background: var(--white, $white);
 }
 
@@ -110,11 +107,15 @@ $tabs-holder-z-index: 250;
     border-radius: $border-radius-default;
   }
 
-  .mr-widget-section,
+  .mr-widget-section:not(:first-child),
   .mr-widget-footer {
     border-top: solid 1px $border-color;
   }
 
+  .mr-widget-alert-container + .mr-widget-section {
+    border-top: 0;
+  }
+
   .mr-fast-forward-message {
     padding-left: $gl-padding-50;
     padding-bottom: $gl-padding;
@@ -525,9 +526,7 @@ $tabs-holder-z-index: 250;
 
 .mr-source-target {
   flex-wrap: wrap;
-  border-radius: $border-radius-default;
   padding: $gl-padding;
-  border: 1px solid $border-color;
   background: var(--white, $white);
   min-height: $mr-widget-min-height;
 
@@ -1027,3 +1026,13 @@ $tabs-holder-z-index: 250;
     vertical-align: middle;
   }
 }
+
+.mr-widget-alert-container {
+  $radius: $border-radius-default - 1px;
+
+  border-radius: $radius $radius 0 0;
+
+  .gl-alert:not(:last-child) {
+    margin-bottom: 1px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 6a2fa2ee7a1..b52a3c445b5 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -5,6 +5,12 @@
 }
 
 .avatar-image {
+  margin-bottom: $grid-size;
+
+  .avatar {
+    float: none;
+  }
+
   @include media-breakpoint-up(sm) {
     float: left;
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index dfd64d0773c..c330e0709a6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -79,91 +79,10 @@
   }
 }
 
-.project-home-panel {
-  .home-panel-avatar {
-    flex-basis: $home-panel-title-row-height;
-  }
-
-  .home-panel-title {
-    .icon {
-      vertical-align: -1px;
-    }
-
-    .home-panel-topic-list {
-      .icon {
-        top: 3px;
-      }
-    }
-  }
-
-  .home-panel-title-row {
-    @include media-breakpoint-down(sm) {
-      .home-panel-avatar {
-        width: $home-panel-avatar-mobile-size;
-        height: $home-panel-avatar-mobile-size;
-        flex-basis: $home-panel-avatar-mobile-size;
-
-        .avatar {
-          font-size: 20px;
-          line-height: 46px;
-        }
-      }
-
-      .home-panel-title {
-        margin-top: 4px;
-        margin-bottom: 2px;
-        font-size: $gl-font-size;
-        line-height: $gl-font-size-large;
-      }
-    }
-  }
-
-  .home-panel-description {
-    @include media-breakpoint-up(md) {
-      font-size: $gl-font-size-large;
-    }
-  }
-}
-
 .nav > .project-buttons {
   margin-top: 0;
 }
 
-.project-repo-buttons {
-  .btn {
-    svg {
-      fill: $gray-500;
-    }
-  }
-
-  .download-button {
-    @include media-breakpoint-down(md) {
-      margin-left: 0;
-    }
-  }
-
-  .project-clone-holder {
-    display: inline-block;
-    margin: $gl-padding 0 0;
-
-    input {
-      height: $input-height;
-    }
-  }
-
-  .clone-options-dropdown {
-    min-width: 240px;
-
-    .dropdown-menu-inner-content {
-      min-width: 320px;
-    }
-  }
-
-  .mobile-git-clone {
-    margin-top: $gl-padding-8;
-  }
-}
-
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
@@ -855,13 +774,6 @@ pre.light-well {
   }
 }
 
-.project-tip-command {
-  > .input-group-prepend:first-child,
-  > .input-group-append:first-child {
-    width: auto;
-  }
-}
-
 .protected-branches-list,
 .protected-tags-list {
   margin-bottom: 30px;
@@ -887,8 +799,7 @@ pre.light-well {
   }
 }
 
-.project-refs-form .dropdown-menu,
-.dropdown-menu-projects {
+.project-refs-form .dropdown-menu {
   width: 300px;
 
   @include media-breakpoint-up(sm) {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index cd99c667001..5fbb2e6443f 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -45,7 +45,7 @@ input[type='checkbox']:hover {
   margin: 0 8px;
 
   form {
-    @extend .form-control;
+    display: block;
     margin: 0;
     padding: 4px;
     width: $search-input-width;
@@ -139,7 +139,6 @@ input[type='checkbox']:hover {
 
   &.search-active {
     form {
-      @extend .form-control:focus;
       border-color: $blue-300;
       box-shadow: none;
 
@@ -297,6 +296,16 @@ input[type='checkbox']:hover {
   @include str-truncated(10em);
 }
 
+.global-search-dropdown-menu {
+  width: 100% !important;
+  max-width: 400px;
+
+  @include media-breakpoint-up(md) {
+    // This is larger than the container so width: 100% doesn't work.
+    width: 400px !important;
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index a371aa37e07..c6198315606 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -10,6 +10,10 @@
       color: $gl-text-color-secondary;
     }
 
+    .tree-ref-holder {
+      margin-right: 15px;
+    }
+
     @include media-breakpoint-up(sm) {
       display: flex;
 
@@ -28,7 +32,6 @@
 
       .tree-ref-holder {
         float: left;
-        margin-right: 15px;
       }
 
       .tree-ref-target-holder {
@@ -44,8 +47,11 @@
   }
 
   @include media-breakpoint-down(xs) {
+    .tree-ref-container {
+      justify-content: space-between;
+    }
+
     .repo-breadcrumb {
-      margin-top: 10px;
       position: relative;
 
       .dropdown-menu {