From 8f54d9980d943393ec2dc93d4182491eb47ae318 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Mon, 22 Jul 2024 12:59:08 -0700
Subject: [PATCH] Introduce `compressed` FrequencyPicker

Also:
* Clean up some code

Signed-off-by: Miki <miki@amazon.com>
---
 .../components/MonitorType/MonitorType.js     | 10 +--
 .../components/Schedule/Frequencies/Daily.js  | 63 ++++++++++---------
 .../Schedule/Frequencies/FrequencyPicker.js   |  2 +-
 .../Schedule/Frequencies/Monthly.js           |  4 +-
 .../components/Schedule/Frequencies/Weekly.js |  4 +-
 5 files changed, 39 insertions(+), 44 deletions(-)

diff --git a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
index ae793ec4b..988791531 100644
--- a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
+++ b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
@@ -4,15 +4,7 @@
  */
 
 import React from 'react';
-import {
-  EuiFlexGrid,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormLabel,
-  EuiCompressedFormRow,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGrid, EuiFlexItem, EuiFormLabel, EuiSpacer, EuiText } from '@elastic/eui';
 import FormikCheckableCard from '../../../../components/FormControls/FormikCheckableCard';
 import { MONITOR_TYPE, SEARCH_TYPE } from '../../../../utils/constants';
 import { FORMIK_INITIAL_TRIGGER_VALUES } from '../../../CreateTrigger/containers/CreateTrigger/utils/constants';
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
index 80e689890..23d451d03 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
@@ -6,37 +6,40 @@
 import React from 'react';
 import { Field } from 'formik';
 import moment from 'moment';
-import { EuiCompressedFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import TimezoneComboBox from './TimezoneComboBox';
 
-const Daily = () => (
-  <EuiFlexGroup direction="column" style={{ marginTop: '5px' }}>
-    <EuiFlexItem style={{ marginTop: '0px' }}>
-      <Field name="daily">
-        {({
-          field: { value, onChange, onBlur, ...rest },
-          form: { touched, errors, setFieldValue },
-        }) => (
-          <EuiCompressedFormRow label="Around" style={{ marginTop: '0px' }}>
-            <EuiDatePicker
-              showTimeSelect
-              showTimeSelectOnly
-              selected={moment().hours(value).minutes(0)}
-              onChange={(date) => {
-                setFieldValue('daily', date.hours());
-              }}
-              dateFormat="hh:mm A"
-              timeIntervals={60}
-              {...rest}
-            />
-          </EuiCompressedFormRow>
-        )}
-      </Field>
-    </EuiFlexItem>
-    <EuiFlexItem style={{ marginTop: '0px' }}>
-      <TimezoneComboBox />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+const Daily = ({ compressed }) => {
+  return (
+    <EuiFlexGroup direction="column" style={{ marginTop: '5px' }}>
+      <EuiFlexItem style={{ marginTop: '0px' }}>
+        <Field name="daily">
+          {({
+            field: { value, onChange, onBlur, className, ...rest },
+            form: { touched, errors, setFieldValue },
+          }) => (
+            <EuiFormRow label="Around" style={{ marginTop: '0px' }} compressed={compressed}>
+              <EuiDatePicker
+                showTimeSelect
+                showTimeSelectOnly
+                selected={moment().hours(value).minutes(0)}
+                onChange={(date) => {
+                  setFieldValue('daily', date.hours());
+                }}
+                dateFormat="hh:mm A"
+                timeIntervals={60}
+                className={compressed ? 'euiFieldText--compressed' : ''}
+                {...rest}
+              />
+            </EuiFormRow>
+          )}
+        </Field>
+      </EuiFlexItem>
+      <EuiFlexItem style={{ marginTop: '0px' }}>
+        <TimezoneComboBox />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
 
 export default Daily;
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
index fab615a39..f9285e8b9 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
@@ -23,7 +23,7 @@ const components = {
 const FrequencyPicker = (props) => {
   const type = props.formik.values.frequency;
   const Component = components[type];
-  return <Component />;
+  return <Component compressed />;
 };
 
 export default connect(FrequencyPicker);
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
index 89c6c9ea4..0364b8588 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
@@ -10,7 +10,7 @@ import { FormikFieldNumber, FormikSelect } from '../../../../../components/FormC
 import { isInvalid, hasError, validateMonthlyDay } from '../../../../../utils/validate';
 import { monthlyTypes } from './utils/constants';
 
-const Monthly = () => (
+const Monthly = ({ compressed }) => (
   <Fragment>
     <EuiFlexGroup alignItems="flexStart">
       <EuiFlexItem>
@@ -45,7 +45,7 @@ const Monthly = () => (
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer size="xs" />
-    <Daily />
+    <Daily compressed={compressed} />
   </Fragment>
 );
 
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
index bdb5518df..911e6d3d0 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
@@ -31,7 +31,7 @@ const validate = (value) => {
   if (!booleans.some((bool) => bool)) return 'Must select at least one weekday';
 };
 
-const Weekly = () => (
+const Weekly = ({ compressed }) => (
   <Fragment>
     <Field name="weekly" validate={validate}>
       {({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
@@ -47,7 +47,7 @@ const Weekly = () => (
         </EuiCompressedFormRow>
       )}
     </Field>
-    <Daily />
+    <Daily compressed={compressed} />
   </Fragment>
 );