Bug 1488503: Validation for network location. r=jdescottes

Differential Revision: https://phabricator.services.mozilla.com/D23993

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js

@@ -196,7 +196,7 @@ class ConnectPage extends PureComponent {
             ? dom.div(
               {},
               NetworkLocationsList({ dispatch, networkLocations }),
-              NetworkLocationsForm({ dispatch }),
+              NetworkLocationsForm({ dispatch, networkLocations }),
             )
             : null,
         },

devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css

@@ -17,3 +17,7 @@
   padding-block-start: calc(var(--base-unit) * 4);
   padding-inline: calc(var(--base-unit) * 6);
 }
+
+.connect-page__network-form__error-message {
+  grid-column: 1 / -1;
+}

devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js

@@ -11,35 +11,88 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
+const Message = createFactory(require("../shared/Message"));
+
 const Actions = require("../../actions/index");
+const { MESSAGE_LEVEL } = require("../../constants");
+const Types = require("../../types/index");
 
 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",
+        level: MESSAGE_LEVEL.ERROR,
+      },
+      Localized(
+        {
+          id: errorMessageId,
+          "$host-value": errorHostValue,
+        },
+        dom.p({}, errorMessageId)
+      ),
+    );
+  }
+
   render() {
     return dom.form(
       {
         className: "connect-page__network-form",
-        onSubmit: (e) => {
-          const { value } = this.state;
-          if (value) {
-            this.props.dispatch(Actions.addNetworkLocation(value));
-            this.setState({ value: "" });
-          }
-          e.preventDefault();
-        },
+        onSubmit: (e) => this.onSubmit(e),
       },
+      this.renderError(),
       Localized(
         {
           id: "about-debugging-network-locations-host-input-label",
@@ -72,7 +125,7 @@ class NetworkLocationsForm extends PureComponent {
           },
           "Add"
         )
-      )
+      ),
     );
   }
 }

devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl

@@ -218,6 +218,14 @@ about-debugging-network-locations-host-input-label = Host
 # Clicking on it removes the network location from the list.
 about-debugging-network-locations-remove-button = Remove
 
+# Text used as error message if the format of the input value was invalid in the network locations form of the Setup page.
+# { $host-value } is the input value submitted by the user in the network locations form
+about-debugging-network-location-form-invalid = Invalid host "{ $host-value }". The expected format is "hostname:portnumber".
+
+# Text used as error message if the input value was already registered in the network locations form of the Setup page.
+# { $host-value } is the input value submitted by the user in the network locations form
+about-debugging-network-location-form-duplicate = The host "{ $host-value }" is already registered
+
 # This string is displayed as a label of the button that pushes a test payload
 # to a service worker.
 # Notes, this relates to the "Push" API, which is normally not localized so it is