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

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

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> = (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}

packages/grafana-ui/src/components/TagsInput/TagsInput.tsx

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

public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx

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

public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx

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