Config page updates and fix for #65 (#66)

* Update User.tsx

Fix Issue #65

* Add descriptions and spelling fixes

Start to add descriptions for Module configs Canned message, serial, range test and telemetry.
Fixes for Config pages for Bluetooth, LoRa, Position and Power

* Updates to Power and position config pages

Part of previous commit. Spelling and description updates.

* Revert "Add descriptions and spelling fixes"

This reverts commit to Peers.tsx.

* Module config pages description updates

Additional updates for External Notification and MQTT config pages.

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -80,7 +80,7 @@ export const CannedMessage = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Module Enabled"
-            description="Description"
+            description="Enable canned messages"
             checked={value}
             {...rest}
           />
@@ -92,7 +92,6 @@ export const CannedMessage = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Rotary Encoder #1 Enabled"
-            description="Description"
             checked={value}
             {...rest}
           />
@@ -100,28 +99,28 @@ export const CannedMessage = (): JSX.Element => {
       />
       <Input
         label="Encoder Pin A"
-        description="Max transmit power in dBm"
+        description="GPIO Pin Value (1-39) For encoder port A"
         type="number"
         disabled={moduleEnabled}
         {...register("inputbrokerPinA", { valueAsNumber: true })}
       />
       <Input
         label="Encoder Pin B"
-        description="Max transmit power in dBm"
+        description="GPIO Pin Value (1-39) For encoder port B"
         type="number"
         disabled={moduleEnabled}
         {...register("inputbrokerPinB", { valueAsNumber: true })}
       />
       <Input
-        label="Endoer Pin Press"
-        description="Max transmit power in dBm"
+        label="Encoder Pin Press"
+        description="GPIO Pin Value (1-39) For encoder Press"
         type="number"
         disabled={moduleEnabled}
         {...register("inputbrokerPinPress", { valueAsNumber: true })}
       />
       <Select
         label="Clockwise event"
-        description="This is a description."
+        description="Select input event."
         disabled={moduleEnabled}
         {...register("inputbrokerEventCw", { valueAsNumber: true })}
       >
@@ -131,7 +130,7 @@ export const CannedMessage = (): JSX.Element => {
       </Select>
       <Select
         label="Counter Clockwise event"
-        description="This is a description."
+        description="Select input event."
         disabled={moduleEnabled}
         {...register("inputbrokerEventCcw", { valueAsNumber: true })}
       >
@@ -141,7 +140,7 @@ export const CannedMessage = (): JSX.Element => {
       </Select>
       <Select
         label="Press event"
-        description="This is a description."
+        description="Select input event"
         disabled={moduleEnabled}
         {...register("inputbrokerEventPress", { valueAsNumber: true })}
       >
@@ -155,7 +154,7 @@ export const CannedMessage = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Up Down enabled"
-            description="Description"
+            description="Enable the up / down encoder"
             checked={value}
             {...rest}
           />
@@ -163,7 +162,7 @@ export const CannedMessage = (): JSX.Element => {
       />
       <Input
         label="Allow Input Source"
-        description="Max transmit power in dBm"
+        description="Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'"
         disabled={moduleEnabled}
         {...register("allowInputSource")}
       />
@@ -173,7 +172,7 @@ export const CannedMessage = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Send Bell"
-            description="Description"
+            description="Sends a bell character with each message"
             checked={value}
             {...rest}
           />

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -76,7 +76,7 @@ export const ExternalNotification = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Module Enabled"
-            description="Description"
+            description="Enable External Notification"
             checked={value}
             {...rest}
           />
@@ -173,7 +173,7 @@ export const ExternalNotification = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Alert Bell"
-            description="Description"
+            description="Should an alert be triggered when receiving an incoming bell?"
             checked={value}
             {...rest}
           />

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -77,7 +77,7 @@ export const MQTT = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Module Enabled"
-            description="Description"
+            description="Enable MQTT"
             checked={value}
             {...rest}
           />
@@ -85,19 +85,19 @@ export const MQTT = (): JSX.Element => {
       />
       <Input
         label="MQTT Server Address"
-        description="Description"
+        //description="Description"
         disabled={!moduleEnabled}
         {...register("address")}
       />
       <Input
         label="MQTT Username"
-        description="Description"
+        description="MQTT username to use for default/custom servers"
         disabled={!moduleEnabled}
         {...register("username")}
       />
       <Input
         label="MQTT Password"
-        description="Description"
+        description="MQTT password to use for default/custom servers"
         type="password"
         autoComplete="off"
         disabled={!moduleEnabled}
@@ -109,7 +109,7 @@ export const MQTT = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Encryption Enabled"
-            description="Description"
+            //description="Description"
             checked={value}
             {...rest}
           />
@@ -121,7 +121,7 @@ export const MQTT = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="JSON Output Enabled"
-            description="Description"
+            description="Enable the sending / consumption of JSON packets on MQTT (Not encrypted)"
             checked={value}
             {...rest}
           />

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -77,7 +77,6 @@ export const RangeTest = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Module Enabled"
-            description="Description"
             checked={value}
             {...rest}
           />
@@ -86,7 +85,7 @@ export const RangeTest = (): JSX.Element => {
       <Input
         type="number"
         label="Message Interval"
-        description="Max transmit power in dBm"
+        description="How long to wait between sending test packets"
         disabled={!moduleEnabled}
         suffix="Seconds"
         {...register("sender", {
@@ -99,7 +98,7 @@ export const RangeTest = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Save CSV to storage"
-            description="Description"
+            description="ESP32 Only"
             checked={value}
             {...rest}
           />

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -10,6 +10,9 @@ import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
 import { Form } from "@components/form/Form";
 import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+import { renderOptions } from "@app/core/utils/selectEnumOptions";
+import { Select } from "@app/components/form/Select";
 
 export const Serial = (): JSX.Element => {
   const { moduleConfig, connection, setModuleConfig } = useDevice();
@@ -77,7 +80,7 @@ export const Serial = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Module Enabled"
-            description="Description"
+            description="Enable Serial output"
             checked={value}
             {...rest}
           />
@@ -89,7 +92,7 @@ export const Serial = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Echo"
-            description="Description"
+            description="Any packets you send will be echoed back to your device"
             checked={value}
             {...rest}
           />
@@ -97,8 +100,8 @@ export const Serial = (): JSX.Element => {
       />
       <Input
         type="number"
-        label="RX"
-        description="Max transmit power in dBm"
+        label="RX Pin"
+        description="Set the GPIO pin to the RXD pin you have set up."
         disabled={!moduleEnabled}
         {...register("rxd", {
           valueAsNumber: true
@@ -107,39 +110,38 @@ export const Serial = (): JSX.Element => {
       <Input
         type="number"
         label="TX Pin"
-        description="Max transmit power in dBm"
+        description="Set the GPIO pin to the TXD pin you have set up."
         disabled={!moduleEnabled}
         {...register("txd", {
           valueAsNumber: true
         })}
       />
-      <Input
-        type="number"
+      <Select
         label="Baud Rate"
-        description="Max transmit power in dBm"
+        description="The serial baud rate"
         disabled={!moduleEnabled}
-        {...register("baud", {
-          valueAsNumber: true
-        })}
-      />
+        {...register("baud", { valueAsNumber: true })}
+        >
+        {renderOptions(Protobuf.ModuleConfig_SerialConfig_Serial_Baud)}
+        </Select>
       <Input
         type="number"
         label="Timeout"
-        description="Max transmit power in dBm"
+        suffix="Seconds"
+        description="Seconds to wait before we consider your packet as 'done'"
         disabled={!moduleEnabled}
         {...register("timeout", {
           valueAsNumber: true
         })}
       />
-      <Input
-        type="number"
+      <Select
         label="Mode"
-        description="Max transmit power in dBm"
+        description="Select Mode"
         disabled={!moduleEnabled}
-        {...register("mode", {
-          valueAsNumber: true
-        })}
-      />
+        {...register("mode", { valueAsNumber: true })}
+        > 
+        {renderOptions(Protobuf.ModuleConfig_SerialConfig_Serial_Mode)}
+      </Select>
     </Form>
   );
 };

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -71,7 +71,7 @@ export const Telemetry = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Module Enabled"
-            description="Description"
+            description="Enable the Environment Telemetry"
             checked={value}
             {...rest}
           />
@@ -83,7 +83,7 @@ export const Telemetry = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Displayed on Screen"
-            description="Description"
+            description="Show the Telemetry Module on the OLED"
             checked={value}
             {...rest}
           />
@@ -91,7 +91,7 @@ export const Telemetry = (): JSX.Element => {
       />
       <Input
         label="Update Interval"
-        description="Max transmit power in dBm"
+        description="How often to send Metrics over the mesh"
         suffix="Seconds"
         type="number"
         {...register("environmentUpdateInterval", {
@@ -103,8 +103,8 @@ export const Telemetry = (): JSX.Element => {
         control={control}
         render={({ field: { value, ...rest } }) => (
           <Toggle
-            label="Display Farenheit"
-            description="Description"
+            label="Display Fahrenheit"
+            description="Display temp in Fahrenheit"
             checked={value}
             {...rest}
           />