From 9056ff73f6f91a180c26131e687ad79dbb9ff21d Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 27 Jun 2024 07:53:46 +0300
Subject: [PATCH] TimeRangePicker: Use week start (#89765)

---
 .../components/DateTimePickers/WeekStartPicker.tsx   | 12 ++++++++++++
 packages/grafana-ui/src/components/index.ts          |  2 +-
 .../components/DashNav/DashNavTimeControls.tsx       |  6 ++++--
 public/app/features/explore/ExploreTimeControls.tsx  |  6 ++++--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
index e5f3b6397a3..2ace6f97769 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
@@ -23,6 +23,18 @@ const weekStarts: Array<SelectableValue<WeekStart | ''>> = [
   { value: 'monday', label: 'Monday' },
 ];
 
+const isWeekStart = (value: string): value is WeekStart => {
+  return ['saturday', 'sunday', 'monday'].includes(value);
+};
+
+export const getWeekStart = (value: string): WeekStart => {
+  if (isWeekStart(value)) {
+    return value;
+  }
+
+  return 'monday';
+};
+
 export const WeekStartPicker = (props: Props) => {
   const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
 
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index cca55c7121d..e2e21fb8af3 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -39,7 +39,7 @@ export { TimePickerTooltip } from './DateTimePickers/TimeRangePicker';
 export { TimeRangeLabel } from './DateTimePickers/TimeRangePicker/TimeRangeLabel';
 export { TimeOfDayPicker } from './DateTimePickers/TimeOfDayPicker';
 export { TimeZonePicker } from './DateTimePickers/TimeZonePicker';
-export { WeekStartPicker } from './DateTimePickers/WeekStartPicker';
+export { WeekStartPicker, getWeekStart, type WeekStart } from './DateTimePickers/WeekStartPicker';
 export { DatePicker, type DatePickerProps } from './DateTimePickers/DatePicker/DatePicker';
 export {
   DatePickerWithInput,
diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
index df8653bf5e3..22d0e0dab3b 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 { TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { defaultIntervals, RefreshPicker } from '@grafana/ui';
+import { config, TimeRangeUpdatedEvent } from '@grafana/runtime';
+import { defaultIntervals, getWeekStart, 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,6 +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);
 
     let text: string | undefined = undefined;
     if (dashboard.refresh === AutoRefreshInterval) {
@@ -120,6 +121,7 @@ export class DashNavTimeControls extends Component<Props> {
           onChangeFiscalYearStartMonth={this.onChangeFiscalYearStartMonth}
           isOnCanvas={isOnCanvas}
           onToolbarTimePickerClick={this.props.onToolbarTimePickerClick}
+          weekStart={weekStart}
         />
         <RefreshPicker
           onIntervalChanged={this.onChangeRefreshInterval}
diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx
index 07c92e8fba5..f816311b0f2 100644
--- a/public/app/features/explore/ExploreTimeControls.tsx
+++ b/public/app/features/explore/ExploreTimeControls.tsx
@@ -1,8 +1,9 @@
 import { Component } from 'react';
 
 import { TimeRange, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, 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';
 
@@ -85,7 +86,7 @@ export class ExploreTimeControls extends Component<Props> {
       onZoom: this.onZoom,
       hideText,
     };
-
+    const weekStart = getWeekStart(config.bootData.user.weekStart);
     return (
       <TimePickerWithHistory
         isOnCanvas
@@ -96,6 +97,7 @@ export class ExploreTimeControls extends Component<Props> {
         onChange={this.onChangeTimePicker}
         onChangeTimeZone={onChangeTimeZone}
         onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}
+        weekStart={weekStart}
       />
     );
   }