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/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