centralcloud/oncall-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Proper fix for GForm not resetting the hidden fields to undefined (#3691)

Browse source 
# What this PR does

## Which issue(s) this PR fixes

https://github.com/grafana/oncall/issues/3690

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)
This commit is contained in:
Rares Mardare 2024-01-16 17:17:42 +02:00 • committed by GitHub
parent 72fc32daf6
commit 3c2c259721
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## Unreleased
### Fixed
- Fixed Webhooks UI not allowing simple webhooks to be created ([#3691](https://github.com/grafana/oncall/pull/3691))
## v1.3.88 (2024-01-16)
### Fixed

14
grafana-plugin/src/components/GForm/GForm.tsx
View file

@ -189,8 +189,8 @@ class GForm extends React.Component<GFormProps, {}> {
<Form maxWidth="none" id={form.name} defaultValues={data} onSubmit={this.handleSubmit}>
{({ register, errors, control, getValues, setValue }) => {
const renderField = (formItem: FormItem, formIndex: number) => {
if (formItem.isVisible && !formItem.isVisible(getValues())) {
return null;
if (this.isFormItemHidden(formItem, getValues())) {
return null; // don't render the field
}
const disabled = formItem.disabled
@ -270,13 +270,21 @@ class GForm extends React.Component<GFormProps, {}> {
this.forceUpdate();
};
isFormItemHidden(formItem: FormItem, data) {
return formItem?.isHidden?.(data);
}
handleSubmit = (data) => {
const { form, onSubmit } = this.props;
const normalizedData = Object.keys(data).reduce((acc, key) => {
const formItem = form.fields.find((formItem) => formItem.name === key);
const value = formItem?.normalize ? formItem.normalize(data[key]) : nullNormalizer(data[key]);
let value = formItem?.normalize ? formItem.normalize(data[key]) : nullNormalizer(data[key]);
if (this.isFormItemHidden(formItem, data)) {
value = undefined;
}
return {
...acc,

2
grafana-plugin/src/components/GForm/GForm.types.ts
View file

@ -21,7 +21,7 @@ export interface FormItem {
description?: ReactNode;
placeholder?: string;
normalize?: (value: any) => any;
isVisible?: (data: any) => any;
isHidden?: (data: any) => any;
getDisabled?: (value: any) => any;
validation?: {
required?: boolean;

2
grafana-plugin/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx
View file

@ -9,7 +9,7 @@ import { TEXT_ELLIPSIS_CLASS } from 'utils/consts';
const cx = cn.bind(styles);
interface TextEllipsisTooltipProps {
content: string;
content?: string;
queryClassName?: string;
placement?: string;
className?: string;

26
grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx
View file

@ -100,7 +100,7 @@ export function createForm(
},
],
},
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.TriggerType),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.TriggerType),
normalize: (value) => value,
},
{
@ -136,16 +136,16 @@ export function createForm(
},
],
},
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.HttpMethod),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.HttpMethod),
normalize: (value) => value,
},
{
name: WebhookFormFieldName.IntegrationFilter,
label: 'Integrations',
type: FormItemType.MultiSelect,
isVisible: (data) =>
isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.IntegrationFilter) &&
data.trigger_type !== WebhookTriggerType.EscalationStep.key,
isHidden: (data) =>
!isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.IntegrationFilter) ||
data.trigger_type === WebhookTriggerType.EscalationStep.key,
extra: {
placeholder: 'Choose (Optional)',
modelName: 'alertReceiveChannelStore',
@ -170,7 +170,7 @@ export function createForm(
extra: {
height: 30,
},
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Url),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Url),
},
{
name: WebhookFormFieldName.Headers,
@ -180,24 +180,24 @@ export function createForm(
extra: {
rows: 3,
},
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Headers),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Headers),
},
{
name: WebhookFormFieldName.Username,
type: FormItemType.Input,
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Username),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Username),
},
{
name: WebhookFormFieldName.Password,
type: FormItemType.Password,
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Password),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Password),
},
{
name: WebhookFormFieldName.AuthorizationHeader,
description:
'Value of the Authorization header, do not need to prefix with "Authorization:". For example: Bearer AbCdEf123456',
type: FormItemType.Password,
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.AuthorizationHeader),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.AuthorizationHeader),
},
{
name: WebhookFormFieldName.TriggerTemplate,
@ -207,14 +207,14 @@ export function createForm(
extra: {
rows: 2,
},
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.TriggerTemplate),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.TriggerTemplate),
},
{
name: WebhookFormFieldName.ForwardAll,
normalize: (value) => (value ? Boolean(value) : value),
type: FormItemType.Switch,
description: "Forwards whole payload of the alert group and context data to the webhook's url as POST/PUT data",
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.ForwardAll),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.ForwardAll),
},
{
name: WebhookFormFieldName.Data,
@ -224,7 +224,7 @@ export function createForm(
hasLabelsFeature ? ' {{ webhook }}' : ''
}`,
extra: {},
isVisible: (data) => isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Data),
isHidden: (data) => !isPresetFieldVisible(data.preset, presets, WebhookFormFieldName.Data),
},
],
};

1
grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css
View file

@ -12,6 +12,7 @@
.tabs__content {
padding-top: 16px;
padding-bottom: 16px;
}
.form-row {

9
grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
View file

@ -269,11 +269,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
};
renderTeam(record: OutgoingWebhook, teams: any) {
return (
<TextEllipsisTooltip placement="top" content={teams[record.team]?.name}>
<TeamName className={TEXT_ELLIPSIS_CLASS} team={teams[record.team]} />
</TextEllipsisTooltip>
);
return <TeamName className={TEXT_ELLIPSIS_CLASS} team={teams[record.team]} />;
}
renderActionButtons = (record: OutgoingWebhook) => {
@ -435,6 +431,9 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
is_legacy: false,
};
// don't pass trigger_type to backend as it's not editable
delete data.trigger_type;
outgoingWebhookStore
.update(id, data)
.then(() => this.update())