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

) # What this PR does ## Which issue(s) this PR fixes #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)
grafana · Jan 16, 2024 · f655315 · f655315
1 parent 6cb0b14
commit f655315
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 23 deletions.
diff --git a/src/components/GForm/GForm.tsx b/src/components/GForm/GForm.tsx
@@ -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,

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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())