Fixes #1510: upgrade react-bootstrap

package.json

@@ -108,7 +108,7 @@
     "qrcode.react": "0.6.1",
     "react": "15.4.2",
     "react-addons-shallow-compare": "15.4.2",
-    "react-bootstrap": "0.28.1",
+    "react-bootstrap": "0.30.7",
     "react-codemirror": "0.2.6",
     "react-color": "2.4.0",
     "react-confirm-button": "0.0.2",

web/client/components/I18N/LangSelector.jsx

@@ -7,9 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 var React = require('react');
-var ReactDOM = require('react-dom');
-var BootstrapReact = require('react-bootstrap');
-var Input = BootstrapReact.Input;
+var {FormControl} = require('react-bootstrap');
 var LocaleUtils = require('../../utils/LocaleUtils');
 
 var LangSelector = React.createClass({
@@ -39,15 +37,13 @@ var LangSelector = React.createClass({
             }
         }
         return (
-                <Input id={this.props.id} value={this.props.currentLocale} type="select" bsSize="small" onChange={this.launchNewLangAction}>
+                <FormControl id={this.props.id} value={this.props.currentLocale} componentClass="select" bsSize="small" onChange={this.launchNewLangAction}>
                     {list}
-                </Input>
+                </FormControl>
         );
     },
-    launchNewLangAction() {
-        var element = ReactDOM.findDOMNode(this);
-        var selectNode = element.getElementsByTagName('select').item(0);
-        this.props.onLanguageChange(selectNode.value);
+    launchNewLangAction(e) {
+        this.props.onLanguageChange(e.target.value);
     }
 });
 

web/client/components/I18N/__tests__/LangSelector-test.jsx

@@ -34,9 +34,7 @@ describe('LangSelector', () => {
         const cmpDom = ReactDOM.findDOMNode(cmp);
         expect(cmpDom).toExist();
 
-
-        const select = cmpDom.getElementsByTagName("select").item(0);
-        const opts = select.childNodes;
+        const opts = cmpDom.childNodes;
         const langs = {'Italiano': 'it-IT', 'English': 'en-US', 'Français': 'fr-FR', 'Deutsch': 'de-DE'};
 
         for (let i = 0; i < opts.length; i++) {
@@ -51,10 +49,9 @@ describe('LangSelector', () => {
         let newLang;
         const cmp = ReactDOM.render(<LangSelector onLanguageChange={ (lang) => {newLang = lang; }}/>, document.getElementById("container"));
         const cmpDom = ReactDOM.findDOMNode(cmp);
-        const select = cmpDom.getElementsByTagName("select").item(0);
 
-        select.value = "it-IT";
-        TestUtils.Simulate.change(select, {target: {value: 'it-IT'}});
+        cmpDom.value = "it-IT";
+        TestUtils.Simulate.change(cmpDom, {target: {value: 'it-IT'}});
         // select.children[1].click();
 
         expect(newLang).toBe('it-IT');

web/client/components/TOC/fragments/settings/General.jsx

@@ -7,7 +7,7 @@
  */
 
 var React = require('react');
-const {Input} = require('react-bootstrap');
+const {FormControl, FormGroup, ControlLabel} = require('react-bootstrap');
 const Message = require('../../../I18N/Message');
 const {SimpleSelect} = require('react-selectize');
 const {isObject} = require('lodash');
@@ -43,19 +43,25 @@ const General = React.createClass({
     },
     render() {
         return (<form ref="settings">
-                <Input label={<Message msgId="layerProperties.title" />}
+                <FormGroup>
+                    <ControlLabel><Message msgId="layerProperties.title" /></ControlLabel>
+                    <FormControl
                     value={this.props.element.title}
                     key="title"
                     type="text"
                     onChange={this.updateEntry.bind(null, "title")}
                 />
-            <Input label={<Message msgId="layerProperties.name" />}
-                    value={this.props.element.name}
-                    key="name"
-                    type="text"
-                    disabled
-                    onChange={this.updateEntry.bind(null, "name")}
-                />
+            </FormGroup>
+            <FormGroup>
+                <ControlLabel><Message msgId="layerProperties.name" /></ControlLabel>
+                <FormControl
+                        value={this.props.element.name}
+                        key="name"
+                        type="text"
+                        disabled
+                        onChange={this.updateEntry.bind(null, "name")}
+                    />
+            </FormGroup>
             <label key="group-label" className="control-label"><Message msgId="layerProperties.group" /></label>
             <SimpleSelect
                     key="group-dropdown"

web/client/components/catalog/Catalog.jsx

@@ -10,7 +10,7 @@ const React = require('react');
 const Message = require('../I18N/Message');
 const LocaleUtils = require('../../utils/LocaleUtils');
 
-const {Input, Alert, Pagination, Button, Panel} = require('react-bootstrap');
+const {FormControl, FormGroup, Alert, Pagination, Button, Panel} = require('react-bootstrap');
 const Spinner = require('react-spinkit');
 
 const RecordGrid = require('./RecordGrid');
@@ -154,12 +154,12 @@ const Catalog = React.createClass({
     },
     renderURLInput() {
         if (!this.getCatalogUrl() || this.props.chooseCatalogUrl) {
-            return (<Input
+            return (<FormGroup><FormControl
                 ref="catalogURL"
                 type="text"
                 placeholder={LocaleUtils.getMessageById(this.context.messages, "catalog.catalogUrlPlaceholder")}
                 onChange={this.setCatalogUrl}
-                onKeyDown={this.onKeyDown}/>);
+                onKeyDown={this.onKeyDown}/></FormGroup>);
         }
     },
     renderButtons() {
@@ -180,22 +180,22 @@ const Catalog = React.createClass({
     },
     renderFormatChoice() {
         if (this.props.formats.length > 1) {
-            return <Input onChange={(e) => this.props.onChangeFormat(e.target.value)} value={this.props.format} type="select">{this.renderFormats()}</Input>;
+            return <FormGroup><FormControl onChange={(e) => this.props.onChangeFormat(e.target.value)} value={this.props.format} componentClass="select">{this.renderFormats()}</FormControl></FormGroup>;
         }
         return null;
     },
     renderFormats() {
         return this.props.formats.map((format) => <option value={format.name}>{format.label}</option>);
     },
     render() {
-        const textSearch = (<Input
+        const textSearch = (<FormGroup><FormControl
             ref="searchText"
             type="text"
             style={{
                 textOverflow: "ellipsis"
             }}
             placeholder={LocaleUtils.getMessageById(this.context.messages, "catalog.textSearchPlaceholder")}
-            onKeyDown={this.onKeyDown}/>);
+            onKeyDown={this.onKeyDown}/></FormGroup>);
         return (
              <div>
                  <div>

web/client/components/catalog/SharingLink.jsx

@@ -7,7 +7,7 @@
  */
 const React = require('react');
 const Message = require('../I18N/Message');
-const {Input, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');
+const {FormControl, FormGroup, Button, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap');
 const CopyToClipboard = require('react-copy-to-clipboard');
 const SecurityUtils = require('../../utils/SecurityUtils');
 
@@ -53,8 +53,11 @@ const SharingLink = React.createClass({
         );
         return (
             <div className="link-sharing">
-                <Input bsSize={this.props.bsSize} className="link-input"
-                    type="text" value={url} onChange={() => {}} buttonAfter={copyButton}/>
+                <FormGroup bsSize={this.props.bsSize} >
+                  <FormControl className="link-input"
+                    type="text" value={url} onChange={() => {}}/>
+                  {copyButton}
+                </FormGroup>
             </div>
         );
     }

web/client/components/data/query/GeometryDetails.jsx

@@ -7,7 +7,7 @@
  */
 const React = require('react');
 
-const {Row, Col, Panel, Input, Button, Glyphicon} = require('react-bootstrap');
+const {Row, Col, Panel, FormControl, Button, Glyphicon} = require('react-bootstrap');
 
 const I18N = require('../../I18N/I18N');
 
@@ -161,7 +161,7 @@ const GeometryDetails = React.createClass({
         return (
             <div>
                 <div className="detail-field-title">{name}</div>
-                <Input
+                <FormControl
                     style={{minWidth: '105px', margin: 'auto'}}
                     type="number"
                     id={"queryform_bbox_" + name}
@@ -172,7 +172,7 @@ const GeometryDetails = React.createClass({
     },
     renderCircleField(value, name) {
         return (
-            <Input
+            <FormControl
                 type="number"
                 id={"queryform_circle_" + name}
                 defaultValue={value}

web/client/components/data/query/SpatialFilter.jsx

@@ -7,7 +7,7 @@
  */
 const React = require('react');
 
-const {Row, Col, Panel, Button, Glyphicon, Input} = require('react-bootstrap');
+const {Row, Col, Panel, Button, Glyphicon, FormControl} = require('react-bootstrap');
 const ComboField = require('./ComboField');
 const GeometryDetails = require('./GeometryDetails');
 
@@ -257,7 +257,7 @@ const SpatialFilter = React.createClass({
                     <I18N.Message msgId={"queryform.spatialfilter.dwithin_label"}/>{':'}
                 </Col>
                 <Col xs={2}>
-                        <Input
+                        <FormControl
                             type="number"
                             min="0"
                             defaultValue="0"

web/client/components/data/query/TextField.jsx

@@ -7,7 +7,7 @@
  */
 
 const React = require('react');
-const {Input} = require('react-bootstrap');
+const {FormControl} = require('react-bootstrap');
 const LocaleUtils = require('../../../utils/LocaleUtils');
 
 const TextField = React.createClass({
@@ -59,7 +59,7 @@ const TextField = React.createClass({
         return (
             <div className="textField">
                 {label}
-                <Input
+                <FormControl
                     disabled={this.props.operator === "isNull"}
                     placeholder={placeholder}
                     onChange={this.changeText}

web/client/components/help/__tests__/HelpTextPanel-test.jsx

@@ -36,11 +36,6 @@ describe('Test for HelpTextPanel', () => {
         const panelHeader = helpPanelDom.getElementsByClassName('panel-heading').item(0);
         expect(panelHeader).toExist();
         expect(panelHeader.innerHTML.indexOf("HELP") !== -1).toBe(true);
-
-        // text in body
-        const panelBody = helpPanelDom.getElementsByClassName('panel-body').item(0);
-        expect(panelBody).toExist();
-        expect(panelBody.innerHTML).toBe("");
     });
 
     it('creates the component with custom props', () => {

web/client/components/manager/importer/Workspace.jsx

@@ -7,7 +7,7 @@
  */
 const React = require('react');
 const Select = require('react-select');
-const {Input, Button, Alert} = require('react-bootstrap');
+const {FormControl, Button, Alert} = require('react-bootstrap');
 const Message = require('../../I18N/Message');
 const LocaleUtils = require('../../../utils/LocaleUtils');
 
@@ -74,7 +74,7 @@ module.exports = React.createClass({
                 />)}
                 <div className="form-inline" style={{marginTop: "10px", display: this.props.enabled ? "none" : "block"}}>
                     <strong><Message msgId="importer.workspace.createWS" /></strong>
-                    <Input
+                    <FormControl
                         onChange={this.validate}
                         ref="workspaceNewName"
                         placeholder={LocaleUtils.getMessageById(this.context.messages, "importer.workspace.new")}

web/client/components/manager/importer/transforms/GdalAddoTransform.jsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 const React = require('react');
-const {Input} = require('react-bootstrap');
+const {FormControl} = require('react-bootstrap');
 const assign = require('object-assign');
 const {findIndex} = require('lodash');
 
@@ -38,8 +38,8 @@ const GdalTranslateTransform = React.createClass({
     },
     render() {
         return (<form>
-            <Message msgId="importer.transform.options" /><Input name="options" onChange={this.onChange} type="text" value={(this.props.transform.options || []).join(" ")} />
-            <Message msgId="importer.transform.overviewlevels" /><Input name="levels" onChange={this.onChange} type="text" value={(this.props.transform.levels || []).join(" ")} />
+            <Message msgId="importer.transform.options" /><FormControl name="options" onChange={this.onChange} type="text" value={(this.props.transform.options || []).join(" ")} />
+            <Message msgId="importer.transform.overviewlevels" /><FormControl name="levels" onChange={this.onChange} type="text" value={(this.props.transform.levels || []).join(" ")} />
             {this.renderInvalid()}
         </form>);
     },

web/client/components/manager/importer/transforms/GdalTranslateTransform.jsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 const React = require('react');
-const {Input, Alert} = require('react-bootstrap');
+const {FormControl, Alert} = require('react-bootstrap');
 const assign = require('object-assign');
 
 const {Message} = require('../../../I18N/I18N');
@@ -38,7 +38,7 @@ const GdalTranslateTransform = React.createClass({
     },
     render() {
         return (<div>
-            <Message msgId="importer.transform.options" key="opt-label"/><Input key="options" name="options" onChange={this.onChange} type="text" value={(this.props.transform.options || []).join(" ")} />
+            <Message msgId="importer.transform.options" key="opt-label"/><FormControl key="options" name="options" onChange={this.onChange} type="text" value={(this.props.transform.options || []).join(" ")} />
             {this.renderInvalid()}
         </div>);
     },

web/client/components/manager/users/GroupDialog.jsx

@@ -15,7 +15,7 @@
 
 const React = require('react');
 const UsersTable = require('./UsersTable');
-const {Alert, Tabs, Tab, Button, Glyphicon, Input} = require('react-bootstrap');
+const {Alert, Tabs, Tab, Button, Glyphicon, FormControl, FormGroup, ControlLabel} = require('react-bootstrap');
 
 const Dialog = require('../../../components/misc/Dialog');
 const assign = require('object-assign');
@@ -78,26 +78,30 @@ const GroupDialog = React.createClass({
   },
   renderGeneral() {
       return (<div style={{clear: "both"}}>
-      <Input ref="groupName"
-          key="groupName"
-          type="text"
-          name="groupName"
-          readOnly={this.props.group && this.props.group.id}
-          style={this.props.inputStyle}
-          label={<Message msgId="usergroups.groupName"/> }
-          onChange={this.handleChange}
-          maxLength={this.props.nameLimit}
-          value={this.props.group && this.props.group.groupName}/>
-      <Input type="textarea"
-          ref="description"
-          key="description"
-          name="description"
-          maxLength={this.props.descLimit}
-          readOnly={this.props.group && this.props.group.id}
-          style={this.props.inputStyle}
-          label={<Message msgId="usergroups.groupDescription"/>}
-          onChange={this.handleChange}
-          value={this.props.group && this.props.group.description || ""}/>
+      <FormGroup>
+          <ControlLabel><Message msgId="usergroups.groupName"/></ControlLabel>
+          <FormControl ref="groupName"
+              key="groupName"
+              type="text"
+              name="groupName"
+              readOnly={this.props.group && this.props.group.id}
+              style={this.props.inputStyle}
+              onChange={this.handleChange}
+              maxLength={this.props.nameLimit}
+              value={this.props.group && this.props.group.groupName}/>
+      </FormGroup>
+      <FormGroup>
+          <ControlLabel><Message msgId="usergroups.groupDescription"/></ControlLabel>
+          <FormControl componentClass="textarea"
+              ref="description"
+              key="description"
+              name="description"
+              maxLength={this.props.descLimit}
+              readOnly={this.props.group && this.props.group.id}
+              style={this.props.inputStyle}
+              onChange={this.handleChange}
+              value={this.props.group && this.props.group.description || ""}/>
+      </FormGroup>
       </div>);
   },