From ea113be251025efdb3dc74ef83bdeb692d6a1fc2 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
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> = (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}
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index cda23da174a..a0f45e3b547 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/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}
diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
index dffc9690ddd..7ccbe33c493 100644
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/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
diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
index b7626d95e91..458e7277205 100644
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/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}