fix(ui): fix alert creation modal (#1972)

frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx

@@ -78,30 +78,15 @@ function AlertFormModal(props: Props) {
     };
 
     return (
-        <SlideModal
-            title={
-                <div className="flex items-center">
-                    <span className="m-3">{'Create Alert'}</span>
-                </div>
-            }
-            isDisplayed={showModal}
+        <AlertForm
+            metricId={metricId}
+            edit={alertsStore.edit}
+            slackChannels={slackChannels}
+            msTeamsChannels={msTeamsChannels}
+            webhooks={hooks}
+            onSubmit={saveAlert}
             onClose={props.onClose}
-            size="medium"
-            content={
-                showModal && (
-                    <AlertForm
-                        metricId={metricId}
-                        edit={alertsStore.edit}
-                        slackChannels={slackChannels}
-                        msTeamsChannels={msTeamsChannels}
-                        webhooks={hooks}
-                        onSubmit={saveAlert}
-                        onClose={props.onClose}
-                        onDelete={onDelete}
-                        style={{ width: '580px', height: '100vh - 200px' }}
-                    />
-                )
-            }
+            onDelete={onDelete}
         />
     );
 }

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -24,7 +24,7 @@ type Props = IProps & RouteComponentProps;
 function DashboardView(props: Props) {
   const { siteId, dashboardId } = props;
   const { dashboardStore } = useStore();
-  const { showModal } = useModal();
+  const { showModal, hideModal } = useModal();
 
   const showAlertModal = dashboardStore.showAlertModal;
   const loading = dashboardStore.fetchingDashboard;
@@ -40,6 +40,22 @@ function DashboardView(props: Props) {
     });
   };
 
+  useEffect(() => {
+    if (showAlertModal) {
+      showModal(
+        <AlertFormModal
+          showModal={showAlertModal}
+          onClose={() => {
+            hideModal();
+            dashboardStore.toggleAlertModal(false)
+          }}
+        />,
+        { right: false, width: 580 },
+        () => dashboardStore.toggleAlertModal(false)
+      )
+    }
+  }, [showAlertModal])
+
   const pushQuery = () => {
     if (!queryParams.has('modal')) props.history.push('?modal=addMetric');
   };
@@ -85,10 +101,6 @@ function DashboardView(props: Props) {
           onEditHandler={onAddWidgets}
           id="report"
         />
-        <AlertFormModal
-          showModal={showAlertModal}
-          onClose={() => dashboardStore.toggleAlertModal(false)}
-        />
       </div>
     </Loader>
   );

frontend/app/components/Modal/index.tsx

@@ -8,30 +8,36 @@ const ModalContext = createContext({
     right: true,
     onClose: () => {},
   },
-  showModal: (component: any, props: any) => {},
+  showModal: (component: any, props: Record<string, any>, onClose?: () => void) => {},
   hideModal: () => {},
 });
 
 export class ModalProvider extends Component {
+  onCloseCb = () => null;
+
   handleKeyDown = (e: any) => {
     if (e.keyCode === 27) {
       this.hideModal();
     }
   };
 
-  showModal = (component, props = { right: true }) => {
+  showModal = (component, props = { right: true }, onClose?: () => void) => {
     this.setState({
       component,
       props,
     });
     document.addEventListener('keydown', this.handleKeyDown);
     document.querySelector('body').style.overflow = 'hidden';
+    this.onCloseCb = onClose || this.onCloseCb;
   };
 
   hideModal = () => {
     document.removeEventListener('keydown', this.handleKeyDown);
     document.querySelector('body').style.overflow = 'visible';
     const { props } = this.state;
+    if (this.onCloseCb) {
+      this.onCloseCb();
+    }
     if (props.onClose) {
       props.onClose();
     }