Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

9 files changed, 33 insertions, 659 deletions

diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 2f8602a212d..8794acd3c78 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -1,15 +1,3 @@
-@mixin flat-connector-before($length: 44px) {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 48%;
-    left: -$length;
-    border-top: 2px solid var(--border-color, $border-color);
-    width: $length;
-    height: 1px;
-  }
-}
-
 @mixin build-content($border-radius: 30px) {
   display: inline-block;
   padding: 8px 10px 9px;
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 10183f774b1..4806f4b054b 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -15,14 +15,6 @@
   }
 }
 
-.dropdown-menu-issues-board-new {
-  width: 320px;
-
-  .dropdown-content {
-    max-height: 140px;
-  }
-}
-
 .issue-board-dropdown-content {
   margin: 0;
   padding: $gl-padding-4 $gl-padding $gl-padding;
@@ -256,7 +248,8 @@
     margin-right: 4px;
   }
 
-  .confidential-icon {
+  .confidential-icon,
+  .hidden-icon {
     color: var(--orange-500, $orange-500);
     cursor: help;
   }
@@ -437,6 +430,10 @@
   height: $input-height;
 }
 
+.issue-boards-content {
+  isolation: isolate;
+}
+
 .issue-boards-content.is-focused {
   position: fixed;
   width: 100%;
diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
index 2248d95ae24..5d42ece32c9 100644
--- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss
+++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
@@ -3,293 +3,4 @@
 .cycle-analytics {
   margin: 24px auto 0;
   position: relative;
-
-  .landing {
-    margin-top: 0;
-
-    .inner-content {
-      white-space: normal;
-
-      h4,
-      p {
-        margin: 7px 0 0;
-        max-width: 480px;
-        padding: 0 $gl-padding;
-
-        @include media-breakpoint-down(sm) {
-          margin: 0 auto;
-        }
-      }
-    }
-
-    .svg-container svg {
-      width: 136px;
-      height: 136px;
-    }
-  }
-
-  .col-headers {
-    ul {
-      margin: 0;
-      padding: 0;
-    }
-
-    li {
-      line-height: 50px;
-    }
-  }
-
-  .card {
-    .content-block {
-      padding: 24px 0;
-      border-bottom: 0;
-      position: relative;
-
-      @include media-breakpoint-down(xs) {
-        padding: 6px 0 24px;
-      }
-    }
-
-    .column {
-      text-align: center;
-
-      @include media-breakpoint-down(xs) {
-        padding: 15px 0;
-      }
-
-      .header {
-        font-size: 30px;
-        line-height: 38px;
-        font-weight: $gl-font-weight-normal;
-        margin: 0;
-      }
-
-      .text {
-        color: var(--gray-500, $gray-500);
-        margin: 0;
-      }
-
-      &:last-child {
-        @include media-breakpoint-down(xs) {
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  .stage-panel-body {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .stage-nav,
-  .stage-entries {
-    display: flex;
-    vertical-align: top;
-    font-size: $gl-font-size;
-  }
-
-  .stage-nav {
-    width: 40%;
-    margin-bottom: 0;
-
-    ul {
-      padding: 0;
-      margin: 0;
-      width: 100%;
-    }
-
-    li {
-      list-style-type: none;
-    }
-
-    .stage-nav-item {
-      line-height: 65px;
-
-      &.active {
-        background: var(--blue-50, $blue-50);
-        border-color: var(--blue-300, $blue-300);
-        box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500);
-      }
-
-      &:hover:not(.active) {
-        background-color: var(--gray-10, $gray-10);
-        box-shadow: inset 2px 0 0 0 var(--border-color, $border-color);
-        cursor: pointer;
-      }
-
-      .stage-nav-item-cell.stage-name {
-        width: 44.5%;
-      }
-
-      .stage-nav-item-cell.stage-median {
-        min-width: 43%;
-      }
-
-      .stage-empty,
-      .not-available {
-        color: var(--gray-500, $gray-500);
-      }
-    }
-  }
-
-  .stage-panel-container {
-    width: 100%;
-    overflow: auto;
-  }
-
-  .stage-panel {
-    min-width: 968px;
-
-    .card-header {
-      padding: 0;
-      background-color: transparent;
-    }
-
-    .events-description {
-      line-height: 65px;
-    }
-
-    .events-info {
-      color: var(--gray-500, $gray-500);
-    }
-  }
-
-  .stage-events {
-    min-height: 467px;
-  }
-
-  .stage-event-list {
-    margin: 0;
-    padding: 0;
-  }
-
-  .stage-event-item {
-    @include clearfix;
-    list-style-type: none;
-    padding-bottom: $gl-padding;
-    margin-bottom: $gl-padding;
-    border-bottom: 1px solid var(--gray-50, $gray-50);
-
-    &:last-child {
-      border-bottom: 0;
-      margin-bottom: 0;
-    }
-
-    .item-details,
-    .item-time {
-      float: left;
-    }
-
-    .item-details {
-      width: 75%;
-    }
-
-    .item-title {
-      margin: 0 0 2px;
-
-      &.issue-title,
-      &.commit-title,
-      &.merge-request-title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 100%;
-        display: block;
-
-        a {
-          color: var(--gl-text-color, $gl-text-color);
-        }
-      }
-    }
-
-    .item-time {
-      width: 25%;
-      text-align: right;
-    }
-
-    .total-time {
-      font-size: $cycle-analytics-big-font;
-      color: var(--gl-text-color, $gl-text-color);
-
-      span {
-        color: var(--gl-text-color, $gl-text-color);
-        font-size: $gl-font-size;
-      }
-    }
-
-    .issue-date,
-    .build-date {
-      color: var(--gl-text-color, $gl-text-color);
-    }
-
-    .mr-link,
-    .issue-link,
-    .commit-author-link,
-    .issue-author-link {
-      color: var(--gl-text-color, $gl-text-color);
-    }
-
-    // Custom CSS for components
-    .item-conmmit-component {
-      .commit-icon {
-        svg {
-          display: inline-block;
-          width: 20px;
-          height: 20px;
-          vertical-align: bottom;
-        }
-      }
-    }
-
-    .merge-request-branch {
-      a {
-        max-width: 180px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-  }
-
-  // Custom Styles for stage items
-  .item-build-component {
-    .item-title {
-      .icon-build-status {
-        float: left;
-        margin-right: 5px;
-        position: relative;
-        top: 2px;
-      }
-
-      .item-build-name {
-        color: var(--gl-text-color, $gl-text-color);
-      }
-
-      .pipeline-id {
-        color: var(--gl-text-color, $gl-text-color);
-        padding: 0 3px 0 0;
-      }
-
-      .ref-name {
-        color: var(--gray-900, $gray-900);
-        display: inline-block;
-        max-width: 180px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        line-height: 1.3;
-        vertical-align: top;
-      }
-
-      .commit-sha {
-        color: var(--blue-600, $blue-600);
-        line-height: 1.3;
-        vertical-align: top;
-        font-weight: $gl-font-weight-normal;
-      }
-    }
-  }
 }
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index f188dde1183..6f3873fea0c 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -16,9 +16,6 @@ $stroke-size: 1px;
 
 .right-arrow {
   @include gl-relative;
-  @include gl-mx-5;
-  @include gl-display-inline-block;
-  @include gl-vertical-align-middle;
   height: $stroke-size;
   background-color: var(--gray-900, $gray-900);
   min-width: $gl-spacing-scale-7;
@@ -27,7 +24,6 @@ $stroke-size: 1px;
     @include gl-absolute;
     top: -2*$stroke-size;
     left: calc(100% - #{5*$stroke-size});
-    @include gl-display-inline-block;
     @include gl-p-1;
     @include gl-border-solid;
     border-width: 0 $stroke-size $stroke-size 0;
@@ -35,3 +31,24 @@ $stroke-size: 1px;
     transform: rotate(-45deg);
   }
 }
+
+.escalation-rule-row {
+  @media (max-width: $breakpoint-lg) {
+    @include gl-flex-wrap;
+  }
+}
+
+.rule-condition {
+  @media (min-width: $breakpoint-lg) {
+    flex-basis: 25%;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: $breakpoint-lg) {
+    @include gl-w-full;
+  }
+}
+
+.rule-action {
+  min-width: 0;
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 6a20ff3b3fa..28354b83856 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -40,7 +40,7 @@
 
   position: -webkit-sticky;
   position: sticky;
-  // Unitless zero values are not allowed in calculations https://stackoverflow.com/a/55391061
+  // Unitless zero values are not allowed in calculations
   // stylelint-disable-next-line length-zero-no-unit
   top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
   // stylelint-disable-next-line length-zero-no-unit
diff --git a/app/assets/stylesheets/page_bundles/new_namespace.scss b/app/assets/stylesheets/page_bundles/new_namespace.scss
index 189f010bdb2..37a1231ec6b 100644
--- a/app/assets/stylesheets/page_bundles/new_namespace.scss
+++ b/app/assets/stylesheets/page_bundles/new_namespace.scss
@@ -17,10 +17,10 @@ $new-namespace-panel-height: 240px;
 
 .new-namespace-panel {
   &:hover {
-    background-color: $gray-10;
+    background-color: var(--gray-50, $gray-10);
   }
 
-  color: $purple-700;
+  color: var(--purple-700, $purple-700);
   min-height: $new-namespace-panel-height;
   text-align: center;
   @include media-breakpoint-up(lg) {
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index c9171eb4fc7..206c2eb09d0 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -120,17 +120,10 @@
   }
 }
 
-.pipeline-tab-content {
-  display: flex;
-  width: 100%;
-  min-height: $dropdown-max-height-lg;
-  background-color: var(--gray-50, $gray-50);
-  padding: $gl-padding 0;
-  overflow: auto;
-}
 
-// These are single-value classes to use with utility-class style CSS
-// but to still access this variable. Do not add other styles.
+// These are single-value classes to use with utility-class style CSS.
+// They are here to still access a variable or because they use magic values.
+// scoped to the graph. Do not add other styles.
 .gl-pipeline-min-h {
   min-height: $dropdown-max-height-lg;
 }
@@ -147,22 +140,6 @@
   padding-right: 120px;
 }
 
-.gl-build-content {
-  display: inline-block;
-  padding: 8px 10px 9px;
-  width: 100%;
-  border: 1px solid var(--border-color, $border-color);
-  border-radius: 30px;
-  background-color: var(--white, $white);
-
-  &:hover,
-  &:focus {
-    background-color: var(--gray-50, $gray-50);
-    border: 1px solid $dropdown-toggle-active-border-color;
-    color: var(--gl-text-color, $gl-text-color);
-  }
-}
-
 .gl-ci-action-icon-container {
   position: absolute;
   right: 5px;
@@ -180,259 +157,6 @@
   }
 }
 
-// Pipeline graph, used at
-// app/assets/javascripts/pipelines/components/graph/graph_component.vue
-.pipeline-graph {
-  white-space: nowrap;
-  transition: max-height 0.3s, padding 0.3s;
-
-  .stage-column-list,
-  .builds-container > ul {
-    padding: 0;
-  }
-
-  a {
-    text-decoration: none;
-    color: var(--gl-text-color, $gl-text-color);
-  }
-
-  svg {
-    vertical-align: middle;
-  }
-
-  .stage-column {
-    display: inline-block;
-    vertical-align: top;
-
-    &.left-margin {
-      &:not(:first-child) {
-        margin-left: 44px;
-
-        .left-connector {
-          @include flat-connector-before;
-        }
-      }
-    }
-
-    &.no-margin {
-      margin: 0;
-    }
-
-    li {
-      list-style: none;
-    }
-
-    // when downstream pipelines are present, the last stage isn't the last column
-    &:last-child:not(.has-downstream) {
-      .build {
-        // Remove right connecting horizontal line from first build in last stage
-        &:first-child::after {
-          border: 0;
-        }
-        // Remove right curved connectors from all builds in last stage
-        &:not(:first-child)::after {
-          border: 0;
-        }
-        // Remove opposite curve
-        .curve::before {
-          display: none;
-        }
-      }
-    }
-
-    // when upstream pipelines are present, the first stage isn't the first column
-    &:first-child:not(.has-upstream) {
-      .build {
-        // Remove left curved connectors from all builds in first stage
-        &:not(:first-child)::before {
-          border: 0;
-        }
-        // Remove opposite curve
-        .curve::after {
-          display: none;
-        }
-      }
-    }
-
-    // Curve first child connecting lines in opposite direction
-    .curve {
-      display: none;
-
-      &::before,
-      &::after {
-        content: '';
-        width: 21px;
-        height: 25px;
-        position: absolute;
-        top: -31px;
-        border-top: 2px solid var(--border-color, $border-color);
-      }
-
-      &::after {
-        left: -44px;
-        border-right: 2px solid var(--border-color, $border-color);
-        border-radius: 0 20px;
-      }
-
-      &::before {
-        right: -44px;
-        border-left: 2px solid var(--border-color, $border-color);
-        border-radius: 20px 0 0;
-      }
-    }
-  }
-
-  .stage-name {
-    margin: 0 0 15px 10px;
-    font-weight: $gl-font-weight-bold;
-    width: 176px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 2.2em;
-  }
-
-  .build {
-    position: relative;
-    width: 186px;
-    margin-bottom: 10px;
-    white-space: normal;
-
-    .ci-job-dropdown-container {
-      // override dropdown.scss
-      .dropdown-menu li button {
-        padding: 0;
-        text-align: center;
-      }
-    }
-
-    .ci-status-icon svg {
-      height: 24px;
-      width: 24px;
-    }
-
-    .dropdown-menu-toggle {
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    .build-content {
-      @include build-content();
-    }
-
-    .ci-job-dropdown-container:hover .build-content,
-    a.build-content:hover,
-    button.build-content:hover {
-      background-color: var(--gray-100, $gray-100);
-      border: 1px solid $dropdown-toggle-active-border-color;
-    }
-
-    // Connect first build in each stage with right horizontal line
-    &:first-child {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 48%;
-        right: -48px;
-        border-top: 2px solid var(--border-color, $border-color);
-        width: 48px;
-        height: 1px;
-      }
-    }
-
-    // Connect each build (except for first) with curved lines
-    &:not(:first-child) {
-      &::after,
-      &::before {
-        content: '';
-        top: -49px;
-        position: absolute;
-        border-bottom: 2px solid var(--border-color, $border-color);
-        width: 25px;
-        height: 69px;
-      }
-
-      // Right connecting curves
-      &::after {
-        right: -25px;
-        border-right: 2px solid var(--border-color, $border-color);
-        border-radius: 0 0 20px;
-      }
-
-      // Left connecting curves
-      &::before {
-        left: -25px;
-        border-left: 2px solid var(--border-color, $border-color);
-        border-radius: 0 0 0 20px;
-      }
-    }
-
-    // Connect second build to first build with smaller curved line
-    &:nth-child(2) {
-      &::after,
-      &::before {
-        height: 29px;
-        top: -9px;
-      }
-
-      .curve {
-        display: block;
-      }
-    }
-  }
-
-  .ci-action-icon-container {
-    position: absolute;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-
-    // Action Icons in big pipeline-graph nodes
-    &.ci-action-icon-wrapper {
-      height: 30px;
-      width: 30px;
-      border-radius: 100%;
-      display: block;
-      padding: 0;
-      line-height: 0;
-
-      svg {
-        fill: var(--gray-500, $gray-500);
-      }
-
-      .gl-spinner {
-        top: 2px;
-      }
-
-      &.play {
-        svg {
-          left: 1px;
-          top: 1px;
-        }
-      }
-    }
-  }
-
-  .stage-action svg {
-    left: 1px;
-    top: -2px;
-  }
-}
-
-// Triggers the dropdown in the big pipeline graph
-.dropdown-counter-badge {
-  font-weight: 100;
-  font-size: 15px;
-  position: absolute;
-  right: 13px;
-  top: 8px;
-}
-
 .split-report-section {
   border-bottom: 1px solid var(--gray-50, $gray-50);
 
@@ -480,34 +204,6 @@
   left: 100%;
   top: -10px;
   box-shadow: 0 1px 5px $black-transparent;
-
-  /**
-   * Top arrow in the dropdown in the big pipeline graph
-   */
-  &::before,
-  &::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    top: 18px;
-  }
-
-  &::before {
-    left: -6px;
-    margin-top: 3px;
-    border-width: 7px 5px 7px 0;
-    border-right-color: var(--border-color, $border-color);
-  }
-
-  &::after {
-    left: -5px;
-    border-width: 10px 7px 10px 0;
-    border-right-color: var(--white, $white);
-  }
 }
 
 .codequality-report {
diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss
index ce91988cb8a..d0748779f47 100644
--- a/app/assets/stylesheets/page_bundles/reports.scss
+++ b/app/assets/stylesheets/page_bundles/reports.scss
@@ -49,11 +49,6 @@
   display: flex;
 }
 
-.is-dismissed .report-block-list-issue-description,
-.is-dismissed .vulnerability-name-button {
-  text-decoration: line-through;
-}
-
 .report-block-list-issue-description-text::after {
   content: '\00a0';
 }
diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss
index d6c3a3ff5da..57e5d2411d1 100644
--- a/app/assets/stylesheets/page_bundles/signup.scss
+++ b/app/assets/stylesheets/page_bundles/signup.scss
@@ -39,36 +39,6 @@
   }
 }
 
-.signup-page[data-page^='registrations:experience_levels'] {
-  $card-shadow-color: rgba(var(--black, $black), 0.2);
-
-  .page-wrap {
-    background-color: var(--white, $white);
-  }
-
-  .card-deck {
-    max-width: 828px;
-  }
-
-  .card {
-    transition: box-shadow 0.3s ease-in-out;
-  }
-
-  .card:hover {
-    box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
-  }
-
-  @media (min-width: $breakpoint-sm) {
-    .card-deck .card {
-      margin: 0 $gl-spacing-scale-3;
-    }
-  }
-
-  .stretched-link:hover {
-    text-decoration: none;
-  }
-}
-
 .edit-profile {
   max-width: 460px;
 }