fix(site): fix locale dates in timeline component (#9223)

site/src/components/Timeline/TimelineDateRow.tsx

@@ -1,18 +1,13 @@
 import { makeStyles } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
 import TableRow from "@mui/material/TableRow"
-import formatRelative from "date-fns/formatRelative"
 import { FC } from "react"
+import { createDisplayDate } from "./utils"
 
 export interface TimelineDateRow {
   date: Date
 }
 
-// We only want the message related to the date since the time is displayed
-// inside of the build row
-export const createDisplayDate = (date: Date, base = new Date()): string =>
-  formatRelative(date, base).split(" at ")[0]
-
 export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
   const styles = useStyles()
 

site/src/components/Timeline/utils.test.ts

@@ -1,4 +1,4 @@
-import { createDisplayDate } from "./TimelineDateRow"
+import { createDisplayDate } from "./utils"
 
 describe("createDisplayDate", () => {
   it("returns correctly for Saturdays", () => {

site/src/components/Timeline/utils.ts

@@ -0,0 +1,15 @@
+/* eslint-disable eslint-comments/disable-enable-pair -- Solve below */
+/* eslint-disable import/no-duplicates -- https://github.com/date-fns/date-fns/issues/1677 */
+import formatRelative from "date-fns/formatRelative"
+import subDays from "date-fns/subDays"
+
+export const createDisplayDate = (
+  date: Date,
+  base: Date = new Date(),
+): string => {
+  const lastWeek = subDays(base, 7)
+  if (date >= lastWeek) {
+    return formatRelative(date, base).split(" at ")[0]
+  }
+  return date.toLocaleDateString()
+}