Merge pull request #3 from bookbrainz/master

Merge master
metabrainz · Feb 12, 2020 · a53a6d3 · a53a6d3
2 parents e5fafe8 + 50c6610
commit a53a6d3
Show file tree

Hide file tree

Showing 28 changed files with 133 additions and 122 deletions.
diff --git a/src/client/components/pages/entities/edition.js b/src/client/components/pages/entities/edition.js
@@ -23,7 +23,7 @@ import EntityFooter from './footer';
 import EntityImage from './image';
 import EntityLinks from './links';
 import EntityTitle from './title';
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 import WorksTable from './work-table';
@@ -109,7 +109,7 @@ function EditionDisplayPage({entity, identifierTypes}) {
 		editionGroupSection = (
 			<div className="margin-bottom-d15">
 				<a href={`/edition-group/${entity.editionGroup.bbid}`}>
-					<Icon name="external-link"/>
+					<FontAwesomeIcon icon="external-link-alt"/>
 					<span>&nbsp;See all similar editions</span>
 				</a>
 			</div>

diff --git a/src/client/components/pages/entities/footer.js b/src/client/components/pages/entities/footer.js
@@ -19,7 +19,7 @@
 import * as bootstrap from 'react-bootstrap';
 import * as utilsHelper from '../../../helpers/utils';
 
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -41,22 +41,22 @@ function EntityFooter({deleted, entityUrl, lastModified}) {
 							href={`${entityUrl}/edit`}
 							title="Edit Entity"
 						>
-							<Icon name="pencil"/>&nbsp;Edit
+							<FontAwesomeIcon icon="pencil-alt"/>&nbsp;Edit
 						</Button>
 						<Button
 							bsStyle="primary"
 							href={`${entityUrl}/revisions`}
 							title="Revision History"
 						>
-							<Icon name="history"/>&nbsp;History
+							<FontAwesomeIcon icon="history"/>&nbsp;History
 						</Button>
 						<Button
 							bsStyle="danger"
 							disabled={deleted}
 							href={`${entityUrl}/delete`}
 							title="Delete Entity"
 						>
-							<Icon name="remove"/>&nbsp;Delete
+							<FontAwesomeIcon icon="times"/>&nbsp;Delete
 						</Button>
 					</ButtonGroup>
 				</Col>

diff --git a/src/client/components/pages/entities/links.js b/src/client/components/pages/entities/links.js
@@ -36,6 +36,7 @@ function EntityLinks({entity, identifierTypes, urlPrefix}) {
 		<Row>
 			<Col md={8}>
 				<EntityRelationships
+					contextEntity={entity}
 					entityUrl={urlPrefix}
 					relationships={relationships}
 				/>

diff --git a/src/client/components/pages/entities/relationships.js b/src/client/components/pages/entities/relationships.js
@@ -18,21 +18,27 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import Relationship from '../../../entity-editor/relationship-editor/relationship';
 
 
-function EntityRelationships({relationships}) {
+function EntityRelationships({contextEntity, relationships}) {
 	return (
 		<div>
 			<h2>Relationships</h2>
 			{relationships &&
 			<ul className="list-unstyled">
 				{relationships.map((relationship) => (
 					<li
-						dangerouslySetInnerHTML={{
-							__html: relationship.rendered
-						}}
 						key={relationship.id}
-					/>
+					>
+						<Relationship
+							link
+							contextEntity={contextEntity}
+							relationshipType={relationship.type}
+							sourceEntity={relationship.source}
+							targetEntity={relationship.target}
+						/>
+					</li>
 				))}
 			</ul>
 			}
@@ -41,6 +47,7 @@ function EntityRelationships({relationships}) {
 }
 EntityRelationships.displayName = 'EntityRelationships';
 EntityRelationships.propTypes = {
+	contextEntity: PropTypes.object.isRequired,
 	relationships: PropTypes.array.isRequired
 };
 

diff --git a/src/client/components/pages/index.js b/src/client/components/pages/index.js
@@ -212,20 +212,18 @@ class IndexPage extends React.Component {
 						Register!
 					</Button>
 				</div>
-				<RevisionsTable
-					results={this.props.recent}
-				/>
 				<div>
-					<Row>
-						<Col mdOffset={10}>
-							<Button
-								bsStyle="primary"
-								href="/revisions"
-							>
-								See all revisions
-							</Button>
-						</Col>
-					</Row>
+					<RevisionsTable
+						results={this.props.recent}
+					/>
+					<div className="text-center">
+						<Button
+							bsStyle="primary"
+							href="/revisions"
+						>
+							See all revisions
+						</Button>
+					</div>
 				</div>
 			</Grid>
 		);

diff --git a/src/client/components/pages/parts/editor-profile.js b/src/client/components/pages/parts/editor-profile.js
@@ -21,7 +21,7 @@
 
 import * as bootstrap from 'react-bootstrap';
 import * as utilsHelper from '../../../helpers/utils';
-import FontAwesome from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -76,7 +76,7 @@ class EditorProfileTab extends React.Component {
 								href="/editor/edit"
 								title="Edit basic editor info"
 							>
-								<FontAwesome name="pencil"/>{' '}Edit Profile
+								<FontAwesomeIcon icon="pencil-alt"/>{' '}Edit Profile
 							</Button>
 						</small>
 					}

diff --git a/src/client/components/pages/revisions.js b/src/client/components/pages/revisions.js
@@ -67,52 +67,49 @@ class RevisionsPage extends React.Component {
 
 	render() {
 		return (
-			<div className="container">
-				<div id="RevisionsPage">
-
-					<RevisionsTable results={this.state.results}/>
-					{
-						this.state.results && this.state.results.length ?
-							<div>
-								<hr className="thin"/>
-								<Pager>
-									<Pager.Item
-										previous disabled={this.state.from <= 0}
-										href="#" onClick={this.handleClickPrevious}
-									>
-										&larr; Previous Page
-									</Pager.Item>
-									<ButtonGroup>
-										<Button disabled>Results {this.state.from + 1} —
-											{this.state.results.length < this.state.size ?
-												this.state.from + this.state.results.length :
-												this.state.from + this.state.size
-											}
-										</Button>
-										<DropdownButton
-											dropup bsStyle="info" id="bg-nested-dropdown"
-											title={`${this.state.size} per page`}
-											onSelect={this.handleResultsPerPageChange}
-										>
-											<MenuItem eventKey="10">10 per page</MenuItem>
-											<MenuItem eventKey="20">20 per page</MenuItem>
-											<MenuItem eventKey="35">35 per page</MenuItem>
-											<MenuItem eventKey="50">50 per page</MenuItem>
-											<MenuItem eventKey="100">100 per page</MenuItem>
-										</DropdownButton>
-									</ButtonGroup>
-									<Pager.Item
-										next disabled={!this.state.nextEnabled}
-										href="#" onClick={this.handleClickNext}
+			<div id="RevisionsPage">
+				<RevisionsTable results={this.state.results}/>
+				{
+					this.state.results && this.state.results.length ?
+						<div>
+							<hr className="thin"/>
+							<Pager>
+								<Pager.Item
+									previous disabled={this.state.from <= 0}
+									href="#" onClick={this.handleClickPrevious}
+								>
+									&larr; Previous Page
+								</Pager.Item>
+								<ButtonGroup>
+									<Button disabled>Results {this.state.from + 1} —
+										{this.state.results.length < this.state.size ?
+											this.state.from + this.state.results.length :
+											this.state.from + this.state.size
+										}
+									</Button>
+									<DropdownButton
+										dropup bsStyle="info" id="bg-nested-dropdown"
+										title={`${this.state.size} per page`}
+										onSelect={this.handleResultsPerPageChange}
 									>
-										Next Page &rarr;
-									</Pager.Item>
-								</Pager>
+										<MenuItem eventKey="10">10 per page</MenuItem>
+										<MenuItem eventKey="20">20 per page</MenuItem>
+										<MenuItem eventKey="35">35 per page</MenuItem>
+										<MenuItem eventKey="50">50 per page</MenuItem>
+										<MenuItem eventKey="100">100 per page</MenuItem>
+									</DropdownButton>
+								</ButtonGroup>
+								<Pager.Item
+									next disabled={!this.state.nextEnabled}
+									href="#" onClick={this.handleClickNext}
+								>
+									Next Page &rarr;
+								</Pager.Item>
+							</Pager>
 
-							</div> :
-							null
-					}
-				</div>
+						</div> :
+						null
+				}
 			</div>
 		);
 	}

diff --git a/src/client/entity-editor/button-bar/alias-button.js b/src/client/entity-editor/button-bar/alias-button.js
@@ -17,7 +17,7 @@
  */
 
 import {Button} from 'react-bootstrap';
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -47,7 +47,7 @@ function AliasButton({
 	}
 
 	const iconElement = aliasesInvalid &&
-		<Icon className="margin-right-0-5 text-danger" name="times"/>;
+		<FontAwesomeIcon className="margin-right-0-5 text-danger" icon="times"/>;
 
 	return (
 		<Button bsStyle="link" {...props}>

diff --git a/src/client/entity-editor/button-bar/identifier-button.js b/src/client/entity-editor/button-bar/identifier-button.js
@@ -17,7 +17,7 @@
  */
 
 import {Button} from 'react-bootstrap';
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -47,7 +47,7 @@ function IdentifierButton({
 	}
 
 	const iconElement = identifiersInvalid &&
-		<Icon className="margin-right-0-5 text-danger" name="times"/>;
+		<FontAwesomeIcon className="margin-right-0-5 text-danger" icon="times"/>;
 
 	return (
 		<Button bsStyle="link" {...props}>

diff --git a/src/client/entity-editor/common/entity.js b/src/client/entity-editor/common/entity.js
@@ -22,6 +22,7 @@
 import React from 'react';
 import {genEntityIconHTMLElement} from '../../helpers/entity';
 
+
 type EntityProps = {
 	disambiguation?: ?string,
 	language: string,
@@ -40,14 +41,15 @@ function Entity(
 			{
 				type && genEntityIconHTMLElement(type)
 			}
-			{' '}
 			{nameComponent}
-			{' '}
 			{
 				disambiguation &&
-				<span className="disambig"><small>({disambiguation})</small></span>
+				<span className="disambig margin-left-0-3"><small>({disambiguation})</small></span>
+			}
+			{
+				language &&
+				<span className="text-muted small margin-left-0-3">{language}</span>
 			}
-			<span className="text-muted small">{language}</span>
 		</span>
 	);
 
@@ -58,7 +60,7 @@ function Entity(
 	return contents;
 }
 
-// Entity.displayName = 'Entity';
+Entity.displayName = 'Entity';
 Entity.defaultProps = {
 	disambiguation: null,
 	link: false,

diff --git a/src/client/entity-editor/common/linked-entity.js b/src/client/entity-editor/common/linked-entity.js
@@ -19,7 +19,7 @@
 
 // @flow
 
-import FontAwesome from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {kebabCase as _kebabCase} from 'lodash';
@@ -73,7 +73,7 @@ class LinkedEntity extends React.Component {
 				}
 				{' '}
 				<a onClick={this.handleChildEvent}>
-					<FontAwesome name="external-link-alt"/>
+					<FontAwesomeIcon icon="external-link-alt"/>
 				</a>
 				<span className="text-muted small" style={{float: 'right'}}>{language}</span>
 			</div>

diff --git a/src/client/entity-editor/common/new-date-field.js b/src/client/entity-editor/common/new-date-field.js
@@ -4,7 +4,7 @@ import {dateObjectToISOString, getTodayDate} from '../../helpers/utils';
 import {isValid, parseISO} from 'date-fns';
 import CustomInput from '../../input';
 import DatePicker from 'react-datepicker';
-import FontAwesome from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ValidationLabel from './validation-label';
@@ -177,7 +177,7 @@ class DateField extends React.Component {
 								showYearDropdown
 								customInput={
 									<Button bsStyle="info" style={{lineHeight: '1.75', padding: '0.375em 0.938em'}} title="Date picker">
-										<FontAwesome name="calendar-alt"/>
+										<FontAwesomeIcon icon="calendar-alt"/>
 									</Button>
 								}
 								dateFormat="uuuuuu-MM-dd"

diff --git a/src/client/entity-editor/common/validation-label.js b/src/client/entity-editor/common/validation-label.js
@@ -19,7 +19,7 @@
 // @flow
 
 import * as React from 'react';
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
 
 function icon(empty: ?boolean, error: ?boolean, warn: ?boolean): string | null {
@@ -94,7 +94,7 @@ function ValidationLabel({
 	const errorElement = errorMessage &&
 		<span className={contextualColor(empty, error, warn)}> {errorMessage} </span>;
 	const iconElement = icon(empty, error, warn) &&
-		<Icon className="margin-left-0-5" name={icon(empty, error, warn)}/>;
+		<FontAwesomeIcon className="margin-left-0-5" icon={icon(empty, error, warn)}/>;
 
 	return (
 		<span className={contextualColor(empty, error, warn)}>

diff --git a/src/client/entity-editor/edition-section/edition-section.js b/src/client/entity-editor/edition-section/edition-section.js
@@ -50,7 +50,7 @@ import {
 import CustomInput from '../../input';
 import DateField from '../common/new-date-field';
 import EntitySearchFieldOption from '../common/entity-search-field-option';
-import Icon from 'react-fontawesome';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import LanguageField from '../common/language-field';
 import NumericField from '../common/numeric-field';
 import React from 'react';
@@ -239,7 +239,7 @@ function EditionSection({
 						style={{marginTop: '1.8em'}}
 						target="_blank"
 					>
-						<Icon name="plus"/>
+						<FontAwesomeIcon icon="plus"/>
 						&nbsp;New Edition Group
 					</Button>
 				</Col>