Introduce compressed FrequencyPicker and DateRangePicker`

Also: * Clean up some code Signed-off-by: Miki <[email protected]>
opensearch-project · Jul 22, 2024 · 88f51c5 · 88f51c5
1 parent 0fc1b9d
commit 88f51c5
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
 );
 

diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
@@ -91,8 +91,11 @@ class DateRangePicker extends React.PureComponent {
       };
     });
   };
+
   render() {
     const { rangeStartDateTime, rangeEndDateTime } = this.state;
+    const { compressed } = this.props;
+
     return (
       <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
         <EuiFlexItem grow={false} style={{ padding: '0 10px' }}>
@@ -109,6 +112,7 @@ class DateRangePicker extends React.PureComponent {
                 showTimeSelect
                 popperClassName="euiRangePicker--popper"
                 shouldCloseOnSelect
+                className={compressed ? 'euiFieldText--compressed' : ''}
                 {...rangeStartDateTime}
               />
             }
@@ -123,6 +127,7 @@ class DateRangePicker extends React.PureComponent {
                 showTimeSelect
                 popperClassName="euiRangePicker--popper"
                 shouldCloseOnSelect
+                className={compressed ? 'euiFieldText--compressed' : ''}
                 {...rangeEndDateTime}
               />
             }

diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
@@ -323,6 +323,7 @@ class MonitorHistory extends PureComponent {
             initialStartTime={this.initialStartTime}
             initialEndTime={this.initialEndTime}
             onRangeChange={this.handleRangeChange}
+            compressed
           />,
         ]}
       >