[SLO] Form, Mark fields required only when not disabled (#171876)

elastic · Dec 4, 2023 · e0a0168 · e0a0168
1 parent 9676f89
commit e0a0168
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_common/field_selector.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_common/field_selector.tsx
@@ -65,6 +65,8 @@ export function FieldSelector({
       : []
   ).concat(createOptions(suggestions));
 
+  const isDisabled = name !== 'indicator.params.service' && !serviceName;
+
   return (
     <EuiFlexItem>
       <EuiFormRow
@@ -83,15 +85,15 @@ export function FieldSelector({
           defaultValue=""
           name={name}
           control={control}
-          rules={{ required: true }}
+          rules={{ required: !isDisabled }}
           render={({ field, fieldState }) => (
             <EuiComboBox
               {...field}
               aria-label={placeholder}
               async
               data-test-subj={dataTestSubj}
               isClearable
-              isDisabled={name !== 'indicator.params.service' && !serviceName}
+              isDisabled={isDisabled}
               isInvalid={fieldState.invalid}
               isLoading={isLoading}
               onChange={(selected: EuiComboBoxOptionOption[]) => {

diff --git a/...ck/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx b/...ck/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx
@@ -46,7 +46,7 @@ export function IndexFieldSelector({
           defaultValue={defaultValue}
           name={name}
           control={control}
-          rules={{ required: isRequired }}
+          rules={{ required: isRequired && !isDisabled }}
           render={({ field, fieldState }) => (
             <EuiComboBox<string>
               {...field}

diff --git a/...ervability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx b/...ervability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx
@@ -32,22 +32,20 @@ export function CustomKqlIndicatorTypeForm() {
           <IndexSelection />
         </EuiFlexItem>
 
-        <EuiFlexItem>
-          <IndexFieldSelector
-            indexFields={timestampFields}
-            name="indicator.params.timestampField"
-            label={i18n.translate('xpack.observability.slo.sloEdit.timestampField.label', {
-              defaultMessage: 'Timestamp field',
-            })}
-            placeholder={i18n.translate(
-              'xpack.observability.slo.sloEdit.timestampField.placeholder',
-              { defaultMessage: 'Select a timestamp field' }
-            )}
-            isLoading={!!index && isIndexFieldsLoading}
-            isDisabled={!index}
-            isRequired
-          />
-        </EuiFlexItem>
+        <IndexFieldSelector
+          indexFields={timestampFields}
+          name="indicator.params.timestampField"
+          label={i18n.translate('xpack.observability.slo.sloEdit.timestampField.label', {
+            defaultMessage: 'Timestamp field',
+          })}
+          placeholder={i18n.translate(
+            'xpack.observability.slo.sloEdit.timestampField.placeholder',
+            { defaultMessage: 'Select a timestamp field' }
+          )}
+          isLoading={!!index && isIndexFieldsLoading}
+          isDisabled={!index}
+          isRequired
+        />
       </EuiFlexGroup>
 
       <EuiFlexItem>