Add latest changes from gitlab-org/gitlab@master

10 files changed, 697 insertions, 756 deletions

diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 977da12e8a9..36b9b647af7 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -12,10 +12,10 @@ export default {
 <template>
   <div class="empty-state">
     <div class="text-content">
-      <h4 class="blank-state-title js-blank-state-title">
+      <h4 class="js-blank-state-title">
         {{ s__("Environments|You don't have any environments right now") }}
       </h4>
-      <p class="blank-state-text">
+      <p>
         {{
           s__(`Environments|Environments are places where
         code gets deployed, such as staging or production.`)
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 184bda4410f..e7bac11a27e 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -199,6 +199,7 @@ export default {
       requestAccessEnabled: true,
       highlightChangesClass: false,
       emailsDisabled: false,
+      showDiffPreviewInEmail: true,
       cveIdRequestEnabled: true,
       featureAccessLevelEveryone,
       featureAccessLevelMembers,
@@ -762,6 +763,24 @@ export default {
     </project-setting-row>
     <project-setting-row class="mb-3">
       <input
+        :value="showDiffPreviewInEmail"
+        type="hidden"
+        name="project[project_setting_attributes][show_diff_preview_in_email]"
+      />
+      <gl-form-checkbox
+        v-model="showDiffPreviewInEmail"
+        name="project[project_setting_attributes][show_diff_preview_in_email]"
+      >
+        {{ s__('ProjectSettings|Include diff preview in merge request notification emails') }}
+        <template #help>{{
+          s__(
+            'ProjectSettings|Include the code diff preview on comment threads in merge request notification emails.',
+          )
+        }}</template>
+      </gl-form-checkbox>
+    </project-setting-row>
+    <project-setting-row class="mb-3">
+      <input
         :value="showDefaultAwardEmojis"
         type="hidden"
         name="project[project_setting_attributes][show_default_award_emojis]"
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
index bc83844b8b9..b003302ec8e 100644
--- a/app/assets/javascripts/persistent_user_callout.js
+++ b/app/assets/javascripts/persistent_user_callout.js
@@ -7,10 +7,11 @@ const DEFERRED_LINK_CLASS = 'deferred-link';
 
 export default class PersistentUserCallout {
   constructor(container, options = container.dataset) {
-    const { dismissEndpoint, featureId, deferLinks } = options;
+    const { dismissEndpoint, featureId, groupId, deferLinks } = options;
     this.container = container;
     this.dismissEndpoint = dismissEndpoint;
     this.featureId = featureId;
+    this.groupId = groupId;
     this.deferLinks = parseBoolean(deferLinks);
 
     this.init();
@@ -52,6 +53,7 @@ export default class PersistentUserCallout {
     axios
       .post(this.dismissEndpoint, {
         feature_name: this.featureId,
+        group_id: this.groupId,
       })
       .then(() => {
         this.container.remove();
diff --git a/app/assets/javascripts/persistent_user_callouts.js b/app/assets/javascripts/persistent_user_callouts.js
index a7f8704b559..337c204c36a 100644
--- a/app/assets/javascripts/persistent_user_callouts.js
+++ b/app/assets/javascripts/persistent_user_callouts.js
@@ -10,6 +10,7 @@ const PERSISTENT_USER_CALLOUTS = [
   '.js-new-user-signups-cap-reached',
   '.js-eoa-bronze-plan-banner',
   '.js-security-newsletter-callout',
+  '.js-approaching-seats-count-threshold',
 ];
 
 const initCallouts = () => {
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c1c8bfffff7..8e43a9b1b0d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -46,7 +46,6 @@
 @import 'framework/toggle';
 @import 'framework/typography';
 @import 'framework/zen';
-@import 'framework/blank';
 @import 'framework/wells';
 @import 'framework/page_header';
 @import 'framework/page_title';
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
deleted file mode 100644
index 7dd7ab339dd..00000000000
--- a/app/assets/stylesheets/framework/blank.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.blank-state-parent-container {
-  .section-container {
-    padding: 10px;
-  }
-
-  .section-body {
-    width: 100%;
-    height: 100%;
-    padding-bottom: 25px;
-    border-radius: $border-radius-default;
-  }
-}
-
-.blank-state-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.blank-state-welcome {
-  text-align: center;
-  padding: $gl-padding 0 ($gl-padding * 2);
-
-  .blank-state-welcome-title {
-    font-size: 24px;
-  }
-
-  .blank-state-text {
-    margin-bottom: 0;
-  }
-}
-
-.blank-state-link {
-  color: $gl-text-color;
-  margin-bottom: 15px;
-
-  &:hover {
-    background-color: $gray-light;
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-}
-
-.blank-state-center {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
-}
-
-.blank-state {
-  display: flex;
-  align-items: center;
-  padding: 20px 50px;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  min-height: 240px;
-  margin-bottom: $gl-padding;
-  width: calc(50% - #{$gl-padding-8});
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    padding: 50px 20px;
-
-    .column-small & {
-      width: 100%;
-    }
-
-  }
-}
-
-.blank-state,
-.blank-state-center {
-  .blank-state-icon {
-    svg {
-      display: block;
-      margin: auto;
-    }
-  }
-
-  .blank-state-title {
-    margin-top: 0;
-    font-size: 18px;
-  }
-
-  .blank-state-body {
-    @include media-breakpoint-down(sm) {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 20px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .column-large {
-    flex: 2;
-  }
-
-  .column-small {
-    flex: 1;
-    margin-bottom: 15px;
-
-    .blank-state {
-      max-width: 400px;
-      flex-wrap: wrap;
-      margin-left: 15px;
-    }
-
-    .blank-state-icon {
-      margin-bottom: 30px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f9b0f4f3118..9cf435af726 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -929,8 +929,6 @@ Merge requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
-$mr-widget-margin-left: 40px;
-$mr-review-bar-height: calc(2rem + 13px);
 
 /*
 Compare Branches
diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss
new file mode 100644
index 00000000000..eb0e1701b7f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss
@@ -0,0 +1,35 @@
+@import 'mixins_and_variables_and_functions';
+
+.blank-state {
+  padding: 20px 50px;
+  min-height: 240px;
+  width: calc(50% - #{$gl-padding-8});
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
+  }
+}
+
+.blank-state-link {
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state-icon {
+  svg {
+    display: block;
+  }
+}
+
+.blank-state-body {
+  @include media-breakpoint-down(sm) {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 75b953df791..1ee154f9aeb 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1,5 +1,10 @@
 @import 'mixins_and_variables_and_functions';
 
+$mr-review-bar-height: calc(2rem + 13px);
+$mr-widget-margin-left: 40px;
+$mr-widget-min-height: 69px;
+$tabs-holder-z-index: 250;
+
 .compare-versions-container {
   min-width: 0;
 }
@@ -108,6 +113,638 @@
   }
 }
 
+.ci-widget-container {
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: row;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+
+    .stage-cell .stage-container {
+      margin-top: 16px;
+    }
+
+    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
+      transform: initial;
+    }
+  }
+
+  .coverage {
+    font-size: 12px;
+    color: $gray-500;
+    line-height: initial;
+  }
+}
+
+.deploy-body {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @include media-breakpoint-up(xs) {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .deployment-info {
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  > *:not(:last-child) {
+    margin-right: 0.3em;
+  }
+
+  svg {
+    vertical-align: text-top;
+  }
+
+  .deployment-info {
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 100px;
+
+    @include media-breakpoint-up(xs) {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .dropdown-menu {
+    width: 400px;
+  }
+}
+
+.deploy-heading,
+.merge-train-position-indicator {
+  @include media-breakpoint-up(md) {
+    padding: $gl-padding-8 $gl-padding;
+  }
+
+  .media-body {
+    min-width: 0;
+    font-size: 12px;
+    margin-left: 32px;
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.diff-file-row.is-active {
+  background-color: $gray-50;
+}
+
+.mr-conflict-loader {
+  max-width: 334px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
+
+.mr-info-list {
+  clear: left;
+  position: relative;
+  padding-top: 4px;
+
+  p {
+    margin: 0;
+    position: relative;
+    padding: 4px 0;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  &.mr-memory-usage {
+    p {
+      float: left;
+    }
+
+    .memory-graph-container {
+      float: left;
+      margin-left: 5px;
+    }
+  }
+}
+
+.mr-memory-usage {
+  width: 100%;
+
+  p.usage-info-loading .usage-info-load-spinner {
+    margin-right: 10px;
+    font-size: 16px;
+  }
+}
+
+.mr-ready-to-merge-loader {
+  max-width: 418px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
+
+.mr-section-container {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  background: var(--white, $white);
+
+  > .mr-widget-border-top:first-of-type {
+    border-top: 0;
+  }
+}
+
+.mr-source-target {
+  flex-wrap: wrap;
+  padding: $gl-padding;
+  background: var(--white, $white);
+  min-height: $mr-widget-min-height;
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+  }
+
+  .git-merge-container {
+    justify-content: space-between;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+      align-items: stretch;
+
+      .branch-actions {
+        margin-top: 16px;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .branch-actions {
+        align-self: center;
+        margin-left: $gl-padding;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .diverged-commits-count {
+    color: $gl-text-color-secondary;
+  }
+}
+
+.mr-state-widget {
+  color: $gl-text-color;
+
+  .commit-message-edit {
+    border-radius: $border-radius-default;
+  }
+
+  .mr-widget-section:not(:first-child) {
+    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;
+  }
+
+  .commits-list {
+    > li {
+      padding: $gl-padding;
+
+      @include media-breakpoint-up(md) {
+        margin-left: $gl-spacing-scale-7;
+      }
+    }
+  }
+
+  .mr-commit-dropdown {
+    .dropdown-menu {
+      @include media-breakpoint-up(md) {
+        width: 150%;
+      }
+    }
+  }
+
+  .mr-report {
+    padding: 0;
+
+    > .media {
+      padding: $gl-padding;
+    }
+  }
+
+  form {
+    margin-bottom: 0;
+
+    .clearfix {
+      margin-bottom: 0;
+    }
+  }
+
+  label {
+    margin-bottom: 0;
+  }
+
+  .btn {
+    font-size: $gl-font-size;
+  }
+
+  .accept-merge-holder {
+    .accept-action {
+      display: inline-block;
+      float: left;
+    }
+  }
+
+  .ci-widget {
+    color: $gl-text-color;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include media-breakpoint-down(xs) {
+      flex-wrap: wrap;
+    }
+
+    .ci-widget-content {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+  }
+
+  .mr-widget-icon {
+    font-size: 22px;
+  }
+
+  .mr-loading-icon {
+    margin: 3px 0;
+  }
+
+  .ci-status-icon svg {
+    margin: 3px 0;
+    position: relative;
+    overflow: visible;
+    display: block;
+  }
+
+  .mr-widget-pipeline-graph {
+    .dropdown-menu {
+      z-index: $zindex-dropdown-menu;
+    }
+  }
+
+  .normal {
+    flex: 1;
+    flex-basis: auto;
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .label-branch {
+    @include gl-font-monospace;
+    font-size: 95%;
+    color: $gl-text-color;
+    font-weight: normal;
+    overflow: hidden;
+    word-break: break-all;
+  }
+
+  .deploy-link,
+  .label-branch {
+    &.label-truncate {
+      // NOTE: This selector targets its children because some of the HTML comes from
+      // 'source_branch_link'. Once this external HTML is no longer used, we could
+      // simplify this.
+      > a,
+      > span {
+        display: inline-block;
+        max-width: 12.5em;
+        margin-bottom: -6px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .mr-widget-body {
+    &:not(.mr-widget-body-line-height-1) {
+      line-height: 28px;
+    }
+
+    @include clearfix;
+
+    .approve-btn {
+      margin-right: 5px;
+    }
+
+    h4 {
+      float: left;
+      font-weight: $gl-font-weight-bold;
+      font-size: 14px;
+      line-height: inherit;
+      margin-top: 0;
+      margin-bottom: 0;
+
+      time {
+        font-weight: $gl-font-weight-normal;
+      }
+    }
+
+    .btn-grouped {
+      margin-left: 0;
+      margin-right: 7px;
+    }
+
+    label {
+      font-weight: $gl-font-weight-normal;
+    }
+
+    .spacing {
+      margin: 0 0 0 10px;
+    }
+
+    .bold,
+    .gl-font-weight-bold {
+      font-weight: $gl-font-weight-bold;
+      color: $gray-600;
+      margin-left: 10px;
+    }
+
+    .state-label {
+      font-weight: $gl-font-weight-bold;
+      padding-right: 10px;
+    }
+
+    .danger {
+      color: $red-500;
+    }
+
+    .spacing,
+    .bold,
+    .gl-font-weight-bold {
+      vertical-align: middle;
+    }
+
+    .dropdown-menu {
+      li a {
+        padding: 5px;
+      }
+
+      .merge-opt-icon {
+        line-height: 1.5;
+      }
+
+      .merge-opt-title {
+        margin-left: 8px;
+      }
+    }
+
+    .has-custom-error {
+      display: inline-block;
+    }
+
+    @include media-breakpoint-down(xs) {
+      p {
+        font-size: 13px;
+      }
+
+      .btn-grouped {
+        float: none;
+        margin-right: 0;
+      }
+
+      .accept-action {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    .commit-message-editor {
+      label {
+        padding: 0;
+      }
+    }
+
+    &.mr-widget-empty-state {
+      line-height: 20px;
+      padding: $gl-padding;
+
+      .artwork {
+
+        @include media-breakpoint-down(md) {
+          margin-bottom: $gl-padding;
+        }
+      }
+
+      .text {
+        p {
+          margin-top: $gl-padding;
+        }
+
+        .highlight {
+          margin: 0 0 $gl-padding;
+          font-weight: $gl-font-weight-bold;
+        }
+      }
+    }
+
+    &.mr-pipeline-suggest {
+      border-radius: $border-radius-default;
+      line-height: 20px;
+      border: 1px solid $border-color;
+
+      .circle-icon-container {
+        color: $gl-text-color-quaternary;
+      }
+    }
+  }
+
+  .ci-coverage {
+    float: right;
+  }
+
+  .stop-env-container {
+    color: $gl-text-color;
+    float: right;
+
+    a {
+      color: $gl-text-color;
+    }
+  }
+}
+
+.mr-widget-alert-container {
+  $radius: $border-radius-default - 1px;
+
+  border-radius: $radius $radius 0 0;
+
+  .gl-alert:not(:last-child) {
+    margin-bottom: 1px;
+  }
+}
+
+.mr-widget-body,
+.mr-widget-content {
+  padding: $gl-padding;
+}
+
+.mr-widget-border-top {
+  border-top: 1px solid $border-color;
+}
+
+.mr-widget-extension {
+  border-top: 1px solid $border-color;
+  background-color: $gray-50;
+
+  &.clickable:hover {
+    background-color: $gray-100;
+    cursor: pointer;
+  }
+}
+
+.mr-widget-extension-icon::before {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-left-0;
+  @include gl-top-0;
+  @include gl-opacity-3;
+  @include gl-border-solid;
+  @include gl-border-4;
+  @include gl-rounded-full;
+
+  width: 24px;
+  height: 24px;
+}
+
+.mr-widget-heading {
+  position: relative;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  background: var(--white, $white);
+
+  .gl-skeleton-loader {
+    display: block;
+  }
+}
+
+.mr-widget-info {
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+}
+
+.mr-widget-margin-left {
+  margin-left: $mr-widget-margin-left;
+}
+
+.mr-widget-section {
+  .code-text {
+    flex: 1;
+  }
+}
+
+.mr-widget-workflow {
+  margin-top: $gl-padding;
+  position: relative;
+
+  &::before {
+    content: '';
+    border-left: 1px solid $gray-100;
+    position: absolute;
+    left: 28px;
+    top: -17px;
+    height: 16px;
+  }
+}
+
+.mr-version-controls {
+  position: relative;
+  z-index: $tabs-holder-z-index + 10;
+  background: $white;
+  color: $gl-text-color;
+  margin-top: -1px;
+
+  .mr-version-menus-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 16px;
+    z-index: 199;
+    white-space: nowrap;
+
+    .gl-dropdown-toggle {
+      width: auto;
+      max-width: 170px;
+
+      svg {
+        top: 10px;
+        right: 8px;
+      }
+    }
+  }
+
+  .content-block {
+    padding: $gl-padding;
+    border-bottom: 0;
+  }
+
+  .mr-version-dropdown,
+  .mr-version-compare-dropdown {
+    margin: 0 0.5rem;
+  }
+
+  .dropdown-title {
+    color: $gl-text-color;
+  }
+
+  // Shortening button height by 1px to make compare-versions
+  // header 56px and fit into our 8px design grid
+  .btn {
+    height: 34px;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: calc(#{$header-height} + #{$mr-tabs-height});
+
+    .with-system-header & {
+      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
+    }
+
+    .with-system-header.with-performance-bar & {
+      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
+    }
+
+    .mr-version-menus-container {
+      flex-wrap: nowrap;
+    }
+
+    .with-performance-bar & {
+      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
+    }
+  }
+}
+
 // TODO: Move to GitLab UI
 .mr-extenson-scrim {
   background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1));
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b858d457969..dc01aea7681 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -2,8 +2,6 @@
  * MR -> show: Automerge widget
  *
  */
-
-$mr-widget-min-height: 69px;
 $tabs-holder-z-index: 250;
 
 .space-children {
@@ -18,12 +16,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-widget-border-top {
-  border-top: 1px solid $border-color;
-}
-
-.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
-
 .media-section {
   @include media-breakpoint-down(md) {
     align-items: flex-start;
@@ -42,140 +34,9 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-widget-section {
-  .code-text {
-    flex: 1;
-  }
-}
-
-.mr-widget-heading {
-  position: relative;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  background: var(--white, $white);
-
-  .gl-skeleton-loader {
-    display: block;
-  }
-}
-
-.mr-widget-extension {
-  border-top: 1px solid $border-color;
-  background-color: $gray-50;
-
-  &.clickable:hover {
-    background-color: $gray-100;
-    cursor: pointer;
-  }
-}
-
-.mr-widget-workflow {
-  margin-top: $gl-padding;
-  position: relative;
-
-  &::before {
-    content: '';
-    border-left: 1px solid $gray-100;
-    position: absolute;
-    left: 28px;
-    top: -17px;
-    height: 16px;
-  }
-}
-
-.mr-section-container {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  background: var(--white, $white);
-
-  > .mr-widget-border-top:first-of-type {
-    border-top: 0;
-  }
-}
-
-.mr-widget-body,
-.mr-widget-content,
-.mr-widget-footer {
-  padding: $gl-padding;
-}
-
-.mr-widget-info {
-  padding-left: $gl-padding;
-  padding-right: $gl-padding;
-}
-
 .mr-state-widget {
-  color: $gl-text-color;
-
-  .commit-message-edit {
-    border-radius: $border-radius-default;
-  }
-
-  .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;
-  }
-
-  .commits-list {
-    > li {
-      padding: $gl-padding;
-
-      @include media-breakpoint-up(md) {
-        margin-left: $gl-spacing-scale-7;
-      }
-    }
-  }
-
-  .mr-commit-dropdown {
-    .dropdown-menu {
-      @include media-breakpoint-up(md) {
-        width: 150%;
-      }
-    }
-  }
-
-  .mr-widget-footer {
-    padding: 0;
-  }
-
-  .mr-report {
-    padding: 0;
-
-    > .media {
-      padding: $gl-padding;
-    }
-  }
-
-  form {
-    margin-bottom: 0;
-
-    .clearfix {
-      margin-bottom: 0;
-    }
-  }
-
-  label {
-    margin-bottom: 0;
-  }
-
-  .btn {
-    font-size: $gl-font-size;
-  }
-
   .accept-merge-holder {
     .accept-action {
-      display: inline-block;
-      float: left;
-
       .accept-merge-request {
         &.ci-preparing,
         &.ci-pending,
@@ -192,226 +53,6 @@ $tabs-holder-z-index: 250;
       }
     }
   }
-
-  .ci-widget {
-    color: $gl-text-color;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    @include media-breakpoint-down(xs) {
-      flex-wrap: wrap;
-    }
-
-    .ci-widget-content {
-      display: flex;
-      align-items: center;
-      flex: 1;
-    }
-  }
-
-  .mr-widget-icon {
-    font-size: 22px;
-  }
-
-  .mr-loading-icon {
-    margin: 3px 0;
-  }
-
-  .ci-status-icon svg {
-    margin: 3px 0;
-    position: relative;
-    overflow: visible;
-    display: block;
-  }
-
-  .mr-widget-pipeline-graph {
-    .dropdown-menu {
-      z-index: $zindex-dropdown-menu;
-    }
-  }
-
-  .normal {
-    flex: 1;
-    flex-basis: auto;
-  }
-
-  .capitalize {
-    text-transform: capitalize;
-  }
-
-  .label-branch {
-    @include gl-font-monospace;
-    font-size: 95%;
-    color: $gl-text-color;
-    font-weight: normal;
-    overflow: hidden;
-    word-break: break-all;
-  }
-
-  .deploy-link,
-  .label-branch {
-    &.label-truncate {
-      // NOTE: This selector targets its children because some of the HTML comes from
-      // 'source_branch_link'. Once this external HTML is no longer used, we could
-      // simplify this.
-      > a,
-      > span {
-        display: inline-block;
-        max-width: 12.5em;
-        margin-bottom: -6px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
-  .mr-widget-body {
-    &:not(.mr-widget-body-line-height-1) {
-      line-height: 28px;
-    }
-
-    @include clearfix;
-
-    .approve-btn {
-      margin-right: 5px;
-    }
-
-    h4 {
-      float: left;
-      font-weight: $gl-font-weight-bold;
-      font-size: 14px;
-      line-height: inherit;
-      margin-top: 0;
-      margin-bottom: 0;
-
-      time {
-        font-weight: $gl-font-weight-normal;
-      }
-    }
-
-    .btn-grouped {
-      margin-left: 0;
-      margin-right: 7px;
-    }
-
-    label {
-      font-weight: $gl-font-weight-normal;
-    }
-
-    .spacing {
-      margin: 0 0 0 10px;
-    }
-
-    .bold,
-    .gl-font-weight-bold {
-      font-weight: $gl-font-weight-bold;
-      color: $gray-600;
-      margin-left: 10px;
-    }
-
-    .state-label {
-      font-weight: $gl-font-weight-bold;
-      padding-right: 10px;
-    }
-
-    .danger {
-      color: $red-500;
-    }
-
-    .spacing,
-    .bold,
-    .gl-font-weight-bold {
-      vertical-align: middle;
-    }
-
-    .dropdown-menu {
-      li a {
-        padding: 5px;
-      }
-
-      .merge-opt-icon {
-        line-height: 1.5;
-      }
-
-      .merge-opt-title {
-        margin-left: 8px;
-      }
-    }
-
-    .has-custom-error {
-      display: inline-block;
-    }
-
-    @include media-breakpoint-down(xs) {
-      p {
-        font-size: 13px;
-      }
-
-      .btn-grouped {
-        float: none;
-        margin-right: 0;
-      }
-
-      .accept-action {
-        width: 100%;
-        text-align: center;
-      }
-    }
-
-    .commit-message-editor {
-      label {
-        padding: 0;
-      }
-    }
-
-    &.mr-widget-empty-state {
-      line-height: 20px;
-      padding: $gl-padding;
-
-      .artwork {
-
-        @include media-breakpoint-down(md) {
-          margin-bottom: $gl-padding;
-        }
-      }
-
-      .text {
-        p {
-          margin-top: $gl-padding;
-        }
-
-        .highlight {
-          margin: 0 0 $gl-padding;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    &.mr-pipeline-suggest {
-      border-radius: $border-radius-default;
-      line-height: 20px;
-      border: 1px solid $border-color;
-
-      .circle-icon-container {
-        color: $gl-text-color-quaternary;
-      }
-    }
-  }
-
-  .ci-coverage {
-    float: right;
-  }
-
-  .stop-env-container {
-    color: $gl-text-color;
-    float: right;
-
-    a {
-      color: $gl-text-color;
-    }
-  }
 }
 
 .mr_source_commit,
@@ -477,72 +118,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-info-list {
-  clear: left;
-  position: relative;
-  padding-top: 4px;
-
-  p {
-    margin: 0;
-    position: relative;
-    padding: 4px 0;
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-  }
-
-  &.mr-memory-usage {
-    p {
-      float: left;
-    }
-
-    .memory-graph-container {
-      float: left;
-      margin-left: 5px;
-    }
-  }
-}
-
-.mr-source-target {
-  flex-wrap: wrap;
-  padding: $gl-padding;
-  background: var(--white, $white);
-  min-height: $mr-widget-min-height;
-
-  @include media-breakpoint-up(md) {
-    align-items: center;
-  }
-
-  .git-merge-container {
-    justify-content: space-between;
-    flex: 1;
-    flex-direction: row;
-    align-items: center;
-
-    @include media-breakpoint-down(md) {
-      flex-direction: column;
-      align-items: stretch;
-
-      .branch-actions {
-        margin-top: 16px;
-      }
-    }
-
-    @include media-breakpoint-up(lg) {
-      .branch-actions {
-        align-self: center;
-        margin-left: $gl-padding;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .diverged-commits-count {
-    color: $gl-text-color-secondary;
-  }
-}
-
 .card-new-merge-request {
   .card-header {
     padding: 5px 10px;
@@ -639,75 +214,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-version-controls {
-  position: relative;
-  z-index: $tabs-holder-z-index + 10;
-  background: $white;
-  color: $gl-text-color;
-  margin-top: -1px;
-
-  .mr-version-menus-container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 16px;
-    z-index: 199;
-    white-space: nowrap;
-
-    .gl-dropdown-toggle {
-      width: auto;
-      max-width: 170px;
-
-      svg {
-        top: 10px;
-        right: 8px;
-      }
-    }
-  }
-
-  .content-block {
-    padding: $gl-padding;
-    border-bottom: 0;
-  }
-
-  .mr-version-dropdown,
-  .mr-version-compare-dropdown {
-    margin: 0 0.5rem;
-  }
-
-  .dropdown-title {
-    color: $gl-text-color;
-  }
-
-  // Shortening button height by 1px to make compare-versions
-  // header 56px and fit into our 8px design grid
-  .btn {
-    height: 34px;
-  }
-
-  @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: calc(#{$header-height} + #{$mr-tabs-height});
-
-    .with-system-header & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
-    }
-
-    .with-system-header.with-performance-bar & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
-    }
-
-    .mr-version-menus-container {
-      flex-wrap: nowrap;
-    }
-
-    .with-performance-bar & {
-      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
-    }
-  }
-}
-
 .merge-request-tabs-holder,
 .epic-tabs-holder {
   top: $header-height;
@@ -833,80 +339,10 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-memory-usage {
-  width: 100%;
-
-  p.usage-info-loading .usage-info-load-spinner {
-    margin-right: 10px;
-    font-size: 16px;
-  }
-}
-
 .fork-sprite {
   margin-right: -5px;
 }
 
-.deploy-heading,
-.merge-train-position-indicator {
-  @include media-breakpoint-up(md) {
-    padding: $gl-padding-8 $gl-padding;
-  }
-
-  .media-body {
-    min-width: 0;
-    font-size: 12px;
-    margin-left: 32px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
-  }
-}
-
-.deploy-body {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  @include media-breakpoint-up(xs) {
-    flex-wrap: nowrap;
-    white-space: nowrap;
-  }
-
-  @include media-breakpoint-down(md) {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .deployment-info {
-      margin-bottom: $gl-padding;
-    }
-  }
-
-  > *:not(:last-child) {
-    margin-right: 0.3em;
-  }
-
-  svg {
-    vertical-align: text-top;
-  }
-
-  .deployment-info {
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    min-width: 100px;
-
-    @include media-breakpoint-up(xs) {
-      min-width: 0;
-      max-width: 100%;
-    }
-  }
-
-  .dropdown-menu {
-    width: 400px;
-  }
-}
-
 // Hack alert: we've rewritten `btn` class in a way that
 // we've broken it and it is not possible to use with `btn-link`
 // which causes a blank button when it's disabled and hovering
@@ -924,30 +360,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.ci-widget-container {
-  justify-content: space-between;
-  flex: 1;
-  flex-direction: row;
-
-  @include media-breakpoint-down(sm) {
-    flex-direction: column;
-
-    .stage-cell .stage-container {
-      margin-top: 16px;
-    }
-
-    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
-      transform: initial;
-    }
-  }
-
-  .coverage {
-    font-size: 12px;
-    color: $gray-500;
-    line-height: initial;
-  }
-}
-
 .merge-request-details .file-finder-overlay.diff-file-finder {
   position: fixed;
   z-index: 99999;
@@ -963,47 +375,3 @@ $tabs-holder-z-index: 250;
     }
   }
 }
-
-.diff-file-row.is-active {
-  background-color: $gray-50;
-}
-
-.mr-conflict-loader {
-  max-width: 334px;
-
-  > svg {
-    vertical-align: middle;
-  }
-}
-
-.mr-ready-to-merge-loader {
-  max-width: 418px;
-
-  > svg {
-    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;
-  }
-}
-
-.mr-widget-extension-icon::before {
-  @include gl-content-empty;
-  @include gl-absolute;
-  @include gl-left-0;
-  @include gl-top-0;
-  @include gl-opacity-3;
-  @include gl-border-solid;
-  @include gl-border-4;
-  @include gl-rounded-full;
-
-  width: 24px;
-  height: 24px;
-}