ui: Run code formatter.

ui/src/components/Header.tsx

@@ -92,23 +92,23 @@ function Header({ user }: { user: User }) {
     label: any;
     options: any[];
   }[] = [
-      {
+    {
-        label: renderTitle("Tenants"),
+      label: renderTitle("Tenants"),
-        options: [],
+      options: [],
-      },
+    },
-      {
+    {
-        label: renderTitle("Gateways"),
+      label: renderTitle("Gateways"),
-        options: [],
+      options: [],
-      },
+    },
-      {
+    {
-        label: renderTitle("Applications"),
+      label: renderTitle("Applications"),
-        options: [],
+      options: [],
-      },
+    },
-      {
+    {
-        label: renderTitle("Devices"),
+      label: renderTitle("Devices"),
-        options: [],
+      options: [],
-      },
+    },
-    ];
+  ];
 
   if (searchResult !== undefined) {
     for (const res of searchResult.getResultList()) {

ui/src/index.css

@@ -22,7 +22,7 @@
   float: right;
 }
 
-.layout-header .actions>div {
+.layout-header .actions > div {
   display: inline;
   padding-left: 24px;
 }
@@ -46,7 +46,7 @@
   margin-top: 65px;
 }
 
-.layout-content .content-header>* {
+.layout-content .content-header > * {
   float: right;
 }
 
@@ -74,11 +74,11 @@ pre {
   display: block;
 }
 
-.chart-doughnut>canvas {
+.chart-doughnut > canvas {
   width: 100vh;
 }
 
-.dashboard-chart>.ant-card-body {
+.dashboard-chart > .ant-card-body {
   height: 300px;
 }
 
@@ -127,4 +127,4 @@ pre {
 
 .input-code input {
   font-family: monospace !important;
-}
+}

ui/src/stores/SessionStore.ts

@@ -24,7 +24,7 @@ class SessionStore extends EventEmitter {
     this.client = new InternalServiceClient("");
     this.tenants = [];
 
-    this.fetchProfile(() => { });
+    this.fetchProfile(() => {});
   }
 
   login = (email: string, password: string, callbackFunc: any) => {

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

@@ -17,7 +17,12 @@ function ApiKeyForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -29,7 +29,12 @@ function ApplicationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    >
       <Tabs>
         <Tabs.TabPane tab="General" key="1">
           <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>

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

@@ -23,7 +23,12 @@ function AzureServiceBusIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -24,7 +24,12 @@ function GcpPubSubIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -28,7 +28,12 @@ function HttpIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -43,7 +43,12 @@ function IftttIntegrationForm(props: IProps) {
   });
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    >
       <Form.Item
         label="Key"
         name="key"

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

@@ -46,7 +46,12 @@ function InfluxDbIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -87,7 +87,12 @@ function LoRaCloudIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -38,7 +38,12 @@ function MyDevicesIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -22,7 +22,12 @@ function PilotThingsIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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

@@ -21,7 +21,12 @@ function ThingsBoardIntegrationForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    >
       <Form.Item
         label="ThingsBoard server"
         name="server"

ui/src/views/dashboard/Dashboard.tsx

@@ -119,7 +119,11 @@ function DevicesActiveInactive({ summary }: { summary?: GetDevicesSummaryRespons
     maintainAspectRatio: false,
   };
 
-  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
+  return (
+    <div className="chart-doughnut">
+      <Doughnut data={data} options={options} />
+    </div>
+  );
 }
 
 function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryResponse }) {
@@ -150,7 +154,11 @@ function GatewaysActiveInactive({ summary }: { summary?: GetGatewaysSummaryRespo
     maintainAspectRatio: false,
   };
 
-  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
+  return (
+    <div className="chart-doughnut">
+      <Doughnut data={data} options={options} />
+    </div>
+  );
 }
 
 function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse }) {
@@ -210,7 +218,11 @@ function DevicesDataRates({ summary }: { summary?: GetDevicesSummaryResponse })
     maintainAspectRatio: false,
   };
 
-  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
+  return (
+    <div className="chart-doughnut">
+      <Doughnut data={data} options={options} />
+    </div>
+  );
 }
 
 function Dashboard() {

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

@@ -118,7 +118,13 @@ 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} onFinishFailed={onFinishFailed} 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

@@ -404,7 +404,13 @@ function DeviceProfileForm(props: IProps) {
   );
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      form={form}
+    >
       <TemplateModal visible={templateModalVisible} onOk={onTemplateModalOk} onCancel={onTemplateModalCancel} />
       <Tabs tabBarExtraContent={operations} activeKey={tabActive} onChange={onTabChange}>
         <Tabs.TabPane tab="General" key="1" forceRender>
@@ -1136,11 +1142,7 @@ function DeviceProfileForm(props: IProps) {
                       </Form.Item>
                     </Col>
                     <Col span={10}>
-                      <Form.Item
+                      <Form.Item {...restField} name={[name, 1, "name"]} fieldKey={[name, 1, "name"]}>
-                        {...restField}
-                        name={[name, 1, "name"]}
-                        fieldKey={[name, 1, "name"]}
-                      >
                         <Input placeholder="Measurement name" disabled={props.disabled} />
                       </Form.Item>
                     </Col>

ui/src/views/devices/DeviceActivation.tsx

@@ -48,7 +48,13 @@ function LW10DeviceActivationForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      form={form}
+    >
       <DevAddrInput
         label="Device address"
         name="devAddr"
@@ -109,7 +115,13 @@ function LW11DeviceActivationForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} 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

@@ -80,7 +80,13 @@ function DeviceForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} 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/DeviceLayout.tsx

@@ -71,7 +71,7 @@ function DeviceLayout(props: IProps) {
         setDeviceProfile(resp.getDeviceProfile());
       });
     });
-  }
+  };
 
   const deleteDevice = () => {
     let req = new DeleteDeviceRequest();

ui/src/views/devices/DeviceQueue.tsx

@@ -175,7 +175,13 @@ function DeviceQueue(props: IProps) {
   return (
     <Space direction="vertical" style={{ width: "100%" }} size="large">
       <Card title="Enqueue">
-        <Form layout="horizontal" onFinish={onEnqueue} onFinishFailed={onFinishFailed} 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">
@@ -192,13 +198,15 @@ function DeviceQueue(props: IProps) {
               >
                 <Switch onChange={setIsEncrypted} />
               </Form.Item>
-              {isEncrypted && (<Form.Item
+              {isEncrypted && (
-                name="fCntDown"
+                <Form.Item
-                label="Downlink frame-counter used for encryption"
+                  name="fCntDown"
-                rules={[{ required: true, message: "Please enter a downlink frame-counter!" }]}
+                  label="Downlink frame-counter used for encryption"
-              >
+                  rules={[{ required: true, message: "Please enter a downlink frame-counter!" }]}
-                <InputNumber min={0} />
+                >
-              </Form.Item>)}
+                  <InputNumber min={0} />
+                </Form.Item>
+              )}
             </Space>
           </Row>
           <Tabs defaultActiveKey="1">

ui/src/views/devices/SetDeviceKeys.tsx

@@ -42,7 +42,13 @@ function LW10DeviceKeysForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} form={form}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      form={form}
+    >
       <AesKeyInput
         label="Application key"
         name="nwkKey"
@@ -74,7 +80,13 @@ function LW11DeviceKeysForm(props: FormProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} 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."
@@ -152,7 +164,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

@@ -91,7 +91,13 @@ function GatewayForm(props: IProps) {
   const location: [number, number] = [latValue, lonValue];
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed} 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

@@ -58,4 +58,4 @@ export function onFinishFailed() {
     description: "Please inspect input fields for errors",
     duration: 3,
   });
-};
+}

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

@@ -63,7 +63,13 @@ 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} onFinishFailed={onFinishFailed} 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/TenantDashboard.tsx

@@ -124,7 +124,11 @@ function GatewaysActiveInactive(props: GatewayProps) {
     maintainAspectRatio: false,
   };
 
-  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
+  return (
+    <div className="chart-doughnut">
+      <Doughnut data={data} options={options} />
+    </div>
+  );
 }
 
 interface DeviceProps {
@@ -161,7 +165,11 @@ function DevicesActiveInactive(props: DeviceProps) {
     maintainAspectRatio: false,
   };
 
-  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
+  return (
+    <div className="chart-doughnut">
+      <Doughnut data={data} options={options} />
+    </div>
+  );
 }
 
 function DevicesDataRates(props: DeviceProps) {
@@ -221,7 +229,11 @@ function DevicesDataRates(props: DeviceProps) {
     maintainAspectRatio: false,
   };
 
-  return <div className="chart-doughnut"><Doughnut data={data} options={options} /></div>;
+  return (
+    <div className="chart-doughnut">
+      <Doughnut data={data} options={options} />
+    </div>
+  );
 }
 
 function TenantDashboard({ tenant }: { tenant: Tenant }) {

ui/src/views/tenants/TenantForm.tsx

@@ -34,7 +34,12 @@ function TenantForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <Form
+      layout="vertical"
+      initialValues={props.initialValues.toObject()}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    >
       <Tabs>
         <Tabs.TabPane tab="General" key="1">
           <Form.Item label="Name" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
@@ -123,17 +128,20 @@ function TenantForm(props: IProps) {
                         <Input placeholder="Value" disabled={props.disabled} />
                       </Form.Item>
                     </Col>
-                    {!props.disabled &&
+                    {!props.disabled && (
                       <Col span={2}>
                         <MinusCircleOutlined onClick={() => remove(name)} />
-                      </Col>}
+                      </Col>
+                    )}
                   </Row>
                 ))}
-                {!props.disabled && <Form.Item>
+                {!props.disabled && (
-                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                  <Form.Item>
-                    Add tag
+                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
-                  </Button>
+                      Add tag
-                </Form.Item>}
+                    </Button>
+                  </Form.Item>
+                )}
               </>
             )}
           </Form.List>

ui/src/views/tenants/TenantUserForm.tsx

@@ -38,7 +38,12 @@ function TenantUserForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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/Login.tsx

@@ -4,7 +4,11 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { Row, Col, Card } from "antd";
 import { Form, Input, Button } from "antd";
 
-import { SettingsResponse, OpenIdConnectLoginRequest, OAuth2LoginRequest } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
+import {
+  SettingsResponse,
+  OpenIdConnectLoginRequest,
+  OAuth2LoginRequest,
+} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
 
 import SessionStore from "../../stores/SessionStore";
 import InternalStore from "../../stores/InternalStore";
@@ -54,7 +58,6 @@ function OidcLogin({ loginUrl, loginLabel }: OidcLoginProps) {
   );
 }
 
-
 function OAuth2Login({ loginUrl, loginLabel }: OAuth2LoginProps) {
   return (
     <Row style={{ marginTop: "200px" }}>
@@ -134,7 +137,7 @@ function Login() {
   const [oAuth2LoginUrl, setOAuth2LoginUrl] = useState<string>("");
 
   useEffect(() => {
-    SessionStore.logout(true, () => { });
+    SessionStore.logout(true, () => {});
 
     InternalStore.settings((resp: SettingsResponse) => {
       const oidc = resp.getOpenidConnect()!;

ui/src/views/users/UserForm.tsx

@@ -29,7 +29,12 @@ function UserForm(props: IProps) {
   };
 
   return (
-    <Form layout="vertical" initialValues={props.initialValues.toObject()} onFinish={onFinish} onFinishFailed={onFinishFailed}>
+    <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>