Fix formatting temporal values with custom day of week (#13740)

* Fix formatting temporal values as day of week with custom day of week (#13604)

* Pretty

* PR feedback

* Need to update when user locale changes as well

* Update Moment start of week in i18n.js instead

* Make it nice

* Remove some unneeded stuff

frontend/src/metabase/lib/i18n.js

 import { addLocale, useLocale } from "ttag";
 import moment from "moment-timezone";
 
+import MetabaseSettings from "metabase/lib/settings";
+
 // note this won't refresh strings that are evaluated at load time
 export async function loadLocalization(locale) {
   // we need to be sure to set the initial localization before loading any files
@@ -23,6 +25,45 @@ export async function loadLocalization(locale) {
   setLocalization(translationsObject);
 }
 
+// Tell Moment.js to use the value of the start-of-week Setting for its current locale
+function updateMomentStartOfWeek() {
+  const startOfWeekDayName = MetabaseSettings.get("start-of-week");
+  if (!startOfWeekDayName) {
+    return;
+  }
+
+  const START_OF_WEEK_DAYS = [
+    "sunday",
+    "monday",
+    "tuesday",
+    "wednesday",
+    "thursday",
+    "friday",
+    "saturday",
+  ];
+
+  const startOfWeekDayNumber = START_OF_WEEK_DAYS.indexOf(startOfWeekDayName);
+  if (startOfWeekDayNumber === -1) {
+    return;
+  }
+  console.log(
+    "Setting moment.js start of week for Locale",
+    moment.locale(),
+    "to",
+    startOfWeekDayName,
+  );
+
+  moment.updateLocale(moment.locale(), {
+    week: {
+      // Moment.js dow range Sunday (0) - Saturday (6)
+      dow: startOfWeekDayNumber,
+    },
+  });
+}
+
+// if the start of week Setting is updated, update the moment start of week
+MetabaseSettings.on("start-of-week", updateMomentStartOfWeek);
+
 export function setLocalization(translationsObject) {
   const locale = translationsObject.headers.language;
 
@@ -33,6 +74,7 @@ export function setLocalization(translationsObject) {
   useLocale(locale);
 
   moment.locale(locale);
+  updateMomentStartOfWeek(locale);
 }
 
 // Format a fixed timestamp in local time to see if the current locale defaults

frontend/src/metabase/lib/time.js

@@ -16,7 +16,7 @@ const NUMERIC_UNIT_FORMATS = {
       .startOf("hour"),
   "day-of-week": value =>
     moment()
-      .day(value - 1)
+      .weekday(value - 1)
       .startOf("day"),
   "day-of-month": value =>
     moment("2016-01-01") // initial date must be in month with 31 days to format properly

frontend/test/metabase/scenarios/admin/settings/localization.cy.spec.js

@@ -41,7 +41,7 @@ describe("scenarios > admin > permissions", () => {
     cy.get(".axis.x").contains("April 25, 2016");
   });
 
-  it.skip("should display days on X-axis correctly when grouped by 'Day of the Week' (metabase#13604)", () => {
+  it("should display days on X-axis correctly when grouped by 'Day of the Week' (metabase#13604)", () => {
     withSampleDataset(({ ORDERS }) => {
       cy.request("POST", "/api/card", {
         name: "13604",

jsconfig.json

+{"include": ["frontend/src/**", "enterprise/frontent/src/**"]}