From ea113be251025efdb3dc74ef83bdeb692d6a1fc2 Mon Sep 17 00:00:00 2001 From: Uchechukwu Obasi Date: Tue, 16 Nov 2021 16:58:33 +0100 Subject: [PATCH] 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 --- .../src/selectors/components.ts | 2 +- .../components/DateTimePickers/TimeZonePicker.tsx | 13 ++++++++++++- .../src/components/TagsInput/TagsInput.tsx | 3 +++ .../DashboardSettings/GeneralSettings.tsx | 2 +- .../DashboardSettings/TimePickerSettings.tsx | 8 +++++++- 5 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index b64e006d3f5..10a65d79e3e 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -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: { diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx index 8af52c661f2..badc806f9d7 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx @@ -22,10 +22,20 @@ export interface Props { onBlur?: () => void; includeInternal?: boolean | InternalTimeZones[]; disabled?: boolean; + inputId?: string; } export const TimeZonePicker: React.FC = (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) => { return ( - + { { /> - +