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}