Merge branch '521338-your-work-projects-fails-when-an-unknown-sort-is-used' into 'master'

Fix error when invalid sort is used on `Your work` -> `Projects`

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/182758



Merged-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: Miguel Rincon <mrincon@gitlab.com>
Co-authored-by: Peter Hegman <phegman@gitlab.com>

app/assets/javascripts/projects/your_work/components/app.vue

@@ -129,11 +129,20 @@ export default {
       return this.$route.query.sort;
     },
     sort() {
-      if (this.sortQuery) {
+      const sortOptionValues = SORT_OPTIONS.flatMap(({ value }) => [
+        `${value}_${SORT_DIRECTION_ASC}`,
+        `${value}_${SORT_DIRECTION_DESC}`,
+      ]);
+
+      if (this.sortQuery && sortOptionValues.includes(this.sortQuery)) {
         return this.sortQuery;
       }
 
-      return this.initialSort || `${SORT_OPTION_UPDATED.value}_${SORT_DIRECTION_ASC}`;
+      if (sortOptionValues.includes(this.initialSort)) {
+        return this.initialSort;
+      }
+
+      return `${SORT_OPTION_UPDATED.value}_${SORT_DIRECTION_ASC}`;
     },
     activeSortOption() {
       return SORT_OPTIONS.find((sortItem) => this.sort.includes(sortItem.value));

spec/frontend/projects/your_work/components/app_spec.js

@@ -83,6 +83,7 @@ describe('YourWorkProjectsApp', () => {
   });
 
   const createComponent = async ({
+    provide = {},
     projectsCountHandler = successHandler,
     userPreferencesUpdateHandler = userPreferencesUpdateSuccessHandler,
     route = defaultRoute,
@@ -100,7 +101,7 @@ describe('YourWorkProjectsApp', () => {
       stubs: {
         TabView: stubComponent(TabView),
       },
-      provide: defaultProvide,
+      provide: { ...defaultProvide, ...provide },
     });
   };
 
@@ -355,6 +356,45 @@ describe('YourWorkProjectsApp', () => {
     });
   });
 
+  describe('when sort query param is invalid', () => {
+    beforeEach(async () => {
+      await createComponent({
+        route: {
+          ...defaultRoute,
+          query: {
+            sort: 'foo_bar',
+          },
+        },
+      });
+    });
+
+    it('falls back to initial sort', () => {
+      expect(findTabView().props()).toMatchObject({
+        sort: `${SORT_OPTION_CREATED.value}_${SORT_DIRECTION_DESC}`,
+      });
+    });
+  });
+
+  describe('when sort query param and initial sort are invalid', () => {
+    beforeEach(async () => {
+      await createComponent({
+        provide: { initialSort: 'foo_bar' },
+        route: {
+          ...defaultRoute,
+          query: {
+            sort: 'foo_bar',
+          },
+        },
+      });
+    });
+
+    it('falls back to updated in ascending order', () => {
+      expect(findTabView().props()).toMatchObject({
+        sort: `${SORT_OPTION_UPDATED.value}_${SORT_DIRECTION_ASC}`,
+      });
+    });
+  });
+
   describe('onTabUpdate', () => {
     describe('when tab is already active', () => {
       beforeEach(async () => {