Implemented ability to clear and properly validate alert interval

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx

@@ -86,7 +86,7 @@ describe('alert_form', () => {
             uiSettings: deps!.uiSettings,
           }}
         >
-          <AlertForm alert={initialAlert} dispatch={() => {}} errors={{ name: [] }} />
+          <AlertForm alert={initialAlert} dispatch={() => {}} errors={{ name: [], interval: [] }} />
         </AlertsContextProvider>
       );
 
@@ -165,7 +165,7 @@ describe('alert_form', () => {
             uiSettings: deps!.uiSettings,
           }}
         >
-          <AlertForm alert={initialAlert} dispatch={() => {}} errors={{ name: [] }} />
+          <AlertForm alert={initialAlert} dispatch={() => {}} errors={{ name: [], interval: [] }} />
         </AlertsContextProvider>
       );
 

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx

@@ -48,7 +48,7 @@ export function validateBaseProperties(alertObject: Alert) {
       })
     );
   }
-  if (!alertObject.schedule.interval) {
+  if (alertObject.schedule.interval.length < 2) {
     errors.interval.push(
       i18n.translate('xpack.triggersActionsUI.sections.alertForm.error.requiredIntervalText', {
         defaultMessage: 'Check interval is required.',
@@ -81,11 +81,15 @@ export const AlertForm = ({ alert, canChangeTrigger = true, dispatch, errors }:
   );
 
   const [alertTypesIndex, setAlertTypesIndex] = useState<AlertTypeIndex | undefined>(undefined);
-  const [alertInterval, setAlertInterval] = useState<number>(
-    alert.schedule.interval ? parseInt(alert.schedule.interval.replace(/^[A-Za-z]+$/, ''), 0) : 1
+  const [alertInterval, setAlertInterval] = useState<number | undefined>(
+    alert.schedule.interval
+      ? parseInt(alert.schedule.interval.replace(/^[A-Za-z]+$/, ''), 0)
+      : undefined
   );
   const [alertIntervalUnit, setAlertIntervalUnit] = useState<string>(
-    alert.schedule.interval ? alert.schedule.interval.replace(alertInterval.toString(), '') : 'm'
+    alert.schedule.interval
+      ? alert.schedule.interval.replace((alertInterval ?? '').toString(), '')
+      : 'm'
   );
   const [alertThrottle, setAlertThrottle] = useState<number | null>(
     alert.throttle ? parseInt(alert.throttle.replace(/^[A-Za-z]+$/, ''), 0) : null
@@ -344,19 +348,27 @@ export const AlertForm = ({ alert, canChangeTrigger = true, dispatch, errors }:
       <EuiSpacer size="m" />
       <EuiFlexGrid columns={2}>
         <EuiFlexItem>
-          <EuiFormRow fullWidth compressed label={labelForAlertChecked}>
+          <EuiFormRow
+            fullWidth
+            compressed
+            label={labelForAlertChecked}
+            isInvalid={errors.interval.length > 0}
+            error={errors.interval}
+          >
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
                 <EuiFieldNumber
                   fullWidth
                   min={1}
+                  isInvalid={errors.interval.length > 0}
                   compressed
-                  value={alertInterval}
+                  value={alertInterval || ''}
                   name="interval"
                   data-test-subj="intervalInput"
                   onChange={e => {
-                    const interval = e.target.value !== '' ? parseInt(e.target.value, 10) : null;
-                    setAlertInterval(interval ?? 1);
+                    const interval =
+                      e.target.value !== '' ? parseInt(e.target.value, 10) : undefined;
+                    setAlertInterval(interval);
                     setScheduleProperty('interval', `${e.target.value}${alertIntervalUnit}`);
                   }}
                 />
@@ -366,7 +378,7 @@ export const AlertForm = ({ alert, canChangeTrigger = true, dispatch, errors }:
                   fullWidth
                   compressed
                   value={alertIntervalUnit}
-                  options={getTimeOptions(alertInterval)}
+                  options={getTimeOptions(alertInterval ?? 1)}
                   onChange={e => {
                     setAlertIntervalUnit(e.target.value);
                     setScheduleProperty('interval', `${alertInterval}${e.target.value}`);

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts

@@ -62,7 +62,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await fieldOptions[1].click();
       // need this two out of popup clicks to close them
       await nameInput.click();
-      await testSubjects.click('intervalInput');
+      const intervalInput = await testSubjects.find('intervalInput');
+      await intervalInput.click();
+      await intervalInput.clearValue();
+      const validationError = await find.byCssSelector(`.euiFormErrorText`);
+      expect(validationError.isDisplayed).to.be(true);
+      await intervalInput.type(1);
 
       await testSubjects.click('.slack-ActionTypeSelectOption');
       await testSubjects.click('createActionConnectorButton');