Add latest changes from gitlab-org/gitlab@master

7 files changed, 247 insertions, 195 deletions

diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 10a30bd44b1..4d1e550d13e 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -87,6 +87,7 @@ export default {
       <table
         :aria-label="tableCaption"
         class="table tree-table"
+        :class="{ 'gl-table-layout-fixed': !showParentRow }"
         aria-live="polite"
         data-qa-selector="file_tree_table"
       >
@@ -120,7 +121,9 @@ export default {
           <template v-if="isLoading">
             <tr v-for="i in 5" :key="i" aria-hidden="true">
               <td><gl-skeleton-loading :lines="1" class="h-auto" /></td>
-              <td><gl-skeleton-loading :lines="1" class="h-auto" /></td>
+              <td class="gl-display-none gl-sm-display-block">
+                <gl-skeleton-loading :lines="1" class="h-auto" />
+              </td>
               <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td>
             </tr>
           </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 24f1c9c5bd0..5d8541cf5e8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlButton, GlLoadingIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
+import {
+  GlButton,
+  GlLoadingIcon,
+  GlLink,
+  GlBadge,
+  GlSafeHtmlDirective,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
 import StatusIcon from './status_icon.vue';
@@ -21,6 +29,7 @@ export default {
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
+    GlTooltip: GlTooltipDirective,
   },
   data() {
     return {
@@ -44,6 +53,14 @@ export default {
 
       return true;
     },
+    collapseButtonLabel() {
+      return sprintf(
+        this.isCollapsed
+          ? s__('mrWidget|Show %{widget} details')
+          : s__('mrWidget|Hide %{widget} details'),
+        { widget: this.$options.name },
+      );
+    },
     statusIconName() {
       if (this.isLoadingSummary) return null;
 
@@ -102,22 +119,28 @@ export default {
         :is-loading="isLoadingSummary"
         :icon-name="statusIconName"
       />
-      <div class="media-body d-flex flex-align-self-center align-items-center">
+      <div class="media-body gl-display-flex gl-align-self-center gl-align-items-center">
         <div class="code-text">
           <template v-if="isLoadingSummary">
             {{ __('Loading...') }}
           </template>
           <div v-else v-safe-html="summary(collapsedData)"></div>
         </div>
-        <gl-button
-          v-if="isCollapsible"
-          size="small"
-          class="float-right align-self-center"
-          data-testid="toggle-button"
-          @click="toggleCollapsed"
+        <div
+          class="gl-float-right gl-align-self-center gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3"
         >
-          {{ isCollapsed ? __('Expand') : __('Collapse') }}
-        </gl-button>
+          <gl-button
+            v-if="isCollapsible"
+            v-gl-tooltip
+            :title="collapseButtonLabel"
+            :aria-expanded="`${!isCollapsed}`"
+            :aria-label="collapseButtonLabel"
+            :icon="isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
+            category="tertiary"
+            data-testid="toggle-button"
+            @click="toggleCollapsed"
+          />
+        </div>
       </div>
     </div>
     <div
@@ -137,11 +160,9 @@ export default {
         wclass="report-block-list"
         class="report-block-container"
       >
-        <li v-for="data in fullData" :key="data.id" class="d-flex align-items-center">
+        <li v-for="data in fullData" :key="data.id" class="gl-display-flex gl-align-items-center">
           <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
-          <div
-            class="gl-mt-2 gl-mb-2 align-content-around align-items-start flex-wrap align-self-center d-flex"
-          >
+          <div class="gl-mt-2 gl-mb-2 gl-flex-wrap gl-align-self-center gl-display-flex">
             <div v-safe-html="data.text" class="gl-mr-4"></div>
             <div v-if="data.link">
               <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss
index dae0cd72a8f..f1d7df8c5ed 100644
--- a/app/assets/stylesheets/application_dark.scss
+++ b/app/assets/stylesheets/application_dark.scss
@@ -2,74 +2,4 @@
 
 @import './application';
 
-@import './themes/theme_helper';
-
-body.gl-dark {
-  @include gitlab-theme(
-    $gray-900,
-    $gray-400,
-    $gray-500,
-    $gray-800,
-    $gray-900,
-    $white
-  );
-
-  .logo-text svg {
-    fill: var(--gl-text-color);
-  }
-
-  .navbar-gitlab {
-    background-color: var(--gray-50);
-    box-shadow: 0 1px 0 0 var(--gray-100);
-
-    .navbar-sub-nav,
-    .navbar-nav {
-      li {
-        > a:hover,
-        > a:focus,
-        > button:hover,
-        > button:focus {
-          color: var(--gl-text-color);
-          background-color: var(--gray-200);
-        }
-      }
-
-      li.active,
-      li.dropdown.show {
-        > a,
-        > button {
-          color: var(--gl-text-color);
-          background-color: var(--gray-200);
-        }
-      }
-    }
-
-    .header-search {
-      background-color: var(--gray-100) !important;
-      box-shadow: inset 0 0 0 1px var(--border-color) !important;
-
-      &:active,
-      &:hover {
-        background-color: var(--gray-100) !important;
-        box-shadow: inset 0 0 0 1px var(--blue-200) !important;
-      }
-    }
-
-    .search {
-      form {
-        background-color: var(--gray-100);
-        box-shadow: inset 0 0 0 1px var(--border-color);
-
-        &:active,
-        &:hover {
-          background-color: var(--gray-100);
-          box-shadow: inset 0 0 0 1px var(--blue-200);
-        }
-      }
-    }
-  }
-
-  .md :not(pre.code) > code {
-    background-color: $gray-200;
-  }
-}
+@import './themes/dark_mode_overrides';
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 461d6a29b3a..25f5c0407f7 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -7,36 +7,8 @@
   opacity: 1;
 }
 
-.check-all-holder {
-  line-height: 36px;
-  float: left;
-  margin-right: 15px;
-}
-
-form.edit-issue {
-  margin: 0;
-}
-
-ul.related-merge-requests > li {
-  display: flex;
-  align-items: center;
-
-  .merge-request-id {
-    flex-shrink: 0;
-  }
-
-  .merge-request-info {
-    margin-left: 5px;
-  }
-
-  gl-emoji {
-    font-size: 1em;
-  }
-}
-
-.related-branches-title {
-  font-size: 16px;
-  font-weight: $gl-font-weight-bold;
+ul.related-merge-requests > li gl-emoji {
+  font-size: 1em;
 }
 
 .merge-request-status {
@@ -92,35 +64,12 @@ ul.related-merge-requests > li {
   }
 }
 
-.issues-footer {
-  padding-top: $gl-padding;
-  padding-bottom: 37px;
-}
-
-.issues-nav-controls,
-.new-branch-col {
-  font-size: 0;
-}
-
 .issues-nav-controls {
   .btn-group:empty {
     display: none;
   }
 }
 
-.email-modal-input-group {
-  margin-bottom: 10px;
-
-  .form-control {
-    background-color: $white;
-  }
-
-  .btn {
-    background-color: $gray-light;
-    border: 1px solid $border-gray-normal;
-  }
-}
-
 .recaptcha {
   margin-bottom: 30px;
 }
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 3e3b514dd3d..2f68694a2a5 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -16,9 +16,6 @@ body.gl-dark {
   --border-color: #4f4f4f;
   --black: #fff;
 }
-.nav-sidebar li.active {
-  box-shadow: none;
-}
 :root {
   --white: #333;
 }
@@ -1610,6 +1607,95 @@ svg.s16 {
 .rect-avatar.s32 {
   border-radius: 4px;
 }
+body.gl-dark {
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-300: #5e5e5e;
+  --gray-400: #868686;
+  --gray-500: #999;
+  --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
+  --gray-800: #f0f0f0;
+  --gray-900: #fafafa;
+  --gray-950: #fff;
+  --green-50: #0a4020;
+  --green-100: #0d532a;
+  --green-200: #24663b;
+  --green-300: #217645;
+  --green-400: #108548;
+  --green-500: #2da160;
+  --green-600: #52b87a;
+  --green-700: #91d4a8;
+  --green-800: #c3e6cd;
+  --green-900: #ecf4ee;
+  --green-950: #f1fdf6;
+  --blue-50: #033464;
+  --blue-100: #064787;
+  --blue-200: #0b5cad;
+  --blue-300: #1068bf;
+  --blue-400: #1f75cb;
+  --blue-500: #428fdc;
+  --blue-600: #63a6e9;
+  --blue-700: #9dc7f1;
+  --blue-800: #cbe2f9;
+  --blue-900: #e9f3fc;
+  --blue-950: #f2f9ff;
+  --orange-50: #5c2900;
+  --orange-100: #703800;
+  --orange-200: #8f4700;
+  --orange-300: #9e5400;
+  --orange-400: #ab6100;
+  --orange-500: #c17d10;
+  --orange-600: #d99530;
+  --orange-700: #e9be74;
+  --orange-800: #f5d9a8;
+  --orange-900: #fdf1dd;
+  --orange-950: #fff4e1;
+  --red-50: #660e00;
+  --red-100: #8d1300;
+  --red-200: #ae1800;
+  --red-300: #c91c00;
+  --red-400: #dd2b0e;
+  --red-500: #ec5941;
+  --red-600: #f57f6c;
+  --red-700: #fcb5aa;
+  --red-800: #fdd4cd;
+  --red-900: #fcf1ef;
+  --red-950: #fff4f3;
+  --indigo-50: #1a1a40;
+  --indigo-100: #292961;
+  --indigo-200: #393982;
+  --indigo-300: #4b4ba3;
+  --indigo-400: #5b5bbd;
+  --indigo-500: #6666c4;
+  --indigo-600: #7c7ccc;
+  --indigo-700: #a6a6de;
+  --indigo-800: #d1d1f0;
+  --indigo-900: #ebebfa;
+  --indigo-950: #f7f7ff;
+  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
+  --purple-50: #232150;
+  --purple-100: #2f2a6b;
+  --purple-200: #453894;
+  --purple-300: #5943b6;
+  --purple-400: #694cc0;
+  --purple-500: #7b58cf;
+  --purple-600: #9475db;
+  --purple-700: #ac93e6;
+  --purple-800: #cbbbf2;
+  --purple-900: #e1d8f9;
+  --purple-950: #f4f0ff;
+  --gl-text-color: #fafafa;
+  --border-color: #4f4f4f;
+  --white: #333;
+  --black: #fff;
+  --svg-status-bg: #333;
+}
+.nav-sidebar li.active {
+  box-shadow: none;
+}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }
@@ -1819,9 +1905,6 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
-.nav-sidebar li.active {
-  box-shadow: none;
-}
 .tab-width-8 {
   -moz-tab-size: 8;
   tab-size: 8;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 76b9e10ef1a..c79816e3579 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -257,53 +257,3 @@ $line-removed-dark: $red-200;
 
 $well-expand-item: $gray-200;
 $well-inner-border: $gray-200;
-
-// Misc component overrides that should live elsewhere
-.gl-label {
-  filter: brightness(0.9) contrast(1.1);
-
-  // This applies to the gl-label markups
-  // rendered and cached in the backend (labels_helper.rb)
-  &.gl-label-scoped {
-    .gl-label-text-scoped,
-    .gl-label-close {
-      color: $gray-900;
-    }
-  }
-}
-
-// white-ish text for light labels
-.gl-label-text-light.gl-label-text-light {
-  color: $gray-900;
-}
-
-.gl-label-text-dark.gl-label-text-dark {
-  color: $gray-10;
-}
-
-// This applies to "gl-labels" from "gitlab-ui"
-.gl-label.gl-label-scoped.gl-label-text-dark,
-.gl-label.gl-label-scoped.gl-label-text-light {
-  .gl-label-text-scoped,
-  .gl-label-close {
-    color: $gray-900;
-  }
-}
-
-// duplicated class as the original .atwho-view style is added later
-.atwho-view.atwho-view {
-  background-color: $white;
-  color: $gray-900;
-  border-color: $gray-800;
-}
-
-.nav-sidebar {
-  li.active {
-    box-shadow: none;
-  }
-
-  .sidebar-sub-level-items.fly-out-list {
-    box-shadow: none;
-    border: 1px solid $border-color;
-  }
-}
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
new file mode 100644
index 00000000000..b77048174c9
--- /dev/null
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -0,0 +1,116 @@
+@import './themes/dark';
+@import 'page_bundles/mixins_and_variables_and_functions';
+@import './themes/theme_helper';
+
+// Some hacks and overrides for things that don't properly support dark mode
+.gl-label {
+  filter: brightness(0.9) contrast(1.1);
+
+  // This applies to the gl-label markups
+  // rendered and cached in the backend (labels_helper.rb)
+  &.gl-label-scoped {
+    .gl-label-text-scoped,
+    .gl-label-close {
+      color: $gray-900;
+    }
+  }
+}
+
+// white-ish text for light labels
+.gl-label-text-light.gl-label-text-light {
+  color: $gray-900;
+}
+
+.gl-label-text-dark.gl-label-text-dark {
+  color: $gray-10;
+}
+
+// This applies to "gl-labels" from "gitlab-ui"
+.gl-label.gl-label-scoped.gl-label-text-dark,
+.gl-label.gl-label-scoped.gl-label-text-light {
+  .gl-label-text-scoped,
+  .gl-label-close {
+    color: $gray-900;
+  }
+}
+
+// duplicated class as the original .atwho-view style is added later
+.atwho-view.atwho-view {
+  background-color: $white;
+  color: $gray-900;
+  border-color: $gray-800;
+}
+
+.nav-sidebar {
+  li.active {
+    box-shadow: none;
+  }
+
+  .sidebar-sub-level-items.fly-out-list {
+    box-shadow: none;
+    border: 1px solid $border-color;
+  }
+}
+
+body.gl-dark {
+  @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white);
+
+  .logo-text svg {
+    fill: var(--gl-text-color);
+  }
+
+  .navbar-gitlab {
+    background-color: var(--gray-50);
+    box-shadow: 0 1px 0 0 var(--gray-100);
+
+    .navbar-sub-nav,
+    .navbar-nav {
+      li {
+        > a:hover,
+        > a:focus,
+        > button:hover,
+        > button:focus {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+
+      li.active,
+      li.dropdown.show {
+        > a,
+        > button {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+    }
+
+    .header-search {
+      background-color: var(--gray-100) !important;
+      box-shadow: inset 0 0 0 1px var(--border-color) !important;
+
+      &:active,
+      &:hover {
+        background-color: var(--gray-100) !important;
+        box-shadow: inset 0 0 0 1px var(--blue-200) !important;
+      }
+    }
+
+    .search {
+      form {
+        background-color: var(--gray-100);
+        box-shadow: inset 0 0 0 1px var(--border-color);
+
+        &:active,
+        &:hover {
+          background-color: var(--gray-100);
+          box-shadow: inset 0 0 0 1px var(--blue-200);
+        }
+      }
+    }
+  }
+
+  .md :not(pre.code) > code {
+    background-color: $gray-200;
+  }
+}