Save visited URL to recent searches and update weight token list

Visiting a URL with a search or filters should save them
to the filtered search bar recent searches dropdown
so this updates the Vue filtered search bar to have
the same behaviour.

See the `visiting URL with search params adds to recent searches`
test in `recent_searches_spec.rb`

This commit also updates the Vue weight token to show a list of
21 values, to comply with the `loads all the weights when opened`
test in `dropdown_weight_spec.rb`

Changelog: added

app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js

@@ -2,6 +2,7 @@ import { __ } from '~/locale';
 
 export const DEBOUNCE_DELAY = 200;
 export const MAX_RECENT_TOKENS_SIZE = 3;
+export const WEIGHT_TOKEN_SUGGESTIONS_SIZE = 21;
 
 export const FILTER_NONE = 'None';
 export const FILTER_ANY = 'Any';

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -16,7 +16,7 @@ import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 import { SortDirection } from './constants';
-import { stripQuotes, uniqueTokens } from './filtered_search_utils';
+import { filterEmptySearchTerm, stripQuotes, uniqueTokens } from './filtered_search_utils';
 
 export default {
   components: {
@@ -223,9 +223,14 @@ export default {
 
           // Put any searches that may have come in before
           // we fetched the saved searches ahead of the already saved ones
-          const resultantSearches = this.recentSearchesStore.setRecentSearches(
+          let resultantSearches = this.recentSearchesStore.setRecentSearches(
             this.recentSearchesStore.state.recentSearches.concat(searches),
           );
+          // If visited URL has search params, add them to recent search store
+          if (filterEmptySearchTerm(this.filterValue).length) {
+            resultantSearches = this.recentSearchesStore.addRecentSearch(this.filterValue);
+          }
+
           this.recentSearchesService.save(resultantSearches);
           this.recentSearches = resultantSearches;
         });

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js

@@ -247,3 +247,12 @@ export function setTokenValueToRecentlyUsed(recentSuggestionsStorageKey, tokenVa
     );
   }
 }
+
+/**
+ * Removes `FILTERED_SEARCH_TERM` tokens with empty data
+ *
+ * @param filterTokens array of filtered search tokens
+ * @return {Array} array of filtered search tokens
+ */
+export const filterEmptySearchTerm = (filterTokens = []) =>
+  filterTokens.filter((token) => token.type === FILTERED_SEARCH_TERM && token.value.data);

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/weight_token.vue

 <script>
 import { GlDropdownDivider, GlFilteredSearchSuggestion, GlFilteredSearchToken } from '@gitlab/ui';
-import { DEFAULT_NONE_ANY } from '../constants';
+import { DEFAULT_NONE_ANY, WEIGHT_TOKEN_SUGGESTIONS_SIZE } from '../constants';
+
+const weights = Array.from(Array(WEIGHT_TOKEN_SUGGESTIONS_SIZE), (_, index) => index.toString());
 
 export default {
-  baseWeights: ['0', '1', '2', '3', '4', '5'],
   components: {
     GlDropdownDivider,
     GlFilteredSearchSuggestion,
@@ -21,14 +22,14 @@ export default {
   },
   data() {
     return {
-      weights: this.$options.baseWeights,
+      weights,
       defaultWeights: this.config.defaultWeights || DEFAULT_NONE_ANY,
     };
   },
   methods: {
     updateWeights({ data }) {
       const weight = parseInt(data, 10);
-      this.weights = Number.isNaN(weight) ? this.$options.baseWeights : [String(weight)];
+      this.weights = Number.isNaN(weight) ? weights : [String(weight)];
     },
   },
 };

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

@@ -32,6 +32,9 @@ jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', (
   stripQuotes: jest.requireActual(
     '~/vue_shared/components/filtered_search_bar/filtered_search_utils',
   ).stripQuotes,
+  filterEmptySearchTerm: jest.requireActual(
+    '~/vue_shared/components/filtered_search_bar/filtered_search_utils',
+  ).filterEmptySearchTerm,
 }));
 
 const createComponent = ({