Fix the sources table crash

Signed-off-by: Olga Bulat <[email protected]>

frontend/src/components/VSourcesTable.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, reactive } from "vue"
+import { computed, defineComponent, type PropType, reactive, ref } from "vue"
 
 import { useProviderStore } from "~/stores/provider"
 import { useGetLocaleFormattedNumber } from "~/composables/use-get-locale-formatted-number"
@@ -113,20 +113,29 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const sorting = reactive({
-      direction: "asc",
-      field: "display_name" as keyof Omit<MediaProvider, "logo_url">,
-    })
+    const providerStore = useProviderStore()
+    const searchStore = useSearchStore()
+
+    const providers = ref<MediaProvider[]>(providerStore.providers[props.media])
 
     function sortTable(field: keyof Omit<MediaProvider, "logo_url">) {
-      let direction = "asc"
+      let direction = field === "media_count" ? "desc" : "asc"
       if (field === sorting.field) {
         direction = sorting.direction === "asc" ? "desc" : "asc"
       }
 
       sorting.direction = direction
       sorting.field = field
+
+      const sortedProviders = providers.value.sort(compareProviders)
+
+      providers.value =
+        direction === "asc" ? sortedProviders : sortedProviders.reverse()
     }
+    const sorting = reactive({
+      direction: "asc",
+      field: "display_name" as keyof Omit<MediaProvider, "logo_url">,
+    })
 
     function cleanSourceUrlForPresentation(url: string) {
       const stripProtocol = (s: string) => s.replace(/https?:\/\//, "")
@@ -138,7 +147,6 @@ export default defineComponent({
     }
 
     const getLocaleFormattedNumber = useGetLocaleFormattedNumber()
-    const providerStore = useProviderStore()
 
     function compareProviders(prov1: MediaProvider, prov2: MediaProvider) {
       let field1 = prov1[sorting.field]
@@ -167,7 +175,6 @@ export default defineComponent({
       return sorting.direction === "asc" ? providers : providers.reverse()
     })
 
-    const searchStore = useSearchStore()
     const providerViewUrl = (provider: MediaProvider) => {
       return searchStore.getCollectionPath({
         type: props.media,

frontend/test/playwright/e2e/sources.spec.ts

@@ -16,3 +16,17 @@ test("sources table has links to source pages", async ({ page }) => {
 
   await expect(getH1(page, "Flickr")).toBeVisible()
 })
+
+// Tests the fix for https://github.com/WordPress/openverse/issues/4724
+test("sources table can be sorted", async ({ page }) => {
+  await preparePageForTests(page, "xl")
+  await page.goto("/sources")
+
+  const totalItems = page.getByRole("cell", { name: /total items/i }).first()
+  await totalItems.click()
+  await totalItems.click()
+  await totalItems.click()
+
+  const firstRow = page.getByRole("row", { name: "Flickr" })
+  await expect(firstRow).toBeVisible()
+})