Format UI code.

ui/src/components/AesKeyInput.tsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 
 import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
 import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
-import {Buffer} from "buffer";
+import { Buffer } from "buffer";
 
 interface IProps {
   formRef: React.RefObject<any>;
@@ -108,13 +108,15 @@ class AesKeyInput extends Component<IProps, IState> {
     const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
 
     if (bytes !== null && navigator.clipboard !== undefined) {
-        navigator.clipboard.writeText(bytes.join("").toUpperCase())
+      navigator.clipboard
+        .writeText(bytes.join("").toUpperCase())
         .then(() => {
           notification.success({
             message: "Copied to clipboard",
             duration: 3,
           });
-        }).catch((e) => {
+        })
+        .catch(e => {
           notification.error({
             message: "Error",
             description: e,
@@ -122,19 +124,26 @@ class AesKeyInput extends Component<IProps, IState> {
           });
         });
     }
-  }
+  };
 
   copyToClipboardHexArray = () => {
     const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
 
     if (bytes !== null && navigator.clipboard !== undefined) {
-        navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
+      navigator.clipboard
+        .writeText(
+          bytes
+            .join(", ")
+            .toUpperCase()
+            .replace(/[A-Fa-f0-9]{2}/g, "0x$&"),
+        )
         .then(() => {
           notification.success({
             message: "Copied to clipboard",
             duration: 3,
           });
-        }).catch((e) => {
+        })
+        .catch(e => {
           notification.error({
             message: "Error",
             description: e,
@@ -142,19 +151,31 @@ class AesKeyInput extends Component<IProps, IState> {
           });
         });
     }
-  }
+  };
 
   render() {
-    const copyMenu = <Menu items={[
+    const copyMenu = (
+      <Menu
+        items={[
           {
             key: "1",
-        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+            label: (
+              <Button type="text" onClick={this.copyToClipboard}>
+                HEX string
+              </Button>
+            ),
           },
           {
             key: "2",
-        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+            label: (
+              <Button type="text" onClick={this.copyToClipboardHexArray}>
+                HEX array
+              </Button>
+            ),
           },
-    ]} />;
+        ]}
+      />
+    );
 
     const addon = (
       <Space size="large">

ui/src/components/DevAddrInput.tsx

@@ -107,18 +107,19 @@ class DevAddrInput extends Component<IProps, IState> {
     });
   };
 
-
   copyToClipboard = () => {
     const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
 
     if (bytes !== null && navigator.clipboard !== undefined) {
-        navigator.clipboard.writeText(bytes.join("").toUpperCase())
+      navigator.clipboard
+        .writeText(bytes.join("").toUpperCase())
         .then(() => {
           notification.success({
             message: "Copied to clipboard",
             duration: 3,
           });
-        }).catch((e) => {
+        })
+        .catch(e => {
           notification.error({
             message: "Error",
             description: e,
@@ -126,19 +127,26 @@ class DevAddrInput extends Component<IProps, IState> {
           });
         });
     }
-  }
+  };
 
   copyToClipboardHexArray = () => {
     const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
 
     if (bytes !== null && navigator.clipboard !== undefined) {
-        navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
+      navigator.clipboard
+        .writeText(
+          bytes
+            .join(", ")
+            .toUpperCase()
+            .replace(/[A-Fa-f0-9]{2}/g, "0x$&"),
+        )
         .then(() => {
           notification.success({
             message: "Copied to clipboard",
             duration: 3,
           });
-        }).catch((e) => {
+        })
+        .catch(e => {
           notification.error({
             message: "Error",
             description: e,
@@ -146,20 +154,31 @@ class DevAddrInput extends Component<IProps, IState> {
           });
         });
     }
-  }
+  };
-
 
   render() {
-    const copyMenu = <Menu items={[
+    const copyMenu = (
+      <Menu
+        items={[
           {
             key: "1",
-        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+            label: (
+              <Button type="text" onClick={this.copyToClipboard}>
+                HEX string
+              </Button>
+            ),
           },
           {
             key: "2",
-        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+            label: (
+              <Button type="text" onClick={this.copyToClipboardHexArray}>
+                HEX array
+              </Button>
+            ),
           },
-    ]} />;
+        ]}
+      />
+    );
 
     const addon = (
       <Space size="large">

ui/src/components/EuiInput.tsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 
 import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
 import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
-import {Buffer} from "buffer";
+import { Buffer } from "buffer";
 
 interface IProps {
   formRef: React.RefObject<any>;
@@ -107,13 +107,15 @@ class EuiInput extends Component<IProps, IState> {
     const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
 
     if (bytes !== null && navigator.clipboard !== undefined) {
-        navigator.clipboard.writeText(bytes.join("").toUpperCase())
+      navigator.clipboard
+        .writeText(bytes.join("").toUpperCase())
         .then(() => {
           notification.success({
             message: "Copied to clipboard",
             duration: 3,
           });
-        }).catch((e) => {
+        })
+        .catch(e => {
           notification.error({
             message: "Error",
             description: e,
@@ -121,19 +123,26 @@ class EuiInput extends Component<IProps, IState> {
           });
         });
     }
-  }
+  };
 
   copyToClipboardHexArray = () => {
     const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
 
     if (bytes !== null && navigator.clipboard !== undefined) {
-        navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
+      navigator.clipboard
+        .writeText(
+          bytes
+            .join(", ")
+            .toUpperCase()
+            .replace(/[A-Fa-f0-9]{2}/g, "0x$&"),
+        )
         .then(() => {
           notification.success({
             message: "Copied to clipboard",
             duration: 3,
           });
-        }).catch((e) => {
+        })
+        .catch(e => {
           notification.error({
             message: "Error",
             description: e,
@@ -141,19 +150,31 @@ class EuiInput extends Component<IProps, IState> {
           });
         });
     }
-  }
+  };
 
   render() {
-    const copyMenu = <Menu items={[
+    const copyMenu = (
+      <Menu
+        items={[
           {
             key: "1",
-        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+            label: (
+              <Button type="text" onClick={this.copyToClipboard}>
+                HEX string
+              </Button>
+            ),
           },
           {
             key: "2",
-        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+            label: (
+              <Button type="text" onClick={this.copyToClipboardHexArray}>
+                HEX array
+              </Button>
+            ),
           },
-    ]} />;
+        ]}
+      />
+    );
 
     const addon = (
       <Space size="large">

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

@@ -237,7 +237,7 @@ class DeviceProfileForm extends Component<IProps, IState> {
     this.setState({
       tabActive: activeKey,
     });
-  }
+  };
 
   onFinish = (values: DeviceProfile.AsObject) => {
     const v = Object.assign(this.props.initialValues.toObject(), values);
@@ -280,7 +280,6 @@ class DeviceProfileForm extends Component<IProps, IState> {
       dp.getTagsMap().set(elm[0], elm[1]);
     }
 
-
     this.props.onFinish(dp);
   };
 
@@ -348,47 +347,67 @@ class DeviceProfileForm extends Component<IProps, IState> {
 
     const tabActive = this.state.tabActive;
 
-    this.setState({
+    this.setState(
+      {
         supportsOtaa: dp.getSupportsOtaa(),
         supportsClassB: dp.getSupportsClassB(),
         supportsClassC: dp.getSupportsClassC(),
         payloadCodecRuntime: dp.getPayloadCodecRuntime(),
-    }, () => {
+      },
+      () => {
         // This is a workaround as without rendering the TabPane (e.g. the user
         // does not click through the different tabs), setFieldsValue does not
         // actually update the fields. For example if selecting a template with
         // a codec script and immediately click the save button, no codec script
         // is passed to the onFinish function. This seems to be with every field
         // that is not actually rendered before clicking the Save button.
-      this.setState({
+        this.setState(
+          {
             tabActive: "1",
-      }, () => {
+          },
-        this.setState({
+          () => {
+            this.setState(
+              {
                 tabActive: "2",
-        }, () => {
+              },
-          this.setState({
+              () => {
+                this.setState(
+                  {
                     tabActive: "3",
-          }, () => {
+                  },
-            this.setState({
+                  () => {
+                    this.setState(
+                      {
                         tabActive: "4",
-            }, () => {
+                      },
-              this.setState({
+                      () => {
+                        this.setState(
+                          {
                             tabActive: "5",
-              }, () => {
+                          },
-                this.setState({
+                          () => {
+                            this.setState(
+                              {
                                 tabActive: "6",
-                }, () => {
+                              },
+                              () => {
                                 this.setState({
                                   tabActive: tabActive,
                                 });
-                });
+                              },
-              });
+                            );
-            });
+                          },
-          });
+                        );
-        });
+                      },
-      });
+                    );
-    });
+                  },
-
+                );
+              },
+            );
+          },
+        );
+      },
+    );
   };
 
   onTemplateModalCancel = () => {

ui/src/views/devices/DeviceQueue.tsx

@@ -6,7 +6,7 @@ import { notification } from "antd";
 import { Button, Tabs, Space, Card, Row, Form, Input, InputNumber, Checkbox, Popconfirm } from "antd";
 import { ColumnsType } from "antd/es/table";
 import { RedoOutlined, DeleteOutlined } from "@ant-design/icons";
-import {Buffer} from "buffer";
+import { Buffer } from "buffer";
 
 import {
   Device,