From 713c9921acb2f2e5c6a30515c946840f26428af7 Mon Sep 17 00:00:00 2001
From: Scott Lepper <scott.lepper@gmail.com>
Date: Mon, 28 Jul 2025 01:49:38 -0400
Subject: [PATCH] Dashboards: Edit pane variable unique key (#107212)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Dashboards: Edit pane unique key

* lint

* Update public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* lint

---------

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../PanelEditor/OptionsPaneItemDescriptor.tsx         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index c9ff8e91ea8..b512ee41b1b 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { uniqueId } from 'lodash';
 import { ReactNode } from 'react';
 import * as React from 'react';
 import Highlighter from 'react-highlight-words';
@@ -31,11 +32,17 @@ export interface OptionsPaneItemInfo {
  */
 export class OptionsPaneItemDescriptor {
   parent!: OptionsPaneCategoryDescriptor;
+  props: OptionsPaneItemInfo;
 
-  constructor(public props: OptionsPaneItemInfo) {}
+  constructor(props: OptionsPaneItemInfo) {
+    this.props = { ...props, id: props.id ?? props.title };
+    if (this.props.id === '') {
+      this.props.id = uniqueId();
+    }
+  }
 
   render(searchQuery?: string) {
-    return <OptionsPaneItem key={this.props.title} itemDescriptor={this} searchQuery={searchQuery} />;
+    return <OptionsPaneItem key={this.props.id} itemDescriptor={this} searchQuery={searchQuery} />;
   }
 
   useShowIf() {