diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx index 37da44b515f..a70611dd109 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx +++ b/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 = { 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 ( ); } diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx index 9170094ec17..5e98db356b8 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx +++ b/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; diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index 22d0e0dab3b..c32d8c774f6 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/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 { 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) { diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx index f816311b0f2..07c92e8fba5 100644 --- a/public/app/features/explore/ExploreTimeControls.tsx +++ b/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 { onZoom: this.onZoom, hideText, }; - const weekStart = getWeekStart(config.bootData.user.weekStart); + return ( { onChange={this.onChangeTimePicker} onChangeTimeZone={onChangeTimeZone} onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth} - weekStart={weekStart} /> ); }