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: Add support for selecting the button variant (#74782)

Browse Source
This commit is contained in:
Adela Almasan
2023-09-14 12:20:58 -05:00
committed by GitHub
parent 68eda133e4
commit 59b7789ada
3 changed files with 74 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/plugins/panel/canvas/editor/element/APIEditor.tsx
View File

@@ -91,7 +91,7 @@ const contentTypeOptions: SelectableValue[] = [
];
export function APIEditor({ value, context, onChange }: Props) {
const LABEL_WIDTH = 9;
const LABEL_WIDTH = 13;
if (!value) {
value = defaultApiConfig;
@@ -185,16 +185,17 @@ export function APIEditor({ value, context, onChange }: Props) {
</InlineFieldRow>
{value?.method === HttpRequestMethod.POST && (
<>
<Field label="Content-Type">
<Select
minMenuHeight={200}
options={contentTypeOptions}
allowCustomValue={true}
formatCreateLabel={formatCreateLabel}
value={value?.contentType}
onChange={onContentTypeChange}
/>
</Field>
<InlineFieldRow>
<InlineField label="Content-Type" labelWidth={LABEL_WIDTH} grow={true}>
<Select
options={contentTypeOptions}
allowCustomValue={true}
formatCreateLabel={formatCreateLabel}
value={value?.contentType}
onChange={onContentTypeChange}
/>
</InlineField>
</InlineFieldRow>
{value?.contentType && (
<Field label="Payload">
<StringValueEditor

44
public/app/plugins/panel/canvas/editor/element/ButtonStyleEditor.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React, { useCallback } from 'react';
import { SelectableValue, StandardEditorProps } from '@grafana/data';
import { ButtonVariant, InlineField, InlineFieldRow, Select } from '@grafana/ui';
import { defaultStyleConfig } from 'app/features/canvas/elements/button';
export interface ButtonStyleConfig {
variant: ButtonVariant;
}
type Props = StandardEditorProps<ButtonStyleConfig>;
const variantOptions: SelectableValue[] = [
{ label: 'primary', value: 'primary' },
{ label: 'secondary', value: 'secondary' },
{ label: 'success', value: 'success' },
{ label: 'destructive', value: 'destructive' },
];
export const ButtonStyleEditor = ({ value, onChange }: Props) => {
if (!value) {
value = defaultStyleConfig;
}
const onVariantChange = useCallback(
(variant: SelectableValue<ButtonVariant>) => {
onChange({
...value,
variant: variant?.value ?? defaultStyleConfig.variant,
});
},
[onChange, value]
);
return (
<>
<InlineFieldRow>
<InlineField label="Variant" grow={true}>
<Select options={variantOptions} value={value?.variant} onChange={onVariantChange} />
</InlineField>
</InlineFieldRow>
</>
);
};