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
2025-07-30 19:13:07 +08:00 · 2025-02-24 11:35:55 +01:00
parent 5d57236a0c
commit 01b57f412f
15 changed files with 42 additions and 36 deletions
--- a/.betterer.results
+++ b/.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.", "7"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
    ],
    "public/app/features/dashboard/api/v1.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
--- a/e2e/dashboards-suite/utils/makeDashboard.ts
+++ b/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,
--- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
+++ b/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;
-  value: string;
+  onChange: (weekStart?: WeekStart) => void;
+  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
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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,
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/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) => {
-    this.setState({ weekStart: weekStart });
+  onWeekStartChanged = (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"
            />
--- a/public/app/features/dashboard-scene/serialization/snapshots/transformSceneToSaveModel.test.ts.snap
+++ b/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": "",
 }
 `;

--- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
+++ b/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,
--- a/public/app/features/dashboard-scene/settings/GeneralSettingsEditView.tsx
+++ b/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 */}
--- a/public/app/features/dashboard/api/ResponseTransformers.ts
+++ b/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: (dashboard.weekStart as WeekStart) || timeSettingsDefaults.weekStart,
+      weekStart: getWeekStart(dashboard.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',
--- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
+++ b/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
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/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);
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/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);
  };

--- a/public/app/features/dashboard/state/actions.ts
+++ b/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();
--- a/public/app/features/dashboard/state/initDashboard.ts
+++ b/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);
--- a/public/app/features/profile/state/reducers.ts
+++ b/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)) {
-      weekStart = config?.bootData?.user?.weekStart;
+    if (!weekStart) {
+      weekStart = getWeekStart();
    }

    set(contextSrv, 'user.weekStart', weekStart);