Apply fix for #282 to all forms.

ui/src/views/api-keys/ApiKeyForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, Button } from "antd";
 
 import { ApiKey } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
+import { onFinishFailed } from "../helpers";
+
 interface IProps {
   initialValues: ApiKey;
   onFinish: (obj: ApiKey) => void;
@@ -15,7 +17,7 @@ function ApiKeyForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
         <Input />
       </Form.Item>

ui/src/views/applications/ApplicationForm.tsx

@@ -1,6 +1,8 @@
 import { Application } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 import { Form, Input, Button } from "antd";
 
+import { onFinishFailed } from "../helpers";
+
 interface IProps {
   initialValues: Application;
   onFinish: (obj: Application) => void;
@@ -21,7 +23,7 @@ function ApplicationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
         <Input disabled={props.disabled} />
       </Form.Item>

ui/src/views/applications/integrations/AzureServiceBusIntegrationForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, Button, Select } from "antd";
 
 import { AzureServiceBusIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: AzureServiceBusIntegration;
   onFinish: (obj: AzureServiceBusIntegration) => void;
@@ -21,7 +23,7 @@ function AzureServiceBusIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Payload encoding"
         name="encoding"

ui/src/views/applications/integrations/GcpPubSubIntegrationForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, Button, Select } from "antd";
 
 import { GcpPubSubIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: GcpPubSubIntegration;
   onFinish: (obj: GcpPubSubIntegration) => void;
@@ -22,7 +24,7 @@ function GcpPubSubIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Payload encoding"
         name="encoding"

ui/src/views/applications/integrations/HttpIntegrationForm.tsx

@@ -3,6 +3,8 @@ import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 import { HttpIntegration, Encoding } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: HttpIntegration;
   onFinish: (obj: HttpIntegration) => void;
@@ -26,7 +28,7 @@ function HttpIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Payload encoding"
         name="encoding"

ui/src/views/applications/integrations/IftttIntegrationForm.tsx

@@ -4,6 +4,8 @@ import { Form, Input, AutoComplete, Button, Row, Col, Switch } from "antd";
 
 import { IftttIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   measurementKeys: string[];
   initialValues: IftttIntegration;
@@ -41,7 +43,7 @@ function IftttIntegrationForm(props: IProps) {
   });
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Key"
         name="key"

ui/src/views/applications/integrations/InfluxDbIntegrationForm.tsx

@@ -8,6 +8,8 @@ import {
   InfluxDbVersion,
 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: InfluxDbIntegration;
   onFinish: (obj: InfluxDbIntegration) => void;
@@ -44,7 +46,7 @@ function InfluxDbIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="InfluxDB version"
         name="version"

ui/src/views/applications/integrations/LoRaCloudIntegrationForm.tsx

@@ -8,6 +8,8 @@ import {
   LoraCloudModemGeolocationServices,
 } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: LoraCloudIntegration;
   onFinish: (obj: LoraCloudIntegration) => void;
@@ -85,7 +87,7 @@ function LoRaCloudIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Tabs>
         <Tabs.TabPane tab="Modem & Geolocation Services" key="1">
           <Form.Item

ui/src/views/applications/integrations/MyDevicesIntegrationForm.tsx

@@ -4,6 +4,8 @@ import { Form, Input, Button, Select } from "antd";
 
 import { MyDevicesIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: MyDevicesIntegration;
   onFinish: (obj: MyDevicesIntegration) => void;
@@ -36,7 +38,7 @@ function MyDevicesIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Select myDevices endpoint"
         name="endpoint"

ui/src/views/applications/integrations/PilotThingsIntegrationForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, Button } from "antd";
 
 import { PilotThingsIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: PilotThingsIntegration;
   onFinish: (obj: PilotThingsIntegration) => void;
@@ -20,7 +22,7 @@ function PilotThingsIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Pilot Things server"
         name="server"

ui/src/views/applications/integrations/ThingsBoardIntegrationForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, Button, Typography } from "antd";
 
 import { ThingsBoardIntegration } from "@chirpstack/chirpstack-api-grpc-web/api/application_pb";
 
+import { onFinishFailed } from "../../helpers";
+
 interface IProps {
   initialValues: ThingsBoardIntegration;
   onFinish: (obj: ThingsBoardIntegration) => void;
@@ -19,7 +21,7 @@ function ThingsBoardIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="ThingsBoard server"
         name="server"

ui/src/views/device-profile-templates/DeviceProfileTemplateForm.tsx

@@ -8,6 +8,7 @@ import { CodecRuntime, Measurement, MeasurementKind } from "@chirpstack/chirpsta
 import { Region, MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 import { ListDeviceProfileAdrAlgorithmsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
+import { onFinishFailed } from "../helpers";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 import CodeEditor from "../../components/CodeEditor";
 
@@ -117,7 +118,7 @@ function DeviceProfileTemplateForm(props: IProps) {
   const adrOptions = adrAlgorithms.map(v => <Select.Option value={v[0]}>{v[1]}</Select.Option>);
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <Tabs>
         <Tabs.TabPane tab="General" key="1">
           <Form.Item

ui/src/views/device-profiles/DeviceProfileForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs, Modal, Spin, Cascader, Card, notification } from "antd";
+import { Form, Input, Select, InputNumber, Switch, Row, Col, Button, Tabs, Modal, Spin, Cascader, Card } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 import {
@@ -24,7 +24,7 @@ import {
   DeviceProfileTemplate,
 } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_template_pb";
 
-import { getEnumName } from "../helpers";
+import { getEnumName, onFinishFailed } from "../helpers";
 import InternalStore from "../../stores/InternalStore";
 import DeviceProfileStore from "../../stores/DeviceProfileStore";
 import DeviceProfileTemplateStore from "../../stores/DeviceProfileTemplateStore";
@@ -305,14 +305,6 @@ function DeviceProfileForm(props: IProps) {
     props.onFinish(dp);
   };
 
-  const onFinishFailed = () => {
-    notification.error({
-      message: "Validation errors",
-      description: "Please inspect input fields for errors",
-      duration: 30,
-    });
-  };
-
   const onSupportsOtaaChange = (checked: boolean) => {
     setSupportsOtaa(checked);
   };

ui/src/views/devices/DeviceActivation.tsx

@@ -19,6 +19,8 @@ import AesKeyInput from "../../components/AesKeyInput";
 import DevAddrInput from "../../components/DevAddrInput";
 import DeviceStore from "../../stores/DeviceStore";
 
+import { onFinishFailed } from "../helpers";
+
 interface FormProps {
   disabled: boolean;
   initialValues: DeviceActivationPb;
@@ -46,7 +48,7 @@ function LW10DeviceActivationForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <DevAddrInput
         label="Device address"
         name="devAddr"
@@ -107,7 +109,7 @@ function LW11DeviceActivationForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <DevAddrInput
         label="Device address"
         name="devAddr"

ui/src/views/devices/DeviceForm.tsx

@@ -10,6 +10,7 @@ import {
   GetDeviceProfileResponse,
 } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
+import { onFinishFailed } from "../helpers";
 import EuiInput from "../../components/EuiInput";
 import { OptionsCallbackFunc, OptionCallbackFunc } from "../../components/Autocomplete";
 import AutocompleteInput from "../../components/AutocompleteInput";
@@ -79,7 +80,7 @@ function DeviceForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <Tabs>
         <Tabs.TabPane tab="Device" key="1">
           <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>

ui/src/views/devices/DeviceQueue.tsx

@@ -17,6 +17,7 @@ import {
   DeviceQueueItem,
 } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
 
+import { onFinishFailed } from "../helpers";
 import DataTable, { GetPageCallbackFunc } from "../../components/DataTable";
 import DeviceStore from "../../stores/DeviceStore";
 import CodeEditor from "../../components/CodeEditor";
@@ -157,7 +158,7 @@ function DeviceQueue(props: IProps) {
   return (
     <Space direction="vertical" style={{ width: "100%" }} size="large">
       <Card title="Enqueue">
-        <Form layout="horizontal" onFinish={onEnqueue} form={form} initialValues={{ fPort: 1 }}>
+        <Form layout="horizontal" onFinish={onEnqueue} onFinishFailed={onFinishFailed} form={form} initialValues={{ fPort: 1 }}>
           <Row>
             <Space direction="horizontal" style={{ width: "100%" }} size="large">
               <Form.Item name="confirmed" label="Confirmed" valuePropName="checked">

ui/src/views/devices/SetDeviceKeys.tsx

@@ -17,6 +17,7 @@ import {
 } from "@chirpstack/chirpstack-api-grpc-web/api/device_pb";
 import { MacVersion } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 
+import { onFinishFailed } from "../helpers";
 import AesKeyInput from "../../components/AesKeyInput";
 import DeviceStore from "../../stores/DeviceStore";
 
@@ -41,7 +42,7 @@ function LW10DeviceKeysForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <AesKeyInput
         label="Application key"
         name="nwkKey"
@@ -73,7 +74,7 @@ function LW11DeviceKeysForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <AesKeyInput
         label="Application key"
         tooltip="For LoRaWAN 1.1 devices. In case your device does not support LoRaWAN 1.1, update the device-profile first."
@@ -151,7 +152,7 @@ function SetDeviceKeys(props: IProps) {
   const flushDevNonces = () => {
     let req = new FlushDevNoncesRequest();
     req.setDevEui(props.device.getDevEui());
-    DeviceStore.flushDevNonces(req, () => {});
+    DeviceStore.flushDevNonces(req, () => { });
   };
 
   if (!deviceKeysRequested) {

ui/src/views/gateways/GatewayForm.tsx

@@ -6,6 +6,7 @@ import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import { Location } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 import { Gateway } from "@chirpstack/chirpstack-api-grpc-web/api/gateway_pb";
 
+import { onFinishFailed } from "../helpers";
 import EuiInput from "../../components/EuiInput";
 import Map, { Marker } from "../../components/Map";
 import LocationStore from "../../stores/LocationStore";
@@ -90,7 +91,7 @@ function GatewayForm(props: IProps) {
   const location: [number, number] = [latValue, lonValue];
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <Tabs>
         <Tabs.TabPane tab="General" key="1">
           <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>

ui/src/views/helpers.ts

@@ -1,3 +1,4 @@
+import { notification } from "antd";
 import { MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 
 export function formatMacVersion(m: MacVersion) {
@@ -50,3 +51,11 @@ export function getEnumName(enums: { [key: number]: string }, index: number) {
   }
   return "";
 }
+
+export function onFinishFailed() {
+  notification.error({
+    message: "Validation errors",
+    description: "Please inspect input fields for errors",
+    duration: 3,
+  });
+};

ui/src/views/multicast-groups/MulticastGroupForm.tsx

@@ -10,7 +10,7 @@ import {
 } from "@chirpstack/chirpstack-api-grpc-web/api/multicast_group_pb";
 import { ListRegionsResponse, RegionListItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
-import { getEnumName } from "../helpers";
+import { getEnumName, onFinishFailed } from "../helpers";
 import InternalStore from "../../stores/InternalStore";
 import AesKeyInput from "../../components/AesKeyInput";
 import DevAddrInput from "../../components/DevAddrInput";
@@ -63,7 +63,7 @@ function MulticastGroupForm(props: IProps) {
     .map(v => <Select.Option value={v}>{getEnumName(Region, v).replace("_", "-")}</Select.Option>);
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} form={form}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
       <Form.Item label="Multicast-group name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
         <Input disabled={props.disabled} />
       </Form.Item>

ui/src/views/tenants/TenantForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, InputNumber, Switch, Row, Col, Button } from "antd";
 
 import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
+import { onFinishFailed } from "../helpers";
+
 interface IProps {
   initialValues: Tenant;
   onFinish: (obj: Tenant) => void;
@@ -26,7 +28,7 @@ function TenantForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
         <Input disabled={props.disabled} />
       </Form.Item>

ui/src/views/tenants/TenantUserForm.tsx

@@ -3,6 +3,8 @@ import { Form, Input, Switch, Row, Col, Button } from "antd";
 
 import { TenantUser } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
+import { onFinishFailed } from "../helpers";
+
 interface IProps {
   initialValues: TenantUser;
   onFinish: (obj: TenantUser) => void;
@@ -36,7 +38,7 @@ function TenantUserForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item
         label="Email (of existing user)"
         tooltip="An user without additional permissions will be able to see all resources under this tenant and will be able to send and receive device payloads."

ui/src/views/users/PasswordForm.tsx

@@ -1,5 +1,7 @@
 import { Form, Input, Button, notification } from "antd";
 
+import { onFinishFailed } from "../helpers";
+
 interface FormValues {
   password: string;
   passwordConfirm: string;
@@ -22,7 +24,7 @@ function PasswordForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" onFinish={onFinish}>
+    <Form layout="vertical" onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item label="Password" name="password" rules={[{ required: true, message: "Please enter a password!" }]}>
         <Input type="password" />
       </Form.Item>

ui/src/views/users/UserForm.tsx

@@ -2,6 +2,8 @@ import { Form, Input, Switch, Row, Col, Button } from "antd";
 
 import { User } from "@chirpstack/chirpstack-api-grpc-web/api/user_pb";
 
+import { onFinishFailed } from "../helpers";
+
 interface IProps {
   initialValues: User;
   onFinish: (obj: User, password: string) => void;
@@ -27,7 +29,7 @@ function UserForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish}>
+    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
       <Form.Item label="Email" name="email" rules={[{ required: true, message: "Please enter an email address!" }]}>
         <Input />
       </Form.Item>