Dashboards: WeekStart is now of type WeekStart | undefined instead of string (#101123)

* change weektype from string to WeekStart | undefined

* Change to WeekStart in more places, fix lint

* change in more places

* More weekstart changes

* fix snapshot, update betterer

* keep weekstart as '' in test dashboards to make sure it doesn't break old dashboards

.betterer.results

@@ -635,9 +635,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"],
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "2"]
     ],
-    "packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"]
     ],
@@ -3661,10 +3658,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
     ],
     "public/app/features/dashboard/api/v1.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]

e2e/dashboards-suite/utils/makeDashboard.ts

@@ -48,8 +48,8 @@ export function makeNewDashboardRequestBody(dashboardName: string, folderUid?: s
       timezone: '',
       title: dashboardName,
       version: 0,
-      weekStart: '',
       uid: '',
+      weekStart: '',
     },
     message: '',
     overwrite: false,

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

@@ -7,8 +7,8 @@ import { Combobox } from '../Combobox/Combobox';
 import { ComboboxOption } from '../Combobox/types';
 
 export interface Props {
-  onChange: (weekStart: WeekStart) => void;
+  onChange: (weekStart?: WeekStart) => void;
-  value: string;
+  value?: WeekStart;
   width?: number;
   autoFocus?: boolean;
   onBlur?: () => void;
@@ -24,9 +24,9 @@ const weekStarts: ComboboxOption[] = [
   { value: 'monday', label: 'Monday' },
 ];
 
-const isWeekStart = (value: string): value is WeekStart => {
+export function isWeekStart(value: string): value is WeekStart {
   return ['saturday', 'sunday', 'monday'].includes(value);
-};
+}
 
 declare global {
   interface Window {
@@ -57,13 +57,13 @@ export const WeekStartPicker = (props: Props) => {
   const onChangeWeekStart = useCallback(
     (selectable: ComboboxOption | null) => {
       if (selectable && selectable.value !== undefined) {
-        onChange(selectable.value as WeekStart);
+        onChange(isWeekStart(selectable.value) ? selectable.value : undefined);
       }
     },
     [onChange]
   );
 
-  const selected = useMemo(() => weekStarts.find((item) => item.value === value)?.value ?? null, [value]);
+  const selected = useMemo(() => weekStarts.find((item) => item.value === value)?.value ?? '', [value]);
 
   return (
     <Combobox

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

@@ -40,7 +40,7 @@ export { TimePickerTooltip } from './DateTimePickers/TimeRangePicker';
 export { TimeRangeLabel } from './DateTimePickers/TimeRangePicker/TimeRangeLabel';
 export { TimeOfDayPicker } from './DateTimePickers/TimeOfDayPicker';
 export { TimeZonePicker } from './DateTimePickers/TimeZonePicker';
-export { WeekStartPicker, getWeekStart, type WeekStart } from './DateTimePickers/WeekStartPicker';
+export { WeekStartPicker, getWeekStart, type WeekStart, isWeekStart } from './DateTimePickers/WeekStartPicker';
 export { DatePicker, type DatePickerProps } from './DateTimePickers/DatePicker/DatePicker';
 export {
   DatePickerWithInput,

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -18,13 +18,14 @@ import {
   Combobox,
   ComboboxOption,
   TextLink,
+  WeekStart,
+  isWeekStart,
 } from '@grafana/ui';
 import { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
 import { t, Trans } from 'app/core/internationalization';
 import { LANGUAGES, PSEUDO_LOCALE } from 'app/core/internationalization/constants';
 import { PreferencesService } from 'app/core/services/PreferencesService';
 import { changeTheme } from 'app/core/services/theme';
-
 export interface Props {
   resourceUri: string;
   disabled?: boolean;
@@ -152,8 +153,8 @@ export class SharedPreferences extends PureComponent<Props, State> {
     this.setState({ timezone: timezone });
   };
 
-  onWeekStartChanged = (weekStart: string) => {
+  onWeekStartChanged = (weekStart?: WeekStart) => {
-    this.setState({ weekStart: weekStart });
+    this.setState({ weekStart: weekStart ?? '' });
   };
 
   onHomeDashboardChanged = (dashboardUID: string) => {
@@ -249,7 +250,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
             data-testid={selectors.components.WeekStartPicker.containerV2}
           >
             <WeekStartPicker
-              value={weekStart || ''}
+              value={weekStart && isWeekStart(weekStart) ? weekStart : undefined}
               onChange={this.onWeekStartChanged}
               inputId="shared-preferences-week-start-picker"
             />

public/app/features/dashboard-scene/serialization/__snapshots__/transformSceneToSaveModel.test.ts.snap

@@ -334,7 +334,6 @@ exports[`transformSceneToSaveModel Given a scene with rows Should transform back
   "title": "Repeating rows",
   "uid": "Repeating-rows-uid",
   "version": 1,
-  "weekStart": "",
 }
 `;
 

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -22,6 +22,7 @@ import {
   SceneInteractionProfileEvent,
   SceneObjectState,
 } from '@grafana/scenes';
+import { isWeekStart } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -274,7 +275,7 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel,
       to: oldModel.time.to,
       fiscalYearStartMonth: oldModel.fiscalYearStartMonth,
       timeZone: oldModel.timezone,
-      weekStart: oldModel.weekStart,
+      weekStart: isWeekStart(oldModel.weekStart) ? oldModel.weekStart : undefined,
       UNSAFE_nowDelay: oldModel.timepicker?.nowDelay,
     }),
     $variables: variables,

public/app/features/dashboard-scene/settings/GeneralSettingsEditView.tsx

@@ -123,7 +123,7 @@ export class GeneralSettingsEditView
     });
   };
 
-  public onWeekStartChange = (value: WeekStart) => {
+  public onWeekStartChange = (value?: WeekStart) => {
     this.getTimeRange().setState({ weekStart: value });
   };
 
@@ -258,7 +258,7 @@ export class GeneralSettingsEditView
             nowDelay={nowDelay || ''}
             liveNow={liveNow}
             timezone={timeZone || ''}
-            weekStart={weekStart || ''}
+            weekStart={weekStart}
           />
 
           {/* @todo: Update "Graph tooltip" description to remove prompt about reloading when resolving #46581 */}

public/app/features/dashboard/api/ResponseTransformers.ts

@@ -41,7 +41,7 @@ import {
   GridLayoutItemKind,
 } from '@grafana/schema/dist/esm/schema/dashboard/v2alpha0';
 import { DashboardLink, DataTransformerConfig } from '@grafana/schema/src/raw/dashboard/x/dashboard_types.gen';
-import { WeekStart } from '@grafana/ui';
+import { isWeekStart, WeekStart } from '@grafana/ui';
 import {
   AnnoKeyCreatedBy,
   AnnoKeyDashboardGnetId,
@@ -161,8 +161,7 @@ export function ensureV2Response(
       fiscalYearStartMonth: dashboard.fiscalYearStartMonth || timeSettingsDefaults.fiscalYearStartMonth,
       hideTimepicker: dashboard.timepicker?.hidden || timeSettingsDefaults.hideTimepicker,
       quickRanges: dashboard.timepicker?.quick_ranges,
-      // casting WeekStart here to avoid editing old schema
+      weekStart: getWeekStart(dashboard.weekStart, timeSettingsDefaults.weekStart),
-      weekStart: (dashboard.weekStart as WeekStart) || timeSettingsDefaults.weekStart,
       nowDelay: dashboard.timepicker?.nowDelay || timeSettingsDefaults.nowDelay,
     },
     links: dashboard.links || [],
@@ -332,6 +331,13 @@ function isRowPanel(panel: Panel | RowPanel): panel is RowPanel {
   return panel.type === 'row';
 }
 
+function getWeekStart(weekStart?: string, defaultWeekStart?: WeekStart): WeekStart | undefined {
+  if (!weekStart || !isWeekStart(weekStart)) {
+    return defaultWeekStart;
+  }
+  return weekStart;
+}
+
 function buildRowKind(p: RowPanel, elements: GridLayoutItemKind[]): GridLayoutRowKind {
   return {
     kind: 'GridLayoutRow',

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

@@ -3,7 +3,7 @@ import { Unsubscribable } from 'rxjs';
 
 import { dateMath, TimeRange, TimeZone } from '@grafana/data';
 import { TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { defaultIntervals, RefreshPicker } from '@grafana/ui';
+import { defaultIntervals, isWeekStart, RefreshPicker } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { appEvents } from 'app/core/core';
 import { t } from 'app/core/internationalization';
@@ -121,7 +121,7 @@ export class DashNavTimeControls extends Component<Props> {
           onChangeFiscalYearStartMonth={this.onChangeFiscalYearStartMonth}
           isOnCanvas={isOnCanvas}
           onToolbarTimePickerClick={this.props.onToolbarTimePickerClick}
-          weekStart={weekStart}
+          weekStart={isWeekStart(weekStart) ? weekStart : undefined}
           quickRanges={quick_ranges}
         />
         <RefreshPicker

public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx

@@ -13,6 +13,7 @@ import {
   TextArea,
   Box,
   Stack,
+  WeekStart,
 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
@@ -97,7 +98,7 @@ export function GeneralSettingsUnconnected({
     updateTimeZone(timeZone);
   };
 
-  const onWeekStartChange = (weekStart: string) => {
+  const onWeekStartChange = (weekStart?: WeekStart) => {
     dashboard.weekStart = weekStart;
     setRenderCounter(renderCounter + 1);
     updateWeekStart(weekStart);

public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx

@@ -10,7 +10,7 @@ import { t } from 'app/core/internationalization';
 import { AutoRefreshIntervals } from './AutoRefreshIntervals';
 
 interface Props {
-  onWeekStartChange: (weekStart: WeekStart) => void;
+  onWeekStartChange: (weekStart?: WeekStart) => void;
   onTimeZoneChange: (timeZone: TimeZone) => void;
   onRefreshIntervalChange: (interval: string[]) => void;
   onNowDelayChange: (nowDelay: string) => void;
@@ -20,7 +20,7 @@ interface Props {
   timePickerHidden?: boolean;
   nowDelay?: string;
   timezone: TimeZone;
-  weekStart: string;
+  weekStart?: WeekStart;
   liveNow?: boolean;
 }
 
@@ -62,7 +62,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
     this.props.onTimeZoneChange(timeZone);
   };
 
-  onWeekStartChange = (weekStart: WeekStart) => {
+  onWeekStartChange = (weekStart?: WeekStart) => {
     this.props.onWeekStartChange(weekStart);
   };
 

public/app/features/dashboard/state/actions.ts

@@ -1,5 +1,6 @@
 import { TimeZone } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
+import { WeekStart } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createSuccessNotification } from 'app/core/copy/appNotification';
 import { getDashboardAPI } from 'app/features/dashboard/api/dashboard_api';
@@ -56,7 +57,7 @@ export const updateTimeZoneDashboard =
   };
 
 export const updateWeekStartDashboard =
-  (weekStart: string): ThunkResult<void> =>
+  (weekStart?: WeekStart): ThunkResult<void> =>
   (dispatch) => {
     dispatch(updateWeekStartForSession(weekStart));
     getTimeSrv().refreshTimeModel();

public/app/features/dashboard/state/initDashboard.ts

@@ -273,7 +273,7 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
     }
 
     // set week start
-    if (dashboard.weekStart !== '') {
+    if (dashboard.weekStart !== '' && dashboard.weekStart !== undefined) {
       setWeekStart(dashboard.weekStart);
     } else {
       setWeekStart(config.bootData.user.weekStart);

public/app/features/profile/state/reducers.ts

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { isEmpty, isString, set } from 'lodash';
 
 import { dateTimeFormatTimeAgo, setWeekStart, TimeZone } from '@grafana/data';
+import { getWeekStart, WeekStart } from '@grafana/ui';
 import config from 'app/core/config';
 import { contextSrv } from 'app/core/core';
 import { Team, ThunkResult, UserDTO, UserOrg, UserSession } from 'app/types';
@@ -116,10 +117,10 @@ export const updateTimeZoneForSession = (timeZone: TimeZone): ThunkResult<void>
   };
 };
 
-export const updateWeekStartForSession = (weekStart: string): ThunkResult<void> => {
+export const updateWeekStartForSession = (weekStart?: WeekStart): ThunkResult<void> => {
   return async (dispatch) => {
-    if (!isString(weekStart) || isEmpty(weekStart)) {
+    if (!weekStart) {
-      weekStart = config?.bootData?.user?.weekStart;
+      weekStart = getWeekStart();
     }
 
     set(contextSrv, 'user.weekStart', weekStart);