diff --git a/CHANGELOG.md b/CHANGELOG.md index 865a83fd71..75c35b02f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/grafana-plugin/src/components/GForm/GForm.tsx b/grafana-plugin/src/components/GForm/GForm.tsx index 20c83e3a5e..96324f6794 100644 --- a/grafana-plugin/src/components/GForm/GForm.tsx +++ b/grafana-plugin/src/components/GForm/GForm.tsx @@ -189,8 +189,8 @@ class GForm extends React.Component {
{({ 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 { 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, diff --git a/grafana-plugin/src/components/GForm/GForm.types.ts b/grafana-plugin/src/components/GForm/GForm.types.ts index 710c8f2ddc..90d3f8edc3 100644 --- a/grafana-plugin/src/components/GForm/GForm.types.ts +++ b/grafana-plugin/src/components/GForm/GForm.types.ts @@ -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; diff --git a/grafana-plugin/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx b/grafana-plugin/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx index 80164980e4..cdab55f814 100644 --- a/grafana-plugin/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx +++ b/grafana-plugin/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx @@ -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; diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx index d421c74879..eeb7bbfbb7 100644 --- a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx +++ b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx @@ -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), }, ], }; diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css index 3a41fb24a3..5d2ed084c6 100644 --- a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css +++ b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css @@ -12,6 +12,7 @@ .tabs__content { padding-top: 16px; + padding-bottom: 16px; } .form-row { diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 99afa4059d..3a6a79c30e 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -269,11 +269,7 @@ class OutgoingWebhooks extends React.Component - - - ); + return ; } renderActionButtons = (record: OutgoingWebhook) => { @@ -435,6 +431,9 @@ class OutgoingWebhooks extends React.Component this.update())