Calendar/TimePickers: By default use the system/user start of week (#93464)

Calendar: Should automatically use user or system start of week

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx

@@ -8,7 +8,7 @@ import { GrafanaTheme2, dateTimeParse, DateTime, TimeZone } from '@grafana/data'
 import { useStyles2 } from '../../../themes';
 import { t } from '../../../utils/i18n';
 import { Icon } from '../../Icon/Icon';
-import { WeekStart } from '../WeekStartPicker';
+import { getWeekStart, WeekStart } from '../WeekStartPicker';
 import { adjustDateForReactCalendar } from '../utils/adjustDateForReactCalendar';
 
 import { TimePickerCalendarProps } from './TimePickerCalendar';
@@ -19,10 +19,11 @@ const weekStartMap: Record<WeekStart, CalendarType> = {
   monday: 'iso8601',
 };
 
-export function Body({ onChange, from, to, timeZone, weekStart = 'monday' }: TimePickerCalendarProps) {
+export function Body({ onChange, from, to, timeZone, weekStart }: TimePickerCalendarProps) {
   const value = inputToValue(from, to, new Date(), timeZone);
   const onCalendarChange = useOnCalendarChange(onChange, timeZone);
   const styles = useStyles2(getBodyStyles);
+  const weekStartValue = getWeekStart(weekStart);
 
   return (
     <Calendar
@@ -38,7 +39,7 @@ export function Body({ onChange, from, to, timeZone, weekStart = 'monday' }: Tim
       prevAriaLabel={t('time-picker.calendar.previous-month', 'Previous month')}
       onChange={onCalendarChange}
       locale="en"
-      calendarType={weekStartMap[weekStart]}
+      calendarType={weekStartMap[weekStartValue]}
     />
   );
 }

packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
+import { BootData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { Combobox, ComboboxOption } from '../Combobox/Combobox';
@@ -26,13 +27,28 @@ const isWeekStart = (value: string): value is WeekStart => {
   return ['saturday', 'sunday', 'monday'].includes(value);
 };
 
-export const getWeekStart = (value: string): WeekStart => {
-  if (isWeekStart(value)) {
-    return value;
+declare global {
+  interface Window {
+    grafanaBootData?: BootData;
+  }
+}
+
+/**
+ * Returns the system or user defined week start (as defined in bootData)
+ * Or you can pass in an override weekStart string and have it be validated and returned as WeekStart type if valid
+ */
+export function getWeekStart(override?: string): WeekStart {
+  if (override && isWeekStart(override)) {
+    return override;
+  }
+
+  const preference = window?.grafanaBootData?.user?.weekStart;
+  if (preference && isWeekStart(preference)) {
+    return preference;
   }
 
   return 'monday';
-};
+}
 
 export const WeekStartPicker = (props: Props) => {
   const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -2,8 +2,8 @@ import { Component } from 'react';
 import { Unsubscribable } from 'rxjs';
 
 import { dateMath, TimeRange, TimeZone } from '@grafana/data';
-import { config, TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { defaultIntervals, getWeekStart, RefreshPicker } from '@grafana/ui';
+import { TimeRangeUpdatedEvent } from '@grafana/runtime';
+import { defaultIntervals, RefreshPicker } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { appEvents } from 'app/core/core';
 import { t } from 'app/core/internationalization';
@@ -100,7 +100,7 @@ export class DashNavTimeControls extends Component<Props> {
     const timeZone = dashboard.getTimezone();
     const fiscalYearStartMonth = dashboard.fiscalYearStartMonth;
     const hideIntervalPicker = dashboard.panelInEdit?.isEditing;
-    const weekStart = dashboard.weekStart || getWeekStart(config.bootData.user.weekStart);
+    const weekStart = dashboard.weekStart;
 
     let text: string | undefined = undefined;
     if (dashboard.refresh === AutoRefreshInterval) {

public/app/features/explore/ExploreTimeControls.tsx

@@ -1,9 +1,8 @@
 import { Component } from 'react';
 
 import { TimeRange, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
-import { config, reportInteraction } from '@grafana/runtime';
+import { reportInteraction } from '@grafana/runtime';
 import { TimeZone } from '@grafana/schema';
-import { getWeekStart } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';
 
@@ -86,7 +85,7 @@ export class ExploreTimeControls extends Component<Props> {
       onZoom: this.onZoom,
       hideText,
     };
-    const weekStart = getWeekStart(config.bootData.user.weekStart);
+
     return (
       <TimePickerWithHistory
         isOnCanvas
@@ -97,7 +96,6 @@ export class ExploreTimeControls extends Component<Props> {
         onChange={this.onChangeTimePicker}
         onChangeTimeZone={onChangeTimeZone}
         onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}
-        weekStart={weekStart}
       />
     );
   }