From c5a25fa0bdd354fc6c58b795735363b2604769e1 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 26 Aug 2025 13:00:40 +0100 Subject: [PATCH] fix some ids --- .../AutoGridLayoutManagerEditor.tsx | 2 ++ .../DashboardGridItemEditor.tsx | 9 ++++---- .../scene/layout-rows/RowItemEditor.tsx | 21 ++++++++++++------- .../scene/layout-rows/RowItemsEditor.tsx | 4 +++- .../DashboardLayoutSelector.tsx | 15 +++++++++---- .../LocalVariableEditableElement.tsx | 9 +++++--- 6 files changed, 40 insertions(+), 20 deletions(-) diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx index 76dfd63d364..fb2416f437c 100644 --- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx @@ -15,6 +15,7 @@ export function getEditOptions(layoutManager: AutoGridLayoutManager): OptionsPan options.push( new OptionsPaneItemDescriptor({ + id: 'layout-auto-grid-column-options', title: t('dashboard-scene.get-edit-options.title.column-options', 'Column options'), skipField: true, render: () => , @@ -23,6 +24,7 @@ export function getEditOptions(layoutManager: AutoGridLayoutManager): OptionsPan options.push( new OptionsPaneItemDescriptor({ + id: 'layout-auto-grid-row-height', title: t('dashboard-scene.get-edit-options.title.row-height-options', 'Row height options'), skipField: true, render: () => , diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx index 9f822fe01e7..d51b58d52dd 100644 --- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx @@ -1,5 +1,4 @@ import { useCallback } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { SelectableValue } from '@grafana/data'; import { t } from '@grafana/i18n'; @@ -15,15 +14,16 @@ import { dashboardEditActions } from '../../edit-pane/shared'; import { DashboardGridItem } from './DashboardGridItem'; export function getDashboardGridItemOptions(gridItem: DashboardGridItem): OptionsPaneCategoryDescriptor[] { + const categoryId = 'repeat-options'; const repeatCategory = new OptionsPaneCategoryDescriptor({ title: t('dashboard.default-layout.item-options.repeat.title', 'Repeat options'), - id: 'Repeat options', + id: categoryId, isOpenDefault: false, }) .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.default-layout.item-options.repeat.variable.title', 'Repeat by variable'), - id: uuidv4(), + id: `${categoryId}-repeat-by-variable`, description: t( 'dashboard.default-layout.item-options.repeat.variable.description', 'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.' @@ -34,6 +34,7 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.default-layout.item-options.repeat.direction.title', 'Repeat direction'), + id: `${categoryId}-repeat-direction`, useShowIf: () => { const { variableName } = gridItem.useState(); return Boolean(variableName); @@ -44,7 +45,7 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.default-layout.item-options.repeat.max', 'Max per row'), - id: uuidv4(), + id: `${categoryId}-max-per-row`, useShowIf: () => { const { variableName, repeatDirection } = gridItem.useState(); return Boolean(variableName) && repeatDirection === 'h'; diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx index a05393bca37..a981cdcacdb 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx @@ -1,5 +1,4 @@ import { useId, useMemo } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { selectors } from '@grafana/e2e-selectors'; import { Trans, t } from '@grafana/i18n'; @@ -19,13 +18,19 @@ import { RowItem } from './RowItem'; export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPaneCategoryDescriptor[] { const { layout } = model.useState(); + const rowCategoryId = useId(); + const repeatCategoryId = useId(); + const rowTitleId = useId(); + const fillScreenId = useId(); + const hideRowHeaderId = useId(); const rowCategory = useMemo( () => - new OptionsPaneCategoryDescriptor({ title: '', id: 'row-options' }) + new OptionsPaneCategoryDescriptor({ title: '', id: rowCategoryId }) .addItem( new OptionsPaneItemDescriptor({ title: '', + id: rowTitleId, skipField: true, render: () => , }) @@ -33,30 +38,30 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.rows-layout.row-options.row.fill-screen', 'Fill screen'), - id: uuidv4(), + id: fillScreenId, render: (descriptor) => , }) ) .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.rows-layout.row-options.row.hide-header', 'Hide row header'), - id: uuidv4(), + id: hideRowHeaderId, render: (descriptor) => , }) ), - [model, isNewElement] + [rowCategoryId, rowTitleId, fillScreenId, hideRowHeaderId, model, isNewElement] ); const repeatCategory = useMemo( () => new OptionsPaneCategoryDescriptor({ title: t('dashboard.rows-layout.row-options.repeat.title', 'Repeat options'), - id: 'repeat-options', + id: repeatCategoryId, isOpenDefault: false, }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.rows-layout.row-options.repeat.variable.title', 'Repeat by variable'), - id: uuidv4(), + id: `${repeatCategoryId}-repeat-by-variable`, description: t( 'dashboard.rows-layout.row-options.repeat.variable.description', 'Repeat this row for each value in the selected variable.' @@ -64,7 +69,7 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa render: (descriptor) => , }) ), - [model] + [model, repeatCategoryId] ); const layoutCategory = useLayoutCategory(layout); diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx index 4ff26a780ae..8524589b993 100644 --- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemsEditor.tsx @@ -6,9 +6,11 @@ import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/Pan import { RowItems } from './RowItems'; export function getEditOptions(model: RowItems): OptionsPaneCategoryDescriptor[] { - const options = new OptionsPaneCategoryDescriptor({ title: '', id: `rows-options` }).addItem( + const categoryId = 'rows-options'; + const options = new OptionsPaneCategoryDescriptor({ title: '', id: categoryId }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.edit-pane.row.header.title', 'Row header'), + id: `${categoryId}-row-header`, render: () => , }) ); diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx b/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx index 30ad47a3879..4fea265394b 100644 --- a/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx +++ b/public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx @@ -1,4 +1,4 @@ -import { useCallback, useMemo } from 'react'; +import { useCallback, useId, useMemo } from 'react'; import { t } from '@grafana/i18n'; import { RadioButtonGroup, Box } from '@grafana/ui'; @@ -45,24 +45,30 @@ export function DashboardLayoutSelector({ layoutManager }: Props) { ); } export function useLayoutCategory(layoutManager: DashboardLayoutManager) { + const groupLayoutCategoryId = useId(); + const groupLayoutId = useId(); + const gridLayoutCategoryId = useId(); + const gridLayoutId = useId(); + return useMemo(() => { const isGridLayout = layoutManager.descriptor.isGridLayout; const groupLayout = new OptionsPaneCategoryDescriptor({ title: t('dashboard.layout.common.group-layout', 'Group layout'), - id: 'group-layout-category', + id: groupLayoutCategoryId, isOpenDefault: false, }); const gridLayout = new OptionsPaneCategoryDescriptor({ title: t('dashboard.layout.common.panel-layout', 'Panel layout'), - id: 'grid-layout-category', + id: gridLayoutCategoryId, isOpenDefault: false, }); gridLayout.addItem( new OptionsPaneItemDescriptor({ title: '', + id: gridLayoutId, skipField: true, render: () => , }) @@ -77,6 +83,7 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) { groupLayout.addItem( new OptionsPaneItemDescriptor({ title: '', + id: groupLayoutId, skipField: true, render: () => , }) @@ -95,5 +102,5 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) { } return [groupLayout, gridLayout]; - }, [layoutManager]); + }, [gridLayoutCategoryId, gridLayoutId, groupLayoutCategoryId, groupLayoutId, layoutManager]); } diff --git a/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx b/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx index 0495c4c3a8a..10a4dc84b95 100644 --- a/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx +++ b/public/app/features/dashboard-scene/settings/variables/LocalVariableEditableElement.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useId, useMemo } from 'react'; import { t } from '@grafana/i18n'; import { LocalValueVariable } from '@grafana/scenes'; @@ -24,16 +24,19 @@ export class LocalVariableEditableElement implements EditableDashboardElement { public useEditPaneOptions(): OptionsPaneCategoryDescriptor[] { const variable = this.variable; + const localVariableCategoryId = useId(); + const localVariableId = useId(); return useMemo(() => { const category = new OptionsPaneCategoryDescriptor({ title: '', - id: 'local-variable-options', + id: localVariableCategoryId, }); category.addItem( new OptionsPaneItemDescriptor({ title: '', + id: localVariableId, skipField: true, render: () => { return ( @@ -52,6 +55,6 @@ export class LocalVariableEditableElement implements EditableDashboardElement { ); return [category]; - }, [variable]); + }, [localVariableCategoryId, localVariableId, variable]); } }