fix some ids

2025-08-26 13:00:40 +01:00
parent 5d97dbf088
commit c5a25fa0bd
6 changed files with 40 additions and 20 deletions
@@ -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: () => <GridLayoutColumns layoutManager={layoutManager} />,
@@ -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: () => <GridLayoutRows layoutManager={layoutManager} />,
@@ -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';
@@ -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: () => <RowTitleInput row={model} isNewElement={isNewElement} />,
          })
@@ -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) => <FillScreenSwitch id={descriptor.props.id} row={model} />,
          })
        )
        .addItem(
          new OptionsPaneItemDescriptor({
            title: t('dashboard.rows-layout.row-options.row.hide-header', 'Hide row header'),
-            id: uuidv4(),
+            id: hideRowHeaderId,
            render: (descriptor) => <RowHeaderSwitch id={descriptor.props.id} row={model} />,
          })
        ),
-    [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) => <RowRepeatSelect id={descriptor.props.id} row={model} />,
        })
      ),
-    [model]
+    [model, repeatCategoryId]
  );

  const layoutCategory = useLayoutCategory(layout);
@@ -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: () => <RowHeaderCheckboxMulti model={model} />,
    })
  );
@@ -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: () => <DashboardLayoutSelector layoutManager={layoutManager} />,
      })
@@ -77,6 +83,7 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
      groupLayout.addItem(
        new OptionsPaneItemDescriptor({
          title: '',
+          id: groupLayoutId,
          skipField: true,
          render: () => <DashboardLayoutSelector layoutManager={layoutManager} />,
        })
@@ -95,5 +102,5 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
    }

    return [groupLayout, gridLayout];
-  }, [layoutManager]);
+  }, [gridLayoutCategoryId, gridLayoutId, groupLayoutCategoryId, groupLayoutId, layoutManager]);
 }
@@ -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]);
  }
 }