IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas - Clear button bugfix (#53068)

Browse Source
This commit is contained in:
Adela Almasan 2022-08-01 14:40:01 -05:00 committed by GitHub
parent 0d817987ec
commit f2436b15bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/core/components/OptionsUI/string.tsx
View File

@ -1,15 +1,14 @@
import React, { useCallback } from 'react'; import React, { ReactNode, useCallback } from 'react';
import { StandardEditorProps, StringFieldConfigSettings } from '@grafana/data'; import { StandardEditorProps, StringFieldConfigSettings } from '@grafana/data';
import { Input, TextArea } from '@grafana/ui'; import { Input, TextArea } from '@grafana/ui';
export const StringValueEditor: React.FC<StandardEditorProps<string, StringFieldConfigSettings>> = ({ interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
value, suffix?: ReactNode;
onChange, }
item,
}) => {
const Component = item.settings?.useTextarea ? TextArea : Input;
export const StringValueEditor: React.FC<Props> = ({ value, onChange, item, suffix }) => {
const Component = item.settings?.useTextarea ? TextArea : Input;
const onValueChange = useCallback( const onValueChange = useCallback(
(e: React.SyntheticEvent) => { (e: React.SyntheticEvent) => {
let nextValue = value ?? ''; let nextValue = value ?? '';
@ -39,6 +38,7 @@ export const StringValueEditor: React.FC<StandardEditorProps<string, StringField
rows={(item.settings?.useTextarea && item.settings.rows) || 5} rows={(item.settings?.useTextarea && item.settings.rows) || 5}
onBlur={onValueChange} onBlur={onValueChange}
onKeyDown={onValueChange} onKeyDown={onValueChange}
suffix={suffix}
/> />
); );
}; };

29
public/app/features/dimensions/editors/TextDimensionEditor.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useCallback } from 'react'; import React, { FC, useCallback, useState } from 'react';
import { import {
FieldNamePickerConfigSettings, FieldNamePickerConfigSettings,
@ -30,6 +30,9 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
const { value, context, onChange } = props; const { value, context, onChange } = props;
const labelWidth = 9; const labelWidth = 9;
// force re-render on clear fixed text
const [refresh, setRefresh] = useState(0);
const onModeChange = useCallback( const onModeChange = useCallback(
(mode) => { (mode) => {
onChange({ onChange({
@ -56,15 +59,11 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
...value, ...value,
fixed, fixed,
}); });
},
[onChange, value]
);
const onClearFixedText = () => { setRefresh(refresh + 1);
// Need to first change to field in order to clear fixed value in editor },
onChange({ mode: TextDimensionMode.Field, fixed: '', field: '' }); [onChange, refresh, value]
onChange({ mode: TextDimensionMode.Fixed, fixed: '', field: '' }); );
};
const mode = value?.mode ?? TextDimensionMode.Fixed; const mode = value?.mode ?? TextDimensionMode.Fixed;
@ -88,19 +87,19 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
</InlineFieldRow> </InlineFieldRow>
)} )}
{mode === TextDimensionMode.Fixed && ( {mode === TextDimensionMode.Fixed && (
<InlineFieldRow> <InlineFieldRow key={refresh}>
<InlineField label={'Value'} labelWidth={labelWidth} grow={true}> <InlineField label={'Value'} labelWidth={labelWidth} grow={true}>
<>
<StringValueEditor <StringValueEditor
context={context} context={context}
value={value?.fixed} value={value?.fixed}
onChange={onFixedChange} onChange={onFixedChange}
item={dummyStringSettings} item={dummyStringSettings}
suffix={
value?.fixed && (
<Button icon="times" variant="secondary" fill="text" size="sm" onClick={() => onFixedChange('')} />
)
}
/> />
{value?.fixed && (
<Button icon="times" variant="secondary" fill="text" size="sm" onClick={onClearFixedText} />
)}
</>
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>
)} )}