chore(deps-dev): bump bootstrap from 4.6.1 to 5.0.0

package.json

@@ -59,7 +59,7 @@
     "influx": "^5.9.3",
     "isomorphic-dompurify": "^0.13.0",
     "jsesc": "^3.0.2",
-    "lobes4": "4.0.1",
+    "lobes5": "git+https://[email protected]/metabrainz/lobes.git#bootstrap5",
     "lodash": "^4.17.21",
     "log": "^6.0.0",
     "log-node": "^8.0.3",
@@ -70,7 +70,7 @@
     "passport-musicbrainz-oauth2": "git+https://[email protected]/LordSputnik/passport-musicbrainz-oauth2.git",
     "prop-types": "^15.8.1",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.6.4",
+    "react-bootstrap": "^2.10.5",
     "react-chartjs-2": "^2.11.2",
     "react-datepicker": "^4.7.0",
     "react-dom": "^16.13.1",
@@ -115,7 +115,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-require-ignore": "^0.1.1",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.0.0",
     "chai": "^4.3.6",
     "chai-arrays": "^2.2.0",
     "chai-as-promised": "^7.0.0",
@@ -141,8 +141,8 @@
     "redux-mock-store": "^1.5.4",
     "resolve-url-loader": "^5.0.0",
     "rewire": "^7.0.0",
-    "sass": "^1.59.2",
-    "sass-loader": "^13.2.0",
+    "sass": "1.79.5",
+    "sass-loader": "^16",
     "sinon": "^14.0.0",
     "typescript": "^4.0.5",
     "webpack": "^5.94.0",

src/client/components/forms/deletion.js

@@ -97,15 +97,15 @@ class EntityDeletionForm extends React.Component {
 		const footerComponent = (
 			<span className="clearfix">
 				<Button
-					className="float-right"
+					className="float-end"
 					disabled={!hasNote}
 					type="submit"
 					variant="danger"
 				>
 					<FontAwesomeIcon icon={faTrashAlt}/> Delete
 				</Button>
 				<Button
-					className="float-right"
+					className="float-end"
 					href={this.entityUrl}
 					variant="secondary"
 				>

src/client/components/forms/preview.js

@@ -36,8 +36,8 @@ class PreviewPage extends React.Component {
 				<Accordion>
 					<Card>
 						<Card.Header>
-							<Accordion.Toggle as={Button} eventKey="0" variant="link"> &#9654; Data submitted with this request
-							</Accordion.Toggle>
+							<Accordion.Button as={Button} eventKey="0" variant="link"> &#9654; Data submitted with this request
+							</Accordion.Button>
 						</Card.Header>
 						<Accordion.Collapse eventKey="0">
 							<Card.Body>{formInputs}</Card.Body>

src/client/components/forms/type-editor/identifier-type.tsx

@@ -15,7 +15,7 @@
  * with this program; if not, write to the Free Software Foundation, Inc.,
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
-import {Alert, Button, Card, Col, Form, Modal, Row} from 'react-bootstrap';
+import {Alert, Button, Card, Col, Form, FormSelect, Modal, Row} from 'react-bootstrap';
 import {IdentifierTypeDataT, IdentifierTypeEditorPropsT,
 	defaultIdentifierTypeData, entityTypeOptions, renderSelectedParentIdentifierType} from './typeUtils';
 import React, {ChangeEvent, FormEvent, useCallback, useEffect, useState} from 'react';
@@ -107,7 +107,7 @@ function IdentifierTypeEditor({identifierTypeData, parentTypes}: IdentifierTypeE
 		  }));
 	}, [formData]);
 
-	const handleDeprecatedChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+	const handleDeprecatedChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
 		const {value} = event.target;
 		setFormData((prevFormData) => ({
 			...prevFormData,
@@ -351,16 +351,15 @@ function IdentifierTypeEditor({identifierTypeData, parentTypes}: IdentifierTypeE
 						<Col lg={lgCol}>
 							<Form.Group>
 								<Form.Label>Deprecated</Form.Label>
-								<Form.Control
+								<FormSelect
 									required
-									as="select"
 									name="deprecated"
 									value={formData.deprecated.toString()}
 									onChange={handleDeprecatedChange}
 								>
 									<option value="false">No</option>
 									<option value="true">Yes</option>
-								</Form.Control>
+								</FormSelect>
 							</Form.Group>
 						</Col>
 					</Row>

src/client/components/forms/type-editor/relationship-type.tsx

@@ -15,7 +15,7 @@
  * with this program; if not, write to the Free Software Foundation, Inc.,
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
-import {Alert, Button, Card, Col, Form, Modal, Row} from 'react-bootstrap';
+import {Alert, Button, Card, Col, Form, FormSelect, Modal, Row} from 'react-bootstrap';
 import React, {ChangeEvent, FormEvent, useCallback, useEffect, useState} from 'react';
 import {RelationshipTypeDataT, RelationshipTypeEditorPropsT,
 	defaultRelationshipTypeData, entityTypeOptions, renderSelectedParentRelationshipType} from './typeUtils';
@@ -149,7 +149,7 @@ function RelationshipTypeEditor({relationshipTypeData, parentTypes, attributeTyp
 		  }));
 	}, [formData]);
 
-	const handleDeprecatedChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+	const handleDeprecatedChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
 		const {value} = event.target;
 		setFormData((prevFormData) => ({
 			...prevFormData,
@@ -409,16 +409,15 @@ function RelationshipTypeEditor({relationshipTypeData, parentTypes, attributeTyp
 						<Col lg={lgCol}>
 							<Form.Group>
 								<Form.Label>Deprecated</Form.Label>
-								<Form.Control
+								<FormSelect
 									required
-									as="select"
 									name="deprecated"
 									value={formData.deprecated.toString()}
 									onChange={handleDeprecatedChange}
 								>
 									<option value="false">No</option>
 									<option value="true">Yes</option>
-								</Form.Control>
+								</FormSelect>
 							</Form.Group>
 						</Col>
 					</Row>

src/client/components/forms/userCollection.js

@@ -30,7 +30,7 @@
 import request from 'superagent';
 
 
 const {Alert, Button, Col, Form, Row} = bootstrap;
 
 class UserCollectionForm extends React.Component {
 	constructor(props) {
@@ -242,24 +242,20 @@
 								/>
 							</Form.Group>
 							<h3><b>Collaborators</b></h3>
-							<Row className="margin-bottom-2">
-								<Col className="margin-top-d5" md={6}>
-									<p className="text-muted">
-								Collaborators can add/remove entities from your collection
-									</p>
-								</Col>
-								<Col className="margin-top-d5" md={6}>
-									<Button
-										block
-										type="button"
-										variant="primary"
-										onClick={this.handleAddCollaborator}
-									>
-										<FontAwesomeIcon icon={faPlus}/>
-										&nbsp;Add another collaborator
-									</Button>
-								</Col>
-							</Row>
+							<div className="align-items-baseline d-flex flex-wrap gap-2 gap-5 margin-bottom-2">
+								<p className="text-muted">
+							Collaborators can add/remove entities from your collection
+								</p>
+								<Button
+									className="flex-fill"
+									type="button"
+									variant="primary"
+									onClick={this.handleAddCollaborator}
+								>
+									<FontAwesomeIcon icon={faPlus}/>
+									&nbsp;Add another collaborator
+								</Button>
+							</div>
 							{
 								this.state.collaborators.map((collaborator, index) => {
 									const buttonAfter = (
@@ -291,30 +287,27 @@
 							<div className={errorAlertClass}>
 								<Alert variant="danger">Error: {errorText}</Alert>
 							</div>
-							<Row className="margin-bottom-2">
-								<Col className="margin-top-d5" md={6}>
-									<Button
-										block
-										type="submit"
-										variant="success"
-									>
-										<FontAwesomeIcon icon={faSave}/>&nbsp;{submitLabel}
-									</Button>
-								</Col>
+							<div className="d-flex flex-wrap gap-5 margin-bottom-2">
+								<Button
+									className="flex-fill"
+									type="submit"
+									variant="success"
+								>
+									<FontAwesomeIcon icon={faSave}/>&nbsp;{submitLabel}
+								</Button>
 								{
 									this.props.collection.id ?
-										<Col className="margin-top-d5" md={6}>
-											<Button
-												block
-												type="button"
-												variant="danger"
-												onClick={this.handleShowModal}
-											>
-												<FontAwesomeIcon icon={faTrashAlt}/>&nbsp;Delete collection
-											</Button>
-										</Col> : null
+										<Button
+											className="flex-fill"
+											type="button"
+											variant="danger"
+											onClick={this.handleShowModal}
+										>
+											<FontAwesomeIcon icon={faTrashAlt}/>&nbsp;Delete collection
+										</Button> :
+										 null
 								}
-							</Row>
+							</div>
 						</form>
 					</Col>
 				</div>

src/client/components/pages/entities/cb-review.js

@@ -56,12 +56,12 @@ function ReviewCard(props) {
 					size={15}
 					stars={5}
 				/>
-				<small className="float-right">
+				<small className="float-end">
 					Review by: <b>{reviewData.user.display_name}</b> {publishedDate}
 				</small>
 			</div>
 			{reviewText}
-			<a className="float-right" href={reviewLink}>View &gt;</a>
+			<a className="float-end" href={reviewLink}>View &gt;</a>
 		</div>
 	);
 }

src/client/components/pages/entities/edition-table.js

@@ -151,7 +151,7 @@ function EditionTable({editions, entity, showAddedAtColumn, showAdd, showAuthorC
 	else if (showAdd) {
 		tableContent = (
 			<React.Fragment>
-				<span className="margin-right-2 float-left">
+				<span className="margin-right-2 float-start">
 					<Button
 						href={`/edition/create?${_kebabCase(entity.type)}=${entity.bbid}`}
 						variant="success"

src/client/components/pages/entities/title.js

@@ -38,7 +38,7 @@ function EntityTitle({entity, handleModalToggle}) {
 				{label}{disambiguation}
 				{handleModalToggle &&
 					<Button
-						className="float-right"
+						className="float-end"
 						variant="success"
 						onClick={handleModalToggle}
 					>

src/client/components/pages/entities/work-table.js

@@ -134,7 +134,7 @@ function WorkTable({entity, showAddedAtColumn, works, showAdd, showCheckboxes, s
 	else if (showAdd) {
 		tableContent = (
 			<React.Fragment>
-				<span className="margin-right-2 float-left">
+				<span className="margin-right-2 float-start">
 					<Button
 						href={`/work/create?${_kebabCase(entity.type)}=${entity.bbid}`}
 						variant="success"

src/client/components/pages/index.js

@@ -80,38 +80,32 @@ class IndexPage extends React.Component {
 											</Button>
 										</span>
 									</form>
-									<Row className="margin-top-4">
-										<Col md={4}>
-											<Button
-												block
-												href="/about"
-												size="lg"
-												variant="secondary"
-											>
-												About
-											</Button>
-										</Col>
-										<Col md={4}>
-											<Button
-												block
-												href="/contribute"
-												size="lg"
-												variant="secondary"
-											>
-												Contribute
-											</Button>
-										</Col>
-										<Col md={4}>
-											<Button
-												block
-												href="/develop"
-												size="lg"
-												variant="secondary"
-											>
-												Develop
-											</Button>
-										</Col>
-									</Row>
+									<div className="margin-top-4 d-inline-flex gap-5 w-100">
+										<Button
+											className="flex-fill"
+											href="/about"
+											size="lg"
+											variant="secondary"
+										>
+											About
+										</Button>
+										<Button
+											className="flex-fill"
+											href="/contribute"
+											size="lg"
+											variant="secondary"
+										>
+											Contribute
+										</Button>
+										<Button
+											className="flex-fill"
+											href="/develop"
+											size="lg"
+											variant="secondary"
+										>
+											Develop
+										</Button>
+									</div>
 									<div className="margin-top-3">
 										<h4 className="contact-text">
 											Contact Us

src/client/components/pages/parts/admin-panel-search-field.tsx

@@ -29,7 +29,6 @@ const {Button, Col, InputGroup, Form, Row} = bootstrap;
 
 const SearchButton = (
 	<Button
-		block
 		type="submit"
 		variant="success"
 	>
@@ -114,9 +113,7 @@ class AdminPanelSearchField extends React.Component<AdminPanelSearchFieldProps,
 									value={this.state.query}
 									onChange={this.handleChange}
 								/>
-								<InputGroup.Append>
-									{SearchButton}
-								</InputGroup.Append>
+								{SearchButton}
 							</InputGroup>
 						</Form.Group>
 					</form>

src/client/components/pages/parts/editor-achievements.js

@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 
-const {Button, CardDeck, Col, Form, Row} = bootstrap;
+const {Button, CardGroup, Col, Form, Row} = bootstrap;
 const {Sticky, StickyContainer} = ReactSticky;
 
 /**
@@ -89,7 +89,7 @@ class EditorAchievementTab extends React.Component {
 					id="rankSelectForm"
 					method="post"
 				>
-					<CardDeck className="mb-3">
+					<CardGroup className="mb-3">
 						<DragAndDrop
 							initialAchievement={this.currAchievement.model.fulfillmentValue?.[0]?.achievement}
 							name="rank1"
@@ -102,7 +102,7 @@ class EditorAchievementTab extends React.Component {
 							initialAchievement={this.currAchievement.model.fulfillmentValue?.[2]?.achievement}
 							name="rank3"
 						/>
-					</CardDeck>
+					</CardGroup>
 					<span className="margin-left-1">
 						<Button type="submit" variant="success">
 							Update

src/client/components/pages/parts/editor-profile.js

@@ -85,7 +85,7 @@ class EditorProfileTab extends React.Component {
 				<h2>
 					Basic Info
 					{user && user.id === editor.id &&
-						<small className="float-right">
+						<small className="float-end">
 							<Button
 								href="/editor/edit"
 								title="Edit basic editor info"