Templating: Prefix variable picker element IDs (#48405)

This commit is contained in:
kay delaney 2022-05-04 10:04:15 +01:00 committed by GitHub
parent b420179be4
commit bb7e556efc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 6 deletions

View File

@ -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');

View File

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

View File

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

View File

@ -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}`}
/>
);
}