Merge branch 'master' of gitlab.com:gitlab-org/gitlab

ee/app/assets/javascripts/security_dashboard/components/filters/activity_filter.vue

@@ -40,7 +40,7 @@ export default {
         this.selectedOptions = xor(this.selectedOptions, [option]);
       }
 
-      this.updateRouteQuery();
+      this.updateQuerystring();
     },
   },
   NO_ACTIVITY,

ee/app/assets/javascripts/security_dashboard/components/filters/scanner_filter.vue

@@ -84,7 +84,7 @@ export default {
         ? without(this.selectedOptions, ...options)
         : union(this.selectedOptions, options);
 
-      this.updateRouteQuery();
+      this.updateQuerystring();
     },
   },
 };

ee/app/assets/javascripts/security_dashboard/components/filters/standard_filter.vue

@@ -41,12 +41,8 @@ export default {
     selectedOptionsOrAll() {
       return this.selectedOptions.length ? this.selectedOptions : [this.filter.allOption];
     },
-    queryObject() {
-      // This is the object used to update the querystring.
-      return { [this.filter.id]: this.selectedOptionsOrAll.map((x) => x.id) };
-    },
     filterObject() {
-      // This is the object used by the GraphQL query.
+      // This is passed to the vulnerability list's GraphQL query as a variable.
       return { [this.filter.id]: this.selectedOptions.map((x) => x.id) };
     },
     filteredOptions() {
@@ -54,13 +50,13 @@ export default {
         option.name.toLowerCase().includes(this.searchTerm.toLowerCase()),
       );
     },
-    routeQueryIds() {
+    querystringIds() {
       const ids = this.$route?.query[this.filter.id] || [];
       return Array.isArray(ids) ? ids : [ids];
     },
-    routeQueryOptions() {
-      const options = this.options.filter((x) => this.routeQueryIds.includes(x.id));
-      const hasAllId = this.routeQueryIds.includes(this.filter.allOption.id);
+    querystringOptions() {
+      const options = this.options.filter((x) => this.querystringIds.includes(x.id));
+      const hasAllId = this.querystringIds.includes(this.filter.allOption.id);
 
       if (options.length && !hasAllId) {
         return options;
@@ -78,32 +74,31 @@ export default {
     },
   },
   created() {
-    this.selectedOptions = this.routeQueryOptions;
+    this.selectedOptions = this.querystringOptions;
     // When the user clicks the forward/back browser buttons, update the selected options.
     window.addEventListener('popstate', () => {
-      this.selectedOptions = this.routeQueryOptions;
+      this.selectedOptions = this.querystringOptions;
     });
   },
   methods: {
     toggleOption(option) {
       // Toggle the option's existence in the array.
       this.selectedOptions = xor(this.selectedOptions, [option]);
-      this.updateRouteQuery();
+      this.updateQuerystring();
     },
     deselectAllOptions() {
       this.selectedOptions = [];
-      this.updateRouteQuery();
+      this.updateQuerystring();
     },
-    updateRouteQuery() {
-      if (!this.$router) {
+    updateQuerystring() {
+      const options = this.selectedOptionsOrAll.map((x) => x.id);
+      // To avoid a console error, don't update the querystring if it's the same as the current one.
+      if (!this.$router || isEqual(this.querystringIds, options)) {
         return;
       }
 
-      const query = { query: { ...this.$route?.query, ...this.queryObject } };
-      // To avoid a console error, don't update the querystring if it's the same as the current one.
-      if (!isEqual(this.routeQueryIds, this.queryObject[this.filter.id])) {
-        this.$router.push(query);
-      }
+      const query = { ...this.$route.query, [this.filter.id]: options };
+      this.$router.push({ query });
     },
     isSelected(option) {
       return this.selectedSet.has(option);

ee/spec/frontend/security_dashboard/components/filters/standard_filter_spec.js

@@ -186,7 +186,7 @@ describe('Standard Filter component', () => {
   });
 
   describe('filter querystring', () => {
-    const updateRouteQuery = async (ids) => {
+    const updateQuerystring = async (ids) => {
       // window.history.back() won't change the location nor fire the popstate event, so we need
       // to fake it by doing it manually.
       router.replace({ query: { [filter.id]: ids } });
@@ -221,7 +221,7 @@ describe('Standard Filter component', () => {
 
     describe('querystring on page load', () => {
       it('selects correct items', () => {
-        updateRouteQuery(optionIdsAt([1, 3, 5, 7]));
+        updateQuerystring(optionIdsAt([1, 3, 5, 7]));
         createWrapper();
 
         expectSelectedItems([1, 3, 5, 7]);
@@ -229,21 +229,21 @@ describe('Standard Filter component', () => {
 
       it('selects only valid items when querystring has valid and invalid IDs', async () => {
         const ids = optionIdsAt([2, 4, 6]).concat(['some', 'invalid', 'ids']);
-        updateRouteQuery(ids);
+        updateQuerystring(ids);
         createWrapper();
 
         expectSelectedItems([2, 4, 6]);
       });
 
       it('selects default options if querystring only has invalid items', async () => {
-        updateRouteQuery(['some', 'invalid', 'ids']);
+        updateQuerystring(['some', 'invalid', 'ids']);
         createWrapper({ defaultOptions: optionsAt([4, 5, 8]) });
 
         expectSelectedItems([4, 5, 8]);
       });
 
       it('selects All option if querystring only has invalid IDs and there are no default options', async () => {
-        updateRouteQuery(['some', 'invalid', 'ids']);
+        updateQuerystring(['some', 'invalid', 'ids']);
         createWrapper();
 
         expectAllOptionSelected();
@@ -254,7 +254,7 @@ describe('Standard Filter component', () => {
       it('selects the correct options', async () => {
         createWrapper();
         const indexes = [3, 5, 7];
-        await updateRouteQuery(optionIdsAt(indexes));
+        await updateQuerystring(optionIdsAt(indexes));
 
         expectSelectedItems(indexes);
       });
@@ -265,7 +265,7 @@ describe('Standard Filter component', () => {
         await clickItemAt(3);
         expectSelectedItems([2, 3, 5, 8]);
 
-        await updateRouteQuery([]);
+        await updateQuerystring([]);
         expectSelectedItems([2, 5, 8]);
       });
 
@@ -275,7 +275,7 @@ describe('Standard Filter component', () => {
         await clickItemAt(3);
         expectSelectedItems([3]);
 
-        await updateRouteQuery([]);
+        await updateQuerystring([]);
         expectAllOptionSelected();
       });
 
@@ -283,13 +283,13 @@ describe('Standard Filter component', () => {
         createWrapper({ defaultOptions: optionsAt([2, 4, 8]) });
         expectSelectedItems([2, 4, 8]);
 
-        await updateRouteQuery([filter.allOption.id]);
+        await updateQuerystring([filter.allOption.id]);
         expectAllOptionSelected();
       });
 
       it('selects All option if querystring has all option ID as well as other IDs', async () => {
         createWrapper({ defaultOptions: optionsAt([5, 6, 9]) });
-        await updateRouteQuery([filter.allOption.id, ...optionIdsAt([1, 2])]);
+        await updateQuerystring([filter.allOption.id, ...optionIdsAt([1, 2])]);
 
         expectAllOptionSelected();
       });
@@ -297,7 +297,7 @@ describe('Standard Filter component', () => {
       it('selects only valid items when querystring has valid and invalid IDs', async () => {
         createWrapper();
         const ids = optionIdsAt([3, 7, 9]).concat(['some', 'invalid', 'ids']);
-        await updateRouteQuery(ids);
+        await updateQuerystring(ids);
 
         expectSelectedItems([3, 7, 9]);
       });
@@ -308,7 +308,7 @@ describe('Standard Filter component', () => {
         await clickItemAt(8);
         expectSelectedItems([1, 3, 4, 8]);
 
-        await updateRouteQuery(['some', 'invalid', 'ids']);
+        await updateQuerystring(['some', 'invalid', 'ids']);
         expectSelectedItems([1, 3, 4]);
       });
 
@@ -318,7 +318,7 @@ describe('Standard Filter component', () => {
         await clickItemAt(8);
         expectSelectedItems([8]);
 
-        await updateRouteQuery(['some', 'invalid', 'ids']);
+        await updateQuerystring(['some', 'invalid', 'ids']);
         expectAllOptionSelected();
       });