Merge branch 'master' into sh-headless-chrome-support

* master: (109 commits)
  Remove Filesystem check metrics that use too much CPU to handle requests
  Set merge_request_diff_id on MR when creating
  Add a column linking an MR to its diff
  Remove useless closeReopenReport specs
  Clarify external artifacts only working when GitLab pages is enabled
  Send SIGSTP before SIGTERM to actually give Sidekiq jobs 30s to finish when the memory killer kicks in
  Remove an exception from the git user default SSH config check
  Geo route whitelisting is too optimistic
  Update .nvmrc to current stable (v9.0.0)
  Update documentation
  Address Douwe's feedback
  Refactor responsive table styles to support nested error block
  Add changelog items
  Update specs for sudo behavior
  Move RSS and incoming email tokens from User Settings > Accounts to User Settings > Access Tokens
  Remove user authentication_token column
  Migrate user private tokens to personal access tokens
  Add sudo API scope
  Consistently use PersonalAccessToken instead of PersonalToken
  Remove User#private_token
  ...

4 files changed, 98 insertions, 60 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 81439c0d2fe..1b944831082 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -23,11 +23,16 @@
     @include webkit-prefix(animation-duration, 2s);
   }
 
-  &.spin {
+  &.spin-cw {
     transform-origin: center;
     animation: spin 4s linear infinite;
   }
 
+  &.spin-ccw {
+    transform-origin: center;
+    animation: spin 4s linear infinite reverse;
+  }
+
   &.flipOutX,
   &.flipOutY,
   &.bounceIn,
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index dbd990f84c1..8819a0c20f4 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -209,7 +209,6 @@
     padding: 24px 0 0;
 
     .nav-links {
-      justify-content: center;
       width: 100%;
       float: none;
 
@@ -217,6 +216,14 @@
         float: none;
       }
     }
+
+    li:first-child {
+      margin-left: auto;
+    }
+
+    li:last-child {
+      margin-right: auto;
+    }
   }
 
   .group-info {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 96f9dda26c4..ed84b17af6a 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -5,32 +5,6 @@
 .cgreen { color: $common-green; }
 .cdark { color: $common-gray-dark; }
 
-/** COMMON CLASSES **/
-.prepend-top-0 { margin-top: 0; }
-.prepend-top-5 { margin-top: 5px; }
-.prepend-top-10 { margin-top: 10px; }
-.prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-20 { margin-top: 20px; }
-.prepend-left-4 { margin-left: 4px; }
-.prepend-left-5 { margin-left: 5px; }
-.prepend-left-10 { margin-left: 10px; }
-.prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-5 { margin-right: 5px; }
-.append-right-8 { margin-right: 8px; }
-.append-right-10 { margin-right: 10px; }
-.append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right: 20px; }
-.append-bottom-0 { margin-bottom: 0; }
-.append-bottom-5 { margin-bottom: 5px; }
-.append-bottom-10 { margin-bottom: 10px; }
-.append-bottom-15 { margin-bottom: 15px; }
-.append-bottom-20 { margin-bottom: 20px; }
-.append-bottom-default { margin-bottom: $gl-padding; }
-.inline { display: inline-block; }
-.center { text-align: center; }
-.vertical-align-middle { vertical-align: middle; }
-
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: $hint-color; }
 .light { color: $common-gray; }
@@ -448,3 +422,30 @@ table {
   pointer-events: none;
   opacity: .5;
 }
+
+/** COMMON CLASSES **/
+.prepend-top-0 { margin-top: 0; }
+.prepend-top-5 { margin-top: 5px; }
+.prepend-top-10 { margin-top: 10px; }
+.prepend-top-15 { margin-top: 15px; }
+.prepend-top-default { margin-top: $gl-padding !important; }
+.prepend-top-20 { margin-top: 20px; }
+.prepend-left-4 { margin-left: 4px; }
+.prepend-left-5 { margin-left: 5px; }
+.prepend-left-10 { margin-left: 10px; }
+.prepend-left-default { margin-left: $gl-padding; }
+.prepend-left-20 { margin-left: 20px; }
+.append-right-5 { margin-right: 5px; }
+.append-right-8 { margin-right: 8px; }
+.append-right-10 { margin-right: 10px; }
+.append-right-default { margin-right: $gl-padding; }
+.append-right-20 { margin-right: 20px; }
+.append-bottom-0 { margin-bottom: 0; }
+.append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-10 { margin-bottom: 10px; }
+.append-bottom-15 { margin-bottom: 15px; }
+.append-bottom-20 { margin-bottom: 20px; }
+.append-bottom-default { margin-bottom: $gl-padding; }
+.inline { display: inline-block; }
+.center { text-align: center; }
+.vertical-align-middle { vertical-align: middle; }
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 8e653c443cf..7adb2f113bb 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -3,57 +3,74 @@
   max-width: #{$max + '%'};
 }
 
+.gl-responsive-table-row-layout {
+  width: 100%;
+
+  @media (min-width: $screen-md-min) {
+    display: flex;
+    align-items: center;
+
+    & > &:not(:first-child) {
+      margin-top: $gl-padding;
+    }
+  }
+}
+
 .gl-responsive-table-row {
+  @extend .gl-responsive-table-row-layout;
   margin-top: 10px;
   border: 1px solid $border-color;
 
   @media (min-width: $screen-md-min) {
-    padding: 15px 0;
     margin: 0;
-    display: flex;
-    align-items: center;
+    padding: $gl-padding 0;
     border: none;
     border-bottom: 1px solid $white-normal;
   }
+}
+
+.gl-responsive-table-row-col-span {
+  flex-wrap: wrap;
+}
 
-  .table-section {
-    white-space: nowrap;
+.table-section {
+  white-space: nowrap;
 
-    $section-widths: 10 15 20 25 30 40;
-    @each $width in $section-widths {
-      &.section-#{$width} {
-        flex: 0 0 #{$width + '%'};
+  $section-widths: 10 15 20 25 30 40 100;
+  @each $width in $section-widths {
+    &.section-#{$width} {
+      flex: 0 0 #{$width + '%'};
 
-        @media (min-width: $screen-md-min) {
-          max-width: #{$width + '%'};
-        }
+      @media (min-width: $screen-md-min) {
+        max-width: #{$width + '%'};
       }
     }
+  }
 
-    &:not(.table-button-footer) {
-      @media (max-width: $screen-sm-max) {
-        display: flex;
-        align-self: stretch;
-        padding: 10px;
-        align-items: center;
-        min-height: 62px;
+  @media (max-width: $screen-sm-max) {
+    display: flex;
+    align-self: stretch;
+    padding: 10px;
+    align-items: center;
+    min-height: 62px;
 
-        &:not(:first-of-type) {
-          border-top: 1px solid $white-normal;
-        }
-      }
+    &:not(:first-child) {
+      border-top: 1px solid $white-normal;
     }
+  }
 
-    &.section-wrap {
-      white-space: normal;
+  &.section-wrap {
+    white-space: normal;
 
-      @media (max-width: $screen-sm-max) {
-        flex-wrap: wrap;
-      }
+    @media (max-width: $screen-sm-max) {
+      flex-wrap: wrap;
     }
   }
-}
 
+  &.section-align-top {
+    align-self: flex-start;
+  }
+}
 
 .table-button-footer {
   @media (min-width: $screen-md-min) {
@@ -61,12 +78,13 @@
   }
 
   @media (max-width: $screen-sm-max) {
-    background-color: $gray-normal;
+    display: block;
     align-self: stretch;
+    min-height: 0;
+    background-color: $gray-normal;
     border-top: 1px solid $border-color;
 
     .table-action-buttons {
-      padding: 10px 5px;
       display: flex;
 
       .btn {
@@ -77,7 +95,14 @@
       > .external-url,
       > .btn {
         flex: 1 1 28px;
-        margin: 0 5px;
+
+        &:not(:first-child) {
+          margin-left: 5px;
+        }
+
+        &:not(:last-child) {
+          margin-right: 5px;
+        }
       }
 
       .dropdown-new {