From bb7e556efcfd625af64f03cada17707a621e8516 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 4 May 2022 10:04:15 +0100
Subject: [PATCH] Templating: Prefix variable picker element IDs (#48405)

---
 e2e/dashboards-suite/new-text-box-variable.spec.ts           | 2 +-
 .../variables/pickers/OptionsPicker/OptionsPicker.tsx        | 4 ++--
 public/app/features/variables/pickers/PickerRenderer.tsx     | 5 +++--
 .../app/features/variables/textbox/TextBoxVariablePicker.tsx | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/e2e/dashboards-suite/new-text-box-variable.spec.ts b/e2e/dashboards-suite/new-text-box-variable.spec.ts
index 0f5dddb8a04..7882bc4d128 100644
--- a/e2e/dashboards-suite/new-text-box-variable.spec.ts
+++ b/e2e/dashboards-suite/new-text-box-variable.spec.ts
@@ -20,7 +20,7 @@ describe('Variables - Text box', () => {
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
     e2e.components.BackButton.backArrow().click({ force: true });
-    e2e().get('#VariableUnderTest').clear().type('dog-cat').blur();
+    e2e().get('#var-VariableUnderTest').clear().type('dog-cat').blur();
 
     // Assert it was rendered
     e2e().get('.markdown-html').should('include.text', 'VariableUnderTest: dog-cat');
diff --git a/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx b/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
index aad1ab98e0f..6d264cd06ef 100644
--- a/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
+++ b/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
@@ -125,7 +125,7 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
 
       return (
         <VariableLink
-          id={variable.id}
+          id={`var-${variable.id}`}
           text={linkText}
           onClick={this.onShowOptions}
           loading={loading}
@@ -143,7 +143,7 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
       return (
         <ClickOutsideWrapper onClick={this.onHideOptions}>
           <VariableInput
-            id={id}
+            id={`var-${id}`}
             value={picker.queryValue}
             onChange={this.onFilterOrSearchOptions}
             onNavigate={this.onNavigate}
diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
index 80c2a73a5df..583fbb570a8 100644
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -34,13 +34,14 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
     return null;
   }
 
+  const elementId = `var-${variable.id}`;
   if (variable.description) {
     return (
       <Tooltip content={variable.description} placement={'bottom'}>
         <label
           className="gf-form-label gf-form-label--variable"
           data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
-          htmlFor={variable.id}
+          htmlFor={elementId}
         >
           {labelOrName}
         </label>
@@ -52,7 +53,7 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
     <label
       className="gf-form-label gf-form-label--variable"
       data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
-      htmlFor={variable.id}
+      htmlFor={elementId}
     >
       {labelOrName}
     </label>
diff --git a/public/app/features/variables/textbox/TextBoxVariablePicker.tsx b/public/app/features/variables/textbox/TextBoxVariablePicker.tsx
index 14d9251d9a7..e52d4dcdde2 100644
--- a/public/app/features/variables/textbox/TextBoxVariablePicker.tsx
+++ b/public/app/features/variables/textbox/TextBoxVariablePicker.tsx
@@ -70,7 +70,7 @@ export function TextBoxVariablePicker({ variable, onVariableChange }: Props): Re
       onBlur={onBlur}
       onKeyDown={onKeyDown}
       placeholder="Enter variable value"
-      id={variable.id}
+      id={`var-${variable.id}`}
     />
   );
 }