chore: upgrade playwright v1.50.0 (#201)

.github/workflows/build.yml

@@ -35,7 +35,7 @@ jobs:
     timeout-minutes: 5
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.48.0
+      image: mcr.microsoft.com/playwright:v1.50.0
     steps:
       - uses: actions/checkout@v4
         with:
@@ -107,7 +107,7 @@ jobs:
     timeout-minutes: 15
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.48.0
+      image: mcr.microsoft.com/playwright:v1.50.0
     services:
       postgres:
         image: postgres:17-alpine

packages/e2e/package.json

@@ -14,7 +14,7 @@
     "@chromatic-com/playwright": "0.10.2",
     "@nihalgonsalves/expenses-backend": "*",
     "@nihalgonsalves/expenses-shared": "*",
-    "@playwright/test": "1.48.2",
+    "@playwright/test": "1.50.0",
     "@trpc/client": "^11.0.0-rc.700",
     "chromatic": "^11.25.1",
     "zod": "^3.24.1"

packages/frontend/src/components/ui/date-range-picker.tsx

@@ -14,6 +14,7 @@ import {
 
 import { useBreakpoint } from "../../utils/hooks/useBreakpoint";
 import { shortDateFormatter } from "../../utils/temporal";
+import { getUserLanguage } from "../../utils/utils";
 
 import { Button } from "./button";
 import { Calendar } from "./calendar";
@@ -272,7 +273,9 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
 
           <div>
             {range.to
-              ? formatDateRange(range.from, range.to)
+              ? formatDateRange(range.from, range.to, {
+                  locale: getUserLanguage(),
+                })
               : `${shortDateFormatter.format(range.from)} - `}
           </div>
         </Button>

packages/frontend/src/utils/temporal.ts

@@ -1,7 +1,7 @@
 import { getUserLanguage } from "./utils";
 
 export const CURRENT_TIMEZONE =
-  Intl.DateTimeFormat().resolvedOptions().timeZone;
+  Intl.DateTimeFormat(getUserLanguage()).resolvedOptions().timeZone;
 
 type NaiveDurationLike = Omit<
   Temporal.DurationLike,

packages/frontend/src/utils/utils.ts

@@ -5,7 +5,21 @@ import type {
 
 import { formatCurrency } from "./money";
 
-export const getUserLanguage = () => globalThis.navigator.languages[0];
+const DEFAULT_LOCALE = "en-US";
+
+export const getUserLanguage = () => {
+  const locale =
+    globalThis.navigator.languages[0] || navigator.language || DEFAULT_LOCALE;
+
+  try {
+    // https://github.com/microsoft/playwright/issues/34046
+    // https://github.com/adobe/react-spectrum/issues/7457
+    Intl.DateTimeFormat.supportedLocalesOf(locale);
+    return locale;
+  } catch {
+    return DEFAULT_LOCALE;
+  }
+};
 
 export const getInitials = (name: string): string => {
   const [first, last] = name.split(" ");

yarn.lock

@@ -3021,7 +3021,7 @@ __metadata:
     "@chromatic-com/playwright": "npm:0.10.2"
     "@nihalgonsalves/expenses-backend": "npm:*"
     "@nihalgonsalves/expenses-shared": "npm:*"
-    "@playwright/test": "npm:1.48.2"
+    "@playwright/test": "npm:1.50.0"
     "@trpc/client": "npm:^11.0.0-rc.700"
     chromatic: "npm:^11.25.1"
     zod: "npm:^3.24.1"
@@ -3698,14 +3698,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:1.48.2":
-  version: 1.48.2
-  resolution: "@playwright/test@npm:1.48.2"
+"@playwright/test@npm:1.50.0":
+  version: 1.50.0
+  resolution: "@playwright/test@npm:1.50.0"
   dependencies:
-    playwright: "npm:1.48.2"
+    playwright: "npm:1.50.0"
   bin:
     playwright: cli.js
-  checksum: 10c0/68bab3bee8d716111e9a166785e6c3c406b6a184fc46d03b5468fcbb92b6242e5628f6a75f9d286e2491ec0e9e59af67542a1f114b6659d790b5a1f41e4d305b
+  checksum: 10c0/70b46eab2a5c8b4accc1c8a29a0ea371b7b8f56b0d38509e5c06354ebc60dc262837e92cea727076aea5e1c32f31e215c02fbde977519a7e38488cfc48f0ba5c
   languageName: node
   linkType: hard
 
@@ -15612,27 +15612,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.48.2, playwright-core@npm:>=1.2.0":
-  version: 1.48.2
-  resolution: "playwright-core@npm:1.48.2"
+"playwright-core@npm:1.50.0, playwright-core@npm:>=1.2.0":
+  version: 1.50.0
+  resolution: "playwright-core@npm:1.50.0"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/511da53d9df01fec5e5798915c68e7d1574890a504d1aae05430bf538d0080efa8db86e3dafdcd450f084ce7622f6bbede23ca52e798bfc4c3b3ea8da52a51f5
+  checksum: 10c0/b0cc7fadcb2db68a7b8d730b26c7a7d17baad454a0697c781e08074a619e57779a90be9b57c4c741ff4895390bdfd093d8393a746e8bf68ae57ac452f4c1cdb2
   languageName: node
   linkType: hard
 
-"playwright@npm:1.48.2, playwright@npm:^1.14.0":
-  version: 1.48.2
-  resolution: "playwright@npm:1.48.2"
+"playwright@npm:1.50.0, playwright@npm:^1.14.0":
+  version: 1.50.0
+  resolution: "playwright@npm:1.50.0"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.48.2"
+    playwright-core: "npm:1.50.0"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/ecde4ee4767556868b24d7700f3502692a3cb14c8ef127052b51b48833ffcce80942954fb188a9b72505122b48b1b625d1bb486721e1c4f2e980215328ba1ad5
+  checksum: 10c0/0076a536433819b7122066a07c5fcfa56d40d09cbbec0a39061bbfa832c8a1f626df5e4fe206fbeba56b3a61f0e2b26d4ad3c2b402852d6f147a266fd18e4ddf
   languageName: node
   linkType: hard