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, getTags, getTagKeyID, PropFieldSuggestion } from '~/models/vocabulary';
  10 import { connectVocabulary, VocabularyProp, buildProps } 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 import { escapeRegExp } from '~/common/regexp.ts';
  14
  15 export const PROPERTY_KEY_FIELD_NAME = 'key';
  16 export const PROPERTY_KEY_FIELD_ID = 'keyID';
  17
  18 export const PropertyKeyField = connectVocabulary(
  19     ({ vocabulary }: VocabularyProp) =>
  20         <div>
  21             <Field
  22                 name={PROPERTY_KEY_FIELD_NAME}
  23                 component={PropertyKeyInput}
  24                 vocabulary={vocabulary}
  25                 validate={getValidation(vocabulary)} />
  26             <Field
  27                 name={PROPERTY_KEY_FIELD_ID}
  28                 type='hidden'
  29                 component='input' />
  30         </div>
  31 );
  32
  33 export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
  34     <Autocomplete
  35         label='Key'
  36         suggestions={getSuggestions(props.input.value, vocabulary)}
  37         onSelect={handleSelect(props.input, props.meta)}
  38         {...buildProps(props)}
  39         onBlur={handleBlur(props.meta, props.input, vocabulary)}
  40     />;
  41
  42 const getValidation = memoize(
  43     (vocabulary: Vocabulary) =>
  44         vocabulary.strict_tags
  45             ? [...TAG_KEY_VALIDATION, matchTags(vocabulary)]
  46             : TAG_KEY_VALIDATION);
  47
  48 const matchTags = (vocabulary: Vocabulary) =>
  49     (value: string) =>
  50         getTags(vocabulary).find(tag => tag.label === value)
  51             ? undefined
  52             : 'Incorrect key';
  53
  54 const getSuggestions = (value: string, vocabulary: Vocabulary) => {
  55     const re = new RegExp(escapeRegExp(value), "i");
  56     return getTags(vocabulary).filter(tag => re.test(tag.label) && tag.label !== value);
  57 };
  58
  59 // Attempts to match a manually typed key label with a key ID, when the user
  60 // doesn't select the key from the suggestions list.
  61 const handleBlur = (
  62     { dispatch }: WrappedFieldMetaProps,
  63     { onBlur, value }: WrappedFieldInputProps,
  64     vocabulary: Vocabulary) =>
  65     () => {
  66         dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_KEY_FIELD_ID, getTagKeyID(value, vocabulary)));
  67         onBlur(value);
  68     };
  69
  70 // When selecting a property key, save its ID for later usage.
  71 const handleSelect = (
  72     { onChange }: WrappedFieldInputProps,
  73     { dispatch }: WrappedFieldMetaProps) => {
  74         return (item:PropFieldSuggestion) => {
  75             onChange(item.label);
  76             dispatch(change(COLLECTION_TAG_FORM_NAME, PROPERTY_KEY_FIELD_ID, item.id));
  77     };
  78 };