18203: added support for adding multi properties at once

[arvados-workbench2.git] / src / views-components / resource-properties-form / property-field-common.tsx

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 028c46b9d34ab42d8517a4d9270f988823718b8b..dad172840bfce6905635fc86e86c6a376ddaa94b 100644 (file)
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -3,17 +3,22 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 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-selctors';
+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';
 
 export interface VocabularyProp {
     vocabulary: Vocabulary;
 }
 
-export const mapStateToProps = (state: RootState): VocabularyProp => ({
+export interface ValidationProp {
+    skipValidation?: boolean;
+    clearPropertyKeyOnSelect?: boolean;
+}
+
+export const mapStateToProps = (state: RootState, ownProps: ValidationProp): VocabularyProp & ValidationProp => ({
+    skipValidation: ownProps.skipValidation,
     vocabulary: getVocabulary(state.properties),
 });
 
@@ -29,17 +34,38 @@ export const getErrorMsg = (meta: WrappedFieldMetaProps) =>
         ? meta.error
         : '';
 
-export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
-    () =>
+export const buildProps = ({ input, meta }: WrappedFieldProps) => {
+    return {
+        value: input.value,
+        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);
+    };
 
-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),
-});
+// 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));
+        }
+    };