remove "fix errors" badge to fix UX - users can see errors in line be…

…fore pressing save so the value of this badge has diminished
elastic · Nov 9, 2020 · df07ac5 · df07ac5
1 parent ed2070f
commit df07ac5
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 61 deletions.
diff --git a/...ns/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts b/...ns/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts
@@ -8,7 +8,6 @@ export { ActiveBadge } from './active_badge';
 export { ErrableFormRow } from './form_errors';
 export { LearnMoreLink } from './learn_more_link';
 export { OptionalLabel } from './optional_label';
-export { PhaseErrorMessage } from './phase_error_message';
 export { PolicyJsonFlyout } from './policy_json_flyout';
 export { DescribedFormField } from './described_form_field';
 

diff --git a/...cle_management/public/application/sections/edit_policy/components/phase_error_message.tsx b/...cle_management/public/application/sections/edit_policy/components/phase_error_message.tsx
diff --git a/...ement/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx b/...ement/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx
@@ -13,17 +13,11 @@ import { EuiDescribedFormGroup, EuiTextColor } from '@elastic/eui';
 
 import { Phases } from '../../../../../../../common/types';
 
-import {
-  useFormData,
-  useFormContext,
-  UseField,
-  ToggleField,
-  NumericField,
-} from '../../../../../../shared_imports';
+import { useFormData, UseField, ToggleField, NumericField } from '../../../../../../shared_imports';
 
 import { useEditPolicyContext } from '../../../edit_policy_context';
 
-import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, DescribedFormField } from '../../';
+import { LearnMoreLink, ActiveBadge, DescribedFormField } from '../../';
 
 import { MinAgeInputField, DataTierAllocationField, SetPriorityInput } from '../shared_fields';
 
@@ -44,14 +38,12 @@ const formFieldPaths = {
 
 export const ColdPhase: FunctionComponent = () => {
   const { policy } = useEditPolicyContext();
-  const form = useFormContext();
 
   const [formData] = useFormData({
     watch: [formFieldPaths.enabled],
   });
 
   const enabled = get(formData, formFieldPaths.enabled);
-  const isShowingErrors = form.isValid === false;
 
   return (
     <div id="coldPhaseContent" aria-live="polite" role="region">
@@ -66,8 +58,7 @@ export const ColdPhase: FunctionComponent = () => {
                   defaultMessage="Cold phase"
                 />
               </h2>{' '}
-              {enabled && !isShowingErrors ? <ActiveBadge /> : null}
-              <PhaseErrorMessage isShowingErrors={isShowingErrors} />
+              {enabled && <ActiveBadge />}
             </div>
           }
           titleSize="s"

diff --git a/...t/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx b/...t/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
@@ -9,14 +9,9 @@ import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiDescribedFormGroup, EuiTextColor, EuiFormRow } from '@elastic/eui';
 
-import {
-  useFormData,
-  UseField,
-  ToggleField,
-  useFormContext,
-} from '../../../../../../shared_imports';
+import { useFormData, UseField, ToggleField } from '../../../../../../shared_imports';
 
-import { ActiveBadge, LearnMoreLink, OptionalLabel, PhaseErrorMessage } from '../../index';
+import { ActiveBadge, LearnMoreLink, OptionalLabel } from '../../index';
 
 import { MinAgeInputField, SnapshotPoliciesField } from '../shared_fields';
 
@@ -25,13 +20,11 @@ const formFieldPaths = {
 };
 
 export const DeletePhase: FunctionComponent = () => {
-  const form = useFormContext();
   const [formData] = useFormData({
     watch: formFieldPaths.enabled,
   });
 
   const enabled = get(formData, formFieldPaths.enabled);
-  const isShowingErrors = form.isValid === false;
 
   return (
     <div id="deletePhaseContent" aria-live="polite" role="region">
@@ -44,8 +37,7 @@ export const DeletePhase: FunctionComponent = () => {
                 defaultMessage="Delete phase"
               />
             </h2>{' '}
-            {enabled && !isShowingErrors ? <ActiveBadge /> : null}
-            <PhaseErrorMessage isShowingErrors={isShowingErrors} />
+            {enabled && <ActiveBadge />}
           </div>
         }
         titleSize="s"

diff --git a/...agement/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx b/...agement/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
@@ -19,7 +19,6 @@ import {
 import { Phases } from '../../../../../../../common/types';
 
 import {
-  useFormContext,
   useFormData,
   UseField,
   SelectField,
@@ -33,7 +32,7 @@ import { ROLLOVER_EMPTY_VALIDATION } from '../../../form';
 
 import { ROLLOVER_FORM_PATHS } from '../../../constants';
 
-import { LearnMoreLink, ActiveBadge, PhaseErrorMessage } from '../../';
+import { LearnMoreLink, ActiveBadge } from '../../';
 
 import { Forcemerge, SetPriorityInput, useRolloverPath } from '../shared_fields';
 
@@ -42,13 +41,11 @@ import { maxSizeStoredUnits, maxAgeUnits } from './constants';
 const hotProperty: keyof Phases = 'hot';
 
 export const HotPhase: FunctionComponent = () => {
-  const form = useFormContext();
   const [formData] = useFormData({
     watch: useRolloverPath,
   });
   const isRolloverEnabled = get(formData, useRolloverPath);
 
-  const isShowingErrors = form.isValid === false;
   const [showEmptyRolloverFieldsError, setShowEmptyRolloverFieldsError] = useState(false);
 
   return (
@@ -62,8 +59,7 @@ export const HotPhase: FunctionComponent = () => {
                 defaultMessage="Hot phase"
               />
             </h2>{' '}
-            {isShowingErrors ? null : <ActiveBadge />}
-            <PhaseErrorMessage isShowingErrors={isShowingErrors} />
+            <ActiveBadge />
           </div>
         }
         titleSize="s"

diff --git a/...ement/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx b/...ement/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx
@@ -17,21 +17,15 @@ import {
   EuiDescribedFormGroup,
 } from '@elastic/eui';
 
-import {
-  useFormData,
-  UseField,
-  ToggleField,
-  useFormContext,
-  NumericField,
-} from '../../../../../../shared_imports';
+import { useFormData, UseField, ToggleField, NumericField } from '../../../../../../shared_imports';
 
 import { Phases } from '../../../../../../../common/types';
 
 import { useRolloverPath, MinAgeInputField, Forcemerge, SetPriorityInput } from '../shared_fields';
 
 import { useEditPolicyContext } from '../../../edit_policy_context';
 
-import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, DescribedFormField } from '../../';
+import { LearnMoreLink, ActiveBadge, DescribedFormField } from '../../';
 
 import { DataTierAllocationField } from '../shared_fields';
 
@@ -55,15 +49,13 @@ const formFieldPaths = {
 
 export const WarmPhase: FunctionComponent = () => {
   const { policy } = useEditPolicyContext();
-  const form = useFormContext();
   const [formData] = useFormData({
     watch: [useRolloverPath, formFieldPaths.enabled, formFieldPaths.warmPhaseOnRollover],
   });
 
   const enabled = get(formData, formFieldPaths.enabled);
   const hotPhaseRolloverEnabled = get(formData, useRolloverPath);
   const warmPhaseOnRollover = get(formData, formFieldPaths.warmPhaseOnRollover);
-  const isShowingErrors = form.isValid === false;
 
   return (
     <div id="warmPhaseContent" aria-live="polite" role="region" aria-relevant="additions">
@@ -77,8 +69,7 @@ export const WarmPhase: FunctionComponent = () => {
                   defaultMessage="Warm phase"
                 />
               </h2>{' '}
-              {enabled && !isShowingErrors ? <ActiveBadge /> : null}
-              <PhaseErrorMessage isShowingErrors={isShowingErrors} />
+              {enabled && <ActiveBadge />}
             </div>
           }
           titleSize="s"