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 } 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 } 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
  16 export const PropertyKeyField = connectVocabulary(
  17     ({ vocabulary }: VocabularyProp) =>
  18         <Field
  19             name={PROPERTY_KEY_FIELD_NAME}
  20             component={PropertyKeyInput}
  21             vocabulary={vocabulary}
  22             validate={getValidation(vocabulary)} />);
  23
  24 export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
  25     <Autocomplete
  26         label='Key'
  27         suggestions={getSuggestions(props.input.value, vocabulary)}
  28         {...buildProps(props)}
  29     />;
  30
  31 const getValidation = memoize(
  32     (vocabulary: Vocabulary) =>
  33         vocabulary.strict
  34             ? [...TAG_KEY_VALIDATION, matchTags(vocabulary)]
  35             : TAG_KEY_VALIDATION);
  36
  37 const matchTags = (vocabulary: Vocabulary) =>
  38     (value: string) =>
  39         getTagsList(vocabulary).find(tag => tag.includes(value))
  40             ? undefined
  41             : 'Incorrect key';
  42
  43 const getSuggestions = (value: string, vocabulary: Vocabulary) => {
  44     const re = new RegExp(escapeRegExp(value), "i");
  45     return getTagsList(vocabulary).filter(tag => re.test(tag) && tag !== value);
  46 };
  47
  48 const getTagsList = ({ tags }: Vocabulary) =>
  49     Object.keys(tags);