feat(author-credit): Add validation of author credits

src/client/entity-editor/author-credit-editor/author-credit-row.js

@@ -19,10 +19,15 @@
 // @flow
 
 import {
-	type Action, type Author, removeAuthorCreditRow, updateCreditAuthorValue, updateCreditDisplayValue,
+	type Action,
+	type Author,
+	removeAuthorCreditRow,
+	updateCreditAuthorValue,
+	updateCreditDisplayValue,
 	updateCreditJoinPhraseValue
 } from './actions';
 import {Button, Col, Row} from 'react-bootstrap';
+
 import CustomInput from '../../input';
 import EntitySearchFieldOption from '../common/entity-search-field-option';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
@@ -89,6 +94,7 @@ function AuthorCreditRow({
 						instanceId={`author${index}`}
 						label="Author"
 						type="author"
+						validationState={!author ? 'error' : null}
 						value={author}
 						onChange={onAuthorChange}
 					/>
@@ -98,6 +104,7 @@ function AuthorCreditRow({
 						id={`authorDisplayName${index}`}
 						label="Author as credited"
 						type="text"
+						validationState={!name.length ? 'error' : null}
 						value={name}
 						onChange={onNameChange}
 					/>

src/client/entity-editor/author-credit-editor/author-credit-section.js

@@ -33,8 +33,10 @@ import type {Dispatch} from 'redux'; // eslint-disable-line import/named
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
+import ValidationLabel from '../common/validation-label';
 import {connect} from 'react-redux';
 import {convertMapToObject} from '../../helpers/utils';
+import {validateAuthorCreditSection} from '../validators/common';
 
 
 type OwnProps = {
@@ -66,24 +68,31 @@ function AuthorCreditSection({
 	}
 	const authorCreditPreview = _map(authorCredit, (credit) => `${credit.name}${credit.joinPhrase}`).join('');
 	const noAuthorCredit = _keys(authorCredit).length <= 0;
+	const isValid = validateAuthorCreditSection(authorCredit);
 
 	const editButton = (
 		<Button bsStyle="success" onClick={onEditAuthorCredit}>
 			<FontAwesomeIcon icon="pencil-alt"/>
-			&nbsp;Edit Author Credit
+			&nbsp;Edit
 		</Button>);
 
+	const label = (
+		<ValidationLabel error={!isValid}>
+			Author Credit
+		</ValidationLabel>
+	);
+
 	return (
 		<Row className="margin-bottom-2">
 			{editor}
 			<Col md={6} mdOffset={3}>
 				<CustomInput
 					readOnly
 					buttonAfter={editButton}
-					label="Author Credit"
+					label={label}
 					placeholder="No Author Credit yet, click edit to add one"
 					tooltipText="Names of the Authors as they appear on the book cover"
-					validationState={noAuthorCredit ? 'error' : null}
+					validationState={noAuthorCredit || !isValid ? 'error' : null}
 					value={authorCreditPreview}
 				/>
 			</Col>

src/client/entity-editor/validators/base.js

@@ -38,7 +38,7 @@ export function get(
 
 export function getIn(
 	object: any,
-	path: string,
+	path: string | string[],
 	defaultValue: ?mixed = null
 ): mixed {
 	if (Iterable.isIterable(object)) {

src/client/entity-editor/validators/common.js

@@ -20,15 +20,16 @@
 
 import {
 	get,
+	getIn,
 	validateOptionalString,
 	validatePositiveInteger,
-	validateRequiredString
+	validateRequiredString,
+	validateUUID
 } from './base';
 
 import {Iterable} from 'immutable';
 import _ from 'lodash';
 
-
 export function validateMultiple(
 	values: any[],
 	validationFunction: (value: any, ...rest: any[]) => boolean,
@@ -172,3 +173,14 @@ export function validateSubmissionSection(
 		validateSubmissionSectionNote(get(data, 'note', null))
 	);
 }
+
+export function validateAuthorCreditRow(row: any): boolean {
+	return validateUUID(getIn(row, ['author', 'id'], null), true) &&
+	validateRequiredString(get(row, 'name', null)) &&
+	validateOptionalString(get(row, 'joinPhrase', null));
+}
+
+export const validateAuthorCreditSection = _.partial(
+	validateMultiple, _.partial.placeholder,
+	validateAuthorCreditRow, _.partial.placeholder
+);

src/client/entity-editor/validators/edition.js

@@ -21,6 +21,7 @@
 import {get, validateDate, validatePositiveInteger, validateUUID} from './base';
 import {
 	validateAliases,
+	validateAuthorCreditSection,
 	validateIdentifiers,
 	validateNameSection,
 	validateSubmissionSection
@@ -125,6 +126,7 @@ export function validateForm(
 		),
 		validateNameSection(get(formData, 'nameSection', {})),
 		validateEditionSection(get(formData, 'editionSection', {})),
+		validateAuthorCreditSection(get(formData, 'authorCreditEditor', {})),
 		validateSubmissionSection(get(formData, 'submissionSection', {}))
 	];