From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Mon, 11 Nov 2019 18:17:51 +0000 (-0300)
Subject: 15067: Supports key/value IDs matching when manually typing.
X-Git-Tag: 2.0.0~29^2~12
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/210cdfd52a1514944b648a694cbe1b2776c1f442

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 67e27ce0..5c8c875b 100644
--- 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 5043bca7..910a095a 100644
--- 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) => {