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 { WrappedFieldProps, Field, FormName } from 'redux-form';
   7 import { memoize } from 'lodash';
   8 import { Autocomplete } from '~/components/autocomplete/autocomplete';
   9 import { Vocabulary, getTags, getTagKeyID } from '~/models/vocabulary';
  10 import { handleSelect, handleBlur, connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
  11 import { TAG_KEY_VALIDATION } from '~/validators/validators';
  12 import { escapeRegExp } from '~/common/regexp.ts';
  13
  14 export const PROPERTY_KEY_FIELD_NAME = 'key';
  15 export const PROPERTY_KEY_FIELD_ID = 'keyID';
  16
  17 interface PropertyKeyFieldProps {
  18     skipValidation?: boolean;
  19 }
  20
  21 export const PropertyKeyField = connectVocabulary(
  22     ({ vocabulary, skipValidation }: VocabularyProp & PropertyKeyFieldProps) =>
  23         <Field
  24             name={PROPERTY_KEY_FIELD_NAME}
  25             component={PropertyKeyInput}
  26             vocabulary={vocabulary}
  27             validate={skipValidation ? undefined : getValidation(vocabulary)} />
  28 );
  29
  30 const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
  31     <FormName children={data => (
  32         <Autocomplete
  33             label='Key'
  34             suggestions={getSuggestions(props.input.value, vocabulary)}
  35             onSelect={handleSelect(PROPERTY_KEY_FIELD_ID, data.form, props.input, props.meta)}
  36             onBlur={handleBlur(PROPERTY_KEY_FIELD_ID, data.form, props.meta, props.input, getTagKeyID(props.input.value, vocabulary))}
  37             {...buildProps(props)}
  38         />
  39     )}/>;
  40
  41 const getValidation = memoize(
  42     (vocabulary: Vocabulary) =>
  43         vocabulary.strict_tags
  44             ? [...TAG_KEY_VALIDATION, matchTags(vocabulary)]
  45             : TAG_KEY_VALIDATION);
  46
  47 const matchTags = (vocabulary: Vocabulary) =>
  48     (value: string) =>
  49         getTags(vocabulary).find(tag => tag.label === value)
  50             ? undefined
  51             : 'Incorrect key';
  52
  53 const getSuggestions = (value: string, vocabulary: Vocabulary) => {
  54     const re = new RegExp(escapeRegExp(value), "i");
  55     return getTags(vocabulary).filter(tag => re.test(tag.label) && tag.label !== value);
  56 };