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
-        key: "1",
+        items={[
-        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+          {
-      },
+            key: "1",
-      {
+            label: (
-        key: "2",
+              <Button type="text" onClick={this.copyToClipboard}>
-        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+                HEX string
-      },
+              </Button>
-    ]} />;
+            ),
+          },
+          {
+            key: "2",
+            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
-        key: "1",
+        items={[
-        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+          {
-      },
+            key: "1",
-      {
+            label: (
-        key: "2",
+              <Button type="text" onClick={this.copyToClipboard}>
-        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+                HEX string
-      },
+              </Button>
-    ]} />;
+            ),
+          },
+          {
+            key: "2",
+            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
-        key: "1",
+        items={[
-        label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
+          {
-      },
+            key: "1",
-      {
+            label: (
-        key: "2",
+              <Button type="text" onClick={this.copyToClipboard}>
-        label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
+                HEX string
-      },
+              </Button>
-    ]} />;
+            ),
+          },
+          {
+            key: "2",
+            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(),
+        supportsOtaa: dp.getSupportsOtaa(),
-      supportsClassC: dp.getSupportsClassC(),
+        supportsClassB: dp.getSupportsClassB(),
-      payloadCodecRuntime: dp.getPayloadCodecRuntime(),
+        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
+        // This is a workaround as without rendering the TabPane (e.g. the user
-      // a codec script and immediately click the save button, no codec script
+        // does not click through the different tabs), setFieldsValue does not
-      // is passed to the onFinish function. This seems to be with every field
+        // actually update the fields. For example if selecting a template with
-      // that is not actually rendered before clicking the Save button.
+        // a codec script and immediately click the save button, no codec script
-      this.setState({
+        // is passed to the onFinish function. This seems to be with every field
-        tabActive: "1",
+        // that is not actually rendered before clicking the Save button.
-      }, () => {
+        this.setState(
-        this.setState({
+          {
-          tabActive: "2",
+            tabActive: "1",
-        }, () => {
+          },
-          this.setState({
+          () => {
-            tabActive: "3",
+            this.setState(
-          }, () => {
+              {
-            this.setState({
+                tabActive: "2",
-              tabActive: "4",
+              },
-            }, () => {
+              () => {
-              this.setState({
+                this.setState(
-                tabActive: "5",
+                  {
-              }, () => {
+                    tabActive: "3",
-                this.setState({
+                  },
-                  tabActive: "6",
+                  () => {
-                }, () => {
+                    this.setState(
-                  this.setState({
+                      {
-                    tabActive: tabActive,
+                        tabActive: "4",
-                  });
+                      },
-                });
+                      () => {
-              });
+                        this.setState(
-            });
+                          {
-          });
+                            tabActive: "5",
-        });
+                          },
-      });
+                          () => {
-    });
+                            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,