Minor updates to new/edit webhooks drawer (#1918)

- Do not close drawer when clicking outside of it
 - Update title to show the close icon
 - Add cancel button
 - Move `forward_all` above `data`
 - Enable/Disable `data` based on `forward_all` value

grafana-plugin/src/components/GForm/GForm.tsx

@@ -79,7 +79,18 @@ function renderFormControl(formItem: FormItem, register: any, control: any, onCh
 
     case FormItemType.Switch:
       return (
-        <Switch {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
+        <InputControl
+          render={({ field: { ...field } }) => {
+            return (
+              <Switch
+                {...register(formItem.name, formItem.validation)}
+                onChange={(value) => onChangeFn(field, value)}
+              />
+            );
+          }}
+          control={control}
+          name={formItem.name}
+        />
       );
 
     case FormItemType.RemoteSelect:
@@ -114,7 +125,7 @@ class GForm extends React.Component<GFormProps, {}> {
             return (
               <Field
                 key={formIndex}
-                disabled={formItem.getDisabled ? formItem.getDisabled(data) : false}
+                disabled={formItem.getDisabled ? formItem.getDisabled(getValues()) : false}
                 label={formItem.label || capitalCase(formItem.name)}
                 invalid={!!errors[formItem.name]}
                 error={`${capitalCase(formItem.name)} is required`}

grafana-plugin/src/containers/OutgoingWebhook2Form/OutgoingWebhook2Form.config.tsx

@@ -172,20 +172,20 @@ export const form: { name: string; fields: FormItem[] } = {
         rows: 2,
       },
     },
+    {
+      name: 'forward_all',
+      normalize: (value) => Boolean(value),
+      type: FormItemType.Switch,
+      description: "Forwards whole payload of the alert to the webhook's url as POST/PUT data",
+    },
     {
       name: 'data',
-      getDisabled: (form_data) => Boolean(form_data?.forward_whole_payload),
+      getDisabled: (data) => Boolean(data?.forward_all),
       type: FormItemType.TextArea,
       description: 'Available variables: {{ alert_payload }}, {{ alert_group_id }}',
       extra: {
         rows: 9,
       },
     },
-    {
-      name: 'forward_all',
-      normalize: (value) => Boolean(value),
-      type: FormItemType.Switch,
-      description: "Forwards whole payload of the alert to the webhook's url as POST/PUT data",
-    },
   ],
 };

grafana-plugin/src/containers/OutgoingWebhook2Form/OutgoingWebhook2Form.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { Button, Drawer } from '@grafana/ui';
+import { Button, Drawer, HorizontalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
@@ -52,21 +52,22 @@ const OutgoingWebhook2Form = observer((props: OutgoingWebhook2FormProps) => {
   return (
     <Drawer
       scrollableContent
-      title={
-        <Text.Title className={cx('title')} level={4}>
-          {action === 'new' ? 'Create' : 'Edit'} Outgoing Webhook
-        </Text.Title>
-      }
+      title={action === 'new' ? 'Create Outgoing Webhook' : 'Edit Outgoing Webhook'}
       onClose={onHide}
-      closeOnMaskClick
+      closeOnMaskClick={false}
     >
       <div className={cx('content')} data-testid="test__outgoingWebhook2EditForm">
         <GForm form={form} data={data} onSubmit={handleSubmit} />
-        <WithPermissionControlTooltip userAction={UserActions.OutgoingWebhooksWrite}>
-          <Button form={form.name} type="submit" disabled={data.is_legacy}>
-            {action === 'new' ? 'Create' : 'Update'} Webhook
+        <HorizontalGroup justify={'flex-end'}>
+          <Button variant="secondary" onClick={onHide}>
+            Cancel
           </Button>
-        </WithPermissionControlTooltip>
+          <WithPermissionControlTooltip userAction={UserActions.OutgoingWebhooksWrite}>
+            <Button form={form.name} type="submit" disabled={data.is_legacy}>
+              {action === 'new' ? 'Create' : 'Update'} Webhook
+            </Button>
+          </WithPermissionControlTooltip>
+        </HorizontalGroup>
       </div>
       {data.is_legacy ? (
         <div className={cx('content')}>