15067: Updates properties form to handle vocabulary's new format (WIP)

Suggestions are being rendered correctly, but input widgets show the item's
keys. Need to disconnect id vs label handling on the UI.

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

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index 4b19b77115b388e3613c6004013ef6501aded2b6..e01673b70e6d992bb608fbf958072510dfd4c654 100644 (file)
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -3,7 +3,13 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Input as MuiInput, Chip as MuiChip, Popper as MuiPopper, Paper as MuiPaper, FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText } from '@material-ui/core';
+import {
+    Input as MuiInput,
+    Chip as MuiChip,
+    Popper as MuiPopper,
+    Paper as MuiPaper,
+    FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText
+} from '@material-ui/core';
 import { PopperProps } from '@material-ui/core/Popper';
 import { WithStyles } from '@material-ui/core/styles';
 import { noop } from 'lodash';

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 55076c3d84fa278cb79f7fe4d766f9523a674bd5..5c935854e1520451068603e4c40eb6e807aa95ca 100644 (file)
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -4,7 +4,6 @@
 
 import { connect } from 'react-redux';
 import { WrappedFieldMetaProps, WrappedFieldInputProps, WrappedFieldProps } from 'redux-form';
-import { identity } from 'lodash';
 import { Vocabulary } from '~/models/vocabulary';
 import { RootState } from '~/store/store';
 import { getVocabulary } from '~/store/vocabulary/vocabulary-selectors';
@@ -33,13 +32,26 @@ export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
     () =>
         onBlur(value);
 
-export const buildProps = ({ input, meta }: WrappedFieldProps) => ({
-    value: input.value,
-    onChange: input.onChange,
-    onBlur: handleBlur(input),
-    items: ITEMS_PLACEHOLDER,
-    onSelect: input.onChange,
-    renderSuggestion: identity,
-    error: hasError(meta),
-    helperText: getErrorMsg(meta),
-});
+export const handleSelect = ({ onChange }: WrappedFieldInputProps) => {
+    return (item:PropFieldSuggestion) => {
+        onChange(item.id);
+    };
+};
+
+export const buildProps = ({ input, meta }: WrappedFieldProps) => {
+    return {
+        value: input.value,
+        onChange: input.onChange,
+        onBlur: handleBlur(input),
+        items: ITEMS_PLACEHOLDER,
+        onSelect: handleSelect(input),
+        renderSuggestion: (item:PropFieldSuggestion) => item.label,
+        error: hasError(meta),
+        helperText: getErrorMsg(meta),
+    };
+};
+
+export interface PropFieldSuggestion {
+    "id": string;
+    "label": string;
+}

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 3fb2d377aeff56574a06a919f2f33e3aea5f142e..23e69afceb7dae4db023be97cfe8707361e1e066 100644 (file)
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -29,18 +29,25 @@ export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & V
 
 const getValidation = memoize(
     (vocabulary: Vocabulary) =>
-        vocabulary.strict
+        vocabulary.strict_tags
             ? [...TAG_KEY_VALIDATION, matchTags(vocabulary)]
             : TAG_KEY_VALIDATION);
 
 const matchTags = (vocabulary: Vocabulary) =>
     (value: string) =>
-        getTagsList(vocabulary).find(tag => tag.includes(value))
+        getTagsList(vocabulary).find(tag => tag.id.includes(value))
             ? undefined
             : 'Incorrect key';
 
 const getSuggestions = (value: string, vocabulary: Vocabulary) =>
-    getTagsList(vocabulary).filter(tag => tag.includes(value) && tag !== value);
-
-const getTagsList = ({ tags }: Vocabulary) =>
-    Object.keys(tags);
+    getTagsList(vocabulary).filter(tag => tag.label.includes(value) && tag.label !== value);
+
+const getTagsList = ({ tags }: Vocabulary) => {
+    const ret = tags && Object.keys(tags)
+        ? Object.keys(tags).map(
+            tagID => tags[tagID].labels
+                ? {"id": tagID, "label": tags[tagID].labels[0].label}
+                : {"id": tagID, "label": tagID})
+        : [];
+    return ret;
+};

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 13dcfeb544278acf62db0b41aca9c113333043d3..a547659ffa4d35d1d7db7415da05388459453546 100644 (file)
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -44,19 +44,25 @@ const getValidation = (props: PropertyValueFieldProps) =>
 
 const matchTagValues = ({ vocabulary, propertyKey }: PropertyValueFieldProps) =>
     (value: string) =>
-        getTagValues(propertyKey, vocabulary).find(v => v.includes(value))
+        getTagValues(propertyKey, vocabulary).find(v => v.id.includes(value))
             ? undefined
             : 'Incorrect value';
 
-const getSuggestions = (value: string, tagName: string, vocabulary: Vocabulary) =>
-    getTagValues(tagName, vocabulary).filter(v => v.includes(value) && v !== value);
+const getSuggestions = (value: string, tagKey: string, vocabulary: Vocabulary) =>
+    getTagValues(tagKey, vocabulary).filter(v => v.label.includes(value) && v.label !== value);
 
-const isStrictTag = (tagName: string, vocabulary: Vocabulary) => {
-    const tag = vocabulary.tags[tagName];
+const isStrictTag = (tagKey: string, vocabulary: Vocabulary) => {
+    const tag = vocabulary.tags[tagKey];
     return tag ? tag.strict : false;
 };
 
-const getTagValues = (tagName: string, vocabulary: Vocabulary) => {
-    const tag = vocabulary.tags[tagName];
-    return tag && tag.values ? tag.values : [];
+const getTagValues = (tagKey: string, vocabulary: Vocabulary) => {
+    const tag = vocabulary.tags[tagKey];
+    const ret = tag && tag.values
+        ? Object.keys(tag.values).map(
+            tagValueID => tag.values![tagValueID].labels
+                ? {"id": tagValueID, "label": tag.values![tagValueID].labels[0].label}
+                : {"id": tagValueID, "label": tagValueID})
+        : [];
+    return ret;
 };