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:
Uchechukwu Obasi 2021-11-16 16:58:33 +01:00 committed by GitHub
parent b233a7d8d2
commit ea113be251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 4 deletions

View File

@ -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: {

View File

@ -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}

View File

@ -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}

View File

@ -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

View File

@ -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}