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/Config/Bluetooth.tsx

@@ -81,7 +81,7 @@ export const Bluetooth = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Enabled"
-            description="Enable or disbale Bluetooth"
+            description="Enable or disable Bluetooth"
             checked={value}
             {...rest}
           />

src/components/PageComponents/Config/LoRa.tsx

@@ -138,7 +138,7 @@ export const LoRa = (): JSX.Element => {
           render={({ field: { value, ...rest } }) => (
             <Toggle
               label="Transmit Enabled"
-              description="Description"
+              description="Enable/Disable transmit (TX) from the LoRa radio"
               checked={value}
               {...rest}
             />

src/components/PageComponents/Config/Position.tsx

@@ -146,7 +146,7 @@ export const Position = (): JSX.Element => {
           return (
             <BitwiseSelect
               label="Position Flags"
-              description="Description"
+              description="Configuration options for POSITION messages"
               error={error?.message}
               selected={value}
               decodeEnun={Protobuf.Config_PositionConfig_PositionFlags}

src/components/PageComponents/Config/Power.tsx

@@ -80,7 +80,7 @@ export const Power = (): JSX.Element => {
         render={({ field: { value, ...rest } }) => (
           <Toggle
             label="Enable power saving mode"
-            description="Description"
+            description="Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible."
             checked={value}
             {...rest}
           />
@@ -129,7 +129,7 @@ export const Power = (): JSX.Element => {
       </FormSection>
       <Input
         label="No Connection Bluetooth Disabled"
-        description="If the device does not revieve a bluetooth connection, the BLE radio will be disabled after this long"
+        description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long"
         suffix="Seconds"
         type="number"
         error={errors.waitBluetoothSecs?.message}

src/components/PageComponents/Config/User.tsx

@@ -85,7 +85,7 @@ export const User = (): JSX.Element => {
       <Input
         label="Short Name"
         description="Shown on small screens."
-        maxLength={3}
+        maxLength={4}
         {...register("shortName")}
       />
       <Input

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}
           />