From 1dc403689f205a6e5bd5203cc481eb35120a8a16 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 26 Aug 2025 11:19:59 +0100 Subject: [PATCH] use useId in some places --- .../edit-pane/DashboardEditableElement.tsx | 9 ++++----- .../edit-pane/VizPanelEditableElement.tsx | 17 ++++++++++------- .../useVariableSelectionOptionsCategory.tsx | 18 +++++++++++------- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx index 730c16aa410..85ac93b5657 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx +++ b/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); diff --git a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx index c5c55bbaf61..3138cb75348 100644 --- a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx +++ b/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: () => , }) ) .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) => , }) @@ -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) => , }) ); - }, [panel, isNewElement]); + }, [rootId, titleId, panel, descriptionId, backgroundId, isNewElement]); const layoutCategories = useMemo( () => (isDashboardLayoutItem(layoutElement) && layoutElement.getOptions ? layoutElement.getOptions() : []), diff --git a/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx b/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx index 21fffe38917..429c9221998 100644 --- a/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx +++ b/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) => , }) ) .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) => , }) ); - }, [variable]); + }, [allowCustomId, customAllValueId, includeAllId, multiValueId, variable]); } interface InputProps {