Feature/184 add tag field to document

src/components/document-metadata-editor.js

@@ -9,6 +9,7 @@ import { withSettings } from './settings-context';
 import { withLanguage } from './language-context';
 import LanguageSelect from './localization/language-select';
 import { EyeOutlined, EditOutlined } from '@ant-design/icons';
+import validators from '../utils/input-validators';
 import LanguageNameProvider from '../data/language-name-provider';
 import CountryFlagAndName from './localization/country-flag-and-name';
 import { documentRevisionShape, translationProps, languageProps, settingsProps } from '../ui/default-prop-types';
@@ -19,6 +20,8 @@ const RadioGroup = Radio.Group;
 const MODE_EDIT = 'edit';
 const MODE_PREVIEW = 'preview';
 
+const { isValidTag } = validators;
+
 class DocumentMetadataEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -55,17 +58,16 @@ class DocumentMetadataEditor extends React.Component {
 
   handleTagsChange(selectedValue) {
     const { onChanged, documentRevision } = this.props;
-    const invalidMetadata = selectedValue.length === 0 || selectedValue.some(tag => tag.length < 3 || tag.length > 30);
-    this.setState({ tagsValidationStatus: invalidMetadata ? 'error' : '' });
-    onChanged({ metadata: { ...documentRevision, tags: selectedValue }, invalidMetadata });
+    const areTagsValid = selectedValue.every(tag => isValidTag({ tag }));
+    this.setState({ tagsValidationStatus: areTagsValid ? '' : 'error' });
+    onChanged({ metadata: { ...documentRevision, tags: selectedValue }, invalidMetadata: !areTagsValid });
   }
 
   render() {
     const { mode, tagsValidationStatus } = this.state;
     const { documentRevision, languageNameProvider, language, t, settings } = this.props;
 
-    const mergedTags = new Set(settings.defaultTags);
-    documentRevision.tags.forEach(tag => mergedTags.add(tag));
+    const mergedTags = new Set([...settings.defaultTags, ...documentRevision.tags]);
 
     let docLanguage;
     let componentToShow;

src/components/settings/default-tags-settings.js

@@ -8,7 +8,7 @@ import { DeleteOutlined, DownOutlined, PlusOutlined, UpOutlined } from '@ant-des
 
 const FormItem = Form.Item;
 
-const getRequiredValidateStatus = (allTags, tag) => inputValidators.isValidTag(allTags, tag) ? 'success' : 'error';
+const getRequiredValidateStatus = (allTags, tag) => inputValidators.isValidTag({ allTags, tag }) ? 'success' : 'error';
 
 const mapTableRowsToTags = rows => rows.map(row => row.tag);
 
@@ -19,7 +19,7 @@ function DefaultTagsSettings({ defaultTags, onChange }) {
 
   const fireOnChange = rows => {
     const tags = mapTableRowsToTags(rows);
-    onChange(tags, { isValid: tags.every(tag => inputValidators.isValidTag(tags, tag)) });
+    onChange(tags, { isValid: tags.every(tag => inputValidators.isValidTag({ tag, tags })) });
   };
 
   const handleMoveClick = (index, offset) => {

src/utils/input-validators.js

@@ -5,7 +5,7 @@ function isValidPassword({ password, minLength = 8 }) {
   return sanitizedPassword.length >= minLength && minOneLetterAndOneDigitPattern.test(sanitizedPassword);
 }
 
-function isValidTag(allTags, tag) {
+function isValidTag({ tag, allTags = [] }) {
   const trimmedTag = (tag || '').trim();
 
   if (trimmedTag.length < 3 || trimmedTag.length > 30 || (/\s/).test(trimmedTag)) {

src/utils/input-validators.spec.js

@@ -33,7 +33,6 @@ describe.only('input-validators', () => {
 
   describe('isValidTag', () => {
     let result;
-    const allOtherTags = ['tag1', 'tag2', 'tag3'];
 
     const testCases = [
       { tag: null, expectedResult: false },
@@ -42,17 +41,17 @@ describe.only('input-validators', () => {
       { tag: ' tag ', expectedResult: true },
       { tag: 't a g', expectedResult: false },
       { tag: 't\tag', expectedResult: false },
-      { tag: 'tag2', expectedResult: false },
       { tag: '  ', expectedResult: false },
+      { tag: 'tag2', allTags: ['tag1', 'tag2'], expectedResult: true },
+      { tag: 'tag2', allTags: ['tag1', 'tag2', 'tag2'], expectedResult: false },
       { tag: 'aPrettyLongTagToConsiderValid?', expectedResult: true },
       { tag: 'anEvenLongerTagToConsiderValid?', expectedResult: false }
     ];
 
-    testCases.forEach(({ tag, expectedResult }) => {
+    testCases.forEach(({ tag, allTags, expectedResult }) => {
       describe(`when validating tag='${tag}'`, () => {
         beforeEach(() => {
-          const allTags = [...allOtherTags, tag];
-          result = sut.isValidTag(allTags, tag);
+          result = sut.isValidTag({ tag, allTags });
         });
         it(`should return ${expectedResult}`, () => {
           expect(result).toBe(expectedResult);