fix(merge-tool): Fix updated bootstrap version issues

metabrainz · May 6, 2020 · 5a0d903 · 5a0d903
1 parent 5fb3bd3
commit 5a0d903
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 44 deletions.
diff --git a/src/client/components/forms/deletion.js b/src/client/components/forms/deletion.js
@@ -96,8 +96,6 @@ class EntityDeletionForm extends React.Component {
 			</span>
 		);
 
-		const headerComponent = <h3>Confirm Deletion</h3>;
-
 		const entityName =
 			entity.defaultAlias ? entity.defaultAlias.name : '(unnamed)';
 
@@ -110,37 +108,46 @@ class EntityDeletionForm extends React.Component {
 						<form onSubmit={this.handleSubmit}>
 							<Panel
 								bsStyle="danger"
-								footer={footerComponent}
-								header={headerComponent}
 							>
-								<Alert bsStyle="warning">
-									<h4>
-										<FontAwesomeIcon icon="exclamation-triangle"/>&nbsp;
-										You’re about to delete the {entity.type} {entityName}.
-									</h4>
-									<p style={{fontSize: '1.3em'}}>Edit the entity or merge duplicates rather than delete !</p>
-								</Alert>
-								<p>
-								As a general principle, if you can solve an issue with non-destructive edits,
-								that&apos;s preferable to a removal. That way the unique identifier of the entity is preserved.
-									<br/>
-								In case of merged entities, the old identifier will forward to the entity it is merged into.
-								</p>
-								<p>If you are certain it should be deleted, please enter a
-								revision note below to explain why and confirm the deletion.
-								</p>
-								<p className="text-muted">
-								We are currently working on the merging tool. If this {entity.type} is a duplicate,
-								please edit it to add &quot;duplicate&quot; as a disambiguation to mark it to be merged.
-								</p>
-
-								<CustomInput
-									ref={(ref) => this.note = ref}
-									rows="5"
-									type="textarea"
-									wrapperClassName="margin-top-1"
-								/>
-								{errorComponent}
+								<Panel.Heading>
+									<Panel.Title componentClass="h3">
+										Confirm Deletion
+									</Panel.Title>
+								</Panel.Heading>
+								<Panel.Body>
+
+									<Alert bsStyle="warning">
+										<h4>
+											<FontAwesomeIcon icon="exclamation-triangle"/>&nbsp;
+											You’re about to delete the {entity.type} {entityName}.
+										</h4>
+										<p style={{fontSize: '1.3em'}}>Edit the entity or merge duplicates rather than delete !</p>
+									</Alert>
+									<p>
+									As a general principle, if you can solve an issue with non-destructive edits,
+									that&apos;s preferable to a removal. That way the unique identifier of the entity is preserved.
+										<br/>
+									In case of merged entities, the old identifier will forward to the entity it is merged into.
+									</p>
+									<p>If you are certain it should be deleted, please enter a
+									revision note below to explain why and confirm the deletion.
+									</p>
+									<p className="text-muted">
+									We are currently working on the merging tool. If this {entity.type} is a duplicate,
+									please edit it to add &quot;duplicate&quot; as a disambiguation to mark it to be merged.
+									</p>
+
+									<CustomInput
+										ref={(ref) => this.note = ref}
+										rows="5"
+										type="textarea"
+										wrapperClassName="margin-top-1"
+									/>
+									{errorComponent}
+								</Panel.Body>
+								<Panel.Footer>
+									{footerComponent}
+								</Panel.Footer>
 							</Panel>
 						</form>
 					</Col>

diff --git a/src/client/entity-editor/entity-editor.js b/src/client/entity-editor/entity-editor.js
@@ -56,23 +56,33 @@ const EntityEditor = (props: Props) => {
 	const {
 		aliasEditorVisible,
 		children,
+		heading,
 		identifierEditorVisible
 	} = props;
 
 	return (
 		<Panel>
-			<AliasEditor show={aliasEditorVisible} {...props}/>
-			<NameSection {...props}/>
-			<ButtonBar {...props}/>
-			<RelationshipSection {...props}/>
-			{
-				React.cloneElement(
-					React.Children.only(children),
-					{...props}
-				)
-			}
-			<SubmissionSection {...props}/>
-			<IdentifierEditor show={identifierEditorVisible} {...props}/>
+			<Panel.Heading>
+				<Panel.Title componentClass="h3">
+					{heading}
+				</Panel.Title>
+			</Panel.Heading>
+			<Panel.Body>
+				<AliasEditor show={aliasEditorVisible} {...props}/>
+				<NameSection {...props}/>
+				<ButtonBar {...props}/>
+				<RelationshipSection {...props}/>
+				{
+					React.cloneElement(
+						React.Children.only(children),
+						{...props}
+					)
+				}
+				<IdentifierEditor show={identifierEditorVisible} {...props}/>
+			</Panel.Body>
+			<Panel.Footer>
+				<SubmissionSection {...props}/>
+			</Panel.Footer>
 		</Panel>
 	);
 };

diff --git a/src/client/entity-editor/relationship-editor/relationship-section.js b/src/client/entity-editor/relationship-editor/relationship-section.js
@@ -54,6 +54,11 @@ type RelationshipListProps = {
 	onRemove: (number) => mixed
 };
 
+/* In the ButtonGroup below we are forced to use an 'href' attribute to turn them into <a> elements
+   or wrap the children <button> elements in another ButtonGroup
+   https://getbootstrap.com/docs/3.4/components/#with-%3Cbutton%3E-elements
+*/
+
 export function RelationshipList(
 	{contextEntity, relationships, onEdit, onRemove}: RelationshipListProps
 ) {
@@ -78,6 +83,8 @@ export function RelationshipList(
 							{onEdit &&
 								<Button
 									bsStyle="warning"
+									href="#"
+									role="button"
 									onClick={onEdit.bind(this, rowID)}
 								>
 									<FontAwesomeIcon icon="pencil-alt"/>
@@ -87,6 +94,8 @@ export function RelationshipList(
 							{onRemove &&
 								<Button
 									bsStyle="danger"
+									href="#"
+									role="button"
 									onClick={onRemove.bind(this, rowID)}
 								>
 									<FontAwesomeIcon icon="times"/>