Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

12 files changed, 172 insertions, 142 deletions

diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index d34d309eea3..18158fab75f 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -1,9 +1,3 @@
-.content-list > .branch-item,
-.branch-title {
-  display: flex;
-  align-items: center;
-}
-
 .branch-info {
   flex: auto;
   min-width: 0;
diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss
new file mode 100644
index 00000000000..20e072b9903
--- /dev/null
+++ b/app/assets/stylesheets/pages/colors.scss
@@ -0,0 +1,24 @@
+.color-item {
+  @include gl-align-items-center;
+  @include gl-display-flex;
+}
+
+.color-item-color {
+  @include gl-flex-shrink-0;
+  @include gl-mr-3;
+  @include gl-top-0;
+}
+
+.right-sidebar-collapsed {
+  .color-item {
+    @include gl-pt-3;
+  }
+
+  .color-item-color {
+    margin: 0;
+  }
+
+  .color-item-text {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 80b9e378252..c96d8ecc782 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -95,8 +95,14 @@
   }
 }
 
-.commits-row + .commits-row {
-  border-top: 1px solid $white-normal;
+.commits-row {
+  + .commits-row {
+    border-top: 1px solid $white-normal;
+  }
+
+  + .commits-empty {
+    display: none;
+  }
 }
 
 .text-expander {
@@ -133,18 +139,6 @@
   }
 }
 
-.commit-detail {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  flex-grow: 1;
-  min-width: 0;
-
-  .project-namespace {
-    color: $gl-text-color-tertiary;
-  }
-}
-
 .commit-content {
   padding-right: 10px;
   white-space: normal;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 96ca9fbcb43..2e1bb9b9eac 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -209,7 +209,6 @@ table.pipeline-project-metrics tr td {
     }
 
     .title {
-      margin-top: -$gl-padding-8; // negative margin required for flex-wrap
       font-size: $gl-font-size;
     }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f3182af3047..51f964a4b70 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -176,11 +176,16 @@
   }
 
   .gutter-toggle {
+    display: flex;
+    align-items: center;
     margin-left: 20px;
-    padding-left: 10px;
+    padding: 4px;
+    border-radius: 4px;
+    height: 24px;
 
     &:hover {
       color: $gl-text-color;
+      background: $gray-50;
     }
 
     &:hover,
@@ -291,7 +296,7 @@
         @include media-breakpoint-up(lg) {
           padding: 0;
 
-          form {
+          .issuable-context-form {
             --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
             --top: var(--initial-top);
 
@@ -338,7 +343,6 @@
     }
 
     .gutter-toggle {
-      border-left: 1px solid $border-gray-normal;
       text-align: center;
     }
 
@@ -405,8 +409,8 @@
       width: 100%;
       height: $sidebar-toggle-height;
       margin-left: 0;
-      padding-left: 0;
       border-bottom: 1px solid $border-white-normal;
+      border-radius: 0;
     }
 
     a.gutter-toggle {
@@ -709,10 +713,6 @@
         line-height: 20px;
         padding: 0;
       }
-
-      .issue-updated-at {
-        line-height: 20px;
-      }
     }
 
     @include media-breakpoint-down(xs) {
@@ -736,7 +736,7 @@
     .issuable-milestone,
     .issuable-info,
     .task-status,
-    .issuable-updated-at {
+    .issuable-timestamp {
       font-weight: $gl-font-weight-normal;
       color: $gl-text-color-secondary;
 
@@ -991,4 +991,19 @@
       bottom: -10%;
     }
   }
+
+  &.timeline-event-note-form {
+    &::before {
+      top: -15% !important; // Override default positioning
+      height: 20%;
+    }
+
+    &::after {
+      content: none;
+    }
+  }
+}
+
+.timeline-event-note-form {
+  padding-left: 20px;
 }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 04e0ef6631e..c0a283ec643 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -124,8 +124,16 @@ ul.related-merge-requests > li gl-emoji {
 
 .new-branch-col {
   .discussion-filter-container {
-    &:not(:only-child) {
-      margin-right: $gl-padding-8;
+    &:not(:last-child) {
+      margin-right: $gl-spacing-scale-3;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    width: 100%;
+
+    > div:not(:last-child) {
+      margin-bottom: $gl-spacing-scale-3;
     }
   }
 }
@@ -147,6 +155,16 @@ ul.related-merge-requests > li gl-emoji {
 
   .btn-group:not(.hidden) {
     display: flex;
+
+    @include media-breakpoint-down(xs) {
+      .btn.btn-confirm {
+        @include gl-justify-content-start;
+
+        &.dropdown-toggle {
+          @include gl-flex-grow-0;
+        }
+      }
+    }
   }
 
   .js-create-merge-request {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a3fbedd87a9..96fe6caeea2 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -349,3 +349,36 @@ $comparison-empty-state-height: 62px;
     }
   }
 }
+
+.mr-experience-survey-wrapper {
+  // setting this explicitly because:
+  //   diff-files-holder has z-index 203
+  //   z-index 9999 utility class breaks tooltips
+  z-index: 210;
+}
+
+.mr-experience-survey-body {
+  width: 300px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.mr-experience-survey-legal {
+  order: 1;
+}
+
+.mr-experience-survey-logo {
+  width: 16px;
+
+  svg {
+    max-width: 100%;
+  }
+}
+
+.survey-slide-up-enter {
+  transform: translateY(10px);
+  opacity: 0;
+}
+
+.survey-slide-up-enter-active {
+  @include gl-transition-slow;
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 82e96dee4c6..4d0cf30a3b2 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -70,41 +70,6 @@ $system-note-svg-size: 16px;
     }
   }
 
-  .replies-toggle {
-    background-color: $gray-light;
-    padding: $gl-padding-8 $gl-padding;
-    border-top: 1px solid $gray-100;
-    border-bottom: 1px solid $gray-100;
-
-    .collapse-replies-btn:hover {
-      color: $blue-600;
-    }
-
-    &.collapsed {
-      color: $gl-text-color-secondary;
-      border-radius: 0 0 $border-radius-default $border-radius-default;
-
-      img {
-        margin: -2px 4px 0 0;
-      }
-
-      .author-link {
-        color: $gl-text-color;
-      }
-    }
-
-    .user-avatar-link {
-      &:last-child img {
-        margin-right: $gl-padding-8;
-      }
-    }
-
-    .btn-link {
-      border: 0;
-      vertical-align: baseline;
-    }
-  }
-
   .discussion-toggle-replies {
     border-top: 0;
     border-radius: 4px 4px 0 0;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 518ec181e5e..c7d7aacceec 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,6 +1,6 @@
 .application-theme {
-  $ui-gray-bg: #2e2e2e;
-  $ui-light-gray-bg: #dfdfdf;
+  $ui-gray-bg: #303030;
+  $ui-light-gray-bg: #f0f0f0;
   $ui-dark-mode-bg: #1f1f1f;
 
   .preview {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 3b76130dd1a..0d45beab983 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -548,14 +548,6 @@ pre.light-well {
   }
 }
 
-.new-protected-branch,
-.new-protected-tag {
-  label {
-    margin-top: 6px;
-    font-weight: $gl-font-weight-normal;
-  }
-}
-
 .protected-branches-list,
 .protected-tags-list {
   margin-bottom: 30px;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 8755db83d35..f1865a7dc40 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -4,7 +4,8 @@ $search-sidebar-min-width: 240px;
 $search-sidebar-max-width: 300px;
 $search-input-field-x-min-width: 200px;
 $search-input-field-min-width: 320px;
-$search-input-field-max-width: 600px;
+$search-input-field-max-width: 640px;
+$search-keyboard-shortcut: '/';
 
 $border-radius-medium: 3px;
 
@@ -67,54 +68,53 @@ input[type='checkbox']:hover {
   }
 }
 
-// This is a temporary workaround!
-// the button in GitLab UI Search components need to be updated to not be the small size
-// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540
-.header-search .gl-search-box-by-type-clear.btn-sm {
-  padding: 0.5rem !important;
-}
-
 .header-search {
   min-width: $search-input-field-min-width;
 
+  // This is a temporary workaround!
+  // the button in GitLab UI Search components need to be updated to not be the small size
+  // see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540
+  .gl-search-box-by-type-clear.btn-sm {
+    padding: 0.5rem !important;
+  }
+
   @include media-breakpoint-between(md, lg) {
     min-width: $search-input-field-x-min-width;
   }
 
-  input,
-  svg {
-    transition: border-color ease-in-out $default-transition-duration,
-      background-color ease-in-out $default-transition-duration;
+  &.is-active {
+    &.is-searching {
+      .in-search-scope-help {
+        position: absolute;
+        top: $gl-spacing-scale-2;
+        right: 2.125rem;
+        z-index: 2;
+      }
+    }
   }
 
-  &.is-not-active {
-    .btn.gl-clear-icon-button {
+  &.is-not-searching {
+    .in-search-scope-help {
+      display: none;
+    }
+  }
+
+  .keyboard-shortcut-helper {
+    transform: translateY(calc(50% - 2px));
+    box-shadow: none;
+    border-color: transparent;
+  }
+
+  &.is-active {
+    .keyboard-shortcut-helper {
       display: none;
     }
+  }
 
-    &::after {
-      content: '/';
-      display: inline-block;
-      position: absolute;
-      top: 0;
-      right: 8px;
-      transform: translateY(calc(50% - 4px));
-      padding: 4px 5px;
-      font-size: $gl-font-size-small;
-      font-family: $monospace-font;
-      line-height: 1;
-      vertical-align: middle;
-      border-width: 0;
-      border-style: solid;
-      border-image: none;
-      border-radius: $border-radius-medium;
-      box-shadow: none;
-      white-space: pre-wrap;
-      box-sizing: border-box;
-      // Safari
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      word-break: keep-all;
+  &.is-not-active {
+    .btn.gl-clear-icon-button,
+    .in-search-scope-help {
+      display: none;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 0c7b74684cc..935595d1b3b 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -28,6 +28,7 @@
 
   &:first-of-type {
     margin-top: 10px;
+    padding-top: 0;
     border: 0;
   }
 
@@ -156,39 +157,33 @@
 }
 
 .visibility-level-setting {
-  .form-check {
-    margin-bottom: 10px;
-
-    .option-title {
-      font-weight: $gl-font-weight-normal;
-      display: inline-block;
-      color: $gl-text-color;
-      vertical-align: top;
-    }
+  .option-title {
+    font-weight: $gl-font-weight-normal;
+    display: inline-block;
+    color: $gl-text-color;
+    vertical-align: top;
+  }
 
-    .option-description,
-    .option-disabled-reason {
-      margin-left: 20px;
-      color: $project-option-descr-color;
-      margin-top: -5px;
+  .option-description,
+  .option-disabled-reason {
+    color: $project-option-descr-color;
+  }
+
+  .option-disabled-reason {
+    display: none;
+  }
+
+  .disabled {
+    svg {
+      opacity: 0.5;
     }
 
-    .option-disabled-reason {
+    .option-description {
       display: none;
     }
 
-    &.disabled {
-      svg {
-        opacity: 0.5;
-      }
-
-      .option-description {
-        display: none;
-      }
-
-      .option-disabled-reason {
-        display: block;
-      }
+    .option-disabled-reason {
+      display: block;
     }
   }
 }
@@ -320,7 +315,8 @@
 }
 
 .ci-variable-table,
-.deploy-freeze-table {
+.deploy-freeze-table,
+.ci-secure-files-table {
   table {
     thead {
       border-bottom: 1px solid $white-normal;