Closing drawers by clicking outside was changed (#1608)

# What this PR does
Closing drawers by clicking outside was changed to closing by clicking
on buttons

## Which issue(s) this PR fixes
https://github.com/grafana/oncall/issues/1493

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Drawers with Forms are not closing by clicking outside of the drawer. Only by clicking Cancel or X ([1493](https://github.com/grafana/oncall/issues/1493))
 - When the `DANGEROUS_WEBHOOKS_ENABLED` environment variable is set to true, it's possible now to create Outgoing Webhooks
   using URLs without a top-level domain ([1266](https://github.com/grafana/oncall/pull/1266))
 - Updated wording when creating an integration ([1572](https://github.com/grafana/oncall/pull/1572))

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

@@ -51,7 +51,7 @@ const ManualAlertGroup: FC<ManualAlertGroupProps> = (props) => {
 
   return (
     <>
-      <Drawer scrollableContent title="Create manual alert group" onClose={onHide} closeOnMaskClick>
+      <Drawer scrollableContent title="Create manual alert group" onClose={onHide} closeOnMaskClick={false}>
         <VerticalGroup spacing="lg">
           <EscalationVariants
             value={{ userResponders, scheduleResponders }}

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

@@ -1,11 +1,10 @@
 import React, { useCallback } from 'react';
 
-import { Button, Drawer, VerticalGroup } from '@grafana/ui';
+import { Button, Drawer, HorizontalGroup, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import GForm from 'components/GForm/GForm';
-import Text from 'components/Text/Text';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { MaintenanceType } from 'models/maintenance/maintenance.types';
@@ -52,24 +51,20 @@ const MaintenanceForm = observer((props: MaintenanceFormProps) => {
   }, []);
 
   return (
-    <Drawer
-      scrollableContent
-      title={
-        <Text.Title className={cx('title')} level={4}>
-          Start Maintenance Mode
-        </Text.Title>
-      }
-      onClose={onHide}
-      closeOnMaskClick
-    >
+    <Drawer scrollableContent title="Start Maintenance Mode" onClose={onHide} closeOnMaskClick={false}>
       <div className={cx('content')}>
         <VerticalGroup>
           <GForm form={form} data={initialData} onSubmit={handleSubmit} />
-          <WithPermissionControlTooltip userAction={UserActions.MaintenanceWrite}>
-            <Button form={form.name} type="submit">
-              Start
+          <HorizontalGroup justify="flex-end">
+            <Button variant="secondary" onClick={onHide}>
+              Cancel
             </Button>
-          </WithPermissionControlTooltip>
+            <WithPermissionControlTooltip userAction={UserActions.MaintenanceWrite}>
+              <Button form={form.name} type="submit">
+                Start
+              </Button>
+            </WithPermissionControlTooltip>
+          </HorizontalGroup>
         </VerticalGroup>
       </div>
     </Drawer>

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

@@ -1,11 +1,10 @@
 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';
 
 import GForm from 'components/GForm/GForm';
-import Text from 'components/Text/Text';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types';
 import { useStore } from 'state/useStore';
@@ -47,21 +46,22 @@ const OutgoingWebhookForm = observer((props: OutgoingWebhookFormProps) => {
   return (
     <Drawer
       scrollableContent
-      title={
-        <Text.Title className={cx('title')} level={4}>
-          {id === 'new' ? 'Create' : 'Edit'} Outgoing Webhook
-        </Text.Title>
-      }
+      title={id === 'new' ? 'Create Outgoing Webhook' : 'Edit Outgoing Webhook'}
       onClose={onHide}
-      closeOnMaskClick
+      closeOnMaskClick={false}
     >
       <div className={cx('content')} data-testid="test__outgoingWebhookEditForm">
         <GForm form={form} data={data} onSubmit={handleSubmit} />
-        <WithPermissionControlTooltip userAction={UserActions.OutgoingWebhooksWrite}>
-          <Button form={form.name} type="submit">
-            {id === '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">
+              {id === 'new' ? 'Create' : 'Update'} Webhook
+            </Button>
+          </WithPermissionControlTooltip>
+        </HorizontalGroup>
       </div>
     </Drawer>
   );

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

@@ -1,11 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
 
-import { Button, Drawer, VerticalGroup } from '@grafana/ui';
+import { Button, Drawer, HorizontalGroup, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import GForm from 'components/GForm/GForm';
-import Text from 'components/Text/Text';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { Schedule, ScheduleType } from 'models/schedule/schedule.types';
 import { useStore } from 'state/useStore';
@@ -66,22 +65,23 @@ const ScheduleForm = observer((props: ScheduleFormProps) => {
   return (
     <Drawer
       scrollableContent
-      title={
-        <Text.Title className={cx('title')} level={4}>
-          {id === 'new' ? 'New' : 'Edit'} Schedule
-        </Text.Title>
-      }
+      title={id === 'new' ? 'New Schedule' : 'Edit Schedule'}
       onClose={onHide}
-      closeOnMaskClick
+      closeOnMaskClick={false}
     >
       <div className={cx('content')}>
         <VerticalGroup>
           <GForm form={formConfig} data={data} onSubmit={handleSubmit} />
-          <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
-            <Button form={formConfig.name} type="submit">
-              {id === 'new' ? 'Create' : 'Update'} Schedule
+          <HorizontalGroup justify="flex-end">
+            <Button variant="secondary" onClick={onHide}>
+              Cancel
             </Button>
-          </WithPermissionControlTooltip>
+            <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
+              <Button form={formConfig.name} type="submit">
+                {id === 'new' ? 'Create' : 'Update'} Schedule
+              </Button>
+            </WithPermissionControlTooltip>
+          </HorizontalGroup>
         </VerticalGroup>
       </div>
     </Drawer>