Add latest changes from gitlab-org/gitlab@master

12 files changed, 27 insertions, 19 deletions

diff --git a/app/assets/javascripts/behaviors/copy_code.js b/app/assets/javascripts/behaviors/copy_code.js
index 0c81ae63f21..970864eef74 100644
--- a/app/assets/javascripts/behaviors/copy_code.js
+++ b/app/assets/javascripts/behaviors/copy_code.js
@@ -8,7 +8,7 @@ class CopyCodeButton extends HTMLElement {
     this.for = uniqueId('code-');
 
     const target = this.parentNode.querySelector('pre');
-    if (!target) return;
+    if (!target || this.closest('.suggestions')) return;
 
     target.setAttribute('id', this.for);
 
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index d05cd8075d1..e86dae536b5 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -362,7 +362,7 @@ export default {
       :data-board="list.id"
       :data-board-type="list.listType"
       :class="{
-        'bg-danger-100': boardItemsSizeExceedsMax,
+        'bg-danger-100 gl-rounded-bottom-left-base gl-rounded-bottom-right-base': boardItemsSizeExceedsMax,
         'gl-overflow-hidden': disableScrollingWhenMutationInProgress,
         'gl-overflow-y-auto': !disableScrollingWhenMutationInProgress,
       }"
diff --git a/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue b/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
index 198ff33a249..40cb7fbb0ff 100644
--- a/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
@@ -113,13 +113,13 @@ export default {
   >
     <div
       v-if="hasTimelineEvents"
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-z-index-1"
     >
       <gl-icon name="comment" class="note-icon" />
     </div>
     <timeline-events-form
       ref="eventForm"
-      :class="{ 'gl-border-gray-50 gl-border-t': hasTimelineEvents }"
+      :class="{ 'gl-border-gray-50 gl-border-t gl-pt-3': hasTimelineEvents }"
       :is-event-processed="createTimelineEventActive"
       show-save-and-add
       @save-event="createIncidentTimelineEvent"
diff --git a/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
index bbba08134f8..c2fb8b6f683 100644
--- a/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
@@ -28,9 +28,9 @@ export default {
 </script>
 
 <template>
-  <div class="gl-relative gl-display-flex gl-align-items-center">
+  <div class="edit-timeline-event gl-relative gl-display-flex gl-align-items-center">
     <div
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-z-index-1"
     >
       <gl-icon name="comment" class="note-icon" />
     </div>
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 7f98e74f4aa..7944362a40f 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -166,11 +166,11 @@ export default {
 
 <template>
   <form class="gl-flex-grow-1 gl-border-gray-50">
-    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row">
-      <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5">
+    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-mt-3">
+      <gl-form-group :label="__('Date')" class="gl-mr-5">
         <gl-datepicker id="incident-date" ref="datepicker" v-model="datePickerInput" />
       </gl-form-group>
-      <div class="gl-display-flex gl-mt-5">
+      <div class="gl-display-flex">
         <gl-form-group :label="__('Time')">
           <div class="gl-display-flex">
             <label label-for="timeline-input-hours" class="sr-only"></label>
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
index 89a565e280d..9819fb459b3 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
@@ -51,12 +51,12 @@ export default {
 <template>
   <div class="timeline-event gl-display-grid">
     <div
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
     >
       <gl-icon :name="getEventIcon(action)" class="note-icon" />
     </div>
     <div class="timeline-event-note timeline-event-border" data-testid="event-text-container">
-      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-3">
+      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-2">
         <h3
           class="timeline-event-note-date gl-font-weight-bold gl-font-sm gl-my-0"
           data-testid="event-time"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
index 84bddb45ffa..10b80529a66 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
@@ -144,11 +144,11 @@ export default {
         {{ eventDate }}
       </h2>
 
-      <ul class="notes main-notes-list gl-pt-2!">
+      <ul class="notes main-notes-list">
         <li
           v-for="(event, eventIndex) in events"
           :key="eventIndex"
-          class="timeline-entry-vertical-line timeline-entry note system-note note-wrapper gl-my-2! gl-pr-0!"
+          class="timeline-entry-vertical-line timeline-entry note system-note note-wrapper gl-my-0! gl-pr-0!"
         >
           <edit-timeline-event
             v-if="eventToEdit === event.id"
diff --git a/app/assets/javascripts/vue_shared/components/url_sync.vue b/app/assets/javascripts/vue_shared/components/url_sync.vue
index bd5b7b77017..ba5bce32b40 100644
--- a/app/assets/javascripts/vue_shared/components/url_sync.vue
+++ b/app/assets/javascripts/vue_shared/components/url_sync.vue
@@ -40,7 +40,7 @@ export default {
     updateQuery(newQuery) {
       const url =
         this.urlParamsUpdateStrategy === URL_SET_PARAMS_STRATEGY
-          ? setUrlParams(this.query, window.location.href, true)
+          ? setUrlParams(this.query, window.location.href, true, true, true)
           : mergeUrlParams(newQuery, window.location.href, { spreadArrays: true });
       historyPushState(url);
     },
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 75dd342393d..02aa9ed6b16 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -1,7 +1,7 @@
 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
 
 @import '../common';
-@import 'highlight.js/styles/base16/monokai.css';
+@import 'highlight.js/styles/base16/monokai';
 
 /*
 * Monokai Colors
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index c0b2fb90aa0..18e18619c09 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -1,7 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
 @import '../common';
-@import 'highlight.js/styles/base16/solarized-dark.css';
+@import 'highlight.js/styles/base16/solarized-dark';
 
 /*
 * Solarized dark colors
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 921b36dd610..d2dea024408 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -1,7 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
 @import '../common';
-@import 'highlight.js/styles/base16/solarized-light.css';
+@import 'highlight.js/styles/base16/solarized-light';
 
 /*
 * Solarized light syntax colors
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index 99e84777c44..493add1ea0f 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -7,7 +7,13 @@
 }
 
 .timeline-event {
-  grid-template-columns: #{$gl-spacing-scale-9} minmax(0, 1fr) #{$gl-spacing-scale-7};
+  grid-template-columns: auto minmax(0, 1fr) #{$gl-spacing-scale-7};
+}
+
+.create-timeline-event,
+.edit-timeline-event,
+.timeline-event {
+  gap: $gl-spacing-scale-5;
 }
 
 /**
@@ -51,8 +57,10 @@
 }
 
 .timeline-entry:not(:last-child) {
+  @include gl-pb-0;
+
   .timeline-event-border {
-    @include gl-pb-5;
+    @include gl-pb-3;
     @include gl-border-gray-50;
     @include gl-border-1;
     @include gl-border-b-solid;