Add latest changes from gitlab-org/gitlab@master

13 files changed, 84 insertions, 89 deletions

diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue
index c0a06706fc6..7dc1740b729 100644
--- a/app/assets/javascripts/header_search/components/app.vue
+++ b/app/assets/javascripts/header_search/components/app.vue
@@ -1,7 +1,6 @@
 <script>
 import {
   GlSearchBoxByType,
-  GlOutsideDirective as Outside,
   GlIcon,
   GlToken,
   GlTooltipDirective,
@@ -53,7 +52,7 @@ export default {
     SEARCH_RESULTS_SCOPE,
     KBD_HELP,
   },
-  directives: { Outside, GlTooltip: GlTooltipDirective, GlResizeObserverDirective },
+  directives: { GlTooltip: GlTooltipDirective, GlResizeObserverDirective },
   components: {
     GlSearchBoxByType,
     HeaderSearchDefaultItems,
@@ -65,7 +64,6 @@ export default {
   },
   data() {
     return {
-      showDropdown: false,
       isFocused: false,
       currentFocusIndex: SEARCH_BOX_INDEX,
     };
@@ -91,7 +89,7 @@ export default {
       return Boolean(gon?.current_username);
     },
     showSearchDropdown() {
-      if (!this.showDropdown || !this.isLoggedIn) {
+      if (!this.isFocused || !this.isLoggedIn) {
         return false;
       }
       return this.searchOptions?.length > 0;
@@ -108,7 +106,6 @@ export default {
       }
       return FIRST_DROPDOWN_INDEX;
     },
-
     searchInputDescribeBy() {
       if (this.isLoggedIn) {
         return this.$options.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN;
@@ -160,37 +157,22 @@ export default {
   methods: {
     ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
     openDropdown() {
-      this.showDropdown = true;
-
-      // check isFocused state to avoid firing duplicate events
-      if (!this.isFocused) {
-        this.isFocused = true;
-        this.$emit('expandSearchBar', true);
+      this.isFocused = true;
+      this.$emit('expandSearchBar');
 
-        Tracking.event(undefined, 'focus_input', {
-          label: 'global_search',
-          property: 'navigation_top',
-        });
-      }
-    },
-    closeDropdown() {
-      this.showDropdown = false;
+      Tracking.event(undefined, 'focus_input', {
+        label: 'global_search',
+        property: 'navigation_top',
+      });
     },
     collapseAndCloseSearchBar() {
-      // we need a delay on this method
-      // for the search bar not to remove
-      // the clear button from dom
-      // and register clicks on dropdown items
-      setTimeout(() => {
-        this.showDropdown = false;
-        this.isFocused = false;
-        this.$emit('collapseSearchBar');
+      this.isFocused = false;
+      this.$emit('collapseSearchBar');
 
-        Tracking.event(undefined, 'blur_input', {
-          label: 'global_search',
-          property: 'navigation_top',
-        });
-      }, 200);
+      Tracking.event(undefined, 'blur_input', {
+        label: 'global_search',
+        property: 'navigation_top',
+      });
     },
     submitSearch() {
       if (this.search?.length <= SEARCH_SHORTCUTS_MIN_CHARACTERS && this.currentFocusIndex < 0) {
@@ -226,7 +208,6 @@ export default {
 
 <template>
   <form
-    v-outside="closeDropdown"
     role="search"
     :aria-label="$options.i18n.SEARCH_GITLAB"
     class="header-search gl-relative gl-rounded-base gl-w-full"
@@ -244,12 +225,11 @@ export default {
       :placeholder="$options.i18n.SEARCH_GITLAB"
       :aria-activedescendant="currentFocusedId"
       :aria-describedby="$options.SEARCH_INPUT_DESCRIPTION"
-      @focus="openDropdown"
-      @click="openDropdown"
-      @blur="collapseAndCloseSearchBar"
+      @focusin="openDropdown"
+      @focusout="collapseAndCloseSearchBar"
       @input="getAutocompleteOptions"
       @keydown.enter.stop.prevent="submitSearch"
-      @keydown.esc.stop.prevent="closeDropdown"
+      @keydown.esc.stop.prevent="collapseAndCloseSearchBar"
     />
     <gl-token
       v-if="showScopeHelp"
@@ -301,7 +281,6 @@ export default {
           :max="searchOptions.length - 1"
           :min="$options.FIRST_DROPDOWN_INDEX"
           :default-index="defaultIndex"
-          @tab="closeDropdown"
         />
         <header-search-default-items
           v-if="showDefaultItems"
diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
index 39b3df899a5..d02327a37a7 100644
--- a/app/assets/javascripts/notes/components/discussion_filter_note.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue
@@ -28,7 +28,9 @@ export default {
     class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note"
     data-qa-selector="discussion_filter_container"
   >
-    <div class="timeline-icon d-none d-lg-flex">
+    <div
+      class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+    >
       <gl-icon name="comment" />
     </div>
     <div class="timeline-content gl-pl-8">
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index e091fe74717..fac32bfdb24 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -13,7 +13,9 @@ export default {
 
 <template>
   <timeline-entry-item class="note note-wrapper" data-qa-selector="skeleton_note_placeholder">
-    <div class="timeline-icon"></div>
+    <div
+      class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+    ></div>
     <div class="timeline-content">
       <div class="note-header"></div>
       <div class="note-body gl-mt-4"><gl-skeleton-loader /></div>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 1cbbdf0deb0..1fb8581d33a 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -25,11 +25,18 @@ import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import NoteHeader from '~/notes/components/note_header.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { spriteIcon } from '~/lib/utils/common_utils';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import TimelineEntryItem from './timeline_entry_item.vue';
 
 const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
+const MR_ICON_COLORS = {
+  approval: 'gl-bg-green-100 gl-text-green-700',
+  'issue-close': 'gl-bg-red-100 gl-text-red-700',
+  'git-merge': 'gl-bg-blue-100 gl-text-blue-700',
+};
+const ICON_COLORS = {
+  'issue-close': 'gl-bg-blue-100 gl-text-blue-700',
+};
 
 export default {
   i18n: {
@@ -63,7 +70,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['targetNoteHash', 'descriptionVersions']),
+    ...mapGetters(['targetNoteHash', 'descriptionVersions', 'getNoteableData']),
     ...mapState(['isLoadingDescriptionVersion']),
     noteAnchorId() {
       return `note_${this.note.id}`;
@@ -71,9 +78,6 @@ export default {
     isTargetNote() {
       return this.targetNoteHash === this.noteAnchorId;
     },
-    iconHtml() {
-      return spriteIcon(this.note.system_note_icon_name);
-    },
     toggleIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
@@ -87,6 +91,12 @@ export default {
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
     },
+    iconBgClass() {
+      const colors =
+        this.getNoteableData.noteableType === 'MergeRequest' ? MR_ICON_COLORS : ICON_COLORS;
+
+      return colors[this.note.system_note_icon_name] || 'gl-bg-gray-50 gl-text-gray-600';
+    },
   },
   mounted() {
     renderGFM(this.$refs['gfm-content']);
@@ -108,9 +118,6 @@ export default {
       }
     },
   },
-  safeHtmlConfig: {
-    ADD_TAGS: ['use'], // to support icon SVGs
-  },
   userColorSchemeClass: window.gon.user_color_scheme,
 };
 </script>
@@ -121,7 +128,16 @@ export default {
     :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
     class="note system-note note-wrapper"
   >
-    <div v-safe-html:[$options.safeHtmlConfig]="iconHtml" class="timeline-icon"></div>
+    <div
+      :class="iconBgClass"
+      class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6"
+    >
+      <gl-icon
+        v-if="note.system_note_icon_name"
+        :name="note.system_note_icon_name"
+        data-testid="timeline-icon"
+      />
+    </div>
     <div class="timeline-content">
       <div class="note-header">
         <note-header
diff --git a/app/assets/javascripts/vue_shared/components/notes/timeline_icon.vue b/app/assets/javascripts/vue_shared/components/notes/timeline_icon.vue
index 35f9ac14681..9d5f494579b 100644
--- a/app/assets/javascripts/vue_shared/components/notes/timeline_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/timeline_icon.vue
@@ -1,3 +1,7 @@
 <template>
-  <div class="timeline-icon"><slot></slot></div>
+  <div
+    class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+  >
+    <slot></slot>
+  </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/registry/history_item.vue b/app/assets/javascripts/vue_shared/components/registry/history_item.vue
index 384b084ce09..e3a82297a94 100644
--- a/app/assets/javascripts/vue_shared/components/registry/history_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/history_item.vue
@@ -19,7 +19,9 @@ export default {
 
 <template>
   <timeline-entry-item class="system-note note-wrapper">
-    <div class="timeline-icon">
+    <div
+      class="gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+    >
       <gl-icon :name="icon" />
     </div>
     <div class="timeline-content">
diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index ab4691a4a4e..f8dfa1c7f01 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -127,7 +127,11 @@ export default {
     :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
     class="note system-note note-wrapper"
   >
-    <div class="timeline-icon"><gl-icon :name="note.systemNoteIconName" /></div>
+    <div
+      class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+    >
+      <gl-icon :name="note.systemNoteIconName" />
+    </div>
     <div class="timeline-content">
       <div class="note-header">
         <note-header
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_history_only_filter_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_history_only_filter_note.vue
index 07e25312f87..e7a80bf39fb 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_history_only_filter_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_history_only_filter_note.vue
@@ -30,7 +30,9 @@ export default {
 
 <template>
   <li class="timeline-entry note note-wrapper discussion-filter-note">
-    <div class="timeline-icon gl-display-none gl-lg-display-flex">
+    <div
+      class="gl-float-left gl--flex-center gl-rounded-full gl-mt-n1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+    >
       <gl-icon name="comment" />
     </div>
     <div class="timeline-content gl-pl-8">
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index bd0400cdaa3..3be5d9ac543 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -36,7 +36,7 @@
   width: $super-sidebar-width;
   z-index: $super-sidebar-z-index;
 
-  &:focus {
+  &:focus-visible {
     @include gl-focus;
   }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 68a5176ad4b..c72d0a14b08 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -450,40 +450,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       }
     }
   }
-
-  .timeline-icon {
-    float: left;
-  }
-
-  .system-note,
-  .discussion-filter-note {
-    .timeline-icon {
-      display: flex;
-      align-items: center;
-      background-color: $gray-50;
-      width: $system-note-icon-size;
-      height: $system-note-icon-size;
-      border: 1px solid $gray-50;
-      border-radius: $system-note-icon-size;
-      margin: -$gl-spacing-scale-1 0 0 $gl-spacing-scale-2;
-
-      svg {
-        width: $system-note-svg-size;
-        height: $system-note-svg-size;
-        fill: $gray-600;
-        display: block;
-        margin: 0 auto;
-      }
-    }
-  }
-
-  .discussion-filter-note {
-    .timeline-icon {
-      width: $system-note-icon-size;
-      height: $system-note-icon-size;
-      margin-top: -8px;
-    }
-  }
 }
 
 .card .notes {
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index f37b426cd91..6e46100dbb3 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -159,6 +159,22 @@
       background-color: $search-and-nav-links-a30 !important;
     }
 
+    &.is-focused {
+      input {
+        background-color: $white;
+        color: $gl-text-color !important;
+        box-shadow: inset 0 0 0 1px $gray-900;
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 1px $white, 0 0 0 3px $blue-400;
+        }
+
+        &::placeholder {
+          color: $gray-400;
+        }
+      }
+    }
+
     svg.gl-search-box-by-type-search-icon {
       color: $search-and-nav-links-a80;
     }
diff --git a/app/models/ci/pipeline_schedule.rb b/app/models/ci/pipeline_schedule.rb
index 83e6fa2f862..49d27053745 100644
--- a/app/models/ci/pipeline_schedule.rb
+++ b/app/models/ci/pipeline_schedule.rb
@@ -83,6 +83,8 @@ module Ci
       Settings.cron_jobs['pipeline_schedule_worker']['cron']
     end
 
+    # Using destroy instead of before_destroy as we want nullify_dependent_associations_in_batches
+    # to run first and not in a transaction block. This prevents timeouts for schedules with numerous pipelines
     def destroy
       nullify_dependent_associations_in_batches
 
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index c552e94ac57..95e0beee5e0 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -12,7 +12,7 @@
     note_id: note.id } }
   .timeline-entry-inner
     - if note.system
-      .timeline-icon
+      .gl-float-left.gl--flex-center.gl-rounded-full.gl-mt-n1.gl-ml-2.gl-w-6.gl-h-6.gl-bg-gray-50.gl-text-gray-600
         = icon_for_system_note(note)
     - else
       .timeline-avatar.gl-float-left