mirror of https://github.com/grafana/grafana
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>pull/40534/head
parent
db62ce477d
commit
a9faab6b09
@ -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> |
||||||
|
); |
||||||
|
}; |
@ -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} |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
Loading…
Reference in new issue