From f655315e6265c4116824bacd37ea7789ae9d1b4c Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Tue, 16 Jan 2024 17:17:42 +0200 Subject: [PATCH] Proper fix for GForm not resetting the hidden fields to undefined (#3691) # 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) --- src/components/GForm/GForm.tsx | 14 +++++++--- src/components/GForm/GForm.types.ts | 2 +- .../TextEllipsisTooltip.tsx | 2 +- .../OutgoingWebhookForm.config.tsx | 26 +++++++++---------- .../OutgoingWebhookForm.module.css | 1 + .../outgoing_webhooks/OutgoingWebhooks.tsx | 9 +++---- 6 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/components/GForm/GForm.tsx b/src/components/GForm/GForm.tsx index 20c83e3a5e..96324f6794 100644 --- a/src/components/GForm/GForm.tsx +++ b/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/src/components/GForm/GForm.types.ts b/src/components/GForm/GForm.types.ts index 710c8f2ddc..90d3f8edc3 100644 --- a/src/components/GForm/GForm.types.ts +++ b/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/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx b/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx index 80164980e4..cdab55f814 100644 --- a/src/components/TextEllipsisTooltip/TextEllipsisTooltip.tsx +++ b/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/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx b/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx index d421c74879..eeb7bbfbb7 100644 --- a/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.config.tsx +++ b/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/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css b/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css index 3a41fb24a3..5d2ed084c6 100644 --- a/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css +++ b/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.module.css @@ -12,6 +12,7 @@ .tabs__content { padding-top: 16px; + padding-bottom: 16px; } .form-row { diff --git a/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 99afa4059d..3a6a79c30e 100644 --- a/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/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())