diff --git a/package.json b/package.json index c328d42ea0..de200b1726 100644 --- a/package.json +++ b/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", diff --git a/web/client/components/I18N/LangSelector.jsx b/web/client/components/I18N/LangSelector.jsx index 658f19e16f..3880a83473 100644 --- a/web/client/components/I18N/LangSelector.jsx +++ b/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 ( - + {list} - + ); }, - 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); } }); diff --git a/web/client/components/I18N/__tests__/LangSelector-test.jsx b/web/client/components/I18N/__tests__/LangSelector-test.jsx index a438e704f4..840639ca2f 100644 --- a/web/client/components/I18N/__tests__/LangSelector-test.jsx +++ b/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( {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'); diff --git a/web/client/components/TOC/fragments/settings/General.jsx b/web/client/components/TOC/fragments/settings/General.jsx index 94e9caf52c..dc5926ae8b 100644 --- a/web/client/components/TOC/fragments/settings/General.jsx +++ b/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 (
- } + + + - } - value={this.props.element.name} - key="name" - type="text" - disabled - onChange={this.updateEntry.bind(null, "name")} - /> + + + + + ); + onKeyDown={this.onKeyDown}/>); } }, renderButtons() { @@ -180,7 +180,7 @@ const Catalog = React.createClass({ }, renderFormatChoice() { if (this.props.formats.length > 1) { - return this.props.onChangeFormat(e.target.value)} value={this.props.format} type="select">{this.renderFormats()}; + return this.props.onChangeFormat(e.target.value)} value={this.props.format} componentClass="select">{this.renderFormats()}; } return null; }, @@ -188,14 +188,14 @@ const Catalog = React.createClass({ return this.props.formats.map((format) => ); }, render() { - const textSearch = (); + onKeyDown={this.onKeyDown}/>); return (
diff --git a/web/client/components/catalog/SharingLink.jsx b/web/client/components/catalog/SharingLink.jsx index 996a885aab..0e4c92ec55 100644 --- a/web/client/components/catalog/SharingLink.jsx +++ b/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 (
- {}} buttonAfter={copyButton}/> + + {}}/> + {copyButton} +
); } diff --git a/web/client/components/data/query/GeometryDetails.jsx b/web/client/components/data/query/GeometryDetails.jsx index 8c3e15880f..d86c354e08 100644 --- a/web/client/components/data/query/GeometryDetails.jsx +++ b/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 (
{name}
- {':'} - {label} - { 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', () => { diff --git a/web/client/components/manager/importer/Workspace.jsx b/web/client/components/manager/importer/Workspace.jsx index 1feac47902..815f4786b4 100644 --- a/web/client/components/manager/importer/Workspace.jsx +++ b/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({ />)}
- - - + + {this.renderInvalid()} ); }, diff --git a/web/client/components/manager/importer/transforms/GdalTranslateTransform.jsx b/web/client/components/manager/importer/transforms/GdalTranslateTransform.jsx index fe0bd56765..877eabbdc8 100644 --- a/web/client/components/manager/importer/transforms/GdalTranslateTransform.jsx +++ b/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 (
- + {this.renderInvalid()}
); }, diff --git a/web/client/components/manager/users/GroupDialog.jsx b/web/client/components/manager/users/GroupDialog.jsx index f52a207b0b..444acb4481 100644 --- a/web/client/components/manager/users/GroupDialog.jsx +++ b/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 (
- } - onChange={this.handleChange} - maxLength={this.props.nameLimit} - value={this.props.group && this.props.group.groupName}/> - } - onChange={this.handleChange} - value={this.props.group && this.props.group.description || ""}/> + + + + + + + +
); }, diff --git a/web/client/components/manager/users/UserDialog.jsx b/web/client/components/manager/users/UserDialog.jsx index 0f111425e7..4950820e5c 100644 --- a/web/client/components/manager/users/UserDialog.jsx +++ b/web/client/components/manager/users/UserDialog.jsx @@ -15,7 +15,7 @@ const React = require('react'); -const {Alert, Tabs, Tab, Button, Glyphicon, Input} = require('react-bootstrap'); +const {Alert, Tabs, Tab, Button, Glyphicon, Checkbox, FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); const Dialog = require('../../../components/misc/Dialog'); const UserGroups = require('./UserGroups'); @@ -82,10 +82,10 @@ const UserDialog = React.createClass({ } }, getPwStyle() { - if (!this.refs.newPassword) { + if (!this.props.user || !this.props.user.newPassword) { return null; } - let pw = this.refs.newPassword.getValue(); + let pw = this.props.user.newPassword; if (pw.length === 0) { return null; } @@ -94,56 +94,63 @@ const UserDialog = React.createClass({ }, renderGeneral() { return (
- } - onChange={this.handleChange} - value={this.props.user && this.props.user.name}/> - } - onChange={this.handleChange} /> - } - onChange={this.handleChange} /> + + + + + + + + + + + + - } - onClick={(evt) => {this.props.onChange("enabled", evt.target.checked ? true : false); }} /> + + + {this.props.onChange("enabled", evt.target.checked ? true : false); }} /> +
); }, renderAttributes() { return this.props.attributes.map((attr) => { - return ( + {attr.name} + ); + value={this.getAttributeValue(attr.name)} />); }); }, renderSaveButtonContent() { diff --git a/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx b/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx index 037e39a1b0..ac920f7705 100644 --- a/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx +++ b/web/client/components/mapcontrols/mouseposition/CRSSelector.jsx @@ -7,14 +7,13 @@ */ var React = require('react'); var ReactDOM = require('react-dom'); -var BootstrapReact = require('react-bootstrap'); -var {Input} = BootstrapReact; +var {FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); var CoordinatesUtils = require('../../../utils/CoordinatesUtils'); let CRSSelector = React.createClass({ propTypes: { id: React.PropTypes.string, - inputProps: React.PropTypes.object, + label: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.string, React.PropTypes.object]), availableCRS: React.PropTypes.object, crs: React.PropTypes.string, enabled: React.PropTypes.bool, @@ -49,20 +48,23 @@ let CRSSelector = React.createClass({ value={this.props.crs} onChange={this.launchNewCRSAction} bsSize="small" - {...this.props.inputProps}> + > {list} ); } else if (this.props.enabled && !this.props.useRawInput) { return ( - - {list} - ); + + {this.props.label} + + {list} + + ); } return null; }, diff --git a/web/client/components/mapcontrols/scale/ScaleBox.jsx b/web/client/components/mapcontrols/scale/ScaleBox.jsx index 6170218094..e24c29bbcf 100644 --- a/web/client/components/mapcontrols/scale/ScaleBox.jsx +++ b/web/client/components/mapcontrols/scale/ScaleBox.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Input} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); const mapUtils = require('../../../utils/MapUtils'); const {isEqual} = require('lodash'); @@ -62,9 +62,12 @@ var ScaleBox = React.createClass({ ); } else { control = ( - - {this.getOptions()} - + + {this.props.label} + + {this.getOptions()} + + ); } return ( diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index b16a98adf0..c15358fa4a 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -7,7 +7,7 @@ */ var React = require('react'); -var {Input, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); +var {FormControl, FormGroup, Glyphicon, OverlayTrigger, Tooltip} = require('react-bootstrap'); var LocaleUtils = require('../../../utils/LocaleUtils'); var Spinner = require('react-spinkit'); @@ -62,8 +62,8 @@ let SearchBar = React.createClass({ searchText: "" }; }, - onChange() { - var text = this.refs.input.getValue(); + onChange(e) { + var text = e.target.value; this.props.onSearchTextChange(text); if (this.props.typeAhead) { delay(() => {this.search(); }, this.props.delay); @@ -100,7 +100,7 @@ let SearchBar = React.createClass({ let tooltip = {this.props.error && this.props.error.message || null}; addonAfter.push(); } - return addonAfter; + return {addonAfter}; }, render() { // const innerGlyphicon = ; @@ -116,25 +116,28 @@ let SearchBar = React.createClass({ return ( ); }, search() { - var text = this.refs.input.getValue(); + var text = this.props.searchText; if (text === undefined || text === "") { this.props.onSearchReset(); } else { diff --git a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx index 24b7729900..db78c9482e 100644 --- a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx +++ b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx @@ -117,7 +117,7 @@ describe("test the SearchBar", () => { const spy = expect.spyOn(testHandlers, 'onSearchHandler'); const spyReset = expect.spyOn(testHandlers, 'onPurgeResultsHandler'); - var tb = ReactDOM.render(, document.getElementById("container")); + let tb = ReactDOM.render(, document.getElementById("container")); let input = TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]; expect(input).toExist(); input = ReactDOM.findDOMNode(input); diff --git a/web/client/components/maps/forms/Metadata.jsx b/web/client/components/maps/forms/Metadata.jsx index 56cca6c8b5..208381320a 100644 --- a/web/client/components/maps/forms/Metadata.jsx +++ b/web/client/components/maps/forms/Metadata.jsx @@ -14,7 +14,7 @@ */ const React = require('react'); -const {Input} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); /** * A DropDown menu for user details: @@ -45,33 +45,33 @@ const Metadata = React.createClass({ }, render() { return (
- - + + {this.props.nameFieldText} + + + + {this.props.descriptionFieldText} + +
); }, - setMapNameValue(newName) { - this.refs.mapName.setValue(newName || ""); + changeName(e) { + this.props.onChange('name', e.target.value); }, - isValid() { - if (!this.refs.mapName) { - return false; - } - let pw = this.refs.mapName.getValue(); - return pw !== null; + changeDescription(e) { + this.props.onChange('description', e.target.value); } }); diff --git a/web/client/components/maps/modals/MetadataModal.jsx b/web/client/components/maps/modals/MetadataModal.jsx index cc9c152e16..07470070d4 100644 --- a/web/client/components/maps/modals/MetadataModal.jsx +++ b/web/client/components/maps/modals/MetadataModal.jsx @@ -69,6 +69,12 @@ const MetadataModal = React.createClass({ contextTypes: { messages: React.PropTypes.object }, + getInitialState() { + return { + name: this.props.map && this.props.map.name || '', + description: this.props.map && this.props.map.description || '' + }; + }, getDefaultProps() { return { id: "MetadataModal", @@ -108,9 +114,12 @@ const MetadataModal = React.createClass({ groups: [] }; }, - setMapNameValue(newName) { - if (this.refs.mapMetadataForm) { - this.refs.mapMetadataForm.setMapNameValue(newName); + componentWillMount() { + if (this.props.map && this.props.map.name) { + this.setState({ + name: this.props.map.name, + description: this.props.map.description || '' + }); } }, componentWillReceiveProps(nextProps) { @@ -120,6 +129,12 @@ const MetadataModal = React.createClass({ }); this.props.onClose(); } + if (nextProps.map && nextProps.map.name) { + this.setState({ + name: nextProps.map.name, + description: nextProps.map.description || '' + }); + } }, componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { @@ -145,8 +160,8 @@ const MetadataModal = React.createClass({ let metadata = null; if ( this.isMetadataChanged() ) { - let name = this.refs.mapMetadataForm.refs.mapName.getValue(); - let description = this.refs.mapMetadataForm.refs.mapDescription.getValue(); + let name = this.state.name; + let description = this.state.description; metadata = { name: name, description: description @@ -207,8 +222,10 @@ const MetadataModal = React.createClass({ ); const body = ( { - this.setState({metadataValid: this.refs.mapMetadataForm.isValid()}); + onChange={(prop, value ) => { + this.setState({ + [prop]: value + }); }} map={this.props.map} nameFieldText={} @@ -296,8 +313,8 @@ const MetadataModal = React.createClass({ }, isMetadataChanged() { return this.props.map && ( - this.refs.mapMetadataForm.refs.mapDescription.getValue() !== this.props.map.description || - this.refs.mapMetadataForm.refs.mapName.getValue() !== this.props.map.name + this.state.description !== this.props.map.description || + this.state.name !== this.props.map.name ); }, isThumbnailChanged() { diff --git a/web/client/components/misc/FeatureInfoFormatSelector.jsx b/web/client/components/misc/FeatureInfoFormatSelector.jsx index 49085a7468..465dcef5bd 100644 --- a/web/client/components/misc/FeatureInfoFormatSelector.jsx +++ b/web/client/components/misc/FeatureInfoFormatSelector.jsx @@ -10,12 +10,12 @@ const React = require('react'); const ReactDOM = require('react-dom'); const MapInfoUtils = require('../../utils/MapInfoUtils'); -const {Input} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); var FeatureInfoFormatSelector = React.createClass({ propTypes: { id: React.PropTypes.string, - inputProps: React.PropTypes.object, + label: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.string, React.PropTypes.object]), availableInfoFormat: React.PropTypes.object, infoFormat: React.PropTypes.string, onInfoFormatChange: React.PropTypes.func @@ -36,15 +36,16 @@ var FeatureInfoFormatSelector = React.createClass({ }); return ( - - {list} - + + {this.props.label} + + {list} + + ); }, launchChangeInfoFormatAction() { diff --git a/web/client/components/print/Choice.jsx b/web/client/components/print/Choice.jsx index c0e970c140..5fbb244506 100644 --- a/web/client/components/print/Choice.jsx +++ b/web/client/components/print/Choice.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Input} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); const Choice = React.createClass({ propTypes: { @@ -24,19 +24,19 @@ const Choice = React.createClass({ selected: '' }; }, - onChange() { - this.props.onChange(this.refs.input.getValue()); - }, - getValue() { - return this.refs.input.getValue(); + onChange(e) { + this.props.onChange(e.target.value); }, render() { const options = this.props.items .map((item) => ); return ( - - {options} - + + {this.props.label ? {this.props.label} : null} + + {options} + + ); } }); diff --git a/web/client/components/print/Font.jsx b/web/client/components/print/Font.jsx index c46c61fb24..c3ea0435f1 100644 --- a/web/client/components/print/Font.jsx +++ b/web/client/components/print/Font.jsx @@ -8,7 +8,7 @@ const React = require('react'); const Choice = require('./Choice'); -const {Grid, Row, Col, Input, Button, Glyphicon} = require('react-bootstrap'); +const {Grid, Row, Col, FormControl, Button, Glyphicon} = require('react-bootstrap'); const Font = React.createClass({ propTypes: { @@ -35,11 +35,11 @@ const Font = React.createClass({ italic: false }; }, - onChangeFamily() { - this.props.onChangeFamily(this.refs.family.getValue()); + onChangeFamily(family) { + this.props.onChangeFamily(family); }, - onChangeSize() { - this.props.onChangeSize(this.refs.size.getValue()); + onChangeSize(size) { + this.props.onChangeSize(size); }, render() { return ( @@ -55,7 +55,7 @@ const Font = React.createClass({ selected={this.props.family}/> - + diff --git a/web/client/components/print/PrintOption.jsx b/web/client/components/print/PrintOption.jsx index d2818da28a..f50e465069 100644 --- a/web/client/components/print/PrintOption.jsx +++ b/web/client/components/print/PrintOption.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Input} = require('react-bootstrap'); +const {Checkbox} = require('react-bootstrap'); const PrintOption = React.createClass({ propTypes: { @@ -32,9 +32,9 @@ const PrintOption = React.createClass({ }, render() { return ( - + {this.props.label} ); }, isEnabled() { diff --git a/web/client/components/print/PrintOptions.jsx b/web/client/components/print/PrintOptions.jsx index 39a678985f..29ea4586c6 100644 --- a/web/client/components/print/PrintOptions.jsx +++ b/web/client/components/print/PrintOptions.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Input} = require('react-bootstrap'); +const {Radio} = require('react-bootstrap'); const LocaleUtils = require('../../utils/LocaleUtils'); const PrintOptions = React.createClass({ @@ -35,14 +35,13 @@ const PrintOptions = React.createClass({ this.props.onChange(e.target.value); }, renderOptions() { - return this.props.options.map((option) => ); + >{LocaleUtils.getMessageById(this.context.messages, option.label)}); }, render() { return ( diff --git a/web/client/components/security/forms/LoginForm.jsx b/web/client/components/security/forms/LoginForm.jsx index 8b0505d420..77ce504257 100644 --- a/web/client/components/security/forms/LoginForm.jsx +++ b/web/client/components/security/forms/LoginForm.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Input, ButtonInput, Alert} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel, Button, Alert} = require('react-bootstrap'); const Spinner = require('react-spinkit'); const Message = require('../../../components/I18N/Message'); const LocaleUtils = require('../../../utils/LocaleUtils'); @@ -63,7 +63,11 @@ const LoginForm = React.createClass({ } ); }, getInitialState() { - return {loading: false}; + return { + loading: false, + username: '', + password: '' + }; }, renderError() { let error = this.props.loginError; @@ -84,7 +88,8 @@ const LoginForm = React.createClass({ }, renderSubmit() { if (this.props.showSubmitButton) { - return (); @@ -93,23 +98,41 @@ const LoginForm = React.createClass({ render() { return (
- - + + {this.props.userNameText} + + + + {this.props.passwordText} + + {this.renderSubmit()} {this.renderError()}
{this.renderLoading()}
); }, + setUser(e) { + this.setState({ + username: e.target.value + }); + }, + setPassword(e) { + this.setState({ + password: e.target.value + }); + }, handleSubmit(e) { e.preventDefault(); this.submit(); @@ -121,8 +144,8 @@ const LoginForm = React.createClass({ }, submit() { - let username = this.refs.username && this.refs.username.getValue(); - let password = this.refs.password && this.refs.password.getValue(); + let username = this.state.username; + let password = this.state.password; if (!username || !password) { this.props.onError({status: 0}); } diff --git a/web/client/components/security/forms/PasswordReset.jsx b/web/client/components/security/forms/PasswordReset.jsx index ebe972f9e3..14335817d6 100644 --- a/web/client/components/security/forms/PasswordReset.jsx +++ b/web/client/components/security/forms/PasswordReset.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Input, Alert} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel, Alert} = require('react-bootstrap'); const Message = require('../../../components/I18N/Message'); const LocaleUtils = require('../../../utils/LocaleUtils'); /** @@ -27,6 +27,12 @@ const PasswordReset = React.createClass({ contextTypes: { messages: React.PropTypes.object }, + getInitialState() { + return { + password: '', + passwordcheck: '' + }; + }, getDefaultProps() { return { // config @@ -40,16 +46,11 @@ const PasswordReset = React.createClass({ passwordCheckText: }; }, - getPassword() { - if (this.isValid()) { - return this.refs.password.getValue(); - } - }, getPwStyle() { - if (!this.refs.password) { + if (!this.state.password) { return null; } - let pw = this.refs.password.getValue(); + let pw = this.state.password; if (pw.length === 0) { return null; } @@ -57,44 +58,60 @@ const PasswordReset = React.createClass({ }, renderWarning() { - if (!this.refs.password) { + if (!this.state.password) { return null; } - let pw = this.refs.password.getValue(); + let pw = this.state.password; if (pw !== null && pw.length < this.props.minPasswordSize && pw.length > 0) { return ; - } else if (pw !== null && pw !== this.refs.passwordcheck.getValue() ) { + } else if (pw !== null && pw !== this.state.passwordcheck ) { return ; } return null; }, render() { return (
- + {this.props.newPasswordText} + - + + + {this.props.passwordCheckText} + + {this.renderWarning()} ); }, - isValid() { - if (!this.refs.password) { + isValid(password, passwordcheck) { + let p = password || this.state.password; + let p2 = passwordcheck || this.state.passwordcheck; + if (!p) { return false; } - let pw = this.refs.password.getValue(); - return pw !== null && pw.length >= this.props.minPasswordSize && pw === this.refs.passwordcheck.getValue(); + return p !== null && p.length >= this.props.minPasswordSize && p === p2; + }, + changePassword(e) { + this.setState({ + password: e.target.value + }); + this.props.onChange(e.target.value, this.isValid(e.target.value, this.state.passwordcheck)); + }, + changePasswordCheck(e) { + this.setState({ + passwordcheck: e.target.value + }); + this.props.onChange(this.state.password, this.isValid(this.state.password, e.target.value)); } }); diff --git a/web/client/components/security/forms/__tests__/LoginForm-test.jsx b/web/client/components/security/forms/__tests__/LoginForm-test.jsx index bb6e008bf0..ac71584040 100644 --- a/web/client/components/security/forms/__tests__/LoginForm-test.jsx +++ b/web/client/components/security/forms/__tests__/LoginForm-test.jsx @@ -54,12 +54,14 @@ describe("Test the login form component", () => { let username = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmp, "input")[0]); expect(username).toExist(); username.value = "test"; + ReactTestUtils.Simulate.change(username); let password = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmp, "input")[1]); expect(password).toExist(); password.value = "test"; + ReactTestUtils.Simulate.change(password); - let button = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmp, "input")[2]); + let button = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmp, "button")[0]); ReactTestUtils.Simulate.click(button); expect(spy.calls.length).toEqual(1); diff --git a/web/client/components/security/forms/__tests__/PasswordReset-test.jsx b/web/client/components/security/forms/__tests__/PasswordReset-test.jsx index 31bc569ad4..738b2b5fd8 100644 --- a/web/client/components/security/forms/__tests__/PasswordReset-test.jsx +++ b/web/client/components/security/forms/__tests__/PasswordReset-test.jsx @@ -36,20 +36,23 @@ describe("Test the password reset form component", () => { let password = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmp, "input")[0]); expect(password).toExist(); password.value = "test"; + ReactTestUtils.Simulate.change(password); expect(cmp.isValid()).toEqual(false); let password2 = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(cmp, "input")[1]); expect(password2).toExist(); password2.value = "test2"; + ReactTestUtils.Simulate.change(password2); expect(cmp.isValid()).toEqual(false); password2.value = "test"; + ReactTestUtils.Simulate.change(password2); // size is < then 6 expect(cmp.isValid()).toEqual(false); - expect(!cmp.getPassword()).toEqual(true); // test valid password.value = "password"; password2.value = "password"; + ReactTestUtils.Simulate.change(password); + ReactTestUtils.Simulate.change(password2); expect(cmp.isValid()).toEqual(true); - expect(cmp.getPassword()).toEqual("password"); }); }); diff --git a/web/client/components/security/modals/PasswordResetModal.jsx b/web/client/components/security/modals/PasswordResetModal.jsx index 58f6fe25f9..2986b7bd68 100644 --- a/web/client/components/security/modals/PasswordResetModal.jsx +++ b/web/client/components/security/modals/PasswordResetModal.jsx @@ -68,11 +68,12 @@ const PasswordResetModal = React.createClass({ getInitialState() { return { passwordValid: false, - loading: false + loading: false, + password: '' }; }, onPasswordChange() { - this.props.onPasswordChange(this.props.user, this.refs.passwordResetForm.getPassword()); + this.props.onPasswordChange(this.props.user, this.state.password); }, renderLoading() { return this.state.loading ? : null; @@ -98,8 +99,8 @@ const PasswordResetModal = React.createClass({ }, getBody() { return ( { - this.setState({passwordValid: this.refs.passwordResetForm.isValid()}); + onChange={(password, valid) => { + this.setState({passwordValid: valid, password}); }} />); }, renderModal() { diff --git a/web/client/components/security/modals/__tests__/LoginModal-test.jsx b/web/client/components/security/modals/__tests__/LoginModal-test.jsx index 62d875b8b7..a3bed05137 100644 --- a/web/client/components/security/modals/__tests__/LoginModal-test.jsx +++ b/web/client/components/security/modals/__tests__/LoginModal-test.jsx @@ -11,8 +11,6 @@ const React = require('react'); const ReactDOM = require('react-dom'); const ReactTestUtils = require('react-addons-test-utils'); const LoginForm = require('../LoginModal'); -const {Modal} = require('react-bootstrap'); - describe("Test the login modal", () => { beforeEach((done) => { @@ -34,8 +32,7 @@ describe("Test the login modal", () => { it('creates empty component with error', () => { const cmp = ReactDOM.render(, document.getElementById("container")); expect(cmp).toExist(); - let modalInstance = ReactTestUtils.findRenderedComponentWithType(cmp, Modal); - let node = ReactTestUtils.scryRenderedDOMComponentsWithClass(modalInstance._modal, "alert-danger"); + let node = document.getElementsByClassName('alert-danger'); expect(node.length).toBe(1); }); @@ -53,17 +50,18 @@ describe("Test the login modal", () => { const spySuccess = expect.spyOn(testHandlers, 'onLoginSuccess'); const cmp = ReactDOM.render(, document.getElementById("container")); expect(cmp).toExist(); - let modalInstance = ReactTestUtils.findRenderedComponentWithType(cmp, Modal); - let username = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(modalInstance._modal, "input")[0]); + let username = document.getElementsByTagName("input")[0]; expect(username).toExist(); username.value = "test"; + ReactTestUtils.Simulate.change(username); - let password = ReactDOM.findDOMNode(ReactTestUtils.scryRenderedDOMComponentsWithTag(modalInstance._modal, "input")[1]); + let password = document.getElementsByTagName("input")[1]; expect(password).toExist(); password.value = "test"; + ReactTestUtils.Simulate.change(password); - let button = cmp.refs.submit; - button.props.onClick(); + let button = document.getElementsByTagName("button")[1]; + ReactTestUtils.Simulate.click(button); expect(spy.calls.length).toEqual(1); ReactDOM.render(, document.getElementById("container")); expect(spySuccess.calls.length).toEqual(1); diff --git a/web/client/components/security/modals/__tests__/PasswordResetModal-test.jsx b/web/client/components/security/modals/__tests__/PasswordResetModal-test.jsx index 8c6eb261a5..7b9fee16b2 100644 --- a/web/client/components/security/modals/__tests__/PasswordResetModal-test.jsx +++ b/web/client/components/security/modals/__tests__/PasswordResetModal-test.jsx @@ -11,7 +11,6 @@ const React = require('react'); const ReactDOM = require('react-dom'); const ReactTestUtils = require('react-addons-test-utils'); const PRModal = require('../PasswordResetModal'); -const {Modal} = require('react-bootstrap'); describe("Test password reset modal", () => { beforeEach((done) => { @@ -45,16 +44,13 @@ describe("Test password reset modal", () => { let spy = expect.spyOn(callbacks, 'onPasswordChange'); const cmp = ReactDOM.render(, document.getElementById("container")); expect(cmp).toExist(); - let modalInstance = ReactTestUtils.findRenderedComponentWithType(cmp, Modal); - let inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag(modalInstance._modal, "input"); - inputs.forEach((i) => { + let inputs = document.getElementsByTagName("input"); + Array.prototype.forEach.call(inputs, (i) => { i.value = "password"; - + ReactTestUtils.Simulate.change(i); }); - // force onChange event to enable form button - cmp.refs.passwordResetForm.refs.password.props.onChange(); - let button = cmp.refs.passwordChangeButton; - button.props.onClick(); + let button = document.getElementsByTagName("button")[1]; + ReactTestUtils.Simulate.click(button); expect(spy.calls.length).toEqual(1); }); }); diff --git a/web/client/components/security/modals/__tests__/UserDetailsModal-test.jsx b/web/client/components/security/modals/__tests__/UserDetailsModal-test.jsx index 49536fe805..310782456e 100644 --- a/web/client/components/security/modals/__tests__/UserDetailsModal-test.jsx +++ b/web/client/components/security/modals/__tests__/UserDetailsModal-test.jsx @@ -9,9 +9,7 @@ const expect = require('expect'); const React = require('react'); const ReactDOM = require('react-dom'); -const ReactTestUtils = require('react-addons-test-utils'); const UDModal = require('../UserDetailsModal'); -const {Modal} = require('react-bootstrap'); describe("Test user details modal", () => { beforeEach((done) => { @@ -72,7 +70,8 @@ describe("Test user details modal", () => { }; const cmp = ReactDOM.render(, document.getElementById("container")); expect(cmp).toExist(); - let modalInstance = ReactTestUtils.findRenderedComponentWithType(cmp, Modal); - expect(ReactTestUtils.scryRenderedDOMComponentsWithTag(modalInstance._modal, "th").length).toEqual(2); + const modalDOM = document.getElementsByClassName('modal')[0]; + + expect(modalDOM.getElementsByTagName('th').length).toEqual(2); }); }); diff --git a/web/client/components/share/ShareLink.jsx b/web/client/components/share/ShareLink.jsx index 90182f2709..2d89c46493 100644 --- a/web/client/components/share/ShareLink.jsx +++ b/web/client/components/share/ShareLink.jsx @@ -15,7 +15,7 @@ const React = require('react'); const CopyToClipboard = require('react-copy-to-clipboard'); const Message = require('../../components/I18N/Message'); -const {Glyphicon, Input, Tooltip, OverlayTrigger, Button} = require('react-bootstrap'); +const {Glyphicon, FormControl, FormGroup, Tooltip, OverlayTrigger, Button} = require('react-bootstrap'); // css required require('./share.css'); @@ -43,7 +43,12 @@ const ShareLink = React.createClass({

- ev.target.select()} ref="copytext" type="text" value={this.props.shareUrl} addonAfter={copyTo} readOnly/> + +
+ ev.target.select()} ref="copytext" type="text" value={this.props.shareUrl} readOnly/> + {copyTo} +
+
); } diff --git a/web/client/examples/featuregrid/containers/FeatureGrid.jsx b/web/client/examples/featuregrid/containers/FeatureGrid.jsx index 66561cf72e..4274d63f49 100644 --- a/web/client/examples/featuregrid/containers/FeatureGrid.jsx +++ b/web/client/examples/featuregrid/containers/FeatureGrid.jsx @@ -61,7 +61,7 @@ FeatureGrid.propTypes = { module.exports = connect((state) => { return { - locale: state.locale && state.locale.locale, + locale: state.locale && state.locale.current, messages: state.locale && state.locale.messages || {} }; })(FeatureGrid); diff --git a/web/client/examples/mouseposition/components/mouseposition.css b/web/client/examples/mouseposition/components/mouseposition.css index 258978abae..d739ddcdba 100644 --- a/web/client/examples/mouseposition/components/mouseposition.css +++ b/web/client/examples/mouseposition/components/mouseposition.css @@ -141,7 +141,6 @@ text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; - height: 20px; font-size: 1.2em; } #google .label-info { diff --git a/web/client/examples/plugins/app.jsx b/web/client/examples/plugins/app.jsx index 53a14a4b05..701c4d191d 100644 --- a/web/client/examples/plugins/app.jsx +++ b/web/client/examples/plugins/app.jsx @@ -36,7 +36,7 @@ const startApp = () => { const {Provider} = require('react-redux'); - const {Input} = require('react-bootstrap'); + const {FormControl, FormGroup} = require('react-bootstrap'); const SaveAndLoad = require('./components/SaveAndLoad'); @@ -196,11 +196,13 @@ const startApp = () => {
Configure application plugins
- - - - - + + + + + + +
    diff --git a/web/client/examples/plugins/components/PluginConfigurator.jsx b/web/client/examples/plugins/components/PluginConfigurator.jsx index 3cdb7850a7..fc7d6d0ae9 100644 --- a/web/client/examples/plugins/components/PluginConfigurator.jsx +++ b/web/client/examples/plugins/components/PluginConfigurator.jsx @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. */ const React = require('react'); -const {Input, Button, Glyphicon} = require('react-bootstrap'); +const {Checkbox, FormGroup, Button, Glyphicon} = require('react-bootstrap'); const Codemirror = require('react-codemirror'); require('codemirror/lib/codemirror.css'); @@ -74,11 +74,14 @@ const PluginConfigurator = React.createClass({ render() { return (
  • - + + + {this.props.pluginName} + + {this.renderCfg()}
    • ); }, diff --git a/web/client/examples/plugins/components/PluginCreator.jsx b/web/client/examples/plugins/components/PluginCreator.jsx index 544a9026d2..492684b5df 100644 --- a/web/client/examples/plugins/components/PluginCreator.jsx +++ b/web/client/examples/plugins/components/PluginCreator.jsx @@ -7,7 +7,7 @@ */ const React = require('react'); -const {Button, Glyphicon, Modal, Input} = require('react-bootstrap'); +const {Button, Glyphicon, Modal, Checkbox, FormGroup} = require('react-bootstrap'); const Codemirror = require('react-codemirror'); @@ -49,11 +49,14 @@ const PluginCreator = React.createClass({ render() { return (
  • - - + + + Live edit your own plugin + + { this.setState({ configVisible: false diff --git a/web/client/examples/plugins/components/SaveAndLoad.jsx b/web/client/examples/plugins/components/SaveAndLoad.jsx index e0505e4d56..33b6e17a27 100644 --- a/web/client/examples/plugins/components/SaveAndLoad.jsx +++ b/web/client/examples/plugins/components/SaveAndLoad.jsx @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. */ const React = require('react'); -const {Input, Button} = require('react-bootstrap'); +const {FormControl, Button} = require('react-bootstrap'); const SaveButton = React.createClass({ @@ -40,11 +40,11 @@ const SaveButton = React.createClass({ render() { return (
    - + - + {this.renderSaved()} - +
    ); }, load() { diff --git a/web/client/examples/queryform/containers/QueryForm.jsx b/web/client/examples/queryform/containers/QueryForm.jsx index 4cb6c41287..0fcce4a818 100644 --- a/web/client/examples/queryform/containers/QueryForm.jsx +++ b/web/client/examples/queryform/containers/QueryForm.jsx @@ -56,7 +56,7 @@ const QueryForm = React.createClass({ module.exports = connect((state) => { return { - locale: state.locale && state.locale.locale, + locale: state.locale && state.locale.current, messages: state.locale && state.locale.messages || {} }; })(QueryForm); diff --git a/web/client/plugins/Identify.jsx b/web/client/plugins/Identify.jsx index 0003720183..14be1adcf1 100644 --- a/web/client/plugins/Identify.jsx +++ b/web/client/plugins/Identify.jsx @@ -70,9 +70,8 @@ module.exports = { Settings: { tool: - }}/>, + label={ + }/>, position: 3 } }), diff --git a/web/client/plugins/MousePosition.jsx b/web/client/plugins/MousePosition.jsx index 9495e61097..9657110b7f 100644 --- a/web/client/plugins/MousePosition.jsx +++ b/web/client/plugins/MousePosition.jsx @@ -72,9 +72,7 @@ module.exports = { - }} + label={} /> - this.props.setRuleParameter('name', ev.target.value)} value={this.props.rule.name}/> + this.props.setRuleParameter('name', ev.target.value)} value={this.props.rule.name}/> ) : null} ); diff --git a/web/client/plugins/print/index.js b/web/client/plugins/print/index.js index b4ce81c40b..3c9e105fc1 100644 --- a/web/client/plugins/print/index.js +++ b/web/client/plugins/print/index.js @@ -5,29 +5,39 @@ * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. */ +const React = require('react'); const {connect} = require('react-redux'); const {compose} = require('redux'); const ConfigUtils = require('../../utils/ConfigUtils'); -const {Input} = require('react-bootstrap'); +const {FormControl, FormGroup, ControlLabel} = require('react-bootstrap'); const {setPrintParameter, changePrintZoomLevel, changeMapPrintPreview, printCancel} = require('../../actions/print'); const {setControlProperty} = require('../../actions/controls'); +const TextWithLabel = (props) => { + return ( + + {props.label && {props.label} || null} + + + ); +}; + const Name = connect((state) => ({ value: state.print && state.print.spec && state.print.spec.name || '', type: "text" }), { onChange: compose(setPrintParameter.bind(null, 'name'), (e) => e.target.value) -})(Input); +})(TextWithLabel); const Description = connect((state) => ({ value: state.print && state.print.spec && state.print.spec.description || '', - type: "textarea" + componentClass: "textarea" }), { onChange: compose(setPrintParameter.bind(null, 'description'), (e) => e.target.value) -})(Input); +})(TextWithLabel); const Resolution = connect((state) => ({ selected: state.print && state.print.spec && state.print.spec.resolution || '', @@ -87,14 +97,14 @@ const IconSizeOption = connect((state) => ({ type: "number" }), { onChange: compose(setPrintParameter.bind(null, 'iconSize'), (e) => parseInt(e.target.value, 10)) -})(Input); +})(TextWithLabel); const LegendDpiOption = connect((state) => ({ value: state.print && state.print.spec && state.print.spec.legendDpi, type: "number" }), { onChange: compose(setPrintParameter.bind(null, 'legendDpi'), (e) => parseInt(e.target.value, 10)) -})(Input); +})(TextWithLabel); const DefaultBackgroundOption = connect((state) => ({ checked: state.print && state.print.spec && !!state.print.spec.defaultBackground diff --git a/web/client/product/components/home/MapsList.jsx b/web/client/product/components/home/MapsList.jsx index 346c3a495d..4a653b1ab1 100644 --- a/web/client/product/components/home/MapsList.jsx +++ b/web/client/product/components/home/MapsList.jsx @@ -8,7 +8,7 @@ var React = require('react'); var I18N = require('../../../components/I18N/I18N'); -var {Label, Input} = require('react-bootstrap'); +var {Label, FormControl, FormGroup} = require('react-bootstrap'); const {connect} = require('react-redux'); const {updateMapMetadata, deleteMap, createThumbnail} = require('../../../actions/maps'); const MapGrid = connect(() => ({}), {updateMapMetadata, deleteMap, createThumbnail})(require('../../../components/maps/MapGrid')); @@ -26,10 +26,12 @@ var MapsList = React.createClass({ return (
    - - - - + + + + + +

    {this.props.title}

    - - - - + + + + + +
    ); }