minor bug fixes

frontend/css/farm_designer/farm_designer_panels.scss

@@ -552,7 +552,7 @@
   }
   .tool-slots-panel-content,
   .tools-panel-content {
-    max-height: calc(100vh - 15rem);
+    max-height: calc(100vh - 19rem);
     overflow-y: auto;
     overflow-x: hidden;
     .tool-search-item,
@@ -582,7 +582,7 @@
           }
         }
         i {
-          line-height: 2.5rem;
+          line-height: 2rem;
         }
       }
       svg {

frontend/devices/components/fbos_settings/fbos_details.tsx

@@ -55,21 +55,24 @@ export function ChipTemperatureDisplay(
 interface WiFiStrengthDisplayProps {
   wifiStrength: number | undefined;
   wifiStrengthPercent?: number | undefined;
+  extraInfo?: boolean;
 }
 
 /** WiFi signal strength display row: label, strength, indicator. */
 export function WiFiStrengthDisplay(
-  { wifiStrength, wifiStrengthPercent }: WiFiStrengthDisplayProps
+  { wifiStrength, wifiStrengthPercent, extraInfo }: WiFiStrengthDisplayProps
 ): JSX.Element {
   const percent = wifiStrength
     ? Math.round(-0.0154 * wifiStrength ** 2 - 0.4 * wifiStrength + 98)
     : 0;
   const dbString = `${wifiStrength || 0}dBm`;
   const percentString = `${wifiStrengthPercent || percent}%`;
+  const numberDisplay =
+    extraInfo ? `${percentString} (${dbString})` : percentString;
   return <div className="wifi-strength-display">
     <p>
       <b>{t("WiFi strength")}: </b>
-      {wifiStrength ? `${dbString} (${percentString})` : "N/A"}
+      {wifiStrength ? numberDisplay : "N/A"}
     </p>
     {wifiStrength &&
       <div className="percent-bar">
@@ -287,7 +290,7 @@ export function FbosDetails(props: FbosDetailsProps) {
     {isNumber(disk_usage) && <p><b>{t("Disk usage")}: </b>{disk_usage}%</p>}
     {isNumber(cpu_usage) && <p><b>{t("CPU usage")}: </b>{cpu_usage}%</p>}
     <ChipTemperatureDisplay chip={target} temperature={soc_temp} />
-    <WiFiStrengthDisplay
+    <WiFiStrengthDisplay extraInfo={true}
       wifiStrength={wifi_level} wifiStrengthPercent={wifi_level_percent} />
     <VoltageDisplay chip={target} throttled={throttled} />
     <BetaReleaseOptIn

frontend/devices/connectivity/connectivity.tsx

@@ -31,7 +31,9 @@ export class Connectivity
 
   render() {
     const { informational_settings } = this.props.bot.hardware;
-    const { soc_temp, wifi_level, throttled } = informational_settings;
+    const {
+      soc_temp, wifi_level, throttled, wifi_level_percent
+    } = informational_settings;
     return <div className="connectivity">
       <Row>
         <Col md={12} lg={4}>
@@ -42,7 +44,8 @@ export class Connectivity
           <div className="fbos-info">
             <label>{t("Raspberry Pi Info")}</label>
             <ChipTemperatureDisplay temperature={soc_temp} />
-            <WiFiStrengthDisplay wifiStrength={wifi_level} />
+            <WiFiStrengthDisplay wifiStrength={wifi_level}
+              wifiStrengthPercent={wifi_level_percent} />
             <VoltageDisplay throttled={throttled} />
           </div>
           <QosPanel pings={this.props.pings} />

frontend/devices/pin_bindings/__tests__/list_and_label_support_test.tsx

@@ -1,4 +1,6 @@
-import { sortByNameAndPin, ButtonPin, getSpecialActionLabel } from "../list_and_label_support";
+import {
+  sortByNameAndPin, ButtonPin, getSpecialActionLabel
+} from "../list_and_label_support";
 import { PinBindingSpecialAction } from "farmbot/dist/resources/api_resources";
 
 describe("sortByNameAndPin()", () => {

frontend/devices/pin_bindings/list_and_label_support.tsx

@@ -92,7 +92,7 @@ export const reservedPiGPIO = piI2c0Pins;
 const GPIO_PIN_LABELS = (): { [x: number]: string } => ({
   [ButtonPin.estop]: t("Button {{ num }}: E-STOP", { num: 1 }),
   [ButtonPin.unlock]: t("Button {{ num }}: UNLOCK", { num: 2 }),
-  [ButtonPin.btn3]: t("Button {{ num }})", { num: 3 }),
+  [ButtonPin.btn3]: t("Button {{ num }}", { num: 3 }),
   [ButtonPin.btn4]: t("Button {{ num }}", { num: 4 }),
   [ButtonPin.btn5]: t("Button {{ num }}", { num: 5 }),
 });

frontend/farm_designer/tools/__tests__/tool_slot_edit_components_test.tsx

@@ -62,6 +62,7 @@ describe("<ToolSelection />", () => {
     onChange: jest.fn(),
     filterSelectedTool: false,
     isActive: jest.fn(),
+    filterActiveTools: true,
   });
 
   it("renders", () => {

frontend/farm_designer/tools/index.tsx

@@ -137,7 +137,8 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
           this.props.dispatch(save(this.props.device.uuid));
         }}
         isActive={this.props.isActive}
-        filterSelectedTool={true} />
+        filterSelectedTool={true}
+        filterActiveTools={false} />
       <div className="tool-verification-status">
         <p>{t("status")}: {toolStatus(this.toolVerificationValue)}</p>
         <button
@@ -281,7 +282,8 @@ export const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
               props.dispatch(save(props.toolSlot.uuid));
             }}
             isActive={props.isActive}
-            filterSelectedTool={false} />
+            filterSelectedTool={false}
+            filterActiveTools={true} />
         </div>
       </Col>
       <Col xs={4} className={"tool-slot-position-info"}>

frontend/farm_designer/tools/tool_slot_edit_components.tsx

@@ -57,6 +57,7 @@ export interface ToolSelectionProps {
   onChange(update: { tool_id: number }): void;
   filterSelectedTool: boolean;
   isActive(id: number | undefined): boolean;
+  filterActiveTools: boolean;
 }
 
 export const ToolSelection = (props: ToolSelectionProps) =>
@@ -64,7 +65,8 @@ export const ToolSelection = (props: ToolSelectionProps) =>
     list={([NULL_CHOICE] as DropDownItem[]).concat(props.tools
       .filter(tool => !props.filterSelectedTool
         || tool.body.id != props.selectedTool?.body.id)
-      .filter(tool => !props.isActive(tool.body.id))
+      .filter(tool => !props.filterActiveTools
+        || !props.isActive(tool.body.id))
       .map(tool => ({
         label: tool.body.name || "untitled",
         value: tool.body.id || 0,
@@ -100,7 +102,8 @@ export const ToolInputRow = (props: ToolInputRowProps) =>
           selectedTool={props.selectedTool}
           onChange={props.onChange}
           isActive={props.isActive}
-          filterSelectedTool={false} />
+          filterSelectedTool={false}
+          filterActiveTools={true} />
       </Col>
     </Row>
   </div>;