src/views-components/resource-properties-form/property-key-field.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { change, WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps, Field } from 'redux-form';
   7 import { memoize } from 'lodash';
   8 import { Autocomplete } from '~/components/autocomplete/autocomplete';
   9 import { Vocabulary } from '~/models/vocabulary';
  10 import { connectVocabulary, VocabularyProp, buildProps, PropFieldSuggestion } from '~/views-components/resource-properties-form/property-field-common';
  11 import { TAG_KEY_VALIDATION } from '~/validators/validators';
  12 import { COLLECTION_TAG_FORM_NAME } from '~/store/collection-panel/collection-panel-action';
  13
  14 export const PROPERTY_KEY_FIELD_NAME = 'key';
  15 export const PROPERTY_KEY_FIELD_ID = 'keyID';
  16
  17 export const PropertyKeyField = connectVocabulary(
  18     ({ vocabulary }: VocabularyProp) =>
  19         <div>
  20             <Field
  21                 name={PROPERTY_KEY_FIELD_NAME}
  22                 component={PropertyKeyInput}
  23                 vocabulary={vocabulary}
  24                 validate={getValidation(vocabulary)} />
  25             <Field
  26                 name={PROPERTY_KEY_FIELD_ID}
  27                 type='hidden'
  28                 component='input' />
  29         </div>
  30 );
  31
  32 export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
  33     <Autocomplete
  34         label='Key'
  35         suggestions={getSuggestions(props.input.value, vocabulary)}
  36         onSelect={handleSelect(props.input, props.meta)}
  37         {...buildProps(props)}
  38     />;
  39
  40 const getValidation = memoize(
  41     (vocabulary: Vocabulary) =>
  42         vocabulary.strict_tags
  43             ? [...TAG_KEY_VALIDATION, matchTags(vocabulary)]
  44             : TAG_KEY_VALIDATION);
  45
  46 const matchTags = (vocabulary: Vocabulary) =>
  47     (value: string) =>
  48         getTagsList(vocabulary).find(tag => tag.label === value)
  49             ? undefined
  50             : 'Incorrect key';
  51
  52 const getSuggestions = (value: string, vocabulary: Vocabulary) =>
  53     getTagsList(vocabulary).filter(tag => tag.label.toLowerCase().includes(value.toLowerCase()));
  54
  55 const getTagsList = ({ tags }: Vocabulary) => {
  56     const ret = tags && Object.keys(tags)
  57         ? Object.keys(tags).map(
  58             tagID => tags[tagID].labels
  59                 ? {"id": tagID, "label": tags[tagID].labels[0].label}
  60                 : {"id": tagID, "label": tagID})
  61         : [];
  62     return ret;
  63 };
  64
  65 const handleSelect = (
  66     { onChange }: WrappedFieldInputProps,
  67     { dispatch }: WrappedFieldMetaProps) => {
  68         return (item:PropFieldSuggestion) => {
  69             onChange(item.label);
  70             dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_KEY_FIELD_ID, item.id));
  71     };
  72 };