-
Notifications
You must be signed in to change notification settings - Fork 410
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Builder - Content Editor - Web page (C039 - #32) #4600
Changes from 8 commits
582f063
6ad6844
d3053fd
4fc4f32
aafc98a
f94cb4a
146473d
faff1f0
bf98915
d82fe49
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,101 @@ | ||||||
/* | ||||||
* Copyright 2019, GeoSolutions Sas. | ||||||
* All rights reserved. | ||||||
* | ||||||
* This source code is licensed under the BSD-style license found in the | ||||||
* LICENSE file in the root directory of this source tree. | ||||||
*/ | ||||||
|
||||||
import React from 'react'; | ||||||
import Dialog from '../../misc/StandardDialog'; | ||||||
import { FormControl, ControlLabel, FormGroup, Button } from 'react-bootstrap'; | ||||||
import { connect } from 'react-redux'; | ||||||
import { setWebPageUrl } from '../../../actions/geostory'; | ||||||
import Message from '../../I18N/Message'; | ||||||
import Portal from '../../misc/Portal'; | ||||||
import PropTypes from 'prop-types'; | ||||||
import WebPage from './WebPage'; | ||||||
import { compose, withHandlers } from 'recompose'; | ||||||
import { isValidURL } from '../../../utils/URLUtils'; | ||||||
|
||||||
export class WebPageWrapper extends React.PureComponent { | ||||||
static propTypes = { | ||||||
editURL: PropTypes.bool, | ||||||
onClose: PropTypes.func, | ||||||
onChange: PropTypes.func, | ||||||
src: PropTypes.string, | ||||||
id: PropTypes.string | ||||||
} | ||||||
|
||||||
state = { | ||||||
url: this.props.src || '', | ||||||
error: false | ||||||
} | ||||||
|
||||||
render() { | ||||||
const { onClose, editURL } = this.props; | ||||||
const { url, error } = this.state; | ||||||
return ( | ||||||
<React.Fragment> | ||||||
<Portal> | ||||||
<Dialog | ||||||
modal | ||||||
show={editURL} | ||||||
onClickOut={(e) => e.preventDefault() && e.stopPropagation()} | ||||||
title={<Message msgId="geostory.webPageCreator.title" />} | ||||||
onClose={onClose} | ||||||
id="web-page-creator" | ||||||
footer={( | ||||||
<Button bsSize="small" onClick={this.save} > | ||||||
<Message msgId="geostory.webPageCreator.saveButton" /> | ||||||
</Button> | ||||||
)} | ||||||
> | ||||||
{ error && ( | ||||||
<div className="dropzone-errorBox alert-danger"> | ||||||
<Message msgId="geostory.webPageCreator.error"/> | ||||||
</div> | ||||||
)} | ||||||
<FormGroup controlId="WEBPAGE_URL" validationState={error && 'error'}> | ||||||
<ControlLabel> | ||||||
<Message msgId="geostory.webPageCreator.url.label" /> | ||||||
</ControlLabel> | ||||||
<FormControl | ||||||
label="URL" | ||||||
type="text" | ||||||
value={url} | ||||||
onChange={this.updateURL} | ||||||
required | ||||||
/> | ||||||
</FormGroup> | ||||||
</Dialog> | ||||||
</Portal> | ||||||
<WebPage {...this.props} /> | ||||||
</React.Fragment> | ||||||
); | ||||||
} | ||||||
|
||||||
updateURL = ({ target: { value: url }}) => { | ||||||
this.setState({ url }); | ||||||
} | ||||||
|
||||||
save = () => { | ||||||
const { url } = this.state; | ||||||
const error = !isValidURL(url); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can you pass ConfigUtils.getConfigProp("GeoStoryValidIframeURLRegex") as second argument? Verify that if the property is missing in config, then it uses the default one There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ok There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @MV88 done |
||||||
this.setState({ error: !isValidURL(url) }); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
if (!error) { | ||||||
this.props.onChange(url); | ||||||
} | ||||||
} | ||||||
} | ||||||
|
||||||
const wrappedComponent = compose( | ||||||
withHandlers({ | ||||||
onClose: ({update = () => {}}) => () => update('editURL', false, 'merge') | ||||||
}) | ||||||
)(WebPageWrapper); | ||||||
|
||||||
export default connect( | ||||||
null, | ||||||
{ onChange: setWebPageUrl } | ||||||
)(wrappedComponent); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
/* | ||
* Copyright 2019, GeoSolutions Sas. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
import expect from 'expect'; | ||
import { WebPageWrapper } from '../WebPageWrapper'; | ||
|
||
describe('WebPageWrapper', () => { | ||
beforeEach((done) => { | ||
document.body.innerHTML = '<div id="container"></div>'; | ||
setTimeout(done); | ||
}); | ||
afterEach((done) => { | ||
ReactDOM.unmountComponentAtNode(document.getElementById("container")); | ||
document.body.innerHTML = ''; | ||
setTimeout(done); | ||
}); | ||
|
||
it('render with defaults', () => { | ||
ReactDOM.render(<WebPageWrapper />, document.getElementById("container")); | ||
const el = document.querySelector('.modal-dialog'); | ||
expect(el).toBe(null); | ||
}); | ||
|
||
it('should render when editURL is true', () => { | ||
const props = { editURL: true }; | ||
ReactDOM.render(<WebPageWrapper {...props} />, document.getElementById("container")); | ||
const el = document.querySelector('.modal-dialog'); | ||
expect(el).toExist(); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.