deps: react-bootstrap 0.31 -> 2 (Bootstrap 5 CSS deferred as debt)

Removes the largest batch of React-19-blocking warnings: the 0.31
components (Grid, FormGroup, ControlLabel, Navbar.Header/Brand, Checkbox,
SafeAnchor) all leaned on legacy context / defaultProps.

29 files converted: Grid->Container, FormGroup/ControlLabel/FormControl/
HelpBlock -> Form.Group/Label/Control/Text, Checkbox -> Form.Check (label
as prop), bsStyle->variant (default->secondary), bsSize->size,
pull-right->float-end. Custom Col.js now re-exports v2's Col; custom
NavItem.js rewritten self-contained (no SafeAnchor/createChainedFunction);
Navigation.js drops react-bootstrap Navbar (raw markup anyway).

CSS stays on Bootstrap 4 (alexwine:bootstrap-4) for now: the BS4->5 jump
is entangled with the jQuery carousel/swipe + navbar-collapse and is
tracked as separate debt in UPGRADE.md. Only .form-label needed a shim
(forms.scss). Browser-verified home carousel+navbar, signup form + terms
checkbox, login form; REST smoke byte-identical.

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -48,7 +48,7 @@ class CenterInMyPosition extends React.Component {
     const { onlyIcon, t } = this.props;
     const msg = t('Centrar en tu ubicación');
     return (
-      <Button bsStyle="default" title={msg} onClick={() => this.onClick()}>
+      <Button variant="secondary" title={msg} onClick={() => this.onClick()}>
         <i className="fa fa-crosshairs" />{!onlyIcon ? ` ${msg}` : ''}
       </Button>);
   }

imports/ui/components/Col/Col.js

@@ -1,111 +1,6 @@
-import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import elementType from 'prop-types-extra/lib/elementType';
-
-import { bsClass, prefix, splitBsProps } from 'react-bootstrap/lib/utils/bootstrapUtils';
-import { DEVICE_SIZES } from 'react-bootstrap/lib/utils/StyleConfig';
-
-const column = PropTypes.oneOfType([
-  PropTypes.oneOf(['auto']),
-  PropTypes.number,
-]);
-
-const propTypes = {
-  componentClass: elementType,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Extra small devices Phones (<576px)
-   *
-   * class-prefix `col-`
-   */
-  xs: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Small devices Tablets (≥576px)
-   *
-   * class-prefix `col-sm-`
-   */
-  sm: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Medium devices Desktops (≥768px)
-   *
-   * class-prefix `col-md-`
-   */
-  md: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Large devices Desktops (≥992px)
-   *
-   * class-prefix `col-lg-`
-   */
-  lg: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Large devices Desktops (≥1200px)
-   *
-   * class-prefix `col-xl-`
-   */
-  xl: column,
-};
-
-const defaultProps = {
-  componentClass: 'div',
-};
-
-class Col extends React.Component {
-  render() {
-    const { componentClass: Component, className, ...props } = this.props;
-    const [bsProps, elementProps] = splitBsProps(props);
-
-    const classes = [];
-
-    DEVICE_SIZES.forEach((size) => {
-      const propValue = elementProps[size];
-
-      if (propValue == null) return;
-
-      if (size === 'xs') {
-        // col and col-4
-        classes.push(propValue === true ?
-          bsProps.bsClass :
-          prefix(bsProps, `${propValue}`),
-        );
-      } else {
-        // col-md-3
-        classes.push(
-          prefix(bsProps, `${size}-${propValue}`),
-        );
-      }
-
-      delete elementProps[size];
-    });
-
-    if (!classes.length) {
-      classes.push(bsProps.bsClass); // plain 'col'
-    }
-
-    return (
-      <Component
-        {...elementProps}
-        className={classNames(className, classes)}
-      />
-    );
-  }
-}
-
-Col.propTypes = propTypes;
-Col.defaultProps = defaultProps;
-
-export default bsClass('col', Col);
+// The old custom Col hand-rolled Bootstrap-4/5 grid classes on top of
+// react-bootstrap 0.31 internals (`bootstrapUtils`, `StyleConfig`), which no
+// longer exist in react-bootstrap v2. v2's own Col produces the exact same
+// `col`/`col-{size}-{n}` output for the xs/sm/md/lg/xl props we use, so we
+// simply re-export it and keep every importer unchanged.
+export { Col as default } from 'react-bootstrap';

imports/ui/components/DocumentEditor/DocumentEditor.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import validate from '../../../modules/validate';
@@ -57,8 +57,8 @@ class DocumentEditor extends React.Component {
   render() {
     const { doc } = this.props;
     return (<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-      <FormGroup>
-        <ControlLabel>Title</ControlLabel>
+      <Form.Group>
+        <Form.Label>Title</Form.Label>
         <input
           type="text"
           className="form-control"
@@ -67,9 +67,9 @@ class DocumentEditor extends React.Component {
           defaultValue={doc && doc.title}
           placeholder="Oh, The Places You'll Go!"
         />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>Body</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Body</Form.Label>
         <textarea
           className="form-control"
           name="body"
@@ -77,8 +77,8 @@ class DocumentEditor extends React.Component {
           defaultValue={doc && doc.body}
           placeholder="Congratulations! Today is your day. You're off to Great Places! You're off and away!"
         />
-      </FormGroup>
-      <Button type="submit" bsStyle="success">
+      </Form.Group>
+      <Button type="submit" variant="success">
         {doc && doc._id ? 'Save Changes' : 'Add Document'}
       </Button>
     </form>);

imports/ui/components/Feedback/Feedback.js

@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { withTranslation } from 'react-i18next';
-import { FormGroup, Button, FormControl } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { withTracker } from 'meteor/react-meteor-data';
 import { isHome } from '/imports/ui/components/Utils/location';
@@ -82,7 +82,7 @@ class Feedback extends Component {
                   className="form card-body"
                   onSubmit={event => event.preventDefault()}
               >
-                <FormGroup controlId="formEmail">
+                <Form.Group controlId="formEmail">
                   <input
                       id={testId('emailInput')}
                       onChange={this.handleChange}
@@ -95,8 +95,8 @@ class Feedback extends Component {
                       defaultValue={disabled ? this.props.emailAddress : ''}
                       type="email"
                   />
-                </FormGroup>
-                <FormGroup
+                </Form.Group>
+                <Form.Group
                     controlId="formFeedback"
                 >
                   <textarea
@@ -107,9 +107,9 @@ class Feedback extends Component {
                       placeholder={t('Por favor, escribe aquí tu feedback...')}
                       rows="6"
                   />
-                  <FormControl.Feedback />
-                </FormGroup>
-                <Button type="submit" bsStyle="success" className="float-right" id={testId('sendFeedbackBtn')} >
+                  <Form.Control.Feedback />
+                </Form.Group>
+                <Button type="submit" variant="success" className="float-right" id={testId('sendFeedbackBtn')} >
                   {t('Enviar')}
                 </Button>
               </form>

imports/ui/components/Footer/Footer.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { year } from '@cleverbeagle/dates';
 import { Link } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 
@@ -19,10 +19,10 @@ const Footer = (props) => {
   const { t } = props;
   return (
     <div className="Footer">
-      <Grid>
+      <Container>
         <p className="pull-left"><span className="reverse">&copy;</span><span className="d-none d-md-inline"> Copyleft</span> {copyrightYear()} <a href="https://comunes.org/"><span className="d-none d-md-inline">{t('OrgName')}</span><span className="d-inline d-md-none">{t('OrgName')}</span></a></p>
 
-        <ul className="pull-right">
+        <ul className="float-end">
           <li>
             <Link id={testId('about')} to="/about">
               <span className="d-none d-lg-inline">{t('Sobre nosotr@s')}</span>
@@ -44,7 +44,7 @@ const Footer = (props) => {
           <li><span className="d-none d-md-inline"><Link id={testId('license')} to="/license">{t('Licencia')}</Link></span></li>
           <li><span className="d-none d-md-inline"><Link id={testId('credits')} to="/credits">{t('Créditos')}</Link></span></li>
         </ul>
-      </Grid>
+      </Container>
     </div>
   );
 };

imports/ui/components/LocationAutocomplete/LocationAutocomplete.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
-import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 
 
@@ -82,8 +82,8 @@ class LocationAutocomplete extends React.Component {
 
     return (
       <form>
-        <FormGroup>
-          { label.length > 0 && <ControlLabel>{t(label)}</ControlLabel> }
+        <Form.Group>
+          { label.length > 0 && <Form.Label>{t(label)}</Form.Label> }
           <PlacesAutocomplete
               styles={myStyles}
               autocompleteItem={AutocompleteItem}
@@ -114,8 +114,8 @@ class LocationAutocomplete extends React.Component {
                   autoFocus: this.props.focusInput
                 }}
           />
-          { helpText.length > 0 && <HelpBlock>{t(helpText)}</HelpBlock> }
-        </FormGroup>
+          { helpText.length > 0 && <Form.Text>{t(helpText)}</Form.Text> }
+        </Form.Group>
       </form>
     );
   }

imports/ui/components/NavItem/NavItem.js

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { SafeAnchor } from 'react-bootstrap';
-import createChainedFunction from 'react-bootstrap/lib/utils/createChainedFunction';
-
+// Self-contained NavItem. The old one wrapped react-bootstrap 0.31's
+// `SafeAnchor` + `createChainedFunction` (both gone in v2); the markup this
+// navbar needs is just an <li><a> that toggles the collapsed menu on click.
 const propTypes = {
   active: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -12,7 +12,11 @@ const propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
-  eventKey: PropTypes.any
+  eventKey: PropTypes.any,
+  className: PropTypes.string,
+  anchorClassName: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
 };
 
 const defaultProps = {
@@ -21,42 +25,35 @@ const defaultProps = {
 };
 
 class NavItem extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
+  constructor(props) {
+    super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
   handleClick(e) {
-    if (this.props.onSelect) {
+    const { disabled, onClick, onSelect, eventKey } = this.props;
+    if (disabled) {
       e.preventDefault();
-
-      if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, e);
-      }
+      return;
+    }
+    if (onClick) onClick(e);
+    if (onSelect) {
+      e.preventDefault();
+      onSelect(eventKey, e);
     }
   }
 
   render() {
     const {
-      active, disabled, onClick, className, anchorClassName, style, ...props
-    } =
-      this.props;
+      active, disabled, role, href, onClick, onSelect, eventKey,
+      className, anchorClassName, style, children, ...props
+    } = this.props;
 
-    delete props.onSelect;
-    delete props.eventKey;
+    const anchorProps = { ...props };
+    if (href) anchorProps.href = href;
+    anchorProps.role = role || (href === '#' ? 'button' : undefined);
+    if (role === 'tab') anchorProps['aria-selected'] = active;
 
-    // These are injected down by `<Nav>` for building `<SubNav>`s.
-    delete props.activeKey;
-    delete props.activeHref;
-
-    if (!props.role) {
-      if (props.href === '#') {
-        props.role = 'button';
-      }
-    } else if (props.role === 'tab') {
-      props['aria-selected'] = active;
-    }
     return (
       <li
         role="presentation"
@@ -65,12 +62,14 @@ class NavItem extends React.Component {
         className={classNames(className, { active, disabled })}
         style={style}
       >
-        <SafeAnchor
-          {...props}
-          disabled={disabled}
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          {...anchorProps}
           className={anchorClassName}
-          onClick={createChainedFunction(onClick, this.handleClick)}
-        />
+          onClick={this.handleClick}
+        >
+          {children}
+        </a>
       </li>
     );
   }

imports/ui/components/Navigation/Navigation.js

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Trans, withTranslation } from 'react-i18next';
@@ -20,19 +19,12 @@ const Navigation = props => (
   <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
     <div style={{ overflow: 'hidden' } /* for ribbon */} className="container">
       {/* <BetaRibbon /> */}
-      {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
-      {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
-      <Navbar.Header>
-        <Navbar.Brand>
-          <Link to="/" className={window.location.pathname === '/' ? 'hide-brand' : ''} >
-            {props.t('AppNameFull')}
-          </Link>
-        </Navbar.Brand>
-        {/* <Navbar.Toggle/> */}
-        <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span className="navbar-toggler-icon" />
-        </button>
-      </Navbar.Header>
+      <Link to="/" className={`navbar-brand ${window.location.pathname === '/' ? 'hide-brand' : ''}`} >
+        {props.t('AppNameFull')}
+      </Link>
+      <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon" />
+      </button>
       <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span className="navbar-toggler-icon" />
       </button>

imports/ui/components/Prompt/Prompt.js

@@ -40,7 +40,7 @@ class Prompt extends Component {
             <p>{confirmation}</p>
           </Modal.Body>
           <Modal.Footer>
-            <Button className="button-l" bsStyle="primary" onClick={proceed}>{okBtn}</Button>
+            <Button className="button-l" variant="primary" onClick={proceed}>{okBtn}</Button>
             <Button onClick={cancel}>{cancelBtn}</Button>
           </Modal.Footer>
         </Modal>

imports/ui/components/ReSendEmail/ReSendEmail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Alert, Button } from 'react-bootstrap';
+import { Alert, Button } from 'react-bootstrap';
 import { Trans, withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
@@ -16,7 +16,7 @@ const handleResendVerificationEmail = (emailAddress, t) => {
 
 const ReSendEmail = props => (
   <div>
-  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
+  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button variant="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
   </div>
 );
 

imports/ui/components/SelectionMap/SelectionMap.js

@@ -241,7 +241,7 @@ class SelectionMap extends Component {
                   <ButtonGroup>
                     { this.props.sndBtn && this.props.onSndBtn &&
                       <Button
-                          bsStyle="warning"
+                          variant="warning"
                           title={this.props.sndBtnTitle}
                           onClick={event => this.onSndBtn(event)}
                       >
@@ -249,7 +249,7 @@ class SelectionMap extends Component {
                       </Button>
                     }
                       <Button
-                          bsStyle="success"
+                          variant="success"
                           disabled={this.props.disableFstBtn}
                           onClick={event => this.onFstBtn(event)}
                       >

imports/ui/layouts/App/App.js

@@ -4,7 +4,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Router, Switch, Route } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { I18nextProvider } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 import { Meteor } from 'meteor/meteor';
@@ -115,7 +115,7 @@ const App = props => (
                 <Navigation {...props} />
                 <ReSendEmail {...props} />
 
-                <Grid>
+                <Container>
                   <Switch>
                     <Route exact name="index" path="/" component={Index} />
                     <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
@@ -147,7 +147,7 @@ const App = props => (
 
                     <Route component={NotFound} />
                   </Switch>
-                </Grid>
+                </Container>
                 <Footer />
                 <Reconnect {...props} />
                 <Feedback {...props} />

imports/ui/pages/Documents/Documents.js

@@ -27,7 +27,7 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
   <div className="Documents">
     <div className="page-header clearfix">
       <h4 className="pull-left">Documents</h4>
-      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add Document</Link>
+      <Link className="btn btn-success float-end" to={`${match.url}/new`}>Add Document</Link>
     </div>
     {documents.length ? <Table responsive>
       <thead>
@@ -47,14 +47,14 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
             <td>{monthDayYearAtTime(createdAt)}</td>
             <td>
               <Button
-                bsStyle="primary"
+                variant="primary"
                 onClick={() => history.push(`${match.url}/${_id}`)}
                 block
               >View</Button>
             </td>
             <td>
               <Button
-                bsStyle="danger"
+                variant="danger"
                 onClick={() => handleRemove(_id)}
                 block
               >Delete</Button>
@@ -62,7 +62,7 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
           </tr>
         ))}
       </tbody>
-    </Table> : <Alert bsStyle="warning">No documents yet!</Alert>}
+    </Table> : <Alert variant="warning">No documents yet!</Alert>}
   </div>
 ) : <Loading />);
 

imports/ui/pages/Fires/Fires.js

@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import { withTranslation, Trans } from 'react-i18next';
-import { Row, Col, Alert, FormGroup } from 'react-bootstrap';
+import { Row, Col, Alert, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
@@ -191,14 +191,14 @@ class Fire extends React.Component {
                 { (this.props.falsePositives.length > 0 || this.props.industries.length > 0) &&
                   <Row>
                     <Col>
-                      <Alert bsStyle="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
+                      <Alert variant="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
                     </Col>
                   </Row> }
                 <h5>{t('¿No es un fuego forestal?')}</h5>
                 <div>
                   <Trans>Indícanos de que tipo de fuego se trata y ayúdanos así a mejorar nuestras notificaciones:</Trans>
                 </div>
-                <FormGroup>
+                <Form.Group>
                   <div className="btn-group">
                     <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       {t('Elige un tipo')}
@@ -217,7 +217,7 @@ class Fire extends React.Component {
                       }
                     </div>
                   </div>
-                </FormGroup>
+                </Form.Group>
               </Fragment> }
 
               <h4>{t('Comentarios')}</h4>

imports/ui/pages/FiresMap/FiresMap.js

@@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-indent */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Row, Col, Checkbox } from 'react-bootstrap';
+import { ButtonGroup, Row, Col, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
@@ -224,13 +224,21 @@ class FiresMap extends React.Component {
                      helpText=""
                      onChange={value => this.onAutocompleteChange(value)}
                  />
-                 <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
-                   <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
-                 </Checkbox>
+                 <Form.Check
+                     type="checkbox"
+                     id="showSubsUnion"
+                     defaultChecked={this.state.showSubsUnion}
+                     onClick={e => this.setShowSubsUnion(e.target.checked)}
+                     label={<span><Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)</span>}
+                 />
                  {(this.state.viewport.zoom >= MAXZOOM) &&
-                  <Checkbox inline={false} defaultChecked={this.state.useMarkers} onClick={e => this.useMarkers(e.target.checked)}>
-                    <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
-                  </Checkbox>}
+                  <Form.Check
+                      type="checkbox"
+                      id="useMarkers"
+                      defaultChecked={this.state.useMarkers}
+                      onClick={e => this.useMarkers(e.target.checked)}
+                      label={<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>}
+                  />}
                </Fragment>}
             </Col>
             <Col xs={12} sm={6} md={6} lg={6} >

imports/ui/pages/Login/Login.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
@@ -87,28 +87,28 @@ class Login extends React.Component {
               </Col>
             </Row>
             <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-              <FormGroup>
-                <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+              <Form.Group>
+                <Form.Label>{this.t('Correo electrónico')}</Form.Label>
                 <input
                   type="email"
                   name="emailAddress"
                   ref={emailAddress => (this.emailAddress = emailAddress)}
                   className="form-control"
                 />
-              </FormGroup>
-              <FormGroup>
-                <ControlLabel className="clearfix">
+              </Form.Group>
+              <Form.Group>
+                <Form.Label className="clearfix">
                   <span className="pull-left">{this.t('Contraseña')}</span>
-                  <Link className="pull-right" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
-                </ControlLabel>
+                  <Link className="float-end" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
+                </Form.Label>
                 <input
                   type="password"
                   name="password"
                   ref={password => (this.password = password)}
                   className="form-control"
                 />
-              </FormGroup>
-              <Button id={testId('loginSubmit')} type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
+              </Form.Group>
+              <Button id={testId('loginSubmit')} type="submit" variant="success">{this.t('Iniciar sesión')}</Button>
               <AccountPageFooter>
                 <p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
               </AccountPageFooter>

imports/ui/pages/NotFound/NotFound.js

@@ -8,7 +8,7 @@ const NotFound = () => (
     <Helmet>
       <title>This page doesn't exist"</title>
     </Helmet>
-    <Alert bsStyle="danger">
+    <Alert variant="danger">
       <p>
         <Trans i18nKey="not-found">Upppps: Esta página no existe</Trans>
       </p>

imports/ui/pages/Profile/Profile.js

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import _ from 'lodash';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
@@ -164,8 +164,8 @@ class Profile extends React.Component {
     return !loading ? (<div>
       <Row>
         <Col xs={6}>
-          <FormGroup>
-            <ControlLabel>{this.t('Nombre')}</ControlLabel>
+          <Form.Group>
+            <Form.Label>{this.t('Nombre')}</Form.Label>
             <input
               type="text"
               name="firstName"
@@ -173,11 +173,11 @@ class Profile extends React.Component {
               ref={firstName => (this.firstName = firstName)}
               className="form-control"
             />
-          </FormGroup>
+          </Form.Group>
         </Col>
         <Col xs={6}>
-          <FormGroup>
-            <ControlLabel>{this.t('Apellidos')}</ControlLabel>
+          <Form.Group>
+            <Form.Label>{this.t('Apellidos')}</Form.Label>
             <input
               type="text"
               name="lastName"
@@ -185,11 +185,11 @@ class Profile extends React.Component {
               ref={lastName => (this.lastName = lastName)}
               className="form-control"
             />
-          </FormGroup>
+          </Form.Group>
         </Col>
       </Row>
-      <FormGroup>
-        <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+      <Form.Group>
+        <Form.Label>{this.t('Correo electrónico')}</Form.Label>
         <input
           type="email"
           name="emailAddress"
@@ -197,9 +197,9 @@ class Profile extends React.Component {
           ref={emailAddress => (this.emailAddress = emailAddress)}
           className="form-control"
         />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Idioma')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Idioma')}</Form.Label>
         <div className="btn-group">
           <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {langName[i18n.language]}
@@ -219,18 +219,18 @@ class Profile extends React.Component {
           </div>
         </div>
         <InputHint><i className="fa fa-language"></i> <a href="https://translate.comunes.org/projects/todos-contra-el-fuego/" rel="noopener noreferrer" target="_blank">{this.t('Puedes participar en las traducciones')}</a></InputHint>
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Contraseña actual')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Contraseña actual')}</Form.Label>
         <input
           type="password"
           name="currentPassword"
           ref={currentPassword => (this.currentPassword = currentPassword)}
           className="form-control"
         />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Nueva contraseña')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Nueva contraseña')}</Form.Label>
         <input
           type="password"
           name="newPassword"
@@ -238,8 +238,8 @@ class Profile extends React.Component {
           className="form-control"
         />
         <InputHint>{this.t('Usa al menos seis caracteres.')}</InputHint>
-      </FormGroup>
-      <Button id={testId('profileSubmit')} type="submit" bsStyle="success">{this.t('Guardar perfíl')}</Button>
+      </Form.Group>
+      <Button id={testId('profileSubmit')} type="submit" variant="success">{this.t('Guardar perfíl')}</Button>
     </div>) : <div />;
   }
 

imports/ui/pages/RecoverPassword/RecoverPassword.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Alert, Form, Button } from 'react-bootstrap';
 import Col from '../../components/Col/Col';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -61,20 +61,20 @@ class RecoverPassword extends React.Component {
         </Helmet>
         <Col xs={12} sm={6} md={5} lg={4}>
           <h4 className="page-header">{this.t('Recupera tu contraseña')}</h4>
-          <Alert bsStyle="info">
+          <Alert variant="info">
             {this.t('Introduce tu correo abajo para recibir un enlace para resetear tu contraseña.')}
           </Alert>
           <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{this.t('Correo electrónico')}</Form.Label>
               <input
                 type="email"
                 name="emailAddress"
                 ref={emailAddress => (this.emailAddress = emailAddress)}
                 className="form-control"
               />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t('Recupera tu contraseña')}</Button>
+            </Form.Group>
+            <Button type="submit" variant="success">{this.t('Recupera tu contraseña')}</Button>
             <AccountPageFooter>
               <p>{this.t('¿Recuerdas tu contraseña?')} <Link to="/login">{this.t('Iniciar sesión')}</Link>.</p>
             </AccountPageFooter>

imports/ui/pages/ResetPassword/ResetPassword.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Alert, Form, Button } from 'react-bootstrap';
 import Col from '../../components/Col/Col';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
@@ -67,12 +67,12 @@ class ResetPassword extends React.Component {
         </Helmet>
         <Col xs={12} sm={6} md={4}>
           <h4 className="page-header">{this.t("Resetea tu contraseña")}</h4>
-          <Alert bsStyle="info">
+          <Alert variant="info">
             { this.t("Para resetear tu contraseña, introduce una nueva debajo. Iniciarás la sesión con la nueva contraseña.") }
           </Alert>
           <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t("Nueva contraseña")}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{this.t("Nueva contraseña")}</Form.Label>
               <input
                 type="password"
                 className="form-control"
@@ -80,9 +80,9 @@ class ResetPassword extends React.Component {
                 name="newPassword"
                 placeholder={this.t("Nueva contraseña")}
               />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>{this.t("Repite la nueva contraseña")}</ControlLabel>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>{this.t("Repite la nueva contraseña")}</Form.Label>
               <input
                 type="password"
                 className="form-control"
@@ -90,8 +90,8 @@ class ResetPassword extends React.Component {
                 name="repeatNewPassword"
                 placeholder={this.t("Repite la nueva contraseña")}
               />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t("Resetea la contraseña y entra")}</Button>
+            </Form.Group>
+            <Button type="submit" variant="success">{this.t("Resetea la contraseña y entra")}</Button>
           </form>
         </Col>
       </Row>

imports/ui/pages/Signup/Signup.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-absolute-path */
 
 import React from 'react';
-import { Row, FormGroup, ControlLabel, Button, Checkbox } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
@@ -152,39 +152,39 @@ class Signup extends React.Component {
           <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
             <Row>
               <Col xs={6}>
-                <FormGroup>
-                  <ControlLabel>{t('Nombre')}</ControlLabel>
+                <Form.Group>
+                  <Form.Label>{t('Nombre')}</Form.Label>
                   <input
                     type="text"
                     name="firstName"
                     ref={firstName => (this.firstName = firstName)}
                     className="form-control"
                   />
-                </FormGroup>
+                </Form.Group>
               </Col>
               <Col xs={6}>
-                <FormGroup>
-                  <ControlLabel>{t('Apellidos')}</ControlLabel>
+                <Form.Group>
+                  <Form.Label>{t('Apellidos')}</Form.Label>
                   <input
                     type="text"
                     name="lastName"
                     ref={lastName => (this.lastName = lastName)}
                     className="form-control"
                   />
-                </FormGroup>
+                </Form.Group>
               </Col>
             </Row>
-            <FormGroup>
-              <ControlLabel>{t('Correo electrónico')}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{t('Correo electrónico')}</Form.Label>
               <input
                 type="email"
                 name="emailAddress"
                 ref={emailAddress => (this.emailAddress = emailAddress)}
                 className="form-control"
               />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>{t('Contraseña')}</ControlLabel>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>{t('Contraseña')}</Form.Label>
               <input
                 type="password"
                 name="password"
@@ -192,12 +192,17 @@ class Signup extends React.Component {
                 className="form-control"
               />
               <InputHint>{t('Usa al menos seis caracteres.')}</InputHint>
-            </FormGroup>
-            <Checkbox inline={false} name="tos" defaultChecked={this.state.termsAccept} onClick={e => this.setTermsAccept(e.target.checked)}>
-              <Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>
-            </Checkbox>
+            </Form.Group>
+            <Form.Check
+                type="checkbox"
+                id="tos"
+                name="tos"
+                defaultChecked={this.state.termsAccept}
+                onClick={e => this.setTermsAccept(e.target.checked)}
+                label={<Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>}
+            />
 
-            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} bsStyle="success">{t('Registrarse')}</Button>
+            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} variant="success">{t('Registrarse')}</Button>
             <AccountPageFooter>
               <p>{t('¿Ya tienes un cuenta?')} <Link to={{ pathname: '/login', state: this.state }} >{t('Iniciar sesión')}</Link>.</p>
             </AccountPageFooter>

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -91,11 +91,11 @@ class Subscriptions extends Component {
         </Helmet>
         <h4 className="page-header"><Trans>Suscripciones a alertas de fuegos en zonas de mi interés</Trans></h4>
       { subscriptions.length === 0 ?
-        <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
-        <Alert bsStyle="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
+        <Alert variant="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
+        <Alert variant="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
       }
         { maxDistance && maxDistance.distance > 20 &&
-          <Alert bsStyle="warning"><Trans>Estás subscrito a una zona muy grande</Trans></Alert>
+          <Alert variant="warning"><Trans>Estás subscrito a una zona muy grande</Trans></Alert>
         }
         <br />
         <SelectionMap

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -135,7 +135,7 @@ class SubscriptionsMap extends React.Component {
              <ButtonGroup>
                <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
                <Button
-                   bsStyle="success"
+                   variant="success"
                    onClick={() => { this.gotoParticipe(); }}
                >
                  {this.props.t('Participa')}

imports/ui/pages/VerifyEmail/VerifyEmail.js

@@ -36,7 +36,7 @@ class VerifyEmail extends React.Component {
       <Helmet>
         <title>{this.t('AppName')}: {this.t('Verifica tu dirección de correo')}</title>
       </Helmet>
-      <Alert bsStyle={!this.state.error ? 'info' : 'danger'}>
+      <Alert variant={!this.state.error ? 'info' : 'danger'}>
         {!this.state.error ? this.t('Verificando...') : this.state.error}
       </Alert>
     </div>);

imports/ui/pages/ViewDocument/ViewDocument.js

@@ -25,8 +25,8 @@ const renderDocument = (doc, match, history) => (doc ? (
   <div className="ViewDocument">
     <div className="page-header clearfix">
       <h4 className="pull-left">{ doc && doc.title }</h4>
-      <ButtonToolbar className="pull-right">
-        <ButtonGroup bsSize="small">
+      <ButtonToolbar className="float-end">
+        <ButtonGroup size="sm">
           <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
           <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
             Delete

imports/ui/pages/ViewSubscription/ViewSubscription.js

@@ -25,8 +25,8 @@ const renderSubscription = (doc, match, history) => (doc ? (
   <div className="ViewSubscription">
     <div className="page-header clearfix">
       <h4 className="pull-left">{ doc && doc.title }</h4>
-      <ButtonToolbar className="pull-right">
-        <ButtonGroup bsSize="small">
+      <ButtonToolbar className="float-end">
+        <ButtonGroup size="sm">
           <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
           <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
             Delete

imports/ui/stylesheets/forms.scss

@@ -1,12 +1,22 @@
 @use './mixins' as *;
 @use './colors' as *;
 
+// react-bootstrap v2 emits Bootstrap 5 form markup (`.form-label`) while we
+// still ship the Bootstrap 4 stylesheet (alexwine:bootstrap-4), which has no
+// `.form-label`. Shim it until the Bootstrap 4 -> 5 CSS jump lands (tracked as
+// debt in UPGRADE.md). v2's Form.Group is a plain div, so restore the old
+// per-field bottom margin the removed `.form-group` used to give.
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
 form {
   label,
   .control-label {
     display: block;
   }
-  
+
   label.error {
     display: block;
     margin-top: 8px;