From a65c3c1ebc81699c14edc4bc9835656aa6206def Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 15 Jun 2023 12:59:52 +0100
Subject: [PATCH] DynamicConfigValueEditor: Pass ID to dynamic component and
 label (#69910)

Closes #66337
---
 .../PanelEditor/DynamicConfigValueEditor.tsx          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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