Dashboard: Add week start option to global and dashboard preferences (#40010)

* Add global week start option to shared preferences

* Add default_week_start to configuration docs

* Add week start option to dashboards

* Add week start argument to tsdb time range parser

* Fix strict check issues

* Add tests for week start

* Change wording on default_week_start documentation

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update week_start column to be a nullable field

Co-authored-by: Emil Tullstedt <emil.tullstedt@grafana.com>

* Update configuration to include browser option

* Update WeekStartPicker container selector

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

* Add menuShouldPortal to WeekStartPicker to remove deprecation warning

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Add inputId to WeekStartPicker

* Use e2e selector on WeekStartPicker aria-label

* Simplify WeekStartPicker onChange condition

* Specify value type on WeekStartPicker weekStarts

* Remove setWeekStart side effect from reducer

* Fix updateLocale failing to reset week start

* Store week start as string to handle empty values

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
Co-authored-by: Emil Tullstedt <emil.tullstedt@grafana.com>
Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

packages/grafana-data/src/datetime/moment_wrapper.ts

@@ -120,3 +120,23 @@ export const dateTimeForTimeZone = (
 
   return dateTime(input, formatInput);
 };
+
+export const getWeekdayIndex = (day: string) => {
+  return moment.weekdays().findIndex((wd) => wd.toLowerCase() === day.toLowerCase());
+};
+
+export const setWeekStart = (weekStart?: string) => {
+  const suffix = '-weekStart';
+  const language = getLocale().replace(suffix, '');
+  const dow = weekStart ? getWeekdayIndex(weekStart) : -1;
+  if (dow !== -1) {
+    moment.locale(language + suffix, {
+      parentLocale: language,
+      week: {
+        dow,
+      },
+    });
+  } else {
+    setLocale(language);
+  }
+};

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -219,6 +219,9 @@ export const Components = {
   TimeZonePicker: {
     container: 'Time zone picker select container',
   },
+  WeekStartPicker: {
+    container: 'Choose starting day of the week',
+  },
   TraceViewer: {
     spanBar: () => '[data-test-id="SpanBar--wrapper"]',
   },

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { WeekStartPicker } from '@grafana/ui';
+import { UseState } from '../../utils/storybook/UseState';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+export default {
+  title: 'Pickers and Editors/TimePickers/WeekStartPicker',
+  component: WeekStartPicker,
+  decorators: [withCenteredStory],
+};
+
+export const basic = () => {
+  return (
+    <UseState
+      initialState={{
+        value: '',
+      }}
+    >
+      {(value, updateValue) => {
+        return (
+          <WeekStartPicker
+            value={value.value}
+            onChange={(newValue: string) => {
+              if (!newValue) {
+                return;
+              }
+              action('on selected')(newValue);
+              updateValue({ value: newValue });
+            }}
+          />
+        );
+      }}
+    </UseState>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { Select } from '../Select/Select';
+import { selectors } from '@grafana/e2e-selectors';
+
+export interface Props {
+  onChange: (weekStart: string) => void;
+  value: string;
+  width?: number;
+  autoFocus?: boolean;
+  onBlur?: () => void;
+  includeInternal?: boolean;
+  disabled?: boolean;
+  inputId?: string;
+}
+
+const weekStarts: Array<SelectableValue<string>> = [
+  { value: '', label: 'Default' },
+  { value: 'saturday', label: 'Saturday' },
+  { value: 'sunday', label: 'Sunday' },
+  { value: 'monday', label: 'Monday' },
+];
+
+export const WeekStartPicker: React.FC<Props> = (props) => {
+  const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
+
+  const onChangeWeekStart = useCallback(
+    (selectable: SelectableValue<string>) => {
+      if (selectable.value !== undefined) {
+        onChange(selectable.value);
+      }
+    },
+    [onChange]
+  );
+
+  return (
+    <Select
+      inputId={inputId}
+      value={weekStarts.find((item) => item.value === value)?.value}
+      placeholder="Choose starting day of the week"
+      autoFocus={autoFocus}
+      openMenuOnFocus={true}
+      width={width}
+      options={weekStarts}
+      onChange={onChangeWeekStart}
+      onBlur={onBlur}
+      disabled={disabled}
+      aria-label={selectors.components.WeekStartPicker.container}
+      menuShouldPortal={true}
+    />
+  );
+};

packages/grafana-ui/src/components/index.ts

@@ -24,6 +24,7 @@ export { RefreshPicker, defaultIntervals } from './RefreshPicker/RefreshPicker';
 export { TimeRangePicker, TimeRangePickerProps } from './DateTimePickers/TimeRangePicker';
 export { TimeOfDayPicker } from './DateTimePickers/TimeOfDayPicker';
 export { TimeZonePicker } from './DateTimePickers/TimeZonePicker';
+export { WeekStartPicker } from './DateTimePickers/WeekStartPicker';
 export { DatePicker, DatePickerProps } from './DateTimePickers/DatePicker/DatePicker';
 export {
   DatePickerWithInput,