Extract common utils for controlling property field error visibility

Feature #14393

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/resource-properties-form/property-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
index b8dfa6f2b523c0f36f2a971d1e32618287ba9729..395be19670a5c7d51e5dcf5e89f85319ff536d00 100644 (file)
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Vocabulary } from '~/models/vocabulary';
 import { RootState } from '~/store/store';
 import { getVocabulary } from '~/store/vocabulary/vocabulary-selctors';
+import { WrappedFieldMetaProps, WrappedFieldInputProps } from 'redux-form';
 
 export interface VocabularyProp {
     vocabulary: Vocabulary;
@@ -18,3 +19,15 @@ export const mapStateToProps = (state: RootState): VocabularyProp => ({
 export const connectVocabulary = connect(mapStateToProps);
 
 export const ITEMS_PLACEHOLDER: string[] = [];
+
+export const hasError = ({ touched, invalid }: WrappedFieldMetaProps) =>
+    touched && invalid;
+
+export const getErrorMsg = (meta: WrappedFieldMetaProps) =>
+    hasError(meta)
+        ? meta.error
+        : '';
+
+export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
+    () =>
+        onBlur(value);

diff --git a/src/views-components/resource-properties-form/property-key-field.tsx b/src/views-components/resource-properties-form/property-key-field.tsx
index 2a11caec491757970aaf73858347e08231d0cc09..85cc07f6dedf6baab15f2525463aeecc177cb296 100644 (file)
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -8,7 +8,7 @@ import { identity, memoize } from 'lodash';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
-import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp } from '~/views-components/resource-properties-form/property-field-common';
+import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp, hasError, getErrorMsg, handleBlur } from '~/views-components/resource-properties-form/property-field-common';
 
 export const PROPERTY_KEY_FIELD_NAME = 'key';
 
@@ -24,13 +24,14 @@ const PropertyKeyInput = ({ input, meta, vocabulary }: WrappedFieldProps & Vocab
     <Autocomplete
         value={input.value}
         onChange={input.onChange}
+        onBlur={handleBlur(input)}
         label='Key'
         suggestions={getSuggestions(input.value, vocabulary)}
         items={ITEMS_PLACEHOLDER}
         onSelect={input.onChange}
         renderSuggestion={identity}
-        error={meta.invalid}
-        helperText={meta.error}
+        error={hasError(meta)}
+        helperText={getErrorMsg(meta)}
     />;
 
 const getValidation = memoize(

diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx
index dd94c83089fda02696a1fada676e12fa44540aa3..0713b06e6e6e7c6666f1267fed075bfb289c0974 100644 (file)
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -10,7 +10,7 @@ import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
 import { PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
-import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary } from '~/views-components/resource-properties-form/property-field-common';
+import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary, hasError, getErrorMsg, handleBlur } from '~/views-components/resource-properties-form/property-field-common';
 
 interface PropertyKeyProp {
     propertyKey: string;
@@ -35,13 +35,14 @@ const PropertyValueInput = ({ input, meta, vocabulary, propertyKey }: WrappedFie
     <Autocomplete
         value={input.value}
         onChange={input.onChange}
+        onBlur={handleBlur(input)}
         label='Value'
         suggestions={getSuggestions(input.value, propertyKey, vocabulary)}
         items={ITEMS_PLACEHOLDER}
         onSelect={input.onChange}
         renderSuggestion={identity}
-        error={meta.invalid}
-        helperText={meta.error}
+        error={hasError(meta)}
+        helperText={getErrorMsg(meta)}
     />;
 
 const getValidation = (props: PropertyValueFieldProps) =>