DynamicConfigValueEditor: Pass ID to dynamic component and label (#69910)

Closes #66337
This commit is contained in:
kay delaney 2023-06-15 12:59:52 +01:00 committed by GitHub
parent 367faf8102
commit a65c3c1ebc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React from 'react'; import React, { useId } from 'react';
import Highlighter from 'react-highlight-words'; import Highlighter from 'react-highlight-words';
import { import {
@ -35,6 +35,8 @@ export const DynamicConfigValueEditor = ({
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const item = registry?.getIfExists(property.id); const item = registry?.getIfExists(property.id);
const componentId = useId();
if (!item) { if (!item) {
return null; return null;
} }
@ -54,7 +56,11 @@ export const DynamicConfigValueEditor = ({
(isExpanded = false) => (isExpanded = false) =>
( (
<HorizontalGroup justify="space-between"> <HorizontalGroup justify="space-between">
<Label category={labelCategory} description={includeDescription ? item.description : undefined}> <Label
category={labelCategory}
description={includeDescription ? item.description : undefined}
htmlFor={componentId}
>
<Highlighter <Highlighter
textToHighlight={item.name} textToHighlight={item.name}
searchWords={[searchQuery]} searchWords={[searchQuery]}
@ -106,6 +112,7 @@ export const DynamicConfigValueEditor = ({
}} }}
item={item} item={item}
context={context} context={context}
id={componentId}
/> />
</Field> </Field>
</div> </div>