MQTT : Add better validation errors on create device form

front/src/config/i18n/de.json

@@ -1298,6 +1298,13 @@
         "notFound": "Angefordertes Gerät nicht gefunden.",
         "backToList": "Zurück zur Geräteliste",
         "saveError": "Fehler beim Sichern oder Löschen des Geräts",
+        "validationError": "Validierungsfehler: Das Gerät ist nicht korrekt ausgefüllt.",
+        "validationErrors": {
+          "name": "Das Feld \"Name\" ist erforderlich",
+          "min": "Das Minimalfeld ist erforderlich und muss eine ganze Zahl sein",
+          "max": "Das Maximalfeld ist erforderlich und muss eine ganze Zahl sein",
+          "external_id": "Das externe ID-Feld ist erforderlich und muss über alle Geräte hinweg eindeutig sein"
+        },
         "saveConflictError": "Konflikt: Sind alle externen IDs wirklich eindeutig?",
         "mostRecentValueAt": "Zuletzt empfangener Wert {{mostRecentValueAt}}.",
         "noValueReceived": "Kein Wert empfangen."

front/src/config/i18n/en.json

@@ -1298,6 +1298,13 @@
         "notFound": "Requested device not found.",
         "backToList": "Back to device list",
         "saveError": "Error saving or deleting device",
+        "validationError": "Validation error : The device is not correctly filled.",
+        "validationErrors": {
+          "name": "The name field is required",
+          "min": "The minimum field is required and must be an integer",
+          "max": "The maximum field is required and must be an integer",
+          "external_id": "The external ID field is required and must be unique across all devices"
+        },
         "saveConflictError": "Conflict: Are you sure all external IDs are unique?",
         "mostRecentValueAt": "Last value received {{mostRecentValueAt}}.",
         "noValueReceived": "No value received."

front/src/config/i18n/fr.json

@@ -1426,6 +1426,13 @@
         "notFound": "Appareil introuvable.",
         "backToList": "Retour à la liste des appareils",
         "saveError": "Erreur lors de l'enregistrement ou de la suppression de l'appareil",
+        "validationError": "Erreur de validation : L'appareil n'a pas été correctement rempli.",
+        "validationErrors": {
+          "name": "Le champ \"Nom\" est obligatoire",
+          "min": "Le champ \"Valeur minimum\" est obligatoire et doit être une valeur entière",
+          "max": "Le champ \"Valeur maximum\" est obligatoire et doit être une valeur entière",
+          "external_id": "Le champ \"ID Externe\" est obligatoire et doit être unique à travers tous les appareils"
+        },
         "saveConflictError": "Conflit : êtes-vous sûr que tous les IDs externes sont uniques ?",
         "mostRecentValueAt": "Dernière valeur reçue {{mostRecentValueAt}}.",
         "noValueReceived": "Aucune valeur reçue."

front/src/routes/integration/all/mqtt/device-page/setup/FeatureTab.jsx

@@ -36,6 +36,21 @@ const FeatureTab = ({ children, ...props }) => (
               <Text id="integration.mqtt.device.saveError" />
             </div>
           )}
+          {props.saveStatus === RequestStatus.ValidationError && (
+            <div class="alert alert-danger">
+              <Text id="integration.mqtt.device.validationError" />
+              {props.erroredAttributes.length > 0 && (
+                <p>
+                  {props.erroredAttributes.map(attribute => (
+                    <>
+                      <br />
+                      - <Text id={`integration.mqtt.device.validationErrors.${attribute}`} />
+                    </>
+                  ))}
+                </p>
+              )}
+            </div>
+          )}
           {props.saveStatus === RequestStatus.ConflictError && (
             <div class="alert alert-danger">
               <Text id="integration.mqtt.device.saveConflictError" />

front/src/routes/integration/all/mqtt/device-page/setup/index.js

@@ -210,16 +210,26 @@ class MqttDeviceSetupPage extends Component {
     } catch (e) {
       const status = get(e, 'response.status');
       if (status === 409) {
-        this.setState({
+        await this.setState({
           saveStatus: RequestStatus.ConflictError,
           loading: false
         });
+      }
+      if (status === 422) {
+        const properties = get(e, 'response.data.properties', []);
+        await this.setState({
+          saveStatus: RequestStatus.ValidationError,
+          erroredAttributes: properties.map(p => p.attribute).filter(a => a !== 'selector'),
+          loading: false
+        });
       } else {
-        this.setState({
+        await this.setState({
           saveStatus: RequestStatus.Error,
           loading: false
         });
       }
+      // Scroll to top so the user sees the error
+      window.scrollTo(0, 0);
     }
   }