Overrides: show category on the overrides (#29556)

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -33,7 +33,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
   // eslint-disable-next-line react/display-name
   // eslint-disable-next-line react/display-name
   const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
   const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
     <HorizontalGroup justify="space-between">
     <HorizontalGroup justify="space-between">
-      <Label description={includeDescription ? item.description : undefined}>
+      <Label category={item.category?.splice(1)} description={includeDescription ? item.description : undefined}>
         {item.name}
         {item.name}
         {!isExpanded && includeCounter && item.getItemsCount && <Counter value={item.getItemsCount(property.value)} />}
         {!isExpanded && includeCounter && item.getItemsCount && <Counter value={item.getItemsCount(property.value)} />}
       </Label>
       </Label>

public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx

@@ -98,8 +98,12 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({
   );
   );
 
 
   let configPropertiesOptions = registry.list().map(item => {
   let configPropertiesOptions = registry.list().map(item => {
+    let label = item.name;
+    if (item.category && item.category.length > 1) {
+      label = [...item.category!.slice(1), item.name].join(' > ');
+    }
     return {
     return {
-      label: item.name,
+      label,
       value: item.id,
       value: item.id,
       description: item.description,
       description: item.description,
     };
     };