From: Lucas Di Pentima Date: Thu, 14 Nov 2019 14:28:16 +0000 (-0300) Subject: 15067: Generalizes handleSelect & handleBlur on property form fields. X-Git-Tag: 2.0.0~29^2~1 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/a22226b9a6cc30b6d69d517d71ecb6b1b402419c 15067: Generalizes handleSelect & handleBlur on property form fields. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- diff --git a/src/common/config.ts b/src/common/config.ts index cbac7b19..7d974342 100644 --- a/src/common/config.ts +++ b/src/common/config.ts @@ -125,9 +125,6 @@ remove the entire ${varName} entry from ${WORKBENCH_CONFIG_URL}`); else { vocabularyUrl = clusterConfigJSON.Workbench.VocabularyURL || "/vocabulary-example.json"; } - // FIXME: The following line is for dev testing purposes - vocabularyUrl = "/vocabulary-example.json"; - config.vocabularyUrl = vocabularyUrl; return { config, apiHost: workbenchConfig.API_HOST }; 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 a90ce923..65d0c7c8 100644 --- a/src/views-components/resource-properties-form/property-field-common.tsx +++ b/src/views-components/resource-properties-form/property-field-common.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0 import { connect } from 'react-redux'; -import { WrappedFieldMetaProps, WrappedFieldInputProps, WrappedFieldProps } from 'redux-form'; +import { change, WrappedFieldMetaProps, WrappedFieldInputProps, WrappedFieldProps } from 'redux-form'; import { Vocabulary, PropFieldSuggestion } from '~/models/vocabulary'; import { RootState } from '~/store/store'; import { getVocabulary } from '~/store/vocabulary/vocabulary-selectors'; @@ -28,18 +28,39 @@ export const getErrorMsg = (meta: WrappedFieldMetaProps) => ? meta.error : ''; -export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) => - () => - onBlur(value); - export const buildProps = ({ input, meta }: WrappedFieldProps) => { return { value: input.value, onChange: input.onChange, - onBlur: handleBlur(input), items: ITEMS_PLACEHOLDER, renderSuggestion: (item:PropFieldSuggestion) => item.label, error: hasError(meta), helperText: getErrorMsg(meta), }; }; + +// Attempts to match a manually typed value label with a value ID, when the user +// doesn't select the value from the suggestions list. +export const handleBlur = ( + fieldName: string, + formName: string, + { dispatch }: WrappedFieldMetaProps, + { onBlur, value }: WrappedFieldInputProps, + fieldValue: string) => + () => { + dispatch(change(formName, fieldName, fieldValue)); + onBlur(value); + }; + +// When selecting a property value, save its ID for later usage. +export const handleSelect = ( + fieldName: string, + formName: string, + { onChange }: WrappedFieldInputProps, + { dispatch }: WrappedFieldMetaProps ) => + (item:PropFieldSuggestion) => { + if (item) { + onChange(item.label); + dispatch(change(formName, fieldName, item.id)); + } + }; 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 ef51d250..89a03946 100644 --- a/src/views-components/resource-properties-form/property-key-field.tsx +++ b/src/views-components/resource-properties-form/property-key-field.tsx @@ -3,12 +3,11 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { change, WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps, - Field, FormName } from 'redux-form'; +import { WrappedFieldProps, Field, FormName } from 'redux-form'; import { memoize } from 'lodash'; import { Autocomplete } from '~/components/autocomplete/autocomplete'; -import { Vocabulary, getTags, getTagKeyID, PropFieldSuggestion } from '~/models/vocabulary'; -import { connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common'; +import { Vocabulary, getTags, getTagKeyID } from '~/models/vocabulary'; +import { handleSelect, handleBlur, connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common'; import { TAG_KEY_VALIDATION } from '~/validators/validators'; import { escapeRegExp } from '~/common/regexp.ts'; @@ -29,9 +28,9 @@ export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & V )}/>; @@ -51,26 +50,3 @@ const getSuggestions = (value: string, vocabulary: Vocabulary) => { const re = new RegExp(escapeRegExp(value), "i"); return getTags(vocabulary).filter(tag => re.test(tag.label) && tag.label !== value); }; - -// 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 = ( - formName: string, - { dispatch }: WrappedFieldMetaProps, - { onBlur, value }: WrappedFieldInputProps, - vocabulary: Vocabulary) => - () => { - dispatch(change(formName, PROPERTY_KEY_FIELD_ID, getTagKeyID(value, vocabulary))); - onBlur(value); - }; - -// When selecting a property key, save its ID for later usage. -const handleSelect = ( - formName: string, - { onChange }: WrappedFieldInputProps, - { dispatch }: WrappedFieldMetaProps) => { - return (item:PropFieldSuggestion) => { - onChange(item.label); - dispatch(change(formName, PROPERTY_KEY_FIELD_ID, item.id)); - }; -}; 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 e34170bc..4df44619 100644 --- a/src/views-components/resource-properties-form/property-value-field.tsx +++ b/src/views-components/resource-properties-form/property-value-field.tsx @@ -3,13 +3,12 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { change, WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps, - Field, formValues, FormName } from 'redux-form'; +import { WrappedFieldProps, Field, formValues, FormName } from 'redux-form'; import { compose } from 'redux'; import { Autocomplete } from '~/components/autocomplete/autocomplete'; -import { Vocabulary, getTagValueID, isStrictTag, getTagValues, PropFieldSuggestion } from '~/models/vocabulary'; +import { Vocabulary, isStrictTag, getTagValues, getTagValueID } from '~/models/vocabulary'; import { PROPERTY_KEY_FIELD_ID } from '~/views-components/resource-properties-form/property-key-field'; -import { VocabularyProp, connectVocabulary, buildProps } from '~/views-components/resource-properties-form/property-field-common'; +import { handleSelect, handleBlur, VocabularyProp, connectVocabulary, buildProps } from '~/views-components/resource-properties-form/property-field-common'; import { TAG_VALUE_VALIDATION } from '~/validators/validators'; import { escapeRegExp } from '~/common/regexp.ts'; @@ -39,9 +38,9 @@ export const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: Wrappe )}/>; @@ -61,26 +60,3 @@ const getSuggestions = (value: string, tagName: string, vocabulary: Vocabulary) return getTagValues(tagName, vocabulary).filter(v => re.test(v.label) && v.label !== value); }; -// 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 = ( - formName: string, - { dispatch }: WrappedFieldMetaProps, - { onBlur, value }: WrappedFieldInputProps, - vocabulary: Vocabulary, - tagKeyID: string) => - () => { - dispatch(change(formName, PROPERTY_VALUE_FIELD_ID, getTagValueID(tagKeyID, value, vocabulary))); - onBlur(value); - }; - -// When selecting a property value, save its ID for later usage. -const handleSelect = ( - formName: string, - { onChange }: WrappedFieldInputProps, - { dispatch }: WrappedFieldMetaProps) => { - return (item:PropFieldSuggestion) => { - onChange(item.label); - dispatch(change(formName, PROPERTY_VALUE_FIELD_ID, item.id)); - }; -};