use useId in some places

public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx

@@ -1,5 +1,4 @@
-import { ReactNode, useMemo, useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { ReactNode, useId, useMemo, useRef } from 'react';
 
 import { Trans, t } from '@grafana/i18n';
 import { SceneObject } from '@grafana/scenes';
@@ -37,10 +36,10 @@ export class DashboardEditableElement implements EditableDashboardElement {
 
     // When layout changes we need to update options list
     const { body } = dashboard.useState();
+    const dashboardTitleInputId = useId();
+    const dashboardDescriptionInputId = useId();
 
     const dashboardOptions = useMemo(() => {
-      const dashboardTitleInputId = uuidv4();
-      const dashboardDescriptionInputId = uuidv4();
       const editPaneHeaderOptions = new OptionsPaneCategoryDescriptor({ title: '', id: 'dashboard-options' })
         .addItem(
           new OptionsPaneItemDescriptor({
@@ -58,7 +57,7 @@ export class DashboardEditableElement implements EditableDashboardElement {
         );
 
       return editPaneHeaderOptions;
-    }, [dashboard]);
+    }, [dashboard, dashboardDescriptionInputId, dashboardTitleInputId]);
 
     const layoutCategory = useLayoutCategory(body);
 

public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx

@@ -1,5 +1,4 @@
-import { useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { useId, useMemo } from 'react';
 
 import { Trans, t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
@@ -43,20 +42,24 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
   public useEditPaneOptions(isNewElement: boolean): OptionsPaneCategoryDescriptor[] {
     const panel = this.panel;
     const layoutElement = panel.parent!;
+    const rootId = useId();
+    const titleId = useId();
+    const descriptionId = useId();
+    const backgroundId = useId();
 
     const panelOptions = useMemo(() => {
       return new OptionsPaneCategoryDescriptor({ title: '', id: 'panel-options' })
         .addItem(
           new OptionsPaneItemDescriptor({
             title: '',
-            id: uuidv4(),
+            id: rootId,
             render: () => <OpenPanelEditViz panel={this.panel} />,
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.title-option', 'Title'),
-            id: uuidv4(),
+            id: titleId,
             value: panel.state.title,
             popularRank: 1,
             render: (descriptor) => (
@@ -67,7 +70,7 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.description', 'Description'),
-            id: uuidv4(),
+            id: descriptionId,
             value: panel.state.description,
             render: (descriptor) => <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />,
           })
@@ -75,11 +78,11 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.transparent-background', 'Transparent background'),
-            id: uuidv4(),
+            id: backgroundId,
             render: (descriptor) => <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />,
           })
         );
-    }, [panel, isNewElement]);
+    }, [rootId, titleId, panel, descriptionId, backgroundId, isNewElement]);
 
     const layoutCategories = useMemo(
       () => (isDashboardLayoutItem(layoutElement) && layoutElement.getOptions ? layoutElement.getOptions() : []),

public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { useCallback, useId, useMemo, useRef } from 'react';
 
 import { t } from '@grafana/i18n';
 import { MultiValueVariable, SceneVariableValueChangedEvent } from '@grafana/scenes';
@@ -8,6 +7,11 @@ import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
 export function useVariableSelectionOptionsCategory(variable: MultiValueVariable): OptionsPaneCategoryDescriptor {
+  const multiValueId = useId();
+  const includeAllId = useId();
+  const customAllValueId = useId();
+  const allowCustomId = useId();
+
   return useMemo(() => {
     return new OptionsPaneCategoryDescriptor({
       title: t('dashboard.edit-pane.variable.selection-options.category', 'Selection options'),
@@ -17,14 +21,14 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.multi-value', 'Multi-value'),
-          id: uuidv4(),
+          id: multiValueId,
           render: (descriptor) => <MultiValueSwitch id={descriptor.props.id} variable={variable} />,
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.include-all', 'Include All value'),
-          id: uuidv4(),
+          id: includeAllId,
           description: t(
             'dashboard.edit-pane.variable.selection-options.include-all-description',
             'Enables a single option that represent all values'
@@ -35,7 +39,7 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.custom-all-value', 'Custom all value'),
-          id: uuidv4(),
+          id: customAllValueId,
           description: t(
             'dashboard.edit-pane.variable.selection-options.custom-all-value-description',
             'A wildcard regex or other value to represent All'
@@ -49,7 +53,7 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.allow-custom-values', 'Allow custom values'),
-          id: uuidv4(),
+          id: allowCustomId,
           description: t(
             'dashboard.edit-pane.variable.selection-options.allow-custom-values-description',
             'Enables users to enter values'
@@ -57,7 +61,7 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
           render: (descriptor) => <AllowCustomSwitch id={descriptor.props.id} variable={variable} />,
         })
       );
-  }, [variable]);
+  }, [allowCustomId, customAllValueId, includeAllId, multiValueId, variable]);
 }
 
 interface InputProps {