diff --git a/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx b/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx index 8d0a0614778..30b958a1642 100644 --- a/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx +++ b/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx @@ -1,5 +1,3 @@ -import { v4 as uuidv4 } from 'uuid'; - import { t } from '@grafana/i18n'; import { Icon, Stack, Tooltip } from '@grafana/ui'; import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; @@ -56,7 +54,7 @@ export function useConditionalRenderingEditor( }).addItem( new OptionsPaneItemDescriptor({ title, - id: uuidv4(), + id: 'conditional-rendering-options-item', render: () => , }) ); diff --git a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx index a46c113c7c9..c78b7a1a6b1 100644 --- a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx +++ b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { CoreApp } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; @@ -38,7 +37,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard-scene.get-panel-frame-options.title.title', 'Title'), - id: uuidv4(), + id: 'panel-frame-options-title', value: panel.state.title, popularRank: 1, render: function renderTitle(descriptor) { @@ -56,7 +55,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard-scene.get-panel-frame-options.title.description', 'Description'), - id: uuidv4(), + id: 'panel-frame-options-description', value: panel.state.description, render: function renderDescription(descriptor) { return ; @@ -72,7 +71,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard-scene.get-panel-frame-options.title.transparent-background', 'Transparent background'), - id: uuidv4(), + id: 'panel-frame-options-transparent-bg', render: function renderTransparent(descriptor) { return ; }, @@ -87,7 +86,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard-scene.get-panel-frame-options.title.panel-links', 'Panel links'), - id: uuidv4(), + id: 'panel-frame-options-panel-links', render: () => , }) ) diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx index 93804685fcb..0d7b7d8138c 100644 --- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx @@ -1,5 +1,3 @@ -import { v4 as uuidv4 } from 'uuid'; - import { t } from '@grafana/i18n'; import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor'; import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor'; @@ -18,7 +16,7 @@ export function getOptions(model: AutoGridItem): OptionsPaneCategoryDescriptor[] }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.auto-grid.item-options.repeat.variable.title', 'Repeat by variable'), - id: uuidv4(), + id: 'auto-grid-repeat-by-variable', description: t( 'dashboard.auto-grid.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.' diff --git a/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx b/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx index 58db7ebb8da..88b5ed11fbd 100644 --- a/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx +++ b/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx @@ -1,5 +1,4 @@ import { useMemo } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { selectors } from '@grafana/e2e-selectors'; import { Trans, t } from '@grafana/i18n'; @@ -47,7 +46,7 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.default-layout.row-options.form.title', 'Title'), - id: uuidv4(), + id: 'row-options-title', render: (descriptor) => , }) ); @@ -63,7 +62,7 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.default-layout.row-options.repeat.variable.title', 'Variable'), - id: uuidv4(), + id: 'row-options-repeat-variable', render: (descriptor) => , }) ); diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx index 0c34c8a7776..ba88110e4a2 100644 --- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx +++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx @@ -1,5 +1,4 @@ import { useMemo } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { selectors } from '@grafana/e2e-selectors'; import { Trans, t } from '@grafana/i18n'; @@ -25,7 +24,7 @@ export function useEditOptions(model: TabItem, isNewElement: boolean): OptionsPa new OptionsPaneCategoryDescriptor({ title: '', id: 'tab-item-options' }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.tabs-layout.tab-options.title-option', 'Title'), - id: uuidv4(), + id: 'tab-options-title', render: (descriptor) => , }) ), @@ -41,7 +40,7 @@ export function useEditOptions(model: TabItem, isNewElement: boolean): OptionsPa }).addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.tabs-layout.tab-options.repeat.variable.title', 'Repeat by variable'), - id: uuidv4(), + id: 'tab-options-repeat-variable', description: t( 'dashboard.tabs-layout.tab-options.repeat.variable.description', 'Repeat this tab for each value in the selected variable.' diff --git a/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx index 71e001ddd84..f11037fb80c 100644 --- a/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx +++ b/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx @@ -1,6 +1,5 @@ import { FormEvent } from 'react'; import { lastValueFrom } from 'rxjs'; -import { v4 as uuidv4 } from 'uuid'; import { selectors } from '@grafana/e2e-selectors'; import { Trans, t } from '@grafana/i18n'; @@ -81,7 +80,7 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt return [ new OptionsPaneItemDescriptor({ title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'), - id: uuidv4(), + id: 'custom-variable-values', render: (descriptor) => , }), ]; diff --git a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx index dac8fddbf33..e741d7c2eb5 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx @@ -1,6 +1,5 @@ import { FormEvent } from 'react'; import { lastValueFrom } from 'rxjs'; -import { v4 as uuidv4 } from 'uuid'; import { t } from '@grafana/i18n'; import { ConstantVariable, SceneVariable } from '@grafana/scenes'; @@ -32,7 +31,7 @@ export function getConstantVariableOptions(variable: SceneVariable): OptionsPane return [ new OptionsPaneItemDescriptor({ title: t('dashboard-scene.constant-variable-form.label-value', 'Value'), - id: uuidv4(), + id: 'constant-variable-value', render: (descriptor) => , }), ]; diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx index 3068607597f..d7db272b5ab 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx @@ -1,6 +1,5 @@ import { FormEvent } from 'react'; import { lastValueFrom } from 'rxjs'; -import { v4 as uuidv4 } from 'uuid'; import { selectors } from '@grafana/e2e-selectors'; import { t } from '@grafana/i18n'; @@ -59,7 +58,7 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt return [ new OptionsPaneItemDescriptor({ title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'), - id: uuidv4(), + id: 'custom-variable-values', render: ({ props }) => , }), ]; diff --git a/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx index 249ad3b2f6c..ac9640d50e9 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx @@ -1,6 +1,5 @@ import React, { FormEvent } from 'react'; import { lastValueFrom } from 'rxjs'; -import { v4 as uuidv4 } from 'uuid'; import { SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; @@ -81,12 +80,12 @@ export function getDataSourceVariableOptions(variable: SceneVariable): OptionsPa return [ new OptionsPaneItemDescriptor({ title: t('dashboard.edit-pane.variable.datasource-options.type', 'Type'), - id: uuidv4(), + id: 'datasource-options-type', render: ({ props }) => , }), new OptionsPaneItemDescriptor({ title: t('dashboard.edit-pane.variable.datasource-options.name-filter', 'Name filter'), - id: uuidv4(), + id: 'datasource-options-name-filter', description: t( 'dashboard.edit-pane.variable.datasource-options.name-filter-description', 'Regex filter for which data source instances to include. Leave empty for all.' diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx index e5a1b07aa9e..4c7285ff98a 100644 --- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx +++ b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx @@ -1,7 +1,6 @@ import { css } from '@emotion/css'; import { cloneDeep } from 'lodash'; import * as React from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { FieldConfigOptionsRegistry, @@ -123,7 +122,7 @@ export function getFieldOverrideCategories( /** * Add override matcher UI element */ - const htmlId = uuidv4(); + const htmlId = `${overrideId}-matcher`; category.addItem( new OptionsPaneItemDescriptor({ id: htmlId, @@ -170,7 +169,7 @@ export function getFieldOverrideCategories( onOverrideChange(idx, { ...override, properties: override.properties.filter((_, i) => i !== propIdx) }); }; - const htmlId = `${overrideId}-${property.id}`; + const htmlId = `${overrideId}-property-${property.id}`; /** * Add override property item diff --git a/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx index 019d0d79d10..0d4fb748131 100644 --- a/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx +++ b/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx @@ -1,5 +1,3 @@ -import { v4 as uuidv4 } from 'uuid'; - import { t } from '@grafana/i18n'; import { Input } from '@grafana/ui'; import { LibraryPanelInformation } from 'app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo'; @@ -26,7 +24,7 @@ export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): Op .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.get-library-panel-options-category.title.name', 'Name'), - id: uuidv4(), + id: 'library-panel-name', value: panel.libraryPanel.name, popularRank: 1, render: function renderName(descriptor) { @@ -45,7 +43,7 @@ export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): Op .addItem( new OptionsPaneItemDescriptor({ title: t('dashboard.get-library-panel-options-category.title.information', 'Information'), - id: uuidv4(), + id: 'library-panel-information', render: function renderLibraryPanelInformation() { return ; }, diff --git a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx index c5c3207cb9e..af1a7f4989f 100644 --- a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx +++ b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx @@ -1,5 +1,4 @@ import { get as lodashGet } from 'lodash'; -import { v4 as uuiv4 } from 'uuid'; import { EventBus, @@ -94,7 +93,7 @@ export function getVisualizationOptions(props: OptionPaneRenderProps): OptionsPa }; // Load the options into categories - fillOptionsPaneItems(plugin.getPanelOptionsSupplier(), access, getOptionsPaneCategory, context); + fillOptionsPaneItems(plugin.meta.id, plugin.getPanelOptionsSupplier(), access, getOptionsPaneCategory, context); /** * Field options @@ -241,7 +240,7 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options }); // Load the options into categories - fillOptionsPaneItems(plugin.getPanelOptionsSupplier(), access, getOptionsPaneCategory, context); + fillOptionsPaneItems(plugin.meta.id, plugin.getPanelOptionsSupplier(), access, getOptionsPaneCategory, context); // Field options const currentFieldConfig = panel.state.fieldConfig; @@ -299,6 +298,7 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options * @internal */ export function fillOptionsPaneItems( + idPrefix: string, supplier: PanelOptionsSupplier, access: NestedValueAccess, getOptionsPaneCategory: categoryGetter, @@ -313,6 +313,8 @@ export function fillOptionsPaneItems( continue; } + const htmlId = `${idPrefix}-${pluginOption.id}`; + let category = parentCategory; if (!category) { category = getOptionsPaneCategory(pluginOption.category); @@ -328,6 +330,7 @@ export function fillOptionsPaneItems( : { ...context, options: access.getValue(pluginOption.path) }; fillOptionsPaneItems( + htmlId, pluginOption.getBuilder(), subAccess, getOptionsPaneCategory, @@ -337,8 +340,6 @@ export function fillOptionsPaneItems( continue; } - const htmlId = uuiv4(); - const Editor = pluginOption.editor; category.addItem( new OptionsPaneItemDescriptor({ diff --git a/public/app/features/transformers/spatial/optionsHelper.tsx b/public/app/features/transformers/spatial/optionsHelper.tsx index fc0cb061ffb..8b720bfe3c4 100644 --- a/public/app/features/transformers/spatial/optionsHelper.tsx +++ b/public/app/features/transformers/spatial/optionsHelper.tsx @@ -41,7 +41,7 @@ export function getTransformerOptionPane( }; // Use the panel options loader - fillOptionsPaneItems(supplier, access, getOptionsPaneCategory, context); + fillOptionsPaneItems('spatial-transformer', supplier, access, getOptionsPaneCategory, context); return root; } diff --git a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx index 817bfa1c0a3..10dbe857dfd 100644 --- a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx +++ b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx @@ -174,7 +174,7 @@ function getOptionsPaneCategoryDescriptor( }; // Use the panel options loader - fillOptionsPaneItems(supplier, access, getOptionsPaneCategory, context); + fillOptionsPaneItems('canvas-inline', supplier, access, getOptionsPaneCategory, context); return root; }