fix BB-343 : Integrated the modification of identifiers and aliases into the primary editing workflow

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

@@ -15,9 +15,8 @@
  * with this program; if not, write to the Free Software Foundation, Inc.,
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
-
 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';
@@ -25,7 +24,6 @@
 import {connect} from 'react-redux';
 import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 
-
 /**
  * Container component. The AliasEditor component contains a number of AliasRow
  * elements, and renders these inside a modal, which appears when the show
@@ -37,15 +35,14 @@
  * @param {Array} props.languageOptions - The list of possible languages for an
  *        alias.
  * @param {Function} props.onClose - A function to be called when the button to
- *        close the editor is clicked.
+ *        add new alias 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 = ({
 	languageOptions,
-	onClose,
-	show
+	onClose
 }) => {
 	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.`;
@@ -63,37 +60,33 @@
 	);
 
 	return (
-		<Modal show={show} size="lg" onHide={onClose}>
-			<Modal.Header>
-				<Modal.Title>
-					Alias Editor {helpIconElement}
-				</Modal.Title>
-			</Modal.Header>
-
-			<Modal.Body>
+		<div>
+			<div>
+				<div style={{display: 'flex'}}>
+				  <h2>Add new alias</h2>
+				  <div>
+						{helpIconElement}
+				  </div>
+				</div>
+			</div>
+			<div>
 				<AliasModalBody languageOptions={languageOptions}/>
-			</Modal.Body>
-
-			<Modal.Footer>
-				<Button variant="primary" onClick={onClose}>Close</Button>
-			</Modal.Footer>
-		</Modal>
-	);
+			</div>
+			<div>
+				<Button variant="primary" onClick={onClose}>Done</Button>
+			</div>
+		</div>
+	  );
 };
 AliasEditor.displayName = 'AliasEditor';
 AliasEditor.propTypes = {
 	languageOptions: PropTypes.array.isRequired,
-	onClose: PropTypes.func.isRequired,
-	show: PropTypes.bool
-};
-AliasEditor.defaultProps = {
-	show: false
+	onClose: PropTypes.func.isRequired
 };
 
 function mapDispatchToProps(dispatch) {
 	return {
 		onClose: () => {
-			dispatch(hideAliasEditor());
 			dispatch(removeEmptyAliases());
 		}
 	};

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

@@ -87,7 +87,6 @@ const EntityEditor = (props: Props) => {
 					{heading}
 				</Card.Header>
 				<Card.Body>
-					<AliasEditor show={aliasEditorVisible} {...props}/>
 					<NameSection {...props}/>
 					<ButtonBar {...props}/>
 					{
@@ -97,7 +96,8 @@ const EntityEditor = (props: Props) => {
 						)
 					}
 					<RelationshipSection {...props}/>
-					<IdentifierEditor show={identifierEditorVisible} {...props}/>
+					<IdentifierEditor {...props}/>
+					<AliasEditor {...props}/>
 					<AnnotationSection {...props}/>
 				</Card.Body>
 				<Card.Footer>

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

@@ -16,8 +16,8 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
 import {Button, Modal, OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {hideIdentifierEditor, removeEmptyIdentifiers} from './actions';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import IdentifierModalBody from './identifier-modal-body';
 import PropTypes from 'prop-types';
@@ -25,7 +25,6 @@
 import {connect} from 'react-redux';
 import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 
-
 /**
  * Container component. The IdentifierEditor component contains a number of
  * IdentifierRow elements, and renders these inside a modal, which appears when
@@ -39,16 +38,13 @@
  * @param {Function} props.onAddIdentifier - A function to be called when the
  *        button to add an identifier 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.
+ *        add the identifier is clicked.
  * @returns {ReactElement} React element containing the rendered
  *          IdentifierEditor.
  */
 const IdentifierEditor = ({
 	identifierTypes,
-	onClose,
-	show
+	onClose
 }) => {
 	const helpText = `identity of the entity in other databases and services, such as ISBN, barcode, MusicBrainz ID, WikiData ID, OpenLibrary ID, etc.
 	You can enter either the identifier only (Q2517049) or a full link (https://www.wikidata.org/wiki/Q2517049).`;
@@ -67,37 +63,34 @@
 	);
 
 	return (
-		<Modal show={show} size="lg" onHide={onClose}>
-			<Modal.Header>
-				<Modal.Title>
-					Identifier Editor {helpIconElement}
-				</Modal.Title>
-			</Modal.Header>
+		<div>
+			<div>
+				<div style={{display: 'flex'}}>
+					<h2>Add new indentifiers</h2>
+					<div>
+						{helpIconElement}
+					</div>
+				</div>
+			</div>
 
-			<Modal.Body>
+			<div>
 				<IdentifierModalBody identifierTypes={identifierTypes}/>
-			</Modal.Body>
+			</div>
 
-			<Modal.Footer>
-				<Button variant="primary" onClick={onClose}>Close</Button>
-			</Modal.Footer>
-		</Modal>
+			<div>
+				<Button variant="primary" onClick={onClose}>Done</Button>
+			</div>
+		</div>
 	);
 };
 IdentifierEditor.displayName = 'IdentifierEditor';
 IdentifierEditor.propTypes = {
 	identifierTypes: PropTypes.array.isRequired,
-	onClose: PropTypes.func.isRequired,
-	show: PropTypes.bool
-};
-IdentifierEditor.defaultProps = {
-	show: false
+	onClose: PropTypes.func.isRequired
 };
-
 function mapDispatchToProps(dispatch) {
 	return {
 		onClose: () => {
-			dispatch(hideIdentifierEditor());
 			dispatch(removeEmptyIdentifiers());
 		}
 	};

src/client/entity-editor/identifier-editor/identifier-row.tsx

@@ -119,7 +119,7 @@ function IdentifierRow({
 				<Col className="text-right" lg={{offset: 1, span: 3}}>
 					<Button
 						block
-						className="margin-top-d15"
+						className="margin-top-d22"
 						variant="danger"
 						onClick={onRemoveButtonClick}
 					>