Reset paging when sort is changed on vulnerability report

Changelog: fixed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81870
EE: true

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue

@@ -268,6 +268,7 @@ export default {
       :thead-class="theadClass"
       :sort-desc="sort.sortDesc"
       :sort-by="sort.sortBy"
+      sort-direction="last"
       sort-icon-left
       no-local-sorting
       stacked="sm"

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue

@@ -164,9 +164,14 @@ export default {
         this.vulnerabilities = [];
       }
     },
-    sort() {
+    sort(newSort, oldSort) {
       // Clear out the vulnerabilities so that the skeleton loader is shown.
       this.vulnerabilities = [];
+      // Anything that changes the querystring will also trigger this watcher (because sort is
+      // recomputed), so we need to check that the sort has changed before we reset the paging.
+      if (newSort.sortBy !== oldSort.sortBy || newSort.sortDesc !== oldSort.sortDesc) {
+        this.resetPaging();
+      }
     },
   },
   methods: {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js

@@ -237,6 +237,24 @@ describe('Vulnerability list GraphQL component', () => {
         expect.objectContaining({ sort: 'state_desc' }),
       );
     });
+
+    it('will reset paging if the sort has changed', async () => {
+      createWrapper();
+      router.push({ query: { after: 'abc' } });
+
+      findVulnerabilityList().vm.$emit('update:sort', SORT_OBJECT);
+      await nextTick();
+      expect(router.currentRoute.query.after).toBeUndefined();
+    });
+
+    it('will not reset paging when the page changes but sorting has not', async () => {
+      router.push({ query: SORT_OBJECT });
+      createWrapper();
+      router.push({ query: { ...router.currentRoute.query, after: 'abc' } });
+      await nextTick();
+
+      expect(router.currentRoute.query.after).toBe('abc');
+    });
   });
 
   describe('intersection observer', () => {