fix(dashboard): sorting countries by name or code no longer throws error (#16020)

## Summary

**What** — What changes are introduced in this PR?

Fixes an error thrown when sorting the countries table in the admin dashboard ("The key display_name is not a valid order key"). Affects the region detail page's country section, the add-countries modal, the region-create modal, and the geo-zone country picker under shipping/locations.
Also fixing string interpolation on console log for the error - ${key} was not being evaluated.

**Why** — Why are these changes relevant or necessary?  

All four `_DataTable` instances that render a sortable countries list defined their own `orderBy` prop independently of the table's column definitions, and had copied the column ids (`display_name`, `iso_2`) instead of the values useCountries' `acceptedOrderKeys` allowlist actually accepted (name, code). `display_name` was rejected outright by the hook, throwing on sort. Additionally, "code" never corresponded to a real field anywhere in the data model, it existed only as a magic string inside the hook's internal `key === "code" ? "iso_2" : "name"` translation.

**How** — How have these changes been implemented?

Aligned both sides of the boundary on the real field names already present on `RegionCountryDTO`/`StaticCountry`:`name` and `iso_2`.

- `use-countries.tsx`: changed `acceptedOrderKeys` to ["name", "iso_2"] and removed the "code" → "iso_2" translation, since the order key now maps directly to a real field. Also using back-tick instead of `""` for the console log.
- Updated the `orderBy` arrays in `region-country-section.tsx`, `add-countries-form.tsx`, `create-region-form.tsx`, and `geo-zone-form.tsx`, `add-countries-form.tsx`, `create-region-form.tsx`, and `region-country-section.tsx` to pass { key: "name" } / { key: "iso_2" }.
- This is enforced by the type system going forward, `DataTableOrderByKey<TData>.key` is typed as keyof TData, so any key that isn't a real `StaticCountry` field (like the old "code") fails to compile.


**Testing** — How have these changes been tested, or how can the reviewer test the feature?

Added `packages/admin/dashboard/src/routes/regions/common/hooks/__tests__/use-countries.spec.tsx`, covering: 
- default sort by name
- descending sort via -name/-iso_2
- ascending sort by iso_2
- an invalid order key throwing
- q filtering
- limit/offset pagination. 

Manually verified in the dashboard: sorting by Name and Code (both directions) no longer errors, on all four affected screens (region detail country section, add-countries modal, region-create modal, geo-zone form).

---

## Checklist

Please ensure the following before requesting a review:

- [x] I have added a **changeset** for this PR
    - Every non-breaking change should be marked as a **patch**
    - To add a changeset, run `yarn changeset` and follow the prompts
- [x] The changes are covered by relevant **tests**
- [x] I have verified the code works as intended locally
- [x] I have linked the related issue(s) if applicable

---

## Additional Context

This is my first PR here so please lmk if something needs to be done differently.

Fixes: #16017

Author: andrewaltos

.changeset/swift-areas-flow.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): sorting countries by name or code no longer throws error

packages/admin/dashboard/src/routes/locations/common/components/geo-zone-form/geo-zone-form.tsx

@@ -247,7 +247,7 @@ const AreaStackedModal = <TForm extends UseFormReturn<any>>({
           pagination
           layout="fill"
           orderBy={[
-            { key: "display_name", label: t("fields.name") },
+            { key: "name", label: t("fields.name") },
             { key: "iso_2", label: t("fields.code") },
           ]}
           queryObject={raw}

packages/admin/dashboard/src/routes/regions/common/hooks/__tests__/use-countries.spec.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest"
+
+import { StaticCountry } from "../../../../../lib/data/countries"
+import { useCountries } from "../use-countries"
+
+const buildCountry = (
+  overrides: Partial<StaticCountry> = {}
+): StaticCountry => ({
+  iso_2: "us",
+  iso_3: "usa",
+  num_code: "840",
+  name: "UNITED STATES",
+  display_name: "United States",
+  ...overrides,
+})
+
+const countries: StaticCountry[] = [
+  buildCountry({ iso_2: "dk", iso_3: "dnk", name: "DENMARK", display_name: "Denmark" }),
+  buildCountry({ iso_2: "us", iso_3: "usa", name: "UNITED STATES", display_name: "United States" }),
+  buildCountry({ iso_2: "ca", iso_3: "can", name: "CANADA", display_name: "Canada" }),
+]
+
+describe("useCountries", () => {
+  it("sorts by name ascending by default", () => {
+    const { countries: result } = useCountries({
+      countries: [...countries],
+      limit: 10,
+    })
+
+    expect(result.map((c) => c.iso_2)).toEqual(["ca", "dk", "us"])
+  })
+
+  it("sorts by name descending when order is prefixed with -", () => {
+    const { countries: result } = useCountries({
+      countries: [...countries],
+      limit: 10,
+      order: "-name",
+    })
+
+    expect(result.map((c) => c.iso_2)).toEqual(["us", "dk", "ca"])
+  })
+
+  it("sorts by iso_2 ascending", () => {
+    const { countries: result } = useCountries({
+      countries: [...countries],
+      limit: 10,
+      order: "iso_2",
+    })
+
+    expect(result.map((c) => c.iso_2)).toEqual(["ca", "dk", "us"])
+  })
+
+  it("sorts by iso_2 descending when order is prefixed with -", () => {
+    const { countries: result } = useCountries({
+      countries: [...countries],
+      limit: 10,
+      order: "-iso_2",
+    })
+
+    expect(result.map((c) => c.iso_2)).toEqual(["us", "dk", "ca"])
+  })
+
+  it("throws when the order key is not accepted", () => {
+    expect(() =>
+      useCountries({
+        countries: [...countries],
+        limit: 10,
+        order: "should_throw",
+      })
+    ).toThrow()
+  })
+
+  it("filters by q, matching on name or iso_2, ignoring order and pagination", () => {
+    const { countries: result, count } = useCountries({
+      countries: [...countries],
+      limit: 10,
+      q: "ca",
+    })
+
+    expect(result.map((c) => c.iso_2)).toEqual(["ca"])
+    expect(count).toBe(1)
+  })
+
+  it("respects limit and offset when no query is provided", () => {
+    const { countries: result, count } = useCountries({
+      countries: [...countries],
+      limit: 1,
+      offset: 1,
+    })
+
+    expect(result).toHaveLength(1)
+    expect(count).toBe(countries.length)
+  })
+})

packages/admin/dashboard/src/routes/regions/common/hooks/use-countries.tsx

@@ -2,7 +2,7 @@ import { RegionCountryDTO } from "@medusajs/types"
 import { json } from "react-router-dom"
 import { StaticCountry } from "../../../../lib/data/countries"
 
-const acceptedOrderKeys = ["name", "code"]
+const acceptedOrderKeys = ["name", "iso_2"]
 
 /**
  * Since countries cannot be retrieved from the API, we need to create a hook
@@ -28,11 +28,11 @@ export const useCountries = ({
     const key = order.replace("-", "")
 
     if (!acceptedOrderKeys.includes(key)) {
-      console.log("The key ${key} is not a valid order key")
+      console.log(`The key ${key} is not a valid order key`)
       throw json(`The key ${key} is not a valid order key`, 500)
     }
 
-    const sortKey: keyof RegionCountryDTO = key === "code" ? "iso_2" : "name"
+    const sortKey = key as keyof RegionCountryDTO
 
     data.sort((a, b) => {
       if (a[sortKey] === null && b[sortKey] === null) {

packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx

@@ -144,7 +144,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
             pagination
             layout="fill"
             orderBy={[
-              { key: "display_name", label: t("fields.name") },
+              { key: "name", label: t("fields.name") },
               { key: "iso_2", label: t("fields.code") },
             ]}
             queryObject={raw}

packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -373,7 +373,7 @@ export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
                           count={count}
                           pageSize={PAGE_SIZE}
                           orderBy={[
-                            { key: "display_name", label: t("fields.name") },
+                            { key: "name", label: t("fields.name") },
                             { key: "iso_2", label: t("fields.code") },
                           ]}
                           pagination

packages/admin/dashboard/src/routes/regions/region-detail/components/region-country-section/region-country-section.tsx

@@ -122,7 +122,7 @@ export const RegionCountrySection = ({ region }: RegionCountrySectionProps) => {
         pageSize={PAGE_SIZE}
         count={count}
         orderBy={[
-          { key: "display_name", label: t("fields.name") },
+          { key: "name", label: t("fields.name") },
           { key: "iso_2", label: t("fields.code") },
         ]}
         search