diff options
Diffstat (limited to 'devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js')
-rw-r--r-- | devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js b/devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js new file mode 100644 index 0000000000..347167921b --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js @@ -0,0 +1,148 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const Message = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/shared/Message.js") +); + +const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js"); +const { + MESSAGE_LEVEL, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); +const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); + +class NetworkLocationsForm extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + networkLocations: PropTypes.arrayOf(Types.location).isRequired, + }; + } + + constructor(props) { + super(props); + this.state = { + errorHostValue: null, + errorMessageId: null, + value: "", + }; + } + + onSubmit(e) { + const { networkLocations } = this.props; + const { value } = this.state; + + e.preventDefault(); + + if (!value) { + return; + } + + if (!value.match(/[^:]+:\d+/)) { + this.setState({ + errorHostValue: value, + errorMessageId: "about-debugging-network-location-form-invalid", + }); + return; + } + + if (networkLocations.includes(value)) { + this.setState({ + errorHostValue: value, + errorMessageId: "about-debugging-network-location-form-duplicate", + }); + return; + } + + this.props.dispatch(Actions.addNetworkLocation(value)); + this.setState({ errorHostValue: null, errorMessageId: null, value: "" }); + } + + renderError() { + const { errorHostValue, errorMessageId } = this.state; + + if (!errorMessageId) { + return null; + } + + return Message( + { + className: + "connect-page__network-form__error-message " + + "qa-connect-page__network-form__error-message", + level: MESSAGE_LEVEL.ERROR, + isCloseable: true, + }, + Localized( + { + id: errorMessageId, + "$host-value": errorHostValue, + }, + dom.p( + { + className: "technical-text", + }, + errorMessageId + ) + ) + ); + } + + render() { + return dom.form( + { + className: "connect-page__network-form", + onSubmit: e => this.onSubmit(e), + }, + this.renderError(), + Localized( + { + id: "about-debugging-network-locations-host-input-label", + }, + dom.label( + { + htmlFor: "about-debugging-network-locations-host-input", + }, + "Host" + ) + ), + dom.input({ + id: "about-debugging-network-locations-host-input", + className: "default-input qa-network-form-input", + placeholder: "localhost:6080", + type: "text", + value: this.state.value, + onChange: e => { + const value = e.target.value; + this.setState({ value }); + }, + }), + Localized( + { + id: "about-debugging-network-locations-add-button", + }, + dom.button( + { + className: "primary-button qa-network-form-submit-button", + }, + "Add" + ) + ) + ); + } +} + +module.exports = NetworkLocationsForm; |