fix farmware nav bug

frontend/farmware/__tests__/farmware_test.tsx

@@ -53,6 +53,13 @@ describe("<FarmwarePage />", () => {
     expect(wrapper.text()).toContain("Take Photo");
   });
 
+  it("renders photos page by default without farmware data", () => {
+    const p = fakeProps();
+    p.farmwares = {};
+    const wrapper = mount(<FarmwarePage {...p} />);
+    expect(wrapper.text()).toContain("Take Photo");
+  });
+
   const TEST_DATA = {
     "Photos": ["Take Photo"],
     "take-photo": ["Take Photo"],

frontend/farmware/__tests__/set_active_farmware_by_name_test.ts

@@ -37,6 +37,15 @@ describe("setActiveFarmwareByName", () => {
     });
   });
 
+  it("finds a farmware by name: other match", () => {
+    mockLastUrlChunk = "weed_detector";
+    setActiveFarmwareByName(["plant_detection"]);
+    expect(store.dispatch).toHaveBeenCalledWith({
+      type: Actions.SELECT_FARMWARE,
+      payload: "plant_detection"
+    });
+  });
+
   it("handles undefined farmware names", () => {
     mockLastUrlChunk = "some_farmware";
     setActiveFarmwareByName([undefined]);

frontend/farmware/farmware_list.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import { urlFriendly } from "../util";
 import { Actions } from "../constants";
 import { Farmwares } from "./interfaces";
@@ -13,6 +12,7 @@ import { ShouldDisplay, Feature } from "../devices/interfaces";
 import { initSave } from "../api/crud";
 import { TaggedFarmwareInstallation } from "farmbot";
 import { t } from "../i18next_wrapper";
+import { getFormattedFarmwareName } from "./index";
 
 const DISPLAY_NAMES: Dictionary<string> = {
   "Photos": t("Photos"),
@@ -27,7 +27,7 @@ const farmwareListItem = (dispatch: Function, current: string | undefined) =>
       type: Actions.SELECT_FARMWARE,
       payload: farmwareName
     });
-    const selected = (farmwareName == current)
+    const selected = (farmwareName == getFormattedFarmwareName(current || ""))
       || (!current && farmwareName == "Photos")
       ? "selected" : "";
     const displayName = Object.keys(DISPLAY_NAMES).includes(farmwareName)
@@ -107,8 +107,7 @@ export class FarmwareList
                 this.props.firstPartyFarmwareNames)} />
         </Popover>
       </div>
-      {["Photos", "Camera Calibration", "Weed Detector"]
-        .map(farmwareListItem(dispatch, current))}
+      {Object.keys(DISPLAY_NAMES).map(farmwareListItem(dispatch, current))}
       <hr />
       <label>
         {t("My Farmware")}

frontend/farmware/index.tsx

@@ -24,6 +24,7 @@ import { getDevice } from "../device";
 import { t } from "../i18next_wrapper";
 import { isBotOnline } from "../devices/must_be_online";
 import { BooleanSetting } from "../session_keys";
+import { Dictionary } from "farmbot";
 
 /** Get the correct help text for the provided Farmware. */
 const getToolTipByFarmware =
@@ -75,6 +76,18 @@ const getFarmwareByName =
     }
   };
 
+const FARMWARE_NAMES_1ST_PARTY: Dictionary<string> = {
+  "take-photo": "Photos",
+  "camera-calibration": "Camera Calibration",
+  "plant-detection": "Weed Detector",
+};
+
+export const getFormattedFarmwareName = (farmwareName: string) =>
+  FARMWARE_NAMES_1ST_PARTY[farmwareName] || farmwareName;
+
+export const farmwareUrlFriendly = (farmwareName: string) =>
+  urlFriendly(farmwareName).replace(/-/g, "_");
+
 /** Execute a Farmware. */
 const run = (farmwareName: string) => () => {
   getDevice().execScript(farmwareName)
@@ -116,7 +129,7 @@ export class FarmwarePage extends React.Component<FarmwareProps, {}> {
       type: Actions.SELECT_FARMWARE,
       payload: "Photos"
     });
-    if (!this.current && Object.values(this.props.farmwares).length > 0) {
+    if (Object.values(this.props.farmwares).length > 0) {
       const farmwareNames = Object.values(this.props.farmwares).map(x => x.name);
       setActiveFarmwareByName(farmwareNames);
     } else {
@@ -127,7 +140,7 @@ export class FarmwarePage extends React.Component<FarmwareProps, {}> {
 
   /** Load Farmware input panel contents for 1st & 3rd party Farmware. */
   getPanelByFarmware(farmwareName: string) {
-    switch (urlFriendly(farmwareName).replace("-", "_")) {
+    switch (farmwareUrlFriendly(farmwareName)) {
       case "take_photo":
       case "photos":
         return <Photos
@@ -240,7 +253,7 @@ export class FarmwarePage extends React.Component<FarmwareProps, {}> {
         </LeftPanel>
         <CenterPanel
           className={`farmware-input-panel ${activeClasses}`}
-          title={this.current || t("Photos")}
+          title={getFormattedFarmwareName(this.current || "Photos")}
           helpText={getToolTipByFarmware(this.props.farmwares, this.current)
             || ToolTips.PHOTOS}
           docPage={getDocLinkByFarmware(this.current)}>

frontend/farmware/set_active_farmware_by_name.ts

@@ -1,15 +1,18 @@
 import { store } from "../redux/store";
-import { urlFriendly, lastUrlChunk } from "../util";
+import { lastUrlChunk } from "../util";
 import { Actions } from "../constants";
+import { farmwareUrlFriendly } from "./index";
 
 export function setActiveFarmwareByName(farmwareNames: (string | undefined)[]) {
-  const chunk = urlFriendly(lastUrlChunk());
+  const chunk = farmwareUrlFriendly(lastUrlChunk());
   if (chunk == "farmware") { return; }
 
   farmwareNames.map(payload => {
     if (payload) {
-      const urlName = urlFriendly(payload);
-      const match = chunk === urlName;
+      const urlName = farmwareUrlFriendly(payload);
+      const directMatch = chunk === urlName;
+      const altMatch = chunk === "weed_detector" && urlName === "plant_detection";
+      const match = directMatch || altMatch;
       match && store.dispatch({ type: Actions.SELECT_FARMWARE, payload });
     }
   });