Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

12 files changed, 55 insertions, 496 deletions

diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 0d6f360112b..2f8602a212d 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -147,11 +147,11 @@
       display: block;
 
       &:hover {
-        box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
+        box-shadow: inset 0 0 0 2px var(--gray-400, $gray-400);
         background-color: var(--gray-50, $gray-50);
       }
 
-      .spinner,
+      .gl-spinner,
       svg {
         width: $ci-action-dropdown-svg-size;
         height: $ci-action-dropdown-svg-size;
@@ -176,12 +176,6 @@
   li {
     position: relative;
 
-    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
-    &:hover > .mini-pipeline-graph-dropdown-item,
-    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
-      @extend .mini-pipeline-graph-dropdown-item:hover;
-    }
-
     // link to the build
     .mini-pipeline-graph-dropdown-item {
       align-items: center;
@@ -216,13 +210,16 @@
           display: block;
         }
       }
+    }
 
-      &:hover,
-      &:focus {
-        outline: none;
-        text-decoration: none;
-        background-color: var(--gray-100, $gray-50);
-      }
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item,
+    .mini-pipeline-graph-dropdown-item:hover,
+    .mini-pipeline-graph-dropdown-item:focus {
+      outline: none;
+      text-decoration: none;
+      background-color: var(--gray-100, $gray-50);
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index b91850f1775..ec41909beec 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -11,10 +11,6 @@
     color: var(--orange-600, $orange-600);
     background-color: var(--orange-50, $orange-50);
     border: 1px solid var(--border-color, $border-color);
-    padding: 3px 12px;
-    margin: auto;
-    align-items: center;
-    z-index: 1;
 
     .with-performance-bar & {
       top: $header-height + $performance-bar-height;
@@ -202,10 +198,6 @@
     }
 
     .build-job {
-      &.active {
-        font-weight: $gl-font-weight-bold;
-      }
-
       &.retried {
         background-color: var(--gray-10, $gray-10);
       }
diff --git a/app/assets/stylesheets/page_bundles/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss
deleted file mode 100644
index 5c6019efce6..00000000000
--- a/app/assets/stylesheets/page_bundles/dev_ops_report.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-@import 'mixins_and_variables_and_functions';
-
-$space-between-cards: 8px;
-
-.devops-empty svg {
-  margin: 64px auto 32px;
-  max-width: 420px;
-}
-
-.devops-header {
-  margin-top: $gl-padding;
-  margin-bottom: $gl-padding;
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-
-  .devops-header-title {
-    font-size: 48px;
-    line-height: 1;
-    margin: 0;
-  }
-
-  .devops-header-subtitle {
-    font-size: 22px;
-    line-height: 1;
-    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-    margin-left: 8px;
-    font-weight: $gl-font-weight-normal;
-
-    .devops-header-icon {
-      vertical-align: px-to-rem(-$gl-spacing-scale-1);
-    }
-
-    a {
-      font-size: 18px;
-      color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-
-      &:hover {
-        color: var(--blue-500, $blue-500);
-      }
-    }
-  }
-}
-
-.devops-cards {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.devops-card-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  text-align: center;
-  width: 50%;
-  border-color: var(--border-color, $border-color);
-  margin: 0 0 32px;
-  padding: $space-between-cards / 2;
-  position: relative;
-
-  @include media-breakpoint-up(xs) {
-    width: percentage(1 / 4);
-  }
-
-  @include media-breakpoint-up(sm) {
-    width: percentage(1 / 5);
-  }
-
-  @include media-breakpoint-up(md) {
-    width: percentage(1 / 6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    width: percentage(1 / 10);
-  }
-}
-
-.devops-card {
-  border: solid 1px var(--border-color, $border-color);
-  border-radius: 3px;
-  border-top-width: 3px;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.devops-card-low {
-  border-top-color: var(--red-400, $red-400);
-
-  .board-card-score-big {
-    background-color: var(--red-50, $red-50);
-  }
-}
-
-.devops-card-average {
-  border-top-color: var(--orange-200, $orange-200);
-
-  .board-card-score-big {
-    background-color: var(--orange-50, $orange-50);
-  }
-}
-
-.devops-card-high {
-  border-top-color: var(--green-400, $green-400);
-
-  .board-card-score-big {
-    background-color: var(--green-50, $green-50);
-  }
-}
-
-.devops-card-title {
-  margin: $gl-padding auto auto;
-  max-width: 100px;
-
-  h3 {
-    font-size: 14px;
-    margin: 0 0 2px;
-  }
-
-  .light-text {
-    font-size: 13px;
-    line-height: 1.25;
-    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-  }
-}
-
-.board-card-scores {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  margin: $gl-padding $gl-btn-padding;
-  line-height: 1;
-}
-
-.board-card-score {
-  color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-
-  .board-card-score-name {
-    font-size: 13px;
-    margin-top: 4px;
-  }
-}
-
-.board-card-score-value {
-  font-size: 16px;
-  color: var(--gl-text-color, $gl-text-color);
-  font-weight: $gl-font-weight-normal;
-}
-
-.board-card-score-big {
-  border-top: 2px solid var(--border-color, $border-color);
-  border-bottom: 1px solid var(--border-color, $border-color);
-  font-size: 22px;
-  padding: 10px 0;
-  font-weight: $gl-font-weight-normal;
-}
-
-.board-card-buttons {
-  display: flex;
-
-  > * {
-    font-size: 16px;
-    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-    padding: 10px;
-    flex-grow: 1;
-
-    &:hover {
-      background-color: var(--border-color, $border-color);
-      color: var(--border-color, $border-color);
-    }
-
-    + * {
-      border-left: solid 1px var(--border-color, $border-color);
-    }
-  }
-}
-
-.devops-steps {
-  margin-top: $gl-padding;
-  height: 1px;
-  min-width: 100%;
-  justify-content: space-around;
-  position: relative;
-  background: var(--border-color, $border-color);
-}
-
-.devops-step {
-  $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%;
-  @each $pos in $step-positions {
-    $i: index($step-positions, $pos);
-
-    &:nth-child(#{$i}) {
-      left: $pos;
-    }
-  }
-
-  position: absolute;
-  transform-origin: 75% 50%;
-  padding: 8px;
-  height: 50px;
-  width: 50px;
-  border-radius: 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border: solid 1px var(--border-color, $border-color);
-  background: var(--white, $white);
-  transform: translate(-50%, -50%);
-  color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-  fill: var(--gl-text-color-secondary, $gl-text-color-secondary);
-  box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color);
-
-  &:hover {
-    padding: 8px 10px;
-    fill: currentColor;
-    z-index: 100;
-    height: auto;
-    width: auto;
-
-    .devops-step-title {
-      max-height: 2em;
-      opacity: 1;
-      transition: opacity 0.2s;
-    }
-
-    svg {
-      transform: scale(1.5);
-      margin: $gl-btn-padding;
-    }
-  }
-
-  svg {
-    transition: transform 0.1s;
-    width: 30px;
-    height: 30px;
-    min-height: 30px;
-    min-width: 30px;
-  }
-}
-
-.devops-step-title {
-  max-height: 0;
-  opacity: 0;
-  text-transform: uppercase;
-  margin: $gl-vert-padding 0 0;
-  text-align: center;
-  font-size: 12px;
-}
-
-.devops-high-score {
-  color: var(--green-400, $green-400);
-}
-
-.devops-average-score {
-  color: var(--orange-500, $orange-500);
-}
-
-.devops-low-score {
-  color: var(--red-400, $red-400);
-}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index db4be3f18e8..4beb5edbe7b 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -45,3 +45,9 @@ $header-height: 40px;
   margin-left: auto;
   margin-right: auto;
 }
+
+// needed for external_link
+svg.s16 {
+  width: 16px;
+  height: 16px;
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
index d7473d2c942..9fe56fd337f 100644
--- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -173,22 +173,5 @@
     text-align: right;
     padding: $gl-padding-top $gl-padding;
     color: var(--gl-text-color, $gl-text-color);
-
-    .discard-actions {
-      display: inline-block;
-      margin-left: 10px;
-    }
-  }
-
-  .resolve-conflicts-form {
-    h4 {
-      margin-top: 0;
-    }
-
-    .resolve-info {
-      @media(max-width: map-get($grid-breakpoints, lg)-1) {
-        margin-bottom: $gl-padding;
-      }
-    }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 9fdc30359f8..5e9dd883635 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -7,6 +7,10 @@
 .diff-files-holder {
   flex: 1;
   min-width: 0;
+
+  .vue-recycle-scroller__item-wrapper {
+    overflow: visible;
+  }
 }
 
 .with-system-header {
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index 858e13fc558..03dd12ec230 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -38,18 +38,6 @@ $status-box-line-height: 26px;
         color: var(--blue-600, $blue-600);
       }
     }
-
-    .status-box {
-      font-size: $tooltip-font-size;
-      margin-top: 0;
-      margin-right: $gl-padding-4;
-      line-height: $status-box-line-height;
-
-      @include media-breakpoint-down(xs) {
-        line-height: unset;
-        padding: $gl-padding-4 $gl-input-padding;
-      }
-    }
   }
 }
 
@@ -199,11 +187,6 @@ $status-box-line-height: 26px;
   align-items: center;
   flex-wrap: wrap;
 
-  .status-box {
-    margin-top: 0;
-    order: 1;
-  }
-
   .milestone-buttons {
     margin-left: auto;
     order: 2;
diff --git a/app/assets/stylesheets/page_bundles/new_namespace.scss b/app/assets/stylesheets/page_bundles/new_namespace.scss
new file mode 100644
index 00000000000..60aa3c8f29f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/new_namespace.scss
@@ -0,0 +1,28 @@
+@import 'mixins_and_variables_and_functions';
+
+$new-namespace-panel-illustration-width: 215px;
+$new-namespace-panel-height: 240px;
+
+.new-namespace-panel-illustration {
+  width: $new-namespace-panel-illustration-width;
+}
+
+.new-namespace-panel-wrapper {
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
+  width: 50%;
+}
+
+.new-namespace-panel {
+  &:hover {
+    background-color: $gray-10;
+  }
+
+  color: $purple-700;
+  min-height: $new-namespace-panel-height;
+  text-align: center;
+  @include media-breakpoint-up(lg) {
+    text-align: left;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index 5eaf91c3017..ddc638197ca 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -95,7 +95,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
       @include gl-font-weight-normal;
 
       &.label-dark {
-        @include gl-text-gray-900;
+        color: var(--gray-900, $gray-900);
       }
 
       &.label-bold {
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 2f3cf889549..c9171eb4fc7 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -306,11 +306,6 @@
       }
     }
 
-    // ensure .build-content has hover style when action-icon is hovered
-    .ci-job-dropdown-container:hover .build-content {
-      @extend .build-content:hover;
-    }
-
     .ci-status-icon svg {
       height: 24px;
       width: 24px;
@@ -330,6 +325,7 @@
       @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);
@@ -409,7 +405,7 @@
         fill: var(--gray-500, $gray-500);
       }
 
-      .spinner {
+      .gl-spinner {
         top: 2px;
       }
 
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index 6ef7f912ea9..ace91d197b6 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -182,11 +182,6 @@ button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle {
     border-bottom-color: $border-color;
   }
 
-  &::after {
-    margin-top: 1px;
-    border-bottom-color: $white;
-  }
-
   /**
    * Center dropdown menu in mini graph
    */
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index 3e20ca9c62f..e7813e3b56e 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -8,8 +8,6 @@
 .todos-list > .todo {
   // workaround because we cannot use border-collapse
   border-top: 1px solid transparent;
-  display: flex;
-  flex-direction: row;
 
   &:hover {
     background-color: var(--blue-50, $blue-50);
@@ -26,25 +24,6 @@
     }
   }
 
-  .todo-avatar,
-  .todo-actions {
-    @include transition(opacity);
-    flex: 0 0 auto;
-  }
-
-  .todo-actions {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin-left: 10px;
-    min-width: 55px;
-  }
-
-  .todo-item {
-    flex: 0 1 100%;
-    min-width: 0;
-  }
-
   &.todo-pending.done-reversible {
     &:hover {
       border-color: var(--border-color, $border-color);
@@ -71,58 +50,22 @@
 .todo-item {
   @include transition(opacity);
 
-  .todo-title {
-    > .title-item {
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    .todo-label {
-      flex: 0 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   .status-box {
-    margin: 0;
-    float: none;
-    display: inline-block;
-    font-weight: $gl-font-weight-normal;
-    padding: 0 5px;
     line-height: inherit;
-    font-size: 14px;
   }
 
   .todo-label,
   .todo-project {
     a {
-      font-weight: $gl-font-weight-normal;
       color: var(--blue-600, $blue-600);
     }
   }
 
   .todo-body {
-    .badge.badge-pill,
     p {
       color: var(--gl-text-color, $gl-text-color);
     }
 
-    .md {
-      color: $gl-grayish-blue;
-      font-size: $gl-font-size;
-    }
-
-    code {
-      white-space: pre-wrap;
-    }
-
     pre {
       border: 0;
       background: var(--gray-50, $gray-50);
@@ -139,120 +82,13 @@
       float: none;
     }
 
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .gl-label-scoped {
-    --label-inset-border: inset 0 0 0 1px currentColor;
-  }
-}
-
-@include media-breakpoint-down(lg) {
-  .todos-filters {
-    .filter-categories {
-      width: 75%;
-
-      .filter-item {
-        margin-bottom: 10px;
-      }
+    .gl-label-scoped {
+      --label-inset-border: inset 0 0 0 1px currentColor;
     }
-  }
-}
 
-@include media-breakpoint-down(sm) {
-  .container-fluid .todos-list-container {
-    margin: 0 (-$gl-padding);
-  }
-
-  .todo {
-    .avatar {
-      display: none;
-    }
-  }
-
-  .todo-item {
-    .todo-title {
-      margin-bottom: 10px;
-
-      .todo-label {
-        white-space: normal;
-      }
-    }
-
-    .todo-body {
-      margin: 0;
+    @include media-breakpoint-down(sm) {
       border-left: 2px solid var(--border-color, $border-color);
       padding-left: 10px;
     }
   }
-
-  .todos-filters {
-    .filter-categories {
-      width: auto;
-    }
-
-    .dropdown-menu-toggle {
-      width: 100%;
-    }
-
-    .dropdown-menu-toggle-sort {
-      width: auto;
-    }
-  }
-}
-
-.todos-empty {
-  display: flex;
-  flex-direction: column;
-  max-width: 900px;
-  margin-left: auto;
-  margin-right: auto;
-
-  @include media-breakpoint-up(sm) {
-    flex-direction: row;
-    padding-top: 80px;
-  }
-}
-
-.todos-empty-content {
-  align-self: center;
-  max-width: 480px;
-}
-
-.todos-empty-hero {
-  width: 200px;
-  margin-left: auto;
-  margin-right: auto;
-
-  @include media-breakpoint-up(sm) {
-    width: 300px;
-    margin-right: 0;
-    order: 2;
-  }
-}
-
-.todos-all-done {
-  padding-top: 20px;
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 50px;
-  }
-
-  > svg {
-    display: block;
-    max-width: 300px;
-    margin: 0 auto 20px;
-  }
-
-  p {
-    max-width: 470px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  a {
-    font-weight: $gl-font-weight-bold;
-  }
 }