public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert: "Accessibility: Ensure dashboard edit panel inputs have accessible labels" (#109984)

Browse Source 
* Revert "Accessibility: Ensure dashboard edit panel inputs have accessible labels (#109546)"

This reverts commit 4d067059c9.

* kick CI
This commit is contained in:
Luminessa Starlight
2025-08-21 15:23:23 -04:00
committed by GitHub
parent e91c12db64
commit 7331a2e8c3
61 changed files with 166 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e-playwright/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
+1 -1
View File
@@ -34,7 +34,7 @@ test.describe(
const initialBackground = await panelTitle.evaluate((el) => getComputedStyle(el).background);
expect(initialBackground).not.toMatch(/rgba\(0, 0, 0, 0\)/);
await page.getByRole('switch', { name: 'Transparent background' }).click({ force: true });
await page.locator('#transparent-background').click({ force: true });
const transparentBackground = await panelTitle.evaluate((el) => getComputedStyle(el).background);
expect(transparentBackground).toMatch(/rgba\(0, 0, 0, 0\)/);
e2e-playwright/panels-suite/table-kitchenSink.spec.ts
+2 -2
View File
@@ -95,8 +95,8 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
await dashboardPage
.getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Cell options Cell value inspect'))
.first()
.getByRole('switch', { name: 'Cell value inspect' })
.click({ force: true });
.locator('label[for="custom.inspect"]')
.click();
await loremIpsumCell.hover();
await expect(getCellHeight(page, 1, longTextColIdx)).resolves.toBeLessThan(100);
e2e/old-arch/panels-suite/geomap-map-controls.spec.ts
+5 -5
View File
@@ -17,35 +17,35 @@ describe('Geomap layer controls options', () => {
e2e.components.PanelEditor.showZoomField()
.should('be.visible')
.within(() => {
cy.get('input[type="checkbox"]').check({ force: true });
cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
});
// Show attribution
e2e.components.PanelEditor.showAttributionField()
.should('be.visible')
.within(() => {
cy.get('input[type="checkbox"]').check({ force: true });
cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
});
// Show scale
e2e.components.PanelEditor.showScaleField()
.should('be.visible')
.within(() => {
cy.get('input[type="checkbox"]').check({ force: true });
cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
});
// Show measure tool
e2e.components.PanelEditor.showMeasureField()
.should('be.visible')
.within(() => {
cy.get('input[type="checkbox"]').check({ force: true });
cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
});
// Show debug
e2e.components.PanelEditor.showDebugField()
.should('be.visible')
.within(() => {
cy.get('input[type="checkbox"]').check({ force: true });
cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
});
e2e.components.Panels.Panel.content({ timeout: TIMEOUT })
packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+1 -2
View File
@@ -37,7 +37,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
pickerTriggerRef = createRef<any>();
render() {
const { theme, children, onChange, color, id } = this.props;
const { theme, children, onChange, color } = this.props;
const styles = getStyles(theme);
const popoverElement = React.createElement(popover, {
...{ ...this.props, children: null },
@@ -67,7 +67,6 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
})
) : (
<ColorSwatch
id={id}
ref={this.pickerTriggerRef}
onClick={showPopper}
onMouseLeave={hidePopper}
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
-1
View File
@@ -22,7 +22,6 @@ export interface ColorPickerProps extends Themeable2 {
color: string;
onChange: ColorPickerChangeHandler;
enableNamedColors?: boolean;
id?: string;
}
export interface Props<T> extends ColorPickerProps, PopoverContentProps {
packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
+1 -2
View File
@@ -10,7 +10,7 @@ import { useFieldDisplayNames, useSelectOptions, frameHasName } from './utils';
type Props = StandardEditorProps<string, FieldNamePickerConfigSettings>;
// Pick a field name out of the fields
export const FieldNamePicker = ({ value, onChange, context, item, id }: Props) => {
export const FieldNamePicker = ({ value, onChange, context, item }: Props) => {
const settings: FieldNamePickerConfigSettings = item.settings ?? {};
const names = useFieldDisplayNames(context.data, settings?.filter);
const selectOptions = useSelectOptions(names, value, undefined, undefined, settings.baseNameMode);
@@ -29,7 +29,6 @@ export const FieldNamePicker = ({ value, onChange, context, item, id }: Props) =
return (
<>
<Select
inputId={id}
value={selectedOption}
placeholder={
settings.placeholderText ?? t('grafana-ui.matchers-ui.field-name-picker.placeholder', 'Select field')
packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
+2 -6
View File
@@ -41,11 +41,10 @@ export interface Props {
data: DataFrame[];
onChange: (value: string) => void;
placeholder?: string;
id?: string;
}
// Not exported globally... but used in grafana core
export function RefIDPicker({ value, data, onChange, placeholder, id }: Props) {
export function RefIDPicker({ value, data, onChange, placeholder }: Props) {
const listOfRefIds = useMemo(() => getListOfQueryRefIds(data), [data]);
const [priorSelectionState, updatePriorSelectionState] = useState<{
@@ -78,7 +77,6 @@ export function RefIDPicker({ value, data, onChange, placeholder, id }: Props) {
}
return (
<Select
inputId={id}
options={listOfRefIds}
onChange={onFilterChange}
isClearable={true}
@@ -116,10 +114,9 @@ export interface MultiProps {
data: DataFrame[];
onChange: (value: string[]) => void;
placeholder?: string;
id?: string;
}
export function RefIDMultiPicker({ value, data, onChange, placeholder, id }: MultiProps) {
export function RefIDMultiPicker({ value, data, onChange, placeholder }: MultiProps) {
const listOfRefIds = useMemo(() => getListOfQueryRefIds(data), [data]);
const [priorSelectionState, updatePriorSelectionState] = useState<{
@@ -175,7 +172,6 @@ export function RefIDMultiPicker({ value, data, onChange, placeholder, id }: Mul
}
return (
<MultiSelect
inputId={id}
options={listOfRefIds}
onChange={onFilterChange}
isClearable={true}
packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+1 -3
View File
@@ -9,7 +9,6 @@ export interface UnitPickerProps {
onChange: (item?: string) => void;
value?: string;
width?: number;
id?: string;
}
function formatCreateLabel(input: string) {
@@ -22,7 +21,7 @@ export class UnitPicker extends PureComponent<UnitPickerProps> {
};
render() {
const { value, width, id } = this.props;
const { value, width } = this.props;
// Set the current selection
let current: SelectableValue<string> | undefined = undefined;
@@ -57,7 +56,6 @@ export class UnitPicker extends PureComponent<UnitPickerProps> {
return (
<Cascader
id={id}
width={width}
initialValue={current && current.label}
allowCustomValue
public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx
-5
View File
@@ -44,9 +44,6 @@ export interface NestedFolderPickerProps {
/* Whether the picker should be clearable */
clearable?: boolean;
/* HTML ID for the button element for form labels */
id?: string;
}
const debouncedSearch = debounce(getSearchResults, 300);
@@ -71,7 +68,6 @@ export function NestedFolderPicker({
excludeUIDs,
permission = 'edit',
onChange,
id,
}: NestedFolderPickerProps) {
const styles = useStyles2(getStyles);
const selectedFolder = useGetFolderQueryFacade(value);
@@ -287,7 +283,6 @@ export function NestedFolderPicker({
if (!overlayOpen) {
return (
<Trigger
id={id}
label={labelComponent}
handleClearSelection={clearable && value !== undefined ? handleClearSelection : undefined}
invalid={invalid}
public/app/core/components/OptionsUI/NumberInput.tsx
-2
View File
@@ -5,7 +5,6 @@ import * as React from 'react';
import { Field, Input } from '@grafana/ui';
interface Props {
id?: string;
value?: number;
placeholder?: string;
autoFocus?: boolean;
@@ -102,7 +101,6 @@ export class NumberInput extends PureComponent<Props, State> {
return (
<Input
type="number"
id={this.props.id}
ref={this.inputRef}
min={this.props.min}
max={this.props.max}
public/app/core/components/OptionsUI/color.tsx
+1 -3
View File
@@ -14,7 +14,6 @@ export interface ColorValueEditorSettings {
}
interface Props {
id?: string;
value?: string;
onChange: (value: string | undefined) => void;
settings?: ColorValueEditorSettings;
@@ -26,7 +25,7 @@ interface Props {
/**
* @alpha
* */
export const ColorValueEditor = ({ value, settings, onChange, details, id }: Props) => {
export const ColorValueEditor = ({ value, settings, onChange, details }: Props) => {
const theme = useTheme2();
const styles = useStyles2(getStyles);
@@ -38,7 +37,6 @@ export const ColorValueEditor = ({ value, settings, onChange, details, id }: Pro
<div className={styles.colorPicker}>
<ColorSwatch
ref={ref}
id={id}
onClick={showColorPicker}
onMouseLeave={hideColorPicker}
color={value ? theme.visualization.getColorByName(value) : theme.components.input.borderColor}
public/app/core/components/OptionsUI/multiSelect.tsx
+1 -2
View File
@@ -55,12 +55,11 @@ export class MultiSelectValueEditor<T> extends PureComponent<Props<T>, State<T>>
render() {
const { options, isLoading } = this.state;
const { value, onChange, item, id } = this.props;
const { value, onChange, item } = this.props;
const { settings } = item;
return (
<MultiSelect<T>
inputId={id}
isLoading={isLoading}
value={value}
defaultValue={value}
public/app/core/components/OptionsUI/number.tsx
+1 -2
View File
@@ -6,7 +6,7 @@ import { NumberInput } from './NumberInput';
type Props = StandardEditorProps<number, NumberFieldConfigSettings>;
export const NumberValueEditor = ({ value, onChange, item, id }: Props) => {
export const NumberValueEditor = ({ value, onChange, item }: Props) => {
const { settings } = item;
const onValueChange = useCallback(
@@ -18,7 +18,6 @@ export const NumberValueEditor = ({ value, onChange, item, id }: Props) => {
return (
<NumberInput
id={id}
value={value}
min={settings?.min}
max={settings?.max}
public/app/core/components/OptionsUI/select.tsx
+1 -2
View File
@@ -51,7 +51,7 @@ export class SelectValueEditor<T> extends PureComponent<Props<T>, State<T>> {
render() {
const { options, isLoading } = this.state;
const { value, onChange, item, id } = this.props;
const { value, onChange, item } = this.props;
const { settings } = item;
let current = options.find((v) => v.value === value);
@@ -63,7 +63,6 @@ export class SelectValueEditor<T> extends PureComponent<Props<T>, State<T>> {
}
return (
<Select<T>
inputId={id}
isLoading={isLoading}
value={current}
defaultValue={value}
public/app/core/components/OptionsUI/slider.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ import { NumberInput } from './NumberInput';
type Props = StandardEditorProps<number, SliderFieldConfigSettings>;
export const SliderValueEditor = ({ value, onChange, item, id }: Props) => {
export const SliderValueEditor = ({ value, onChange, item }: Props) => {
// Input reference
const inputRef = useRef<HTMLSpanElement>(null);
@@ -109,7 +109,7 @@ export const SliderValueEditor = ({ value, onChange, item, id }: Props) => {
included={included}
/>
<span className={stylesSlider.numberInputWrapper} ref={inputRef}>
<NumberInput id={id} value={sliderValue} onChange={onSliderInputChange} max={max} min={min} step={step} />
<NumberInput value={sliderValue} onChange={onSliderInputChange} max={max} min={min} step={step} />
</span>
</div>
</div>
public/app/core/components/OptionsUI/string.tsx
+1 -2
View File
@@ -8,7 +8,7 @@ interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
suffix?: ReactNode;
}
export const StringValueEditor = ({ value, onChange, item, suffix, id }: Props) => {
export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
const Component = item.settings?.useTextarea ? TextArea : Input;
const onValueChange = useCallback(
(
@@ -36,7 +36,6 @@ export const StringValueEditor = ({ value, onChange, item, suffix, id }: Props)
return (
<Component
id={id}
placeholder={item.settings?.placeholder}
defaultValue={value || ''}
rows={(item.settings?.useTextarea && item.settings.rows) || 5}
public/app/core/components/OptionsUI/units.tsx
+3 -3
View File
@@ -6,14 +6,14 @@ import { IconButton, UnitPicker, useStyles2 } from '@grafana/ui';
type Props = StandardEditorProps<string, UnitFieldConfigSettings>;
export function UnitValueEditor({ value, onChange, item, id }: Props) {
export function UnitValueEditor({ value, onChange, item }: Props) {
const styles = useStyles2(getStyles);
if (item?.settings?.isClearable && value != null) {
return (
<div className={styles.wrapper}>
<span className={styles.first}>
<UnitPicker value={value} onChange={onChange} id={id} />
<UnitPicker value={value} onChange={onChange} />
</span>
<IconButton
name="times"
@@ -23,7 +23,7 @@ export function UnitValueEditor({ value, onChange, item, id }: Props) {
</div>
);
}
return <UnitPicker value={value} onChange={onChange} id={id} />;
return <UnitPicker value={value} onChange={onChange} />;
}
const getStyles = (theme: GrafanaTheme2) => ({
public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
-3
View File
@@ -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,6 @@ export function useConditionalRenderingEditor(
}).addItem(
new OptionsPaneItemDescriptor({
title,
id: uuidv4(),
render: () => <conditionalRenderingToRender.Component model={conditionalRenderingToRender} />,
})
);
public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import { ReactNode, useMemo, useRef } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { Trans, t } from '@grafana/i18n';
import { SceneObject } from '@grafana/scenes';
@@ -39,8 +38,8 @@ export class DashboardEditableElement implements EditableDashboardElement {
const { body } = dashboard.useState();
const dashboardOptions = useMemo(() => {
const dashboardTitleInputId = uuidv4();
const dashboardDescriptionInputId = uuidv4();
const dashboardTitleInputId = 'dashboard-title-input';
const dashboardDescriptionInputId = 'dashboard-description-input';
const editPaneHeaderOptions = new OptionsPaneCategoryDescriptor({ title: '', id: 'dashboard-options' })
.addItem(
new OptionsPaneItemDescriptor({
public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
+6 -6
View File
@@ -1,5 +1,4 @@
import { useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { Trans, t } from '@grafana/i18n';
import { locationService } from '@grafana/runtime';
@@ -49,14 +48,13 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
.addItem(
new OptionsPaneItemDescriptor({
title: '',
id: uuidv4(),
render: () => <OpenPanelEditViz panel={this.panel} />,
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.viz-panel.options.title-option', 'Title'),
id: uuidv4(),
id: 'PanelFrameTitle',
value: panel.state.title,
popularRank: 1,
render: (descriptor) => (
@@ -67,7 +65,7 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.viz-panel.options.description', 'Description'),
id: uuidv4(),
id: 'description-text-area',
value: panel.state.description,
render: (descriptor) => <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />,
})
@@ -75,7 +73,7 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.viz-panel.options.transparent-background', 'Transparent background'),
id: uuidv4(),
id: 'transparent-background',
render: (descriptor) => <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />,
})
);
@@ -135,7 +133,9 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
}
}
type OpenPanelEditVizProps = { panel: VizPanel };
type OpenPanelEditVizProps = {
panel: VizPanel;
};
const OpenPanelEditViz = ({ panel }: OpenPanelEditVizProps) => {
return (
public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
+3 -5
View File
@@ -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: 'PanelFrameTitle',
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: 'description-text-area',
value: panel.state.description,
render: function renderDescription(descriptor) {
return <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />;
@@ -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: 'transparent-background',
render: function renderTransparent(descriptor) {
return <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />;
},
@@ -87,7 +86,6 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
}).addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard-scene.get-panel-frame-options.title.panel-links', 'Panel links'),
id: uuidv4(),
render: () => <ScenePanelLinksEditor panelLinks={panelLinksObject ?? undefined} />,
})
)
public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
+1 -3
View File
@@ -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: 'repeat-by-variable-select',
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.'
public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
+3 -6
View File
@@ -1,5 +1,4 @@
import { useCallback } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { SelectableValue } from '@grafana/data';
import { t } from '@grafana/i18n';
@@ -23,7 +22,7 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.default-layout.item-options.repeat.variable.title', 'Repeat by variable'),
id: uuidv4(),
id: 'repeat-by-variable-select',
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.'
@@ -44,12 +43,11 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.default-layout.item-options.repeat.max', 'Max per row'),
id: uuidv4(),
useShowIf: () => {
const { variableName, repeatDirection } = gridItem.useState();
return Boolean(variableName) && repeatDirection === 'h';
},
render: (descriptor) => <MaxPerRowOption id={descriptor.props.id} gridItem={gridItem} />,
render: () => <MaxPerRowOption gridItem={gridItem} />,
})
);
@@ -92,7 +90,7 @@ function RepeatDirectionOption({ gridItem }: OptionComponentProps) {
);
}
function MaxPerRowOption({ gridItem, id }: OptionComponentProps & { id?: string }) {
function MaxPerRowOption({ gridItem }: OptionComponentProps) {
const { maxPerRow } = gridItem.useState();
const maxPerRowOptions: Array<SelectableValue<number>> = [2, 3, 4, 6, 8, 12].map((value) => ({
label: value.toString(),
@@ -101,7 +99,6 @@ function MaxPerRowOption({ gridItem, id }: OptionComponentProps & { id?: string
return (
<Select
id={id}
options={maxPerRowOptions}
value={maxPerRow ?? 4}
onChange={(value) => {
public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx
+5 -9
View File
@@ -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,8 +46,7 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu
}).addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.default-layout.row-options.form.title', 'Title'),
id: uuidv4(),
render: (descriptor) => <RowTitleInput id={descriptor.props.id} row={row} />,
render: () => <RowTitleInput row={row} />,
})
);
}, [row]);
@@ -63,8 +61,7 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu
}).addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.default-layout.row-options.repeat.variable.title', 'Variable'),
id: uuidv4(),
render: (descriptor) => <RowRepeatSelect id={descriptor.props.id} row={row} dashboard={dashboard} />,
render: () => <RowRepeatSelect row={row} dashboard={dashboard} />,
})
);
}, [row]);
@@ -81,13 +78,13 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu
}
}
function RowTitleInput({ row, id }: { row: SceneGridRow; id?: string }) {
function RowTitleInput({ row }: { row: SceneGridRow }) {
const { title } = row.useState();
return <Input id={id} value={title} onChange={(e) => row.setState({ title: e.currentTarget.value })} />;
return <Input value={title} onChange={(e) => row.setState({ title: e.currentTarget.value })} />;
}
function RowRepeatSelect({ row, dashboard, id }: { row: SceneGridRow; dashboard: DashboardScene; id?: string }) {
function RowRepeatSelect({ row, dashboard }: { row: SceneGridRow; dashboard: DashboardScene }) {
const { $behaviors, children } = row.useState();
let repeatBehavior = $behaviors?.find((b) => b instanceof RowRepeaterBehavior);
const vizPanels = useMemo(
@@ -107,7 +104,6 @@ function RowRepeatSelect({ row, dashboard, id }: { row: SceneGridRow; dashboard:
return (
<>
<RepeatRowSelect2
id={id}
sceneContext={dashboard}
repeat={repeatBehavior?.state.variableName}
onChange={(repeat) => {
public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
+9 -15
View File
@@ -1,5 +1,4 @@
import { useId, useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { useMemo } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Trans, t } from '@grafana/i18n';
@@ -33,15 +32,13 @@ 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(),
render: (descriptor) => <FillScreenSwitch id={descriptor.props.id} row={model} />,
render: () => <FillScreenSwitch row={model} />,
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.rows-layout.row-options.row.hide-header', 'Hide row header'),
id: uuidv4(),
render: (descriptor) => <RowHeaderSwitch id={descriptor.props.id} row={model} />,
render: () => <RowHeaderSwitch row={model} />,
})
),
[model, isNewElement]
@@ -56,12 +53,11 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa
}).addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.rows-layout.row-options.repeat.variable.title', 'Repeat by variable'),
id: uuidv4(),
description: t(
'dashboard.rows-layout.row-options.repeat.variable.description',
'Repeat this row for each value in the selected variable.'
),
render: (descriptor) => <RowRepeatSelect id={descriptor.props.id} row={model} />,
render: () => <RowRepeatSelect row={model} />,
})
),
[model]
@@ -98,7 +94,6 @@ function RowTitleInput({ row, isNewElement }: { row: RowItem; isNewElement: bool
}
>
<Input
id={useId()}
ref={ref}
title={t('dashboard.rows-layout.row-options.title-option', 'Title')}
value={title}
@@ -108,19 +103,19 @@ function RowTitleInput({ row, isNewElement }: { row: RowItem; isNewElement: bool
);
}
function RowHeaderSwitch({ row, id }: { row: RowItem; id?: string }) {
function RowHeaderSwitch({ row }: { row: RowItem }) {
const { hideHeader: isHeaderHidden = false } = row.useState();
return <Switch id={id} value={isHeaderHidden} onChange={() => row.onHeaderHiddenToggle()} />;
return <Switch value={isHeaderHidden} onChange={() => row.onHeaderHiddenToggle()} />;
}
function FillScreenSwitch({ row, id }: { row: RowItem; id?: string }) {
function FillScreenSwitch({ row }: { row: RowItem }) {
const { fillScreen } = row.useState();
return <Switch id={id} value={fillScreen} onChange={() => row.onChangeFillScreen(!fillScreen)} />;
return <Switch value={fillScreen} onChange={() => row.onChangeFillScreen(!fillScreen)} />;
}
function RowRepeatSelect({ row, id }: { row: RowItem; id?: string }) {
function RowRepeatSelect({ row }: { row: RowItem }) {
const { layout } = row.useState();
const dashboard = useDashboard(row);
@@ -136,7 +131,6 @@ function RowRepeatSelect({ row, id }: { row: RowItem; id?: string }) {
return (
<>
<RepeatRowSelect2
id={id}
sceneContext={dashboard}
repeat={row.state.repeatByVariable}
onChange={(repeat) => row.onChangeRepeat(repeat)}
public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx
+4 -9
View File
@@ -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,8 +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(),
render: (descriptor) => <TabTitleInput id={descriptor.props.id} tab={model} isNewElement={isNewElement} />,
render: () => <TabTitleInput tab={model} isNewElement={isNewElement} />,
})
),
[model, isNewElement]
@@ -41,12 +39,11 @@ 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(),
description: t(
'dashboard.tabs-layout.tab-options.repeat.variable.description',
'Repeat this tab for each value in the selected variable.'
),
render: (descriptor) => <TabRepeatSelect id={descriptor.props.id} tab={model} />,
render: () => <TabRepeatSelect tab={model} />,
})
),
[model]
@@ -68,7 +65,7 @@ export function useEditOptions(model: TabItem, isNewElement: boolean): OptionsPa
return editOptions;
}
function TabTitleInput({ tab, isNewElement, id }: { tab: TabItem; isNewElement: boolean; id?: string }) {
function TabTitleInput({ tab, isNewElement }: { tab: TabItem; isNewElement: boolean }) {
const { title } = tab.useState();
const ref = useEditPaneInputAutoFocus({ autoFocus: isNewElement });
@@ -82,7 +79,6 @@ function TabTitleInput({ tab, isNewElement, id }: { tab: TabItem; isNewElement:
}
>
<Input
id={id}
ref={ref}
title={t('dashboard.tabs-layout.tab-options.title-option', 'Title')}
value={title}
@@ -92,7 +88,7 @@ function TabTitleInput({ tab, isNewElement, id }: { tab: TabItem; isNewElement:
);
}
function TabRepeatSelect({ tab, id }: { tab: TabItem; id?: string }) {
function TabRepeatSelect({ tab }: { tab: TabItem }) {
const { layout } = tab.useState();
const dashboard = useDashboard(tab);
@@ -108,7 +104,6 @@ function TabRepeatSelect({ tab, id }: { tab: TabItem; id?: string }) {
return (
<>
<RepeatRowSelect2
id={id}
sceneContext={dashboard}
repeat={tab.state.repeatByVariable}
onChange={(repeat) => tab.onChangeRepeat(repeat)}
public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx
+6 -12
View File
@@ -1,5 +1,4 @@
import { FormEvent, useId, useMemo, useRef, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { FormEvent, useMemo, useRef, useState } from 'react';
import { VariableHide } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@@ -64,16 +63,14 @@ export class VariableEditableElement implements EditableDashboardElement, BulkAc
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.label', 'Label'),
id: uuidv4(),
description: t('dashboard.edit-pane.variable.label-description', 'Optional display name'),
render: (descriptor) => <VariableLabelInput id={descriptor.props.id} variable={variable} />,
render: () => <VariableLabelInput variable={variable} />,
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.description', 'Description'),
id: uuidv4(),
render: (descriptor) => <VariableDescriptionTextArea id={descriptor.props.id} variable={variable} />,
render: () => <VariableDescriptionTextArea variable={variable} />,
})
)
.addItem(
@@ -120,7 +117,6 @@ export class VariableEditableElement implements EditableDashboardElement, BulkAc
interface VariableInputProps {
variable: SceneVariable;
id?: string;
}
function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable; isNewElement: boolean }) {
@@ -142,7 +138,6 @@ function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable
return (
<Field label={t('dashboard.edit-pane.variable.name', 'Name')} invalid={!!nameError} error={nameError}>
<Input
id={useId()}
ref={ref}
value={name}
onFocus={() => {
@@ -176,13 +171,12 @@ function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable
);
}
function VariableLabelInput({ variable, id }: VariableInputProps) {
function VariableLabelInput({ variable }: VariableInputProps) {
const { label } = variable.useState();
const oldLabel = useRef(label ?? '');
return (
<Input
id={id}
value={label}
onFocus={() => {
oldLabel.current = label ?? '';
@@ -207,13 +201,13 @@ function VariableLabelInput({ variable, id }: VariableInputProps) {
);
}
function VariableDescriptionTextArea({ variable, id }: VariableInputProps) {
function VariableDescriptionTextArea({ variable }: VariableInputProps) {
const { description } = variable.useState();
const oldDescription = useRef(description ?? '');
return (
<TextArea
id={id}
id="description-text-area"
value={description ?? ''}
placeholder={t('dashboard.edit-pane.variable.description-placeholder', 'Descriptive text')}
onFocus={() => {
public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
+2 -5
View File
@@ -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,13 +80,12 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
return [
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'),
id: uuidv4(),
render: (descriptor) => <ValuesTextField id={descriptor.props.id} variable={variable} />,
render: () => <ValuesTextField variable={variable} />,
}),
];
}
function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: string }) {
function ValuesTextField({ variable }: { variable: CustomVariable }) {
const { query } = variable.useState();
const onBlur = async (event: FormEvent<HTMLTextAreaElement>) => {
@@ -97,7 +95,6 @@ function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: stri
return (
<TextArea
id={id}
rows={2}
defaultValue={query}
onBlur={onBlur}
public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
+2 -5
View File
@@ -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,13 +31,12 @@ export function getConstantVariableOptions(variable: SceneVariable): OptionsPane
return [
new OptionsPaneItemDescriptor({
title: t('dashboard-scene.constant-variable-form.label-value', 'Value'),
id: uuidv4(),
render: (descriptor) => <ConstantValueInput id={descriptor.props.id} variable={variable} />,
render: () => <ConstantValueInput variable={variable} />,
}),
];
}
function ConstantValueInput({ variable, id }: { variable: ConstantVariable; id?: string }) {
function ConstantValueInput({ variable }: { variable: ConstantVariable }) {
const { value } = variable.useState();
const onBlur = async (event: FormEvent<HTMLInputElement>) => {
@@ -48,7 +46,6 @@ function ConstantValueInput({ variable, id }: { variable: ConstantVariable; id?:
return (
<Input
id={id}
defaultValue={value.toString()}
onBlur={onBlur}
placeholder={t('dashboard-scene.constant-variable-form.placeholder-your-metric-prefix', 'Your metric prefix')}
public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx
+2 -5
View File
@@ -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,13 +58,12 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
return [
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'),
id: uuidv4(),
render: ({ props }) => <ValuesTextField id={props.id} variable={variable} />,
render: () => <ValuesTextField variable={variable} />,
}),
];
}
function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: string }) {
function ValuesTextField({ variable }: { variable: CustomVariable }) {
const { query } = variable.useState();
const onBlur = async (event: FormEvent<HTMLTextAreaElement>) => {
@@ -75,7 +73,6 @@ function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: stri
return (
<TextArea
id={id}
rows={2}
defaultValue={query}
onBlur={onBlur}
public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx
+4 -14
View File
@@ -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,27 +80,20 @@ export function getDataSourceVariableOptions(variable: SceneVariable): OptionsPa
return [
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.datasource-options.type', 'Type'),
id: uuidv4(),
render: ({ props }) => <DataSourceTypeSelect id={props.id} variable={variable} />,
render: () => <DataSourceTypeSelect variable={variable} />,
}),
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.datasource-options.name-filter', 'Name filter'),
id: uuidv4(),
description: t(
'dashboard.edit-pane.variable.datasource-options.name-filter-description',
'Regex filter for which data source instances to include. Leave empty for all.'
),
render: ({ props }) => <DataSourceNameFilter id={props.id} variable={variable} />,
render: () => <DataSourceNameFilter variable={variable} />,
}),
];
}
interface InputProps {
variable: DataSourceVariable;
id?: string;
}
function DataSourceTypeSelect({ variable, id }: InputProps) {
function DataSourceTypeSelect({ variable }: { variable: DataSourceVariable }) {
const { pluginId } = variable.useState();
const options = getOptionDataSourceTypes();
@@ -112,7 +104,6 @@ function DataSourceTypeSelect({ variable, id }: InputProps) {
return (
<Combobox
id={id}
options={options}
value={pluginId}
onChange={onChange}
@@ -122,7 +113,7 @@ function DataSourceTypeSelect({ variable, id }: InputProps) {
);
}
function DataSourceNameFilter({ variable, id }: InputProps) {
function DataSourceNameFilter({ variable }: { variable: DataSourceVariable }) {
const { regex } = variable.useState();
const onBlur = async (evt: React.FormEvent<HTMLInputElement>) => {
@@ -132,7 +123,6 @@ function DataSourceNameFilter({ variable, id }: InputProps) {
return (
<Input
id={id}
defaultValue={regex}
onBlur={onBlur}
data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.nameFilter}
public/app/features/dashboard-scene/settings/variables/editors/SystemVariableEditor.tsx
+1
View File
@@ -9,6 +9,7 @@ export function getSystemVariableOptions(variable: SceneVariable): OptionsPaneIt
return [
new OptionsPaneItemDescriptor({
title: '',
render: () => {
return (
<Stack direction="column">
public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
+11 -30
View File
@@ -1,5 +1,4 @@
import { useCallback, useMemo, useRef } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { t } from '@grafana/i18n';
import { MultiValueVariable, SceneVariableValueChangedEvent } from '@grafana/scenes';
@@ -17,25 +16,22 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.selection-options.multi-value', 'Multi-value'),
id: uuidv4(),
render: (descriptor) => <MultiValueSwitch id={descriptor.props.id} variable={variable} />,
render: () => <MultiValueSwitch variable={variable} />,
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.selection-options.include-all', 'Include All value'),
id: uuidv4(),
description: t(
'dashboard.edit-pane.variable.selection-options.include-all-description',
'Enables a single option that represent all values'
),
render: (descriptor) => <IncludeAllSwitch id={descriptor.props.id} variable={variable} />,
render: () => <IncludeAllSwitch variable={variable} />,
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.selection-options.custom-all-value', 'Custom all value'),
id: uuidv4(),
description: t(
'dashboard.edit-pane.variable.selection-options.custom-all-value-description',
'A wildcard regex or other value to represent All'
@@ -43,61 +39,46 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
useShowIf: () => {
return variable.useState().includeAll ?? false;
},
render: (descriptor) => <CustomAllValueInput id={descriptor.props.id} variable={variable} />,
render: () => <CustomAllValueInput variable={variable} />,
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.edit-pane.variable.selection-options.allow-custom-values', 'Allow custom values'),
id: uuidv4(),
description: t(
'dashboard.edit-pane.variable.selection-options.allow-custom-values-description',
'Enables users to enter values'
),
render: (descriptor) => <AllowCustomSwitch id={descriptor.props.id} variable={variable} />,
render: () => <AllowCustomSwitch variable={variable} />,
})
);
}, [variable]);
}
interface InputProps {
variable: MultiValueVariable;
id?: string;
}
function MultiValueSwitch({ variable, id }: InputProps) {
function MultiValueSwitch({ variable }: { variable: MultiValueVariable }) {
const { isMulti } = variable.useState();
return (
<Switch id={id} value={isMulti} onChange={(evt) => variable.setState({ isMulti: evt.currentTarget.checked })} />
);
return <Switch value={isMulti} onChange={(evt) => variable.setState({ isMulti: evt.currentTarget.checked })} />;
}
function IncludeAllSwitch({ variable, id }: InputProps) {
function IncludeAllSwitch({ variable }: { variable: MultiValueVariable }) {
const { includeAll } = variable.useState();
return (
<Switch
id={id}
value={includeAll}
onChange={(evt) => variable.setState({ includeAll: evt.currentTarget.checked })}
/>
);
return <Switch value={includeAll} onChange={(evt) => variable.setState({ includeAll: evt.currentTarget.checked })} />;
}
function AllowCustomSwitch({ variable, id }: InputProps) {
function AllowCustomSwitch({ variable }: { variable: MultiValueVariable }) {
const { allowCustomValue } = variable.useState();
return (
<Switch
id={id}
value={allowCustomValue}
onChange={(evt) => variable.setState({ allowCustomValue: evt.currentTarget.checked })}
/>
);
}
function CustomAllValueInput({ variable, id }: InputProps) {
function CustomAllValueInput({ variable }: { variable: MultiValueVariable }) {
const { allValue } = variable.useState();
const ref = useRef<HTMLInputElement>(null);
@@ -116,5 +97,5 @@ function CustomAllValueInput({ variable, id }: InputProps) {
[variable]
);
return <Input id={id} ref={ref} defaultValue={allValue ?? ''} onBlur={onInputBlur} />;
return <Input ref={ref} defaultValue={allValue ?? ''} onBlur={onInputBlur} />;
}
public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+4 -2
View File
@@ -24,7 +24,6 @@ export interface OptionsPaneItemInfo {
useShowIf?: () => boolean;
overrides?: OptionPaneItemOverrideInfo[];
addon?: ReactNode;
/** Must be unique on the page! */
id?: string;
}
@@ -36,7 +35,10 @@ export class OptionsPaneItemDescriptor {
props: OptionsPaneItemInfo;
constructor(props: OptionsPaneItemInfo) {
this.props = { ...props, id: props.id || uniqueId() };
this.props = { ...props, id: props.id ?? props.title };
if (this.props.id === '') {
this.props.id = uniqueId();
}
}
render(searchQuery?: string) {
public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
+32 -10
View File
@@ -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,
@@ -60,7 +59,13 @@ export function getFieldOverrideCategories(
...currentFieldConfig,
overrides: [
...currentFieldConfig.overrides,
{ matcher: { id: info.id, options: info.defaultOptions }, properties: [] },
{
matcher: {
id: info.id,
options: info.defaultOptions,
},
properties: [],
},
],
});
};
@@ -104,12 +109,18 @@ export function getFieldOverrideCategories(
});
const onMatcherConfigChange = (options: unknown) => {
onOverrideChange(idx, { ...override, matcher: { ...override.matcher, options } });
onOverrideChange(idx, {
...override,
matcher: { ...override.matcher, options },
});
};
const onDynamicConfigValueAdd = (override: ConfigOverrideRule, value: SelectableValue<string>) => {
const registryItem = registry.get(value.value!);
const propertyConfig: DynamicConfigValue = { id: registryItem.id, value: registryItem.defaultValue };
const propertyConfig: DynamicConfigValue = {
id: registryItem.id,
value: registryItem.defaultValue,
};
const properties = override.properties ?? [];
properties.push(propertyConfig);
@@ -120,15 +131,13 @@ export function getFieldOverrideCategories(
/**
* Add override matcher UI element
*/
const htmlId = uuidv4();
category.addItem(
new OptionsPaneItemDescriptor({
id: htmlId,
title: matcherUi.name,
render: function renderMatcherUI() {
return (
<matcherUi.component
id={htmlId}
id={`${matcherUi.matcher.id}-${idx}`}
matcher={matcherUi.matcher}
data={data ?? []}
options={override.matcher.options}
@@ -164,7 +173,10 @@ export function getFieldOverrideCategories(
};
const onPropertyRemove = () => {
onOverrideChange(idx, { ...override, properties: override.properties.filter((_, i) => i !== propIdx) });
onOverrideChange(idx, {
...override,
properties: override.properties.filter((_, i) => i !== propIdx),
});
};
/**
@@ -172,6 +184,7 @@ export function getFieldOverrideCategories(
*/
category.addItem(
new OptionsPaneItemDescriptor({
title: registryItemForProperty.name,
skipField: true,
render: function renderPropertyEditor() {
return (
@@ -197,6 +210,7 @@ export function getFieldOverrideCategories(
if (!isSystemOverride && override.matcher.options) {
category.addItem(
new OptionsPaneItemDescriptor({
title: '----------',
skipField: true,
render: function renderAddPropertyButton() {
return (
@@ -260,7 +274,11 @@ function getOverrideProperties(registry: FieldConfigOptionsRegistry) {
if (item.category) {
label = [...item.category, item.name].join(' > ');
}
return { label, value: item.id, description: item.description };
return {
label,
value: item.id,
description: item.description,
};
});
}
@@ -270,5 +288,9 @@ function AddOverrideButtonContainer({ children }: { children: React.ReactNode })
}
function getBorderTopStyles(theme: GrafanaTheme2) {
return css({ borderTop: `1px solid ${theme.colors.border.weak}`, padding: `${theme.spacing(2)}`, display: 'flex' });
return css({
borderTop: `1px solid ${theme.colors.border.weak}`,
padding: `${theme.spacing(2)}`,
display: 'flex',
});
}
public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
+2 -6
View File
@@ -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,13 +24,12 @@ export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): Op
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-library-panel-options-category.title.name', 'Name'),
id: uuidv4(),
value: panel.libraryPanel.name,
popularRank: 1,
render: function renderName(descriptor) {
render: function renderName() {
return (
<Input
id={descriptor.props.id}
id="LibraryPanelFrameName"
defaultValue={panel.libraryPanel.name}
onBlur={(e) =>
onPanelConfigChange('libraryPanel', { ...panel.libraryPanel, name: e.currentTarget.value })
@@ -45,7 +42,6 @@ export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): Op
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-library-panel-options-category.title.information', 'Information'),
id: uuidv4(),
render: function renderLibraryPanelInformation() {
return <LibraryPanelInformation panel={panel} formatDate={dashboard.formatDate} />;
},
public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+7 -15
View File
@@ -1,5 +1,3 @@
import { v4 as uuidv4 } from 'uuid';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
import { config } from '@grafana/runtime';
@@ -22,11 +20,8 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
isOpenDefault: true,
});
const panelFrameTitleId = uuidv4();
const descriptionId = uuidv4();
const setPanelTitle = (title: string) => {
const input = document.getElementById(panelFrameTitleId);
const input = document.getElementById('PanelFrameTitle');
if (input instanceof HTMLInputElement) {
input.value = title;
onPanelConfigChange('title', title);
@@ -34,7 +29,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
};
const setPanelDescription = (description: string) => {
const input = document.getElementById(descriptionId);
const input = document.getElementById('description-text-area');
if (input instanceof HTMLTextAreaElement) {
input.value = description;
onPanelConfigChange('description', description);
@@ -45,7 +40,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-panel-frame-category.title.title', 'Title'),
id: panelFrameTitleId,
id: 'PanelFrameTitle',
value: panel.title,
popularRank: 1,
render: function renderTitle(descriptor) {
@@ -70,7 +65,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-panel-frame-category.title.description', 'Description'),
id: descriptionId,
id: 'description-text-area',
description: panel.description,
value: panel.description,
render: function renderDescription(descriptor) {
@@ -91,7 +86,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-panel-frame-category.title.transparent-background', 'Transparent background'),
id: uuidv4(),
id: 'transparent-background',
render: function renderTransparent(descriptor) {
return (
<Switch
@@ -113,7 +108,6 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
}).addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-panel-frame-category.title.panel-links', 'Panel links'),
id: uuidv4(),
render: function renderLinks() {
return (
<DataLinksInlineEditor
@@ -136,7 +130,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-panel-frame-category.title.repeat-by-variable', 'Repeat by variable'),
id: uuidv4(),
id: 'repeat-by-variable-select',
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.',
render: function renderRepeatOptions(descriptor) {
@@ -181,13 +175,11 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-panel-frame-category.title.max-per-row', 'Max per row'),
id: uuidv4(),
showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'),
render: function renderOption(descriptor) {
render: function renderOption() {
const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
return (
<Select
id={descriptor.props.id}
options={maxPerRowOptions}
value={panel.maxPerRow}
onChange={(value) => onPanelConfigChange('maxPerRow', value.value)}
public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
+5 -16
View File
@@ -1,5 +1,4 @@
import { get as lodashGet } from 'lodash';
import { v4 as uuiv4 } from 'uuid';
import {
EventBus,
@@ -131,12 +130,9 @@ export function getVisualizationOptions(props: OptionPaneRenderProps): OptionsPa
category.props.itemsCount = fieldOption.getItemsCount(value);
}
const htmlId = uuiv4();
category.addItem(
new OptionsPaneItemDescriptor({
title: fieldOption.name,
id: htmlId,
description: fieldOption.description,
overrides: getOptionOverrides(fieldOption, currentFieldConfig, data?.series),
render: function renderEditor() {
@@ -146,7 +142,7 @@ export function getVisualizationOptions(props: OptionPaneRenderProps): OptionsPa
);
};
return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={htmlId} />;
return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={fieldOption.id} />;
},
})
);
@@ -169,13 +165,12 @@ export function getLibraryVizPanelOptionsCategory(libraryPanel: LibraryPanelBeha
.addItem(
new OptionsPaneItemDescriptor({
title: t('dashboard.get-library-viz-panel-options-category.title.name', 'Name'),
id: uuiv4(),
value: libraryPanel,
popularRank: 1,
render: function renderName(descriptor) {
render: function renderName() {
return (
<Input
id={descriptor.props.id}
id="LibraryPanelFrameName"
data-testid="library panel name input"
defaultValue={libraryPanel.state.name}
onBlur={(e) => libraryPanel.setState({ name: e.currentTarget.value })}
@@ -269,12 +264,9 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options
category.props.itemsCount = fieldOption.getItemsCount(value);
}
const htmlId = uuiv4();
category.addItem(
new OptionsPaneItemDescriptor({
title: fieldOption.name,
id: htmlId,
description: fieldOption.description,
overrides: getOptionOverrides(fieldOption, currentFieldConfig, data?.series),
render: function renderEditor() {
@@ -285,7 +277,7 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options
);
};
return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={htmlId} />;
return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={fieldOption.id} />;
},
})
);
@@ -338,13 +330,10 @@ export function fillOptionsPaneItems(
continue;
}
const htmlId = uuiv4();
const Editor = pluginOption.editor;
category.addItem(
new OptionsPaneItemDescriptor({
title: pluginOption.name,
id: htmlId,
description: pluginOption.description,
render: function renderEditor() {
return (
@@ -355,7 +344,7 @@ export function fillOptionsPaneItems(
}}
item={pluginOption}
context={context}
id={htmlId}
id={pluginOption.id}
/>
);
},
public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
-14
View File
@@ -1,5 +1,3 @@
import { v4 as uuiv4 } from 'uuid';
import { OptionsPaneCategoryDescriptor } from '../OptionsPaneCategoryDescriptor';
import { OptionsPaneItemDescriptor } from '../OptionsPaneItemDescriptor';
@@ -53,21 +51,18 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
.addItem(
new OptionsPaneItemDescriptor({
title: 'Title',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'Min',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'ASDSADASDSADA',
id: uuiv4(),
description: 'DescriptionMatch',
render: jest.fn(),
})
@@ -79,21 +74,18 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
.addItem(
new OptionsPaneItemDescriptor({
title: 'Min',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'DescriptionMatch',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'Frame',
id: uuiv4(),
render: jest.fn(),
})
),
@@ -109,21 +101,18 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
.addItem(
new OptionsPaneItemDescriptor({
title: 'Match by name',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'Min',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'Max',
id: uuiv4(),
render: jest.fn(),
})
),
@@ -134,21 +123,18 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
.addItem(
new OptionsPaneItemDescriptor({
title: 'Match by name',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'Threshold',
id: uuiv4(),
render: jest.fn(),
})
)
.addItem(
new OptionsPaneItemDescriptor({
title: 'Max',
id: uuiv4(),
render: jest.fn(),
})
),
public/app/features/dimensions/editors/ColorDimensionEditor.tsx
+1 -2
View File
@@ -21,7 +21,7 @@ export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionCo
}),
[]
);
const { value, context, onChange, item, id } = props;
const { value, context, onChange, item } = props;
const defaultColor = 'dark-green';
@@ -71,7 +71,6 @@ export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionCo
<>
<div className={styles.container}>
<Select
inputId={id}
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}
public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
+1 -4
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { useCallback, useId, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { FieldType, GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
import { t } from '@grafana/i18n';
@@ -92,8 +92,6 @@ export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props)
[onChange, value]
);
const valueInputId = useId();
const val = value ?? {};
const mode = value?.mode ?? ScalarDimensionMode.Mod;
const selectedOption = isFixed ? fixedValueOption : selectOptions.find((v) => v.value === fieldName);
@@ -121,7 +119,6 @@ export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props)
grow={true}
>
<NumberInput
id={valueInputId}
value={val?.fixed ?? DEFAULT_VALUE}
onChange={onValueChange}
max={settings?.max}
public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
+5 -10
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { useCallback, useId, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
import { t } from '@grafana/i18n';
@@ -12,7 +12,7 @@ import { validateScaleOptions, validateScaleConfig } from '../scale';
import { ScaleDimensionOptions } from '../types';
export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionConfig, ScaleDimensionOptions>) => {
const { value, context, onChange, item, id } = props;
const { value, context, onChange, item } = props;
const { settings } = item;
const styles = useStyles2(getStyles);
@@ -95,17 +95,12 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
[validateAndDoChange, value]
);
const valueInputId = useId();
const minInputId = useId();
const maxInputId = useId();
const val = value ?? {};
const selectedOption = isFixed ? fixedValueOption : selectOptions.find((v) => v.value === fieldName);
return (
<>
<div>
<Select
inputId={id}
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}
@@ -116,7 +111,7 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
{isFixed && (
<InlineFieldRow>
<InlineField label={t('dimensions.scale-dimension-editor.label-value', 'Value')} labelWidth={8} grow={true}>
<NumberInput id={valueInputId} value={val.fixed} {...minMaxStep} onChange={onValueChange} />
<NumberInput value={val.fixed} {...minMaxStep} onChange={onValueChange} />
</InlineField>
</InlineFieldRow>
)}
@@ -124,12 +119,12 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
<>
<InlineFieldRow>
<InlineField label={t('dimensions.scale-dimension-editor.label-min', 'Min')} labelWidth={8} grow={true}>
<NumberInput id={minInputId} value={val.min} {...minMaxStep} onChange={onMinChange} />
<NumberInput value={val.min} {...minMaxStep} onChange={onMinChange} />
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label={t('dimensions.scale-dimension-editor.label-max', 'Max')} labelWidth={8} grow={true}>
<NumberInput id={maxInputId} value={val.max} {...minMaxStep} onChange={onMaxChange} />
<NumberInput value={val.max} {...minMaxStep} onChange={onMaxChange} />
</InlineField>
</InlineFieldRow>
</>
public/app/features/dimensions/editors/TextDimensionEditor.tsx
+1 -8
View File
@@ -1,4 +1,4 @@
import { useCallback, useId } from 'react';
import { useCallback } from 'react';
import {
FieldNamePickerConfigSettings,
@@ -74,10 +74,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
onFixedChange('');
};
const fieldInputId = useId();
const valueInputId = useId();
const templateInputId = useId();
const mode = value?.mode ?? TextDimensionMode.Fixed;
return (
<>
@@ -98,7 +94,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
grow={true}
>
<FieldNamePicker
id={fieldInputId}
context={context}
value={value.field ?? ''}
onChange={onFieldChange}
@@ -115,7 +110,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
grow={true}
>
<StringValueEditor
id={valueInputId}
context={context}
value={value?.fixed}
onChange={onFixedChange}
@@ -144,7 +138,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
grow={true}
>
<StringValueEditor // This could be a code editor
id={templateInputId}
context={context}
value={value?.fixed}
onChange={onFixedChange}
public/app/features/geo/editor/locationModeEditor.tsx
-2
View File
@@ -21,7 +21,6 @@ export const LocationModeEditor = ({
onChange,
context,
item,
id,
}: StandardEditorProps<string, ModeEditorSettings, unknown, unknown>) => {
const [info, setInfo] = useState<FrameGeometryField>();
@@ -98,7 +97,6 @@ export const LocationModeEditor = ({
return (
<>
<Select
inputId={id}
options={MODE_OPTIONS}
value={value}
onChange={(v) => {
public/app/plugins/panel/alertlist/module.tsx
+1 -2
View File
@@ -128,12 +128,11 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
description: t('alertlist.description-datasource', 'Filter from alert source'),
id: 'datasource',
defaultValue: null,
editor: function RenderDatasourcePicker({ id, ...props }) {
editor: function RenderDatasourcePicker(props) {
return (
<Stack gap={1}>
<DataSourcePicker
{...props}
inputId={id}
type={SUPPORTED_RULE_SOURCE_TYPES}
noDefault
current={props.value}
public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx
+1 -2
View File
@@ -6,7 +6,7 @@ import { RefIDMultiPicker, RefIDPicker, stringsToRegexp } from '@grafana/ui/inte
type Props = StandardEditorProps<MatcherConfig>;
export const FrameSelectionEditor = ({ value, context, onChange, id }: Props) => {
export const FrameSelectionEditor = ({ value, context, onChange }: Props) => {
const onFilterChange = useCallback(
(v: string) => {
onChange(
@@ -23,7 +23,6 @@ export const FrameSelectionEditor = ({ value, context, onChange, id }: Props) =>
return (
<RefIDPicker
id={id}
value={value?.options}
onChange={onFilterChange}
data={context.data}
public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
+2 -6
View File
@@ -1,5 +1,5 @@
import { toLonLat } from 'ol/proj';
import { useMemo, useCallback, useId } from 'react';
import { useMemo, useCallback } from 'react';
import { StandardEditorProps, SelectableValue } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
@@ -63,14 +63,11 @@ export const MapViewEditor = ({
[value, onChange]
);
const viewInputId = useId();
const zoomInputId = useId();
return (
<>
<InlineFieldRow>
<InlineField label={t('geomap.map-view-editor.label-view', 'View')} labelWidth={labelWidth} grow={true}>
<Select inputId={viewInputId} options={views.options} value={views.current} onChange={onSelectView} />
<Select options={views.options} value={views.current} onChange={onSelectView} />
</InlineField>
</InlineFieldRow>
{value.id === MapCenterID.Coordinates && (
@@ -91,7 +88,6 @@ export const MapViewEditor = ({
grow={true}
>
<NumberInput
id={zoomInputId}
value={value?.zoom ?? 1}
min={1}
max={18}
public/app/plugins/panel/geomap/editor/StyleEditor.tsx
+1 -30
View File
@@ -1,5 +1,5 @@
import { capitalize } from 'lodash';
import { useId, useMemo } from 'react';
import { useMemo } from 'react';
import { useObservable } from 'react-use';
import { Observable, of } from 'rxjs';
@@ -113,21 +113,6 @@ export const StyleEditor = (props: Props) => {
const hasTextLabel = styleUsesText(value);
const maxFiles = 2000;
const symbolId = useId();
const rotationAngleId = useId();
const colorId = useId();
const opacityId = useId();
const sizeId = useId();
const symbol1Id = useId();
const symbolVertId = useId();
const color1Id = useId();
const fillOpacityId = useId();
const rotationAngle1Id = useId();
const textId = useId();
const fontSizeId = useId();
const xOffsetId = useId();
const yOffsetId = useId();
// Simple fixed value display
if (settings?.simpleFixedValues) {
return (
@@ -137,7 +122,6 @@ export const StyleEditor = (props: Props) => {
<InlineFieldRow>
<InlineField label={t('geomap.style-editor.label-symbol', 'Symbol')}>
<ResourceDimensionEditor
id={symbolId}
value={value?.symbol ?? defaultStyleConfig.symbol}
context={context}
onChange={onSymbolChange}
@@ -163,7 +147,6 @@ export const StyleEditor = (props: Props) => {
</InlineFieldRow>
<Field label={t('geomap.style-editor.label-rotation-angle', 'Rotation angle')}>
<ScalarDimensionEditor
id={rotationAngleId}
value={value?.rotation ?? defaultStyleConfig.rotation}
context={context}
onChange={onRotationChange}
@@ -183,7 +166,6 @@ export const StyleEditor = (props: Props) => {
<InlineField label={t('geomap.style-editor.label-color', 'Color')} labelWidth={10}>
<InlineLabel width={4}>
<ColorPicker
id={colorId}
color={value?.color?.fixed ?? defaultStyleConfig.color.fixed}
onChange={(v) => {
onColorChange({ fixed: v });
@@ -195,7 +177,6 @@ export const StyleEditor = (props: Props) => {
<InlineFieldRow>
<InlineField label={t('geomap.style-editor.label-opacity', 'Opacity')} labelWidth={10} grow>
<SliderValueEditor
id={opacityId}
value={value?.opacity ?? defaultStyleConfig.opacity}
context={context}
onChange={onOpacityChange}
@@ -219,7 +200,6 @@ export const StyleEditor = (props: Props) => {
<>
<Field label={t('geomap.style-editor.label-size', 'Size')}>
<ScaleDimensionEditor
id={sizeId}
value={value?.size ?? defaultStyleConfig.size}
context={context}
onChange={onSizeChange}
@@ -237,7 +217,6 @@ export const StyleEditor = (props: Props) => {
<>
<Field label={t('geomap.style-editor.label-symbol', 'Symbol')}>
<ResourceDimensionEditor
id={symbol1Id}
value={value?.symbol ?? defaultStyleConfig.symbol}
context={context}
onChange={onSymbolChange}
@@ -262,7 +241,6 @@ export const StyleEditor = (props: Props) => {
</Field>
<Field label={t('geomap.style-editor.label-symbol-vertical-align', 'Symbol vertical align')}>
<RadioButtonGroup
id={symbolVertId}
value={value?.symbolAlign?.vertical ?? defaultStyleConfig.symbolAlign.vertical}
onChange={onAlignVerticalChange}
options={[
@@ -302,7 +280,6 @@ export const StyleEditor = (props: Props) => {
)}
<Field label={t('geomap.style-editor.label-color', 'Color')}>
<ColorDimensionEditor
id={color1Id}
value={value?.color ?? defaultStyleConfig.color}
context={context}
onChange={onColorChange}
@@ -311,7 +288,6 @@ export const StyleEditor = (props: Props) => {
</Field>
<Field label={t('geomap.style-editor.label-fill-opacity', 'Fill opacity')}>
<SliderValueEditor
id={fillOpacityId}
value={value?.opacity ?? defaultStyleConfig.opacity}
context={context}
onChange={onOpacityChange}
@@ -329,7 +305,6 @@ export const StyleEditor = (props: Props) => {
{settings?.displayRotation && (
<Field label={t('geomap.style-editor.label-rotation-angle', 'Rotation angle')}>
<ScalarDimensionEditor
id={rotationAngle1Id}
value={value?.rotation ?? defaultStyleConfig.rotation}
context={context}
onChange={onRotationChange}
@@ -346,7 +321,6 @@ export const StyleEditor = (props: Props) => {
)}
<Field label={t('geomap.style-editor.label-text-label', 'Text label')}>
<TextDimensionEditor
id={textId}
value={value?.text ?? defaultTextConfig}
context={context}
onChange={onTextChange}
@@ -359,7 +333,6 @@ export const StyleEditor = (props: Props) => {
<Stack>
<Field label={t('geomap.style-editor.label-font-size', 'Font size')}>
<NumberValueEditor
id={fontSizeId}
value={value?.textConfig?.fontSize ?? defaultStyleConfig.textConfig.fontSize}
context={context}
onChange={onTextFontSizeChange}
@@ -368,7 +341,6 @@ export const StyleEditor = (props: Props) => {
</Field>
<Field label={t('geomap.style-editor.label-x-offset', 'X offset')}>
<NumberValueEditor
id={xOffsetId}
value={value?.textConfig?.offsetX ?? defaultStyleConfig.textConfig.offsetX}
context={context}
onChange={onTextOffsetXChange}
@@ -377,7 +349,6 @@ export const StyleEditor = (props: Props) => {
</Field>
<Field label={t('geomap.style-editor.label-y-offset', 'Y offset')}>
<NumberValueEditor
id={yOffsetId}
value={value?.textConfig?.offsetY ?? defaultStyleConfig.textConfig.offsetY}
context={context}
onChange={onTextOffsetYChange}
public/app/plugins/panel/table/PaginationEditor.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import * as React from 'react';
import { StandardEditorProps } from '@grafana/data';
import { Switch } from '@grafana/ui';
export function PaginationEditor({ onChange, value, context, id }: StandardEditorProps<boolean>) {
export function PaginationEditor({ onChange, value, context }: StandardEditorProps<boolean>) {
const changeValue = (event: React.FormEvent<HTMLInputElement> | undefined) => {
if (event?.currentTarget.checked) {
context.options.footer.show = false;
@@ -11,5 +11,5 @@ export function PaginationEditor({ onChange, value, context, id }: StandardEdito
onChange(event?.currentTarget.checked);
};
return <Switch value={Boolean(value)} onChange={changeValue} id={id} />;
return <Switch value={Boolean(value)} onChange={changeValue} />;
}
public/app/plugins/panel/table/TableCellOptionEditor.tsx
+2 -3
View File
@@ -23,10 +23,9 @@ export interface TableCellEditorProps<T> {
interface Props {
value: TableCellOptions;
onChange: (v: TableCellOptions) => void;
id?: string;
}
export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
export const TableCellOptionEditor = ({ value, onChange }: Props) => {
const cellType = value.type;
const styles = useStyles2(getStyles);
const currentMode = cellDisplayModeOptions.find((o) => o.value!.type === cellType)!;
@@ -61,7 +60,7 @@ export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
return (
<div className={styles.fixBottomMargin}>
<Field>
<Select inputId={id} options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
<Select options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
</Field>
{(cellType === TableCellDisplayMode.Auto || cellType === TableCellDisplayMode.ColorText) && (
<AutoCellOptionsEditor cellOptions={value} onChange={onCellOptionsChange} />
public/app/plugins/panel/table/cells/AutoCellOptionsEditor.tsx
+1 -5
View File
@@ -1,5 +1,3 @@
import { useId } from 'react';
import { t } from '@grafana/i18n';
import { TableAutoCellOptions, TableColorTextCellOptions } from '@grafana/schema';
import { Field, Switch } from '@grafana/ui';
@@ -15,8 +13,6 @@ export const AutoCellOptionsEditor = ({
onChange(cellOptions);
};
const htmlId = useId();
return (
<Field
label={t('table.auto-cell-options-editor.label-wrap-text', 'Wrap text')}
@@ -25,7 +21,7 @@ export const AutoCellOptionsEditor = ({
'If selected text will be wrapped to the width of text in the configured column'
)}
>
<Switch id={htmlId} value={cellOptions.wrapText} onChange={onWrapTextChange} />
<Switch value={cellOptions.wrapText} onChange={onWrapTextChange} />
</Field>
);
};
public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
+2 -8
View File
@@ -1,5 +1,3 @@
import { useId } from 'react';
import { SelectableValue } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema';
@@ -33,16 +31,12 @@ export const ColorBackgroundCellOptionsEditor = ({
onChange(cellOptions);
};
const applyToRowSwitchId = useId();
const wrapTextSwitchId = useId();
const label = (
<Label
description={t(
'table.color-background-cell-options-editor.description-wrap-text',
'If selected text will be wrapped to the width of text in the configured column'
)}
htmlFor={wrapTextSwitchId}
>
<Trans i18nKey="table.color-background-cell-options-editor.wrap-text">Wrap text</Trans>{' '}
<Badge
@@ -71,10 +65,10 @@ export const ColorBackgroundCellOptionsEditor = ({
'If selected the entire row will be colored as this cell would be.'
)}
>
<Switch id={applyToRowSwitchId} value={cellOptions.applyToRow} onChange={onColorRowChange} />
<Switch value={cellOptions.applyToRow} onChange={onColorRowChange} />
</Field>
<Field label={label}>
<Switch id={wrapTextSwitchId} value={cellOptions.wrapText} onChange={onWrapTextChange} />
<Switch value={cellOptions.wrapText} onChange={onWrapTextChange} />
</Field>
</>
);
public/app/plugins/panel/table/cells/ImageCellOptionsEditor.tsx
+3 -6
View File
@@ -1,4 +1,4 @@
import { FormEvent, useId } from 'react';
import { FormEvent } from 'react';
import { t } from '@grafana/i18n';
import { TableImageCellOptions } from '@grafana/schema';
@@ -17,9 +17,6 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
onChange(cellOptions);
};
const altTextInputId = useId();
const titleTextInputId = useId();
return (
<>
<Field
@@ -29,7 +26,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
"Alternative text that will be displayed if an image can't be displayed or for users who use a screen reader"
)}
>
<Input id={altTextInputId} onChange={onAltChange} defaultValue={cellOptions.alt} />
<Input onChange={onAltChange} defaultValue={cellOptions.alt} />
</Field>
<Field
@@ -39,7 +36,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
'Text that will be displayed when the image is hovered by a cursor'
)}
>
<Input id={titleTextInputId} onChange={onTitleChange} defaultValue={cellOptions.title} />
<Input onChange={onTitleChange} defaultValue={cellOptions.title} />
</Field>
</>
);
public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
+1 -4
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { useId, useMemo } from 'react';
import { useMemo } from 'react';
import { createFieldConfigRegistry, SetFieldConfigOptionsArgs } from '@grafana/data';
import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema';
@@ -51,8 +51,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
const values = { ...defaultSparklineCellConfig, ...cellOptions };
const htmlIdBase = useId();
return (
<Stack direction="column" gap={0}>
{registry.list(optionIds.map((id) => `custom.${id}`)).map((item) => {
@@ -69,7 +67,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
value={(isOptionKey(path, values) ? values[path] : undefined) ?? item.defaultValue}
item={item}
context={{ data: [] }}
id={`${htmlIdBase}${item.id}`}
/>
</Field>
);
public/app/plugins/panel/table/table-new/PaginationEditor.tsx
+1 -2
View File
@@ -4,7 +4,7 @@ import { StandardEditorProps } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Switch } from '@grafana/ui';
export function PaginationEditor({ onChange, value, id }: StandardEditorProps<boolean>) {
export function PaginationEditor({ onChange, value }: StandardEditorProps<boolean>) {
const changeValue = (event: React.FormEvent<HTMLInputElement> | undefined) => {
onChange(event?.currentTarget.checked);
};
@@ -14,7 +14,6 @@ export function PaginationEditor({ onChange, value, id }: StandardEditorProps<bo
label={selectors.components.PanelEditor.OptionsPane.fieldLabel(`Enable pagination`)}
value={Boolean(value)}
onChange={changeValue}
id={id}
/>
);
}
public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx
+2 -3
View File
@@ -25,7 +25,6 @@ export interface TableCellEditorProps<T> {
interface Props {
value: TableCellOptions;
onChange: (v: TableCellOptions) => void;
id?: string;
}
const TEXT_WRAP_CELL_TYPES = new Set([
@@ -41,7 +40,7 @@ function isTextWrapCellType(value: TableCellOptions): value is TableCellOptions
return TEXT_WRAP_CELL_TYPES.has(value.type);
}
export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
export const TableCellOptionEditor = ({ value, onChange }: Props) => {
const cellType = value.type;
const styles = useStyles2(getStyles);
const cellDisplayModeOptions: Array<ComboboxOption<TableCellOptions['type']>> = [
@@ -93,7 +92,7 @@ export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
return (
<div className={styles.fixBottomMargin}>
<Field>
<Combobox id={id} options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
<Combobox options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
</Field>
{isTextWrapCellType(value) && <TextWrapOptionsEditor cellOptions={value} onChange={onCellOptionsChange} />}
{cellType === TableCellDisplayMode.Gauge && (
public/app/plugins/panel/table/table-new/cells/ColorBackgroundCellOptionsEditor.tsx
-5
View File
@@ -1,5 +1,3 @@
import { useId } from 'react';
import { SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
@@ -28,8 +26,6 @@ export const ColorBackgroundCellOptionsEditor = ({
onChange(cellOptions);
};
const htmlId = useId();
return (
<>
<Field
@@ -51,7 +47,6 @@ export const ColorBackgroundCellOptionsEditor = ({
)}
>
<Switch
id={htmlId}
label={selectors.components.PanelEditor.OptionsPane.fieldLabel(`Apply to entire row`)}
value={cellOptions.applyToRow}
onChange={onColorRowChange}
public/app/plugins/panel/table/table-new/cells/ImageCellOptionsEditor.tsx
+3 -6
View File
@@ -1,4 +1,4 @@
import { FormEvent, useId } from 'react';
import { FormEvent } from 'react';
import { t } from '@grafana/i18n';
import { TableImageCellOptions } from '@grafana/schema';
@@ -17,9 +17,6 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
onChange(cellOptions);
};
const altTextInputId = useId();
const titleTextInputId = useId();
return (
<>
<Field
@@ -29,7 +26,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
"Alternative text that will be displayed if an image can't be displayed or for users who use a screen reader"
)}
>
<Input id={altTextInputId} onChange={onAltChange} defaultValue={cellOptions.alt} />
<Input onChange={onAltChange} defaultValue={cellOptions.alt} />
</Field>
<Field
@@ -39,7 +36,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
'Text that will be displayed when the image is hovered by a cursor'
)}
>
<Input id={titleTextInputId} onChange={onTitleChange} defaultValue={cellOptions.title} />
<Input onChange={onTitleChange} defaultValue={cellOptions.title} />
</Field>
</>
);
public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx
+1 -4
View File
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { useId, useMemo } from 'react';
import { useMemo } from 'react';
import { createFieldConfigRegistry, SetFieldConfigOptionsArgs } from '@grafana/data';
import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema';
@@ -51,8 +51,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
const values = { ...defaultSparklineCellConfig, ...cellOptions };
const htmlIdBase = useId();
return (
<Stack direction="column">
{registry.list(optionIds.map((id) => `custom.${id}`)).map((item) => {
@@ -69,7 +67,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
value={(isOptionKey(path, values) ? values[path] : undefined) ?? item.defaultValue}
item={item}
context={{ data: [] }}
id={`${htmlIdBase}-${item.id}`}
/>
</Field>
);
public/app/plugins/panel/table/table-new/cells/TextWrapOptionsEditor.tsx
-5
View File
@@ -1,5 +1,3 @@
import { useId } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
import { TableCellOptions, TableWrapTextOptions } from '@grafana/schema';
@@ -17,13 +15,10 @@ export const TextWrapOptionsEditor = ({
onChange(cellOptions);
};
const htmlId = useId();
return (
<>
<Field label={t('table.text-wrap-options.label-wrap-text', 'Wrap text')}>
<Switch
id={htmlId}
label={selectors.components.PanelEditor.OptionsPane.fieldLabel(`Wrap text`)}
value={cellOptions.wrapText}
onChange={onWrapTextChange}
public/app/plugins/panel/xychart/SeriesEditor.tsx
+1 -12
View File
@@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import { Fragment, useId, useState } from 'react';
import { Fragment, useState } from 'react';
import { usePrevious } from 'react-use';
import {
@@ -77,12 +77,6 @@ export const SeriesEditor = ({
});
});
const frameInputId = useId();
const xFieldInputId = useId();
const yFieldInputId = useId();
const sizeFieldInputId = useId();
const colorFieldInputId = useId();
return (
<>
{mapping === SeriesMapping.Manual && (
@@ -135,7 +129,6 @@ export const SeriesEditor = ({
<Fragment key={formKey}>
<Field label={t('xychart.series-editor.label-frame', 'Frame')}>
<Select
inputId={frameInputId}
placeholder={
mapping === SeriesMapping.Auto
? t('xychart.series-editor.placeholder-all-frames', 'All frames')
@@ -165,7 +158,6 @@ export const SeriesEditor = ({
</Field>
<Field label={t('xychart.series-editor.label-x-field', 'X field')}>
<FieldNamePicker
id={xFieldInputId}
value={series.x?.matcher.options as string}
context={context}
onChange={(fieldName) => {
@@ -203,7 +195,6 @@ export const SeriesEditor = ({
</Field>
<Field label={t('xychart.series-editor.label-y-field', 'Y field')}>
<FieldNamePicker
id={yFieldInputId}
value={series.y?.matcher?.options as string}
context={context}
onChange={(fieldName) => {
@@ -242,7 +233,6 @@ export const SeriesEditor = ({
</Field>
<Field label={t('xychart.series-editor.label-size-field', 'Size field')}>
<FieldNamePicker
id={sizeFieldInputId}
value={series.size?.matcher?.options as string}
context={context}
onChange={(fieldName) => {
@@ -278,7 +268,6 @@ export const SeriesEditor = ({
</Field>
<Field label={t('xychart.series-editor.label-color-field', 'Color field')}>
<FieldNamePicker
id={colorFieldInputId}
value={series.color?.matcher?.options as string}
context={context}
onChange={(fieldName) => {