From 0b6434d0e8753755fc0bec67f06655d2594ee2ba Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 2 Dec 2020 22:17:24 -0800
Subject: [PATCH] Overrides: show category on the overrides (#29556)

---
 .../components/PanelEditor/DynamicConfigValueEditor.tsx     | 2 +-
 .../dashboard/components/PanelEditor/OverrideEditor.tsx     | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index 39f51130290..28b207d83b3 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/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
   const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
     <HorizontalGroup justify="space-between">
-      <Label description={includeDescription ? item.description : undefined}>
+      <Label category={item.category?.splice(1)} description={includeDescription ? item.description : undefined}>
         {item.name}
         {!isExpanded && includeCounter && item.getItemsCount && <Counter value={item.getItemsCount(property.value)} />}
       </Label>
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
index 808ee122b66..2575cb5fe4b 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
+++ b/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 label = item.name;
+    if (item.category && item.category.length > 1) {
+      label = [...item.category!.slice(1), item.name].join(' > ');
+    }
     return {
-      label: item.name,
+      label,
       value: item.id,
       description: item.description,
     };