Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

9 files changed, 55 insertions, 23 deletions

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
index 3d48c74b40b..d7a84798e47 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
@@ -1,6 +1,6 @@
 import { __ } from '~/locale';
 
-export const DEBOUNCE_DELAY = 200;
+export const DEBOUNCE_DELAY = 500;
 export const MAX_RECENT_TOKENS_SIZE = 3;
 
 export const FILTER_NONE = 'None';
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 6638a5de62f..33d507dad57 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -89,32 +89,20 @@ export default {
       required: false,
       default: () => ({}),
     },
+    syncFilterAndSort: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
-    let selectedSortOption = this.sortOptions[0]?.sortDirection?.descending;
-    let selectedSortDirection = SortDirection.descending;
-
-    // Extract correct sortBy value based on initialSortBy
-    if (this.initialSortBy) {
-      selectedSortOption = this.sortOptions
-        .filter(
-          (sortBy) =>
-            sortBy.sortDirection.ascending === this.initialSortBy ||
-            sortBy.sortDirection.descending === this.initialSortBy,
-        )
-        .pop();
-      selectedSortDirection = Object.keys(selectedSortOption.sortDirection).find(
-        (key) => selectedSortOption.sortDirection[key] === this.initialSortBy,
-      );
-    }
-
     return {
       initialRender: true,
       recentSearchesPromise: null,
       recentSearches: [],
       filterValue: this.initialFilterValue,
-      selectedSortOption,
-      selectedSortDirection,
+      selectedSortOption: this.sortOptions[0],
+      selectedSortDirection: SortDirection.descending,
     };
   },
   computed: {
@@ -173,7 +161,20 @@ export default {
       return undefined;
     },
   },
+  watch: {
+    initialFilterValue(newValue) {
+      if (this.syncFilterAndSort) {
+        this.filterValue = newValue;
+      }
+    },
+    initialSortBy(newValue) {
+      if (this.syncFilterAndSort) {
+        this.updateSelectedSortValues(newValue);
+      }
+    },
+  },
   created() {
+    this.updateSelectedSortValues(this.initialSortBy);
     if (this.recentSearchesStorageKey) this.setupRecentSearch();
   },
   methods: {
@@ -309,12 +310,25 @@ export default {
       const cleared = true;
       this.$emit('onFilter', [], cleared);
     },
+    updateSelectedSortValues(sort) {
+      if (!sort) {
+        return;
+      }
+
+      this.selectedSortOption = this.sortOptions.find(
+        (sortBy) =>
+          sortBy.sortDirection.ascending === sort || sortBy.sortDirection.descending === sort,
+      );
+      this.selectedSortDirection = Object.keys(this.selectedSortOption.sortDirection).find(
+        (key) => this.selectedSortOption.sortDirection[key] === sort,
+      );
+    },
   },
 };
 </script>
 
 <template>
-  <div class="vue-filtered-search-bar-container d-md-flex">
+  <div class="vue-filtered-search-bar-container gl-md-display-flex">
     <gl-form-checkbox
       v-if="showCheckbox"
       class="gl-align-self-center"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
index 696456be990..848c49c48c7 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
@@ -87,6 +87,7 @@ export default {
     :get-active-token-value="getActiveAuthor"
     :default-suggestions="defaultAuthors"
     :preloaded-suggestions="preloadedAuthors"
+    v-bind="$attrs"
     @fetch-suggestions="fetchAuthors"
     v-on="$listeners"
   >
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index e7923e0b55e..c3a0a97a7ba 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -211,10 +211,22 @@ export default {
     @select="handleTokenValueSelected"
   >
     <template #view-token="viewTokenProps">
-      <slot name="view-token" :view-token-props="{ ...viewTokenProps, activeTokenValue }"></slot>
+      <slot
+        name="view-token"
+        :view-token-props="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ {
+          ...viewTokenProps,
+          activeTokenValue,
+        } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
+      ></slot>
     </template>
     <template #view="viewTokenProps">
-      <slot name="view" :view-token-props="{ ...viewTokenProps, activeTokenValue }"></slot>
+      <slot
+        name="view"
+        :view-token-props="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ {
+          ...viewTokenProps,
+          activeTokenValue,
+        } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
+      ></slot>
     </template>
     <template v-if="suggestionsEnabled" #suggestions>
       <template v-if="showDefaultSuggestions">
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
index 4ecfc1cf40c..aa5161ca93c 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
@@ -65,6 +65,7 @@ export default {
     :suggestions="branches"
     :suggestions-loading="loading"
     :get-active-token-value="getActiveBranch"
+    v-bind="$attrs"
     @fetch-suggestions="fetchBranches"
     v-on="$listeners"
   >
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
index 5a69751a2cc..210d814d22a 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
@@ -67,6 +67,7 @@ export default {
     :suggestions="emojis"
     :suggestions-loading="loading"
     :get-active-token-value="getActiveEmoji"
+    v-bind="$attrs"
     @fetch-suggestions="fetchEmojis"
     v-on="$listeners"
   >
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
index 3f7a8920f48..6f24955814c 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
@@ -104,6 +104,7 @@ export default {
     :suggestions="labels"
     :get-active-token-value="getActiveLabel"
     :default-suggestions="defaultLabels"
+    v-bind="$attrs"
     @fetch-suggestions="fetchLabels"
     v-on="$listeners"
   >
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
index 11c081ab4f8..69265d0fdc9 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
@@ -84,6 +84,7 @@ export default {
     :suggestions="milestones"
     :suggestions-loading="loading"
     :get-active-token-value="getActiveMilestone"
+    v-bind="$attrs"
     @fetch-suggestions="fetchMilestones"
     v-on="$listeners"
   >
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue
index f353cc3a765..9e68c92af5d 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue
@@ -66,6 +66,7 @@ export default {
     :suggestions="releases"
     :suggestions-loading="loading"
     :get-active-token-value="getActiveRelease"
+    v-bind="$attrs"
     @fetch-suggestions="fetchReleases"
     v-on="$listeners"
   >