change(ui) - metric - alert form height

frontend/app/components/Alerts/AlertForm.js

@@ -47,7 +47,7 @@ const Section = ({ index, title, description, content }) => (
 const integrationsRoute = client(CLIENT_TABS.INTEGRATIONS);
 
 const AlertForm = props => {
-  const { instance, slackChannels, webhooks, loading, onDelete, deleting, triggerOptions, metricId } = props;  
+  const { instance, slackChannels, webhooks, loading, onDelete, deleting, triggerOptions, metricId, style={ width: '580px', height: '100vh' } } = props;
   const write = ({ target: { value, name } }) => props.edit({ [ name ]: value })
   const writeOption = (e, { name, value }) => props.edit({ [ name ]: value });
   const onChangeOption = (e, { checked, name }) => props.edit({ [ name ]: checked })
@@ -71,7 +71,7 @@ const AlertForm = props => {
   const isThreshold = instance.detectionMethod === 'threshold';
 
   return (
-    <Form className={ cn("p-6", stl.wrapper)} style={{ width: '580px' }} onSubmit={() => props.onSubmit(instance)} id="alert-form">
+    <Form className={ cn("p-6", stl.wrapper)} style={style} onSubmit={() => props.onSubmit(instance)} id="alert-form">
        <div className={cn(stl.content, '-mx-6 px-6 pb-12')}>
         <input
           autoFocus={ true }

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

@@ -11,10 +11,16 @@ import { confirm } from 'UI/Confirmation';
 interface Props {
   showModal?: boolean;
   metricId?: number;
-  onClose: () => void;
+  onClose?: () => void;
+  webhooks: any;
+  fetchWebhooks: Function;
+  save: Function;
+  remove: Function;
+  init: Function;
+  edit: Function;
 }
-function AlertFormModal(props) {
-  const { metricId = null, showModal = false, webhooks, setShowAlerts } = props;
+function AlertFormModal(props: Props) {
+  const { metricId = null, showModal = false, webhooks } = props;
   const [showForm, setShowForm] = useState(false);
 
   useEffect(() => {
@@ -30,6 +36,9 @@ function AlertFormModal(props) {
       if (!wasUpdating) {
         toggleForm(null, false);
       }
+      if (props.onClose) {
+        props.onClose();
+      }
     })
   }
 
@@ -79,6 +88,7 @@ function AlertFormModal(props) {
             onSubmit={saveAlert}
             onClose={props.onClose}
             onDelete={onDelete}
+            style={{ width: '580px', height: '100vh - 200px' }}
           />
       }
       />

frontend/app/components/Alerts/alertForm.css

@@ -1,5 +1,4 @@
 .wrapper {
-  height: 100vh;
   position: relative;
 }