15067: Supports key/value IDs matching when manually typing.

If the user keeps typing instead of selecting what's being suggested, try to
get the corresponding ID when leaving the input field.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima@veritasgenetics.com>

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 67e27ce06fec1a743b426543b86e0713bf2dcc5c..5c8c875b6fb54d2d6edf5c8f8ceecde36c6d25e6 100644 (file)
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -35,6 +35,7 @@ export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & V
         suggestions={getSuggestions(props.input.value, vocabulary)}
         onSelect={handleSelect(props.input, props.meta)}
         {...buildProps(props)}
+        onBlur={handleBlur(props.meta, props.input, vocabulary)}
     />;
 
 const getValidation = memoize(
@@ -62,6 +63,23 @@ const getTagsList = ({ tags }: Vocabulary) => {
     return ret;
 };
 
+const getTagKeyID = (tagKeyLabel:string, vocabulary: Vocabulary) =>
+    Object.keys(vocabulary.tags).find(
+        k => vocabulary.tags[k].labels.find(
+            l => l.label === tagKeyLabel) !== undefined) || '';
+
+// Attempts to match a manually typed key label with a key ID, when the user
+// doesn't select the key from the suggestions list.
+const handleBlur = (
+    { dispatch }: WrappedFieldMetaProps,
+    { onBlur, value }: WrappedFieldInputProps,
+    vocabulary: Vocabulary) =>
+    () => {
+        dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_KEY_FIELD_ID, getTagKeyID(value, vocabulary)));
+        onBlur(value);
+    };
+
+// When selecting a property key, save its ID for later usage.
 const handleSelect = (
     { onChange }: WrappedFieldInputProps,
     { dispatch }: WrappedFieldMetaProps) => {

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 5043bca7d24c62b2130438bff71e506f28cddca6..910a095ad0b6f5d29a1b10cc1f9fdd4215f5b8ae 100644 (file)
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -45,6 +45,7 @@ export const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: Wrappe
         suggestions={getSuggestions(props.input.value, propertyKey, vocabulary)}
         onSelect={handleSelect(props.input, props.meta)}
         {...buildProps(props)}
+        onBlur={handleBlur(props.meta, props.input, vocabulary, propertyKey)}
     />;
 
 const getValidation = (props: PropertyValueFieldProps) =>
@@ -77,6 +78,26 @@ const getTagValues = (tagKey: string, vocabulary: Vocabulary) => {
     return ret;
 };
 
+const getTagValueID = (tagKeyID:string, tagValueLabel:string, vocabulary: Vocabulary) =>
+    (tagKeyID && vocabulary.tags[tagKeyID] && vocabulary.tags[tagKeyID].values)
+    ? Object.keys(vocabulary.tags[tagKeyID].values!).find(
+        k => vocabulary.tags[tagKeyID].values![k].labels.find(
+            l => l.label === tagValueLabel) !== undefined) || ''
+    : '';
+
+// Attempts to match a manually typed value label with a value ID, when the user
+// doesn't select the value from the suggestions list.
+const handleBlur = (
+    { dispatch }: WrappedFieldMetaProps,
+    { onBlur, value }: WrappedFieldInputProps,
+    vocabulary: Vocabulary,
+    tagKeyID: string) =>
+    () => {
+        dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_VALUE_FIELD_ID, getTagValueID(tagKeyID, value, vocabulary)));
+        onBlur(value);
+    };
+
+// When selecting a property value, save its ID for later usage.
 const handleSelect = (
     { onChange }: WrappedFieldInputProps,
     { dispatch }: WrappedFieldMetaProps) => {