From aa3b048f25620936cc10ec098ad6437ac7a48873 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Thu, 16 Apr 2020 12:43:03 +0200
Subject: [PATCH] update types

---
 .../components/settings/certificate_form.tsx  | 21 +++++++---
 .../components/settings/indices_form.tsx      |  8 +++-
 .../plugins/uptime/public/pages/settings.tsx  | 41 +++++++++++++------
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/settings/certificate_form.tsx b/x-pack/legacy/plugins/uptime/public/components/settings/certificate_form.tsx
index 6c7660023cf8e6..5103caee1e1c05 100644
--- a/x-pack/legacy/plugins/uptime/public/components/settings/certificate_form.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/settings/certificate_form.tsx
@@ -18,10 +18,21 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
-import { defaultDynamicSettings } from '../../../common/runtime_types';
+import { defaultDynamicSettings, DynamicSettings } from '../../../common/runtime_types';
 import { selectDynamicSettings } from '../../state/selectors';
 
-export const CertificateExpirationForm: React.FC = ({
+type NumStr = string | number;
+
+export type OnFieldChangeType = (field: string, value?: NumStr) => void;
+
+export interface SettingsFormProps {
+  onChange: OnFieldChangeType;
+  formFields: DynamicSettings | null;
+  fieldErrors: any;
+  isDisabled: boolean;
+}
+
+export const CertificateExpirationForm: React.FC<SettingsFormProps> = ({
   onChange,
   formFields,
   fieldErrors,
@@ -66,7 +77,7 @@ export const CertificateExpirationForm: React.FC = ({
               defaultMessage="The default value is {defaultValue}"
               values={{
                 defaultValue: (
-                  <EuiCode>{defaultDynamicSettings.certificatesThresholds.errorState}</EuiCode>
+                  <EuiCode>{defaultDynamicSettings?.certificatesThresholds?.errorState}</EuiCode>
                 ),
               }}
             />
@@ -110,12 +121,12 @@ export const CertificateExpirationForm: React.FC = ({
               defaultMessage="The default value is {defaultValue}"
               values={{
                 defaultValue: (
-                  <EuiCode>{defaultDynamicSettings.certificatesThresholds.warningState}</EuiCode>
+                  <EuiCode>{defaultDynamicSettings?.certificatesThresholds?.warningState}</EuiCode>
                 ),
               }}
             />
           }
-          isInvalid={!!fieldErrors?.certificatesThresholds.warningState}
+          isInvalid={!!fieldErrors?.certificatesThresholds?.warningState}
           label={
             <FormattedMessage
               id="xpack.uptime.sourceConfiguration.warningStateLabel"
diff --git a/x-pack/legacy/plugins/uptime/public/components/settings/indices_form.tsx b/x-pack/legacy/plugins/uptime/public/components/settings/indices_form.tsx
index 97508521f57ba5..c28eca2ea229e5 100644
--- a/x-pack/legacy/plugins/uptime/public/components/settings/indices_form.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/settings/indices_form.tsx
@@ -17,8 +17,14 @@ import {
 } from '@elastic/eui';
 import { defaultDynamicSettings } from '../../../common/runtime_types';
 import { selectDynamicSettings } from '../../state/selectors';
+import { SettingsFormProps } from './certificate_form';
 
-export const IndicesForm: React.FC = ({ onChange, formFields, fieldErrors, isDisabled }) => {
+export const IndicesForm: React.FC<SettingsFormProps> = ({
+  onChange,
+  formFields,
+  fieldErrors,
+  isDisabled,
+}) => {
   const dss = useSelector(selectDynamicSettings);
 
   return (
diff --git a/x-pack/legacy/plugins/uptime/public/pages/settings.tsx b/x-pack/legacy/plugins/uptime/public/pages/settings.tsx
index 41bef871d0bec1..049dffecd3f2ef 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/settings.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/settings.tsx
@@ -17,18 +17,42 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useDispatch, useSelector } from 'react-redux';
-import { isEqual, set, cloneDeep } from 'lodash';
+import { cloneDeep, isEqual, set } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { Link } from 'react-router-dom';
 import { selectDynamicSettings } from '../state/selectors';
 import { getDynamicSettings, setDynamicSettings } from '../state/actions/dynamic_settings';
-import { DynamicSettings, DynamicSettingsType } from '../../common/runtime_types';
+import { DynamicSettings } from '../../common/runtime_types';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
 import { OVERVIEW_ROUTE } from '../../common/constants';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { UptimePage, useUptimeTelemetry } from '../hooks';
 import { IndicesForm } from '../components/settings/indices_form';
-import { CertificateExpirationForm } from '../components/settings/certificate_form';
+import {
+  CertificateExpirationForm,
+  OnFieldChangeType,
+} from '../components/settings/certificate_form';
+
+const getFieldErrors = (formFields: DynamicSettings | null) => {
+  if (formFields) {
+    const blankStr = 'May not be blank';
+    const { certificatesThresholds, heartbeatIndices } = formFields;
+    const heartbeatIndErr = heartbeatIndices.match(/^\S+$/) ? '' : blankStr;
+    const errorStateErr = certificatesThresholds?.errorState ? null : blankStr;
+    const warningStateErr = certificatesThresholds?.warningState ? null : blankStr;
+    return {
+      heartbeatIndices: heartbeatIndErr,
+      certificatesThresholds:
+        errorStateErr || warningStateErr
+          ? {
+              errorState: errorStateErr,
+              warningState: warningStateErr,
+            }
+          : null,
+    };
+  }
+  return null;
+};
 
 export const SettingsPage = () => {
   const dss = useSelector(selectDynamicSettings);
@@ -52,18 +76,11 @@ export const SettingsPage = () => {
     setFormFields({ ...dss.settings });
   }
 
-  const blankStr = 'May not be blank';
-  const fieldErrors = formFields && {
-    heartbeatIndices: formFields.heartbeatIndices.match(/^\S+$/) ? null : blankStr,
-    certificatesThresholds: {
-      errorState: formFields.certificatesThresholds?.errorState ? null : blankStr,
-      warningState: formFields.certificatesThresholds?.warningState ? null : blankStr,
-    },
-  };
+  const fieldErrors = getFieldErrors(formFields);
 
   const isFormValid = !(fieldErrors && Object.values(fieldErrors).find(v => !!v));
 
-  const onChangeFormField = (field: keyof DynamicSettings, value: any) => {
+  const onChangeFormField: OnFieldChangeType = (field, value) => {
     if (formFields) {
       const newFormFields = cloneDeep(formFields);
       set(newFormFields, field, value);