mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
DashboardSettings: Link labels to inputs (#41680)
* TimePickerSettings: make label appropriately link to input when clicked * DashboardSettings: link labels to input * use loweercase instead for IDs * fixes failing e2e test
This commit is contained in:
parent
b233a7d8d2
commit
ea113be251
@ -200,7 +200,7 @@ export const Components = {
|
||||
},
|
||||
Select: {
|
||||
option: 'Select option',
|
||||
input: () => 'input[id*="react-select-"]',
|
||||
input: () => 'input[id*="time-options-input"]',
|
||||
singleValue: () => 'div[class*="-singleValue"]',
|
||||
},
|
||||
FieldConfigEditor: {
|
||||
|
@ -22,10 +22,20 @@ export interface Props {
|
||||
onBlur?: () => void;
|
||||
includeInternal?: boolean | InternalTimeZones[];
|
||||
disabled?: boolean;
|
||||
inputId?: string;
|
||||
}
|
||||
|
||||
export const TimeZonePicker: React.FC<Props> = (props) => {
|
||||
const { onChange, width, autoFocus = false, onBlur, value, includeInternal = false, disabled = false } = props;
|
||||
const {
|
||||
onChange,
|
||||
width,
|
||||
autoFocus = false,
|
||||
onBlur,
|
||||
value,
|
||||
includeInternal = false,
|
||||
disabled = false,
|
||||
inputId,
|
||||
} = props;
|
||||
const groupedTimeZones = useTimeZones(includeInternal);
|
||||
const selected = useSelectedTimeZone(groupedTimeZones, value);
|
||||
const filterBySearchIndex = useFilterBySearchIndex();
|
||||
@ -43,6 +53,7 @@ export const TimeZonePicker: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<Select
|
||||
inputId={inputId}
|
||||
value={selected}
|
||||
placeholder="Type to search (country, city, abbreviation)"
|
||||
autoFocus={autoFocus}
|
||||
|
@ -12,6 +12,7 @@ export interface Props {
|
||||
tags?: string[];
|
||||
onChange: (tags: string[]) => void;
|
||||
width?: number;
|
||||
id?: string;
|
||||
className?: string;
|
||||
/** Toggle disabled state */
|
||||
disabled?: boolean;
|
||||
@ -30,6 +31,7 @@ export const TagsInput: FC<Props> = ({
|
||||
disabled,
|
||||
addOnBlur,
|
||||
invalid,
|
||||
id,
|
||||
}) => {
|
||||
const [newTagName, setNewName] = useState('');
|
||||
const styles = useStyles(getStyles);
|
||||
@ -77,6 +79,7 @@ export const TagsInput: FC<Props> = ({
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
id={id}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
onChange={onNameChange}
|
||||
|
@ -98,7 +98,7 @@ export function GeneralSettingsUnconnected({ dashboard, updateTimeZone, updateWe
|
||||
<Input id="description-input" name="description" onBlur={onBlur} defaultValue={dashboard.description} />
|
||||
</Field>
|
||||
<Field label="Tags">
|
||||
<TagsInput tags={dashboard.tags} onChange={onTagsChange} />
|
||||
<TagsInput id="tags-input" tags={dashboard.tags} onChange={onTagsChange} />
|
||||
</Field>
|
||||
<Field label="Folder">
|
||||
<FolderPicker
|
||||
|
@ -67,6 +67,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
|
||||
<CollapsableSection label="Time options" isOpen={true}>
|
||||
<Field label="Timezone" aria-label={selectors.components.TimeZonePicker.container}>
|
||||
<TimeZonePicker
|
||||
inputId="time-options-input"
|
||||
includeInternal={true}
|
||||
value={this.props.timezone}
|
||||
onChange={this.onTimeZoneChange}
|
||||
@ -74,7 +75,12 @@ export class TimePickerSettings extends PureComponent<Props, State> {
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Week start" aria-label={selectors.components.WeekStartPicker.container}>
|
||||
<WeekStartPicker width={40} value={this.props.weekStart} onChange={this.onWeekStartChange} />
|
||||
<WeekStartPicker
|
||||
inputId="week-start-input"
|
||||
width={40}
|
||||
value={this.props.weekStart}
|
||||
onChange={this.onWeekStartChange}
|
||||
/>
|
||||
</Field>
|
||||
<AutoRefreshIntervals
|
||||
refreshIntervals={this.props.refreshIntervals}
|
||||
|
Loading…
Reference in New Issue
Block a user