Webhook form - changed Forward all (#4622)

# What this PR does - added validation for `Data` field, backend seems to be a bit clumsy on validating that field - Changed `Fordwar All` / `Customise data` to be more straightforward for the user ## Which issue(s) this PR closes Closes #4412
grafana · Jul 8, 2024 · 22556f4 · 22556f4
1 parent 3f80872
commit 22556f4
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 50 deletions.
diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
@@ -78,6 +78,10 @@ function prepareForSave(rawData: Partial<ApiSchemas['Webhook']>, selectedPreset:
     delete data[field];
   });
 
+  if (data.forward_all) {
+    data.data = null;
+  }
+
   return data;
 }
 

diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookFormFields.tsx b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookFormFields.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, Field, Input, Select, Switch, useStyles2 } from '@grafana/ui';
+import { Button, Field, Input, RadioButtonList, Select, Switch, useStyles2 } from '@grafana/ui';
 import Emoji from 'react-emoji-render';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { MonacoEditor } from 'components/MonacoEditor/MonacoEditor';
 import { MONACO_EDITABLE_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
+import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { GSelect } from 'containers/GSelect/GSelect';
 import { Labels } from 'containers/Labels/Labels';
 import { AlertReceiveChannelHelper } from 'models/alert_receive_channel/alert_receive_channel.helpers';
@@ -29,6 +30,21 @@ interface OutgoingWebhookFormFieldsProps {
   onTemplateEditClick: (params: TemplateParams) => void;
 }
 
+const FORWARD = 'forward';
+const CUSTOMIZE = 'customise';
+const FORWARD_RADIO_OPTIONS = [
+  {
+    label: 'Forward whole payload data',
+    value: FORWARD,
+    boolean: true,
+  },
+  {
+    label: 'Customise forwarded data',
+    value: CUSTOMIZE,
+    boolean: false,
+  },
+];
+
 export const OutgoingWebhookFormFields = ({
   preset,
   hasLabelsFeature,
@@ -42,7 +58,6 @@ export const OutgoingWebhookFormFields = ({
   } = useFormContext<ApiSchemas['Webhook']>();
 
   const forwardAll = watch(WebhookFormFieldName.ForwardAll);
-
   const styles = useStyles2(getStyles);
 
   const controls = (
@@ -175,6 +190,7 @@ export const OutgoingWebhookFormFields = ({
         />
       )}
       <Controller
+        rules={{ required: 'Webhook URL is required' }}
         name={WebhookFormFieldName.Url}
         control={control}
         render={({ field }) => (
@@ -299,55 +315,67 @@ export const OutgoingWebhookFormFields = ({
           </Field>
         )}
       />
-      <Controller
-        name={WebhookFormFieldName.ForwardAll}
-        control={control}
-        render={({ field }) => (
-          <Field
-            label="Forward All"
-            description="Forwards whole payload of the alert group and context data to the webhook's url as POST/PUT data"
-            invalid={Boolean(errors.forward_all)}
-            error={errors.forward_all?.message}
-          >
-            <Switch value={field.value} onChange={field.onChange} />
-          </Field>
-        )}
-      />
-      <Controller
-        name={WebhookFormFieldName.Data}
-        control={control}
-        render={({ field }) => (
-          <Field
-            label="Data"
-            description={`Available variables: {{ event }}, {{ user }}, {{ alert_group }}, {{ alert_group_id }}, {{ alert_payload }}, {{ integration }}, {{ notified_users }}, {{ users_to_be_notified }}, {{ responses }}${
-              hasLabelsFeature ? ' {{ webhook }}' : ''
-            }`}
-          >
-            <div className={styles.formRow}>
-              <div className={styles.formField}>
-                <MonacoEditor
-                  data={{}}
-                  showLineNumbers={false}
-                  monacoOptions={{ ...MONACO_EDITABLE_CONFIG, readOnly: forwardAll }}
-                  value={field.value}
-                  onChange={field.onChange}
-                />
-              </div>
-              <Button
-                icon="edit"
-                variant="secondary"
-                onClick={() =>
-                  onTemplateEditClick({
-                    name: field.name,
-                    value: field.value,
-                    displayName: 'Webhook Data',
-                  })
-                }
+
+      <RenderConditionally shouldRender={!preset?.controlled_fields.includes(WebhookFormFieldName.ForwardAll)}>
+        <Field>
+          <Controller
+            name={WebhookFormFieldName.ForwardAll}
+            control={control}
+            render={({ field }) => (
+              <RadioButtonList
+                name="forwardData"
+                options={FORWARD_RADIO_OPTIONS}
+                value={FORWARD_RADIO_OPTIONS.find((opt) => opt.boolean === field.value)?.value}
+                onChange={(value) => field.onChange(value === FORWARD)}
               />
-            </div>
-          </Field>
-        )}
-      />
+            )}
+          />
+        </Field>
+
+        <RenderConditionally
+          shouldRender={!forwardAll}
+          render={() => (
+            <Controller
+              name={WebhookFormFieldName.Data}
+              rules={{ required: 'Data is required' }}
+              control={control}
+              render={({ field }) => (
+                <Field
+                  label="Data"
+                  invalid={Boolean(errors.data)}
+                  error={errors.data?.message}
+                  description={`Available variables: {{ event }}, {{ user }}, {{ alert_group }}, {{ alert_group_id }}, {{ alert_payload }}, {{ integration }}, {{ notified_users }}, {{ users_to_be_notified }}, {{ responses }}${
+                    hasLabelsFeature ? ' {{ webhook }}' : ''
+                  }`}
+                >
+                  <div className={styles.formRow}>
+                    <div className={styles.formField}>
+                      <MonacoEditor
+                        data={{}}
+                        showLineNumbers={false}
+                        monacoOptions={{ ...MONACO_EDITABLE_CONFIG }}
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </div>
+                    <Button
+                      icon="edit"
+                      variant="secondary"
+                      onClick={() =>
+                        onTemplateEditClick({
+                          name: field.name,
+                          value: field.value,
+                          displayName: 'Webhook Data',
+                        })
+                      }
+                    />
+                  </div>
+                </Field>
+              )}
+            />
+          )}
+        />
+      </RenderConditionally>
     </>
   );