Feat(UF) : Add frontend for unified form

enzyme.config.js

@@ -0,0 +1,17 @@
+/* eslint-disable node/no-process-env */
+/* Taken from: ListenBrainz */
+import * as Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+
+Enzyme.configure({adapter: new Adapter()});
+
+// In Node > v15 unhandled promise rejections will terminate the process
+if (!process.env.LISTENING_TO_UNHANDLED_REJECTION) {
+	process.on('unhandledRejection', (err) => {
+		// eslint-disable-next-line no-console
+		console.log('Unhandled promise rejection:', err);
+	});
+	// Avoid memory leak by adding too many listeners
+	process.env.LISTENING_TO_UNHANDLED_REJECTION = 'true';
+}

package.json

@@ -4,8 +4,7 @@
   "private": true,
   "scripts": {
     "clean": "./scripts/clean.sh",
-    "prepublishOnly": "npm run clean",
-    "postinstall": "npm run prepublishOnly",
+    "prepare": "npm run clean",
     "build-server-js": "babel src --out-dir lib --source-maps --ignore src/api --extensions .js,.jsx,.ts,.tsx",
     "build-api-js": "babel src --out-dir lib --ignore 'src/server','src/client' --extensions .js,.jsx,.ts,.tsx",
     "build-scss": "./scripts/build-scss.sh",
@@ -18,14 +17,14 @@
     "debug-watch-server": "cross-env DEBUG=bbsite NODE_ENV=development nodemon src/server/app.js --ext js,jsx,ts,tsx --watch src/server --exec 'babel-node --extensions .js,.jsx,.ts,.tsx'",
     "lint": "eslint .",
     "lint-errors": "eslint --quiet .",
-    "test": "npm run lint-errors && cross-env NODE_ENV=test mocha",
+    "test": "npm run lint-errors && cross-env NODE_ENV=test mocha -r jsdom-global/register",
     "test-cov": "npx nyc --reporter=text npm run test",
     "test-ci": "NODE_ENV=test mocha --reporter json --reporter-option output=test-results.json",
     "jsdoc": "npx jsdoc -r src",
     "dupreport": "npx jsinspect src/ || true"
   },
   "engines": {
-    "node": ">= 16.0.0"
+    "node": ">= 16.16.0"
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
@@ -58,6 +57,7 @@
     "lodash": "^4.17.21",
     "log": "^6.0.0",
     "log-node": "^8.0.3",
+    "mocha-chai-jest-snapshot": "^1.1.4",
     "morgan": "^1.10.0",
     "nodemailer": "^6.5.0",
     "passport": "^0.5.2",
@@ -116,6 +116,8 @@
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^9.2.0",
     "css-loader": "^6.7.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.30.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.22.1",
@@ -124,13 +126,17 @@
     "eslint-webpack-plugin": "^2.4.1",
     "faker": "^4.1.0",
     "file-loader": "^6.2.0",
+    "jsdom": "20.0.0",
+    "jsdom-global": "3.0.2",
     "mini-css-extract-plugin": "^2.5.3",
     "mocha": "^9.1.3",
     "nodemon": "^2.0.2",
+    "redux-mock-store": "^1.5.4",
     "resolve-url-loader": "^5.0.0",
     "rewire": "^5.0.0",
     "sass": "^1.49.0",
     "sass-loader": "^12.4.0",
+    "sinon": "^14.0.0",
     "typescript": "^4.0.5",
     "uuid": "^8.3.2",
     "webpack": "^5.69.1",

src/client/components/author-credit-display.js

@@ -22,15 +22,17 @@ import {map as _map} from 'lodash';
 
 
 function AuthorCreditDisplay({names}) {
-	const authorBBID = name.authorBBID ?? name.author?.id;
-	const nameElements = _map(names, (name) => (
-		<span key={`author-credit-${authorBBID}`}>
-			<a href={`/author/${authorBBID}`}>
-				{name.name}
-			</a>
-			{name.joinPhrase}
-		</span>
-	));
+	const nameElements = _map(names, (name) => {
+		const authorBBID = name.authorBBID ?? name.author?.id;
+		return (
+			<span key={`author-credit-${authorBBID}`}>
+				<a href={`/author/${authorBBID}`}>
+					{name.name}
+				</a>
+				{name.joinPhrase}
+			</span>
+		);
+	});
 
 	return (
 		<span>

src/client/containers/layout.js

@@ -138,6 +138,11 @@ class Layout extends React.Component {
 					onSelect={this.handleDropdownClick}
 					onToggle={this.handleDropdownToggle}
 				>
+					<NavDropdown.Item href="/create">
+						{genEntityIconHTMLElement('Book')}
+						Book
+					</NavDropdown.Item>
+					<NavDropdown.Divider/>
 					<NavDropdown.Item href="/work/create">
 						{genEntityIconHTMLElement('Work')}
 						Work
@@ -154,7 +159,6 @@ class Layout extends React.Component {
 						{genEntityIconHTMLElement('Series')}
 						Series
 					</NavDropdown.Item>
-					<NavDropdown.Divider/>
 					<NavDropdown.Item href="/author/create">
 						{genEntityIconHTMLElement('Author')}
 						Author

src/client/entity-editor/alias-editor/alias-editor.js

@@ -16,16 +16,14 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import {Button, Col, Modal, OverlayTrigger, Row, Tooltip} from 'react-bootstrap';
-import {addAliasRow, hideAliasEditor, removeEmptyAliases} from './actions';
-import {faPlus, faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
-
-import AliasRow from './alias-row';
+import {Button, Modal, OverlayTrigger, Tooltip} from 'react-bootstrap';
+import {hideAliasEditor, removeEmptyAliases} from './actions';
+import AliasModalBody from './alias-modal-body';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
 import {connect} from 'react-redux';
+import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 
 
 /**
@@ -38,30 +36,17 @@ import {connect} from 'react-redux';
  *        editor.
  * @param {Array} props.languageOptions - The list of possible languages for an
  *        alias.
- * @param {Function} props.onAddAlias - A function to be called when the button
- *        to add an alias is clicked.
  * @param {Function} props.onClose - A function to be called when the button to
  *        close the editor is clicked.
  * @param {boolean} props.show - Whether or not the editor modal should be
  *        visible.
  * @returns {ReactElement} React element containing the rendered AliasEditor.
  */
 const AliasEditor = ({
-	aliases,
 	languageOptions,
-	onAddAlias,
 	onClose,
 	show
 }) => {
-	const languageOptionsForDisplay = languageOptions.map((language) => ({
-		frequency: language.frequency,
-		label: language.name,
-		value: language.id
-	}));
-
-	const noAliasesTextClass =
-		classNames('text-center', {'d-none': aliases.size});
-
 	const helpText = `Variant names for an entity such as alternate spelling, different script, stylistic representation, acronyms, etc.
 		Refer to the help page for more details and examples.`;
 	const helpIconElement = (
@@ -86,29 +71,7 @@ const AliasEditor = ({
 			</Modal.Header>
 
 			<Modal.Body>
-				<div className={noAliasesTextClass}>
-					<p className="text-muted">This entity has no aliases</p>
-				</div>
-				<div>
-					{
-						aliases.map((alias, rowId) => (
-							<AliasRow
-								index={rowId}
-								// eslint-disable-next-line react/no-array-index-key
-								key={rowId}
-								languageOptions={languageOptionsForDisplay}
-							/>
-						)).toArray()
-					}
-				</div>
-				<Row>
-					<Col className="text-right" lg={{offset: 9, span: 3}}>
-						<Button variant="success" onClick={onAddAlias}>
-							<FontAwesomeIcon icon={faPlus}/>
-							<span>&nbsp;Add alias</span>
-						</Button>
-					</Col>
-				</Row>
+				<AliasModalBody languageOptions={languageOptions}/>
 			</Modal.Body>
 
 			<Modal.Footer>
@@ -119,9 +82,7 @@ const AliasEditor = ({
 };
 AliasEditor.displayName = 'AliasEditor';
 AliasEditor.propTypes = {
-	aliases: PropTypes.object.isRequired,
 	languageOptions: PropTypes.array.isRequired,
-	onAddAlias: PropTypes.func.isRequired,
 	onClose: PropTypes.func.isRequired,
 	show: PropTypes.bool
 };
@@ -131,18 +92,11 @@ AliasEditor.defaultProps = {
 
 function mapDispatchToProps(dispatch) {
 	return {
-		onAddAlias: () => dispatch(addAliasRow()),
 		onClose: () => {
 			dispatch(hideAliasEditor());
 			dispatch(removeEmptyAliases());
 		}
 	};
 }
 
-function mapStateToProps(rootState) {
-	return {
-		aliases: rootState.get('aliasEditor')
-	};
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(AliasEditor);
+export default connect(null, mapDispatchToProps)(AliasEditor);

src/client/entity-editor/alias-editor/alias-modal-body.tsx

@@ -0,0 +1,76 @@
+import {Button, Col, Row} from 'react-bootstrap';
+import AliasRow from './alias-row';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import Immutable from 'immutable';
+import React from 'react';
+import {addAliasRow} from './actions';
+import classNames from 'classnames';
+import {connect} from 'react-redux';
+import {faPlus} from '@fortawesome/free-solid-svg-icons';
+
+
+type AliasModalBodyStateProps = {
+    aliases: Immutable.List<string>;
+};
+type AliasModalBodyDispatchProps = {
+    onAddAlias: () => void;
+};
+
+type AliasModalBodyOwnProps = {
+    languageOptions?:any[],
+};
+type AliasModalBodyProps = AliasModalBodyStateProps & AliasModalBodyDispatchProps & AliasModalBodyOwnProps;
+
+export const AliasModalBody = ({aliases, onAddAlias, languageOptions}:AliasModalBodyProps) => {
+	const noAliasesTextClass =
+		classNames('text-center', {'d-none': aliases.size});
+	const languageOptionsForDisplay = languageOptions.map((language) => ({
+		frequency: language.frequency,
+		label: language.name,
+		value: language.id
+	}));
+	return (
+		<>
+			<div className={noAliasesTextClass}>
+				<p className="text-muted">This entity has no aliases</p>
+			</div>
+			<div>
+				{
+					aliases.toArray().map((_, rowId) => (
+						<AliasRow
+							index={rowId}
+							// eslint-disable-next-line react/no-array-index-key
+							key={`alias-row-${rowId}`}
+							languageOptions={languageOptionsForDisplay}
+						/>
+					))
+				}
+			</div>
+			<Row>
+				<Col className="text-right" lg={{offset: 9, span: 3}}>
+					<Button variant="success" onClick={onAddAlias}>
+						<FontAwesomeIcon icon={faPlus}/>
+						<span>&nbsp;Add alias</span>
+					</Button>
+				</Col>
+			</Row>
+		</>);
+};
+
+AliasModalBody.defaultProps = {
+	languageOptions: []
+};
+
+function mapDispatchToProps(dispatch) {
+	return {
+		onAddAlias: () => dispatch(addAliasRow())
+	};
+}
+
+function mapStateToProps(rootState) {
+	return {
+		aliases: rootState.get('aliasEditor')
+	};
+}
+
+export default connect<AliasModalBodyStateProps, AliasModalBodyDispatchProps>(mapStateToProps, mapDispatchToProps)(AliasModalBody);

src/client/entity-editor/annotation-section/annotation-section.js

@@ -39,9 +39,11 @@ import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
  *          AnnotationSection.
  */
 function AnnotationSection({
-	annotation,
-	onAnnotationChange
+	annotation: immutableAnnotation,
+	onAnnotationChange,
+	isUnifiedForm
 }) {
+	const annotation = convertMapToObject(immutableAnnotation);
 	const annotationLabel = (
 		<span>
 			Annotation
@@ -54,14 +56,16 @@ function AnnotationSection({
 			Additional freeform data that does not fit in the above form
 		</Tooltip>
 	);
-
+	const lgCol = {offset: 3, span: 6};
+	if (isUnifiedForm) {
+		lgCol.offset = 0;
+	}
+	const heading = <h2> Annotation</h2>;
 	return (
 		<div>
-			<h2>
-				Annotation
-			</h2>
+			{!isUnifiedForm && heading}
 			<Row>
-				<Col lg={{offset: 3, span: 6}}>
+				<Col lg={lgCol}>
 					<Form.Group>
 						<Form.Label>
 							{annotationLabel}
@@ -95,12 +99,15 @@ function AnnotationSection({
 AnnotationSection.displayName = 'AnnotationSection';
 AnnotationSection.propTypes = {
 	annotation: PropTypes.object.isRequired,
+	isUnifiedForm: PropTypes.bool,
 	onAnnotationChange: PropTypes.func.isRequired
 };
-
+AnnotationSection.defaultProps = {
+	isUnifiedForm: false
+};
 function mapStateToProps(rootState) {
 	return {
-		annotation: convertMapToObject(rootState.get('annotationSection'))
+		annotation: rootState.get('annotationSection')
 	};
 }
 

src/client/entity-editor/author-credit-editor/author-credit-editor.tsx

@@ -50,7 +50,8 @@ const AuthorCreditEditor = ({
 	authorCredit,
 	onAddAuthorCreditRow,
 	onClose,
-	showEditor
+	showEditor,
+	...rest
 }) => (
 	<Modal show={showEditor} size="lg" onHide={onClose} >
 		<Modal.Header>
@@ -79,6 +80,7 @@ const AuthorCreditEditor = ({
 							index={rowId}
 							// eslint-disable-next-line react/no-array-index-key
 							key={rowId}
+							{...rest}
 						/>
 					))
 				}