Merge pull request #1103 from kellnerd/imports-2024

Make approval of imported entities work & other improvements
metabrainz · Jul 17, 2024 · 7350b16 · 7350b16
2 parents 6684575 + 155bd5e
commit 7350b16
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 83 deletions.
diff --git a/src/client/components/pages/import-entities/author.js b/src/client/components/pages/import-entities/author.js
@@ -27,11 +27,10 @@ import ImportFooter from './footer';
 import ImportTitle from './title';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {startCase} from 'lodash';
 
 
 const {getImportUrl} = importHelper;
-const {Alert, Col, Row} = bootstrap;
+const {Col, Row} = bootstrap;
 
 
 function ImportAuthorDisplayPage({importEntity, identifierTypes}) {
@@ -56,20 +55,12 @@ function ImportAuthorDisplayPage({importEntity, identifierTypes}) {
 				urlPrefix={urlPrefix}
 			/>
 			<hr className="margin-top-d40"/>
-			<Row>
-				<Alert
-					className="text-center font-weight-bold"
-					variant="success"
-				>
-					This {startCase(importEntity.type.toLowerCase())} has been automatically added.{' '}
-					Kindly approve/discard it to help us improve our data.
-				</Alert>
-			</Row>
 			<ImportFooter
 				hasVoted={importEntity.hasVoted}
 				importUrl={urlPrefix}
 				importedAt={importEntity.importedAt}
 				source={importEntity.source}
+				type={importEntity.type}
 			/>
 		</div>
 	);

diff --git a/src/client/components/pages/import-entities/discard-import-entity.js b/src/client/components/pages/import-entities/discard-import-entity.js
@@ -85,7 +85,7 @@ class DiscardImportEntity extends React.Component {
 				<h1> Discard Imported Entity </h1>
 				<Row className="margin-top-2">
 					{loadingComponent}
-					<Col md={6} mdOffset={3}>
+					<Col md={{offset: 3, span: 6}}>
 						{errorComponent}
 						<Card bg="danger">
 							<Card.Header>Confirm Discard</Card.Header>
@@ -103,11 +103,11 @@ class DiscardImportEntity extends React.Component {
 								to the imported entity page.
 							</Card.Body>
 						</Card>
-						<ButtonGroup justified className="margin-top-2">
+						<ButtonGroup className="d-flex margin-top-2">
 							<Button
 								href={getImportUrl(importEntity)}
-								title="Edit"
-								variant="default"
+								title="Cancel"
+								variant="secondary"
 							>
 								Cancel
 							</Button>

diff --git a/src/client/components/pages/import-entities/edition-group.js b/src/client/components/pages/import-entities/edition-group.js
@@ -27,11 +27,10 @@ import ImportFooter from './footer';
 import ImportTitle from './title';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {startCase} from 'lodash';
 
 
 const {getImportUrl} = importHelper;
-const {Alert, Col, Row} = bootstrap;
+const {Col, Row} = bootstrap;
 
 
 function ImportEditionGroupDisplayPage({importEntity, identifierTypes}) {
@@ -56,20 +55,12 @@ function ImportEditionGroupDisplayPage({importEntity, identifierTypes}) {
 				urlPrefix={urlPrefix}
 			/>
 			<hr className="margin-top-d40"/>
-			<Row>
-				<Alert
-					className="text-center font-weight-bold"
-					variant="success"
-				>
-					This {startCase(importEntity.type.toLowerCase())} has been automatically added.{' '}
-					Kindly approve/discard it to help us improve our data.
-				</Alert>
-			</Row>
 			<ImportFooter
 				hasVoted={importEntity.hasVoted}
 				importUrl={urlPrefix}
 				importedAt={importEntity.importedAt}
 				source={importEntity.source}
+				type={importEntity.type}
 			/>
 		</div>
 	);

diff --git a/src/client/components/pages/import-entities/edition.js b/src/client/components/pages/import-entities/edition.js
@@ -27,12 +27,11 @@ import ImportFooter from './footer';
 import ImportTitle from './title';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {startCase} from 'lodash';
 
 
 const {getImportUrl} = importHelper;
 
-const {Alert, Col, Row} = bootstrap;
+const {Col, Row} = bootstrap;
 
 
 function ImportEditionDisplayPage({importEntity, identifierTypes}) {
@@ -57,20 +56,12 @@ function ImportEditionDisplayPage({importEntity, identifierTypes}) {
 				urlPrefix={urlPrefix}
 			/>
 			<hr className="margin-top-d40"/>
-			<Row>
-				<Alert
-					className="text-center font-weight-bold"
-					variant="success"
-				>
-					This {startCase(importEntity.type.toLowerCase())} has been automatically added.{' '}
-					Kindly approve/discard it to help us improve our data.
-				</Alert>
-			</Row>
 			<ImportFooter
 				hasVoted={importEntity.hasVoted}
 				importUrl={urlPrefix}
 				importedAt={importEntity.importedAt}
 				source={importEntity.source}
+				type={importEntity.type}
 			/>
 		</div>
 	);

diff --git a/src/client/components/pages/import-entities/footer.js b/src/client/components/pages/import-entities/footer.js
@@ -23,14 +23,15 @@ import {faCheck, faPencil, faRemove} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {startCase} from 'lodash';
 
 
 const {formatDate} = utilsHelper;
 const {
-	Button, ButtonGroup, Col, Row, Tooltip
+	Alert, Button, ButtonGroup, Col, Row, Tooltip
 } = bootstrap;
 
-function ImportFooter({importUrl, importedAt, source, hasVoted}) {
+function ImportFooter({importUrl, importedAt, source, type, hasVoted}) {
 	const tooltip = (
 		<Tooltip id="tooltip">
 		  <strong>You can only vote once to discard an import.</strong>
@@ -40,8 +41,19 @@ function ImportFooter({importUrl, importedAt, source, hasVoted}) {
 	return (
 		<div>
 			<Row>
-				<Col md={6} mdOffset={3}>
-					<ButtonGroup justified>
+				<Col>
+					<Alert
+						className="text-center font-weight-bold"
+						variant="success"
+					>
+						This {startCase(type.toLowerCase())} has been automatically added.{' '}
+						Kindly approve/discard it to help us improve our data.
+					</Alert>
+				</Col>
+			</Row>
+			<Row>
+				<Col className="text-center" md={{offset: 3, span: 6}}>
+					<ButtonGroup>
 						<Button
 							href={`${importUrl}/approve`}
 							title="Approve"
@@ -86,7 +98,8 @@ ImportFooter.propTypes = {
 	hasVoted: PropTypes.bool.isRequired,
 	importUrl: PropTypes.string.isRequired,
 	importedAt: PropTypes.string.isRequired,
-	source: PropTypes.string.isRequired
+	source: PropTypes.string.isRequired,
+	type: PropTypes.string.isRequired
 };
 
 export default ImportFooter;
diff --git a/src/client/components/pages/import-entities/publisher.js b/src/client/components/pages/import-entities/publisher.js
@@ -27,12 +27,11 @@ import ImportTitle from './title';
 import PropTypes from 'prop-types';
 import {PublisherAttributes} from '../entities/publisher';
 import React from 'react';
-import {startCase} from 'lodash';
 
 
 const {getImportUrl} = importHelper;
 
-const {Alert, Col, Row} = bootstrap;
+const {Col, Row} = bootstrap;
 
 
 function ImportPublisherDisplayPage({importEntity, identifierTypes}) {
@@ -57,20 +56,12 @@ function ImportPublisherDisplayPage({importEntity, identifierTypes}) {
 				urlPrefix={urlPrefix}
 			/>
 			<hr className="margin-top-d40"/>
-			<Row>
-				<Alert
-					className="text-center font-weight-bold"
-					variant="success"
-				>
-					This {startCase(importEntity.type.toLowerCase())} has been automatically added.{' '}
-					Kindly approve/discard it to help us improve our data.
-				</Alert>
-			</Row>
 			<ImportFooter
 				hasVoted={importEntity.hasVoted}
 				importUrl={urlPrefix}
 				importedAt={importEntity.importedAt}
 				source={importEntity.source}
+				type={importEntity.type}
 			/>
 		</div>
 	);

diff --git a/src/client/components/pages/import-entities/work.js b/src/client/components/pages/import-entities/work.js
@@ -27,11 +27,10 @@ import ImportTitle from './title';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {WorkAttributes} from '../entities/work';
-import {startCase} from 'lodash';
 
 
 const {getImportUrl} = importHelper;
-const {Alert, Col, Row} = bootstrap;
+const {Col, Row} = bootstrap;
 
 
 function ImportWorkDisplayPage({importEntity, identifierTypes}) {
@@ -56,20 +55,12 @@ function ImportWorkDisplayPage({importEntity, identifierTypes}) {
 				urlPrefix={urlPrefix}
 			/>
 			<hr className="margin-top-d40"/>
-			<Row>
-				<Alert
-					className="text-center font-weight-bold"
-					variant="success"
-				>
-					This {startCase(importEntity.type.toLowerCase())} has been automatically added.{' '}
-					Kindly approve/discard it to help us improve our data.
-				</Alert>
-			</Row>
 			<ImportFooter
 				hasVoted={importEntity.hasVoted}
 				importUrl={urlPrefix}
 				importedAt={importEntity.importedAt}
 				source={importEntity.source}
+				type={importEntity.type}
 			/>
 		</div>
 	);

diff --git a/src/client/components/pages/parts/recent-import-results.js b/src/client/components/pages/parts/recent-import-results.js
@@ -39,8 +39,8 @@ function RecentImportsTable(props) {
 			<div> <h2 className="text-center">Click to review them!</h2> </div>
 			<Table
 				bordered
-				condensed
 				striped
+				size="sm"
 			>
 				<thead>
 					<tr>

diff --git a/src/client/controllers/import-entity/discard-import-entity.js b/src/client/controllers/import-entity/discard-import-entity.js
@@ -36,3 +36,13 @@ const markup = (
 );
 
 ReactDOM.hydrate(markup, document.getElementById('target'));
+
+/*
+ * As we are not exporting a component,
+ * we cannot use the react-hot-loader module wrapper,
+ * but instead directly use webpack Hot Module Replacement API
+ */
+
+if (module.hot) {
+	module.hot.accept();
+}
diff --git a/src/client/controllers/import-entity/import-entity.js b/src/client/controllers/import-entity/import-entity.js
@@ -45,3 +45,13 @@ const markup = (
 
 
 ReactDOM.hydrate(markup, document.getElementById('target'));
+
+/*
+ * As we are not exporting a component,
+ * we cannot use the react-hot-loader module wrapper,
+ * but instead directly use webpack Hot Module Replacement API
+ */
+
+if (module.hot) {
+	module.hot.accept();
+}
diff --git a/src/client/controllers/import-entity/recent-imports.js b/src/client/controllers/import-entity/recent-imports.js
@@ -35,3 +35,13 @@ const markup = (
 );
 
 ReactDOM.hydrate(markup, document.getElementById('target'));
+
+/*
+ * As we are not exporting a component,
+ * we cannot use the react-hot-loader module wrapper,
+ * but instead directly use webpack Hot Module Replacement API
+ */
+
+if (module.hot) {
+	module.hot.accept();
+}
diff --git a/src/server/routes/entity/entity.tsx b/src/server/routes/entity/entity.tsx
@@ -1066,7 +1066,8 @@ function sanitizeBody(body:any) {
 export async function processSingleEntity(formBody, JSONEntity, reqSession,
 	entityType, orm:any, editorJSON, derivedProps, isMergeOperation, transacting):Promise<any> {
 	const {Entity, Revision} = orm;
-	let body = sanitizeBody(formBody);
+	// Sanitize nameSection inputs
+	const body = sanitizeBody(formBody);
 	let currentEntity: {
 		aliasSet: {id: number} | null | undefined,
 		annotation: {id: number} | null | undefined,
@@ -1079,8 +1080,6 @@ export async function processSingleEntity(formBody, JSONEntity, reqSession,
 	try {
 		// Determine if a new entity is being created
 		const isNew = !currentEntity;
-		// sanitize namesection inputs
-		body = sanitizeBody(body);
 		if (isNew) {
 			const newEntity = await new Entity({type: entityType})
 				.save(null, {transacting});