diff --git a/webpack/farm_designer/plants/__tests__/plant_panel_test.tsx b/webpack/farm_designer/plants/__tests__/plant_panel_test.tsx
index 502049c1d..e57d73baa 100644
--- a/webpack/farm_designer/plants/__tests__/plant_panel_test.tsx
+++ b/webpack/farm_designer/plants/__tests__/plant_panel_test.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
import {
PlantPanel, PlantPanelProps, EditPlantStatus, EditPlantStatusProps
} from "../plant_panel";
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
import { FormattedPlantInfo } from "../map_state_to_props";
import { Actions } from "../../../constants";
import { clickButton } from "../../../__test_support__/helpers";
@@ -34,7 +34,7 @@ describe("", () => {
it("renders: editing", () => {
const p = fakeProps();
- const wrapper = shallow();
+ const wrapper = mount();
const txt = wrapper.text().toLowerCase();
expect(txt).toContain("1 days old");
expect(txt).toContain("(10, 30)");
@@ -48,7 +48,7 @@ describe("", () => {
});
it("renders", () => {
- const wrapper = shallow();
+ const wrapper = mount();
const txt = wrapper.text().toLowerCase();
expect(txt).toContain("1 days old");
expect(txt).toContain("(12, 34)");
diff --git a/webpack/farm_designer/plants/plant_panel.tsx b/webpack/farm_designer/plants/plant_panel.tsx
index 6e2c5f818..09320082c 100644
--- a/webpack/farm_designer/plants/plant_panel.tsx
+++ b/webpack/farm_designer/plants/plant_panel.tsx
@@ -64,6 +64,16 @@ export function EditPlantStatus(props: EditPlantStatusProps) {
}} />;
}
+const ListItem = (props: { name: string, children: React.ReactChild }) =>
+
+
+ {props.name}:
+
+
+ {props.children}
+
+ ;
+
export function PlantPanel(props: PlantPanelProps) {
const { info, onDestroy, updatePlant, dispatch } = props;
const { name, slug, plantedAt, daysOld, uuid, plantStatus } = info;
@@ -75,62 +85,32 @@ export function PlantPanel(props: PlantPanelProps) {
{t("Plant Info")}
- -
-
- {t("Full Name")}:
-
-
- {_.startCase(name)}
-
-
- -
-
- {t("Plant Type")}:
-
-
-
- {_.startCase(slug)}
-
-
-
- -
-
- {t("Started")}:
-
-
- {plantedAt}
-
-
- -
-
- {t("Age")}:
-
-
- {daysOld} {t("days old")}
-
-
- -
-
- {t("Location")}:
-
-
- ({x}, {y})
-
-
- -
-
- {t("Status")}:
-
-
- {updatePlant
- ?
- : plantStatus}
-
-
+
+ {_.startCase(name)}
+
+
+
+ {_.startCase(slug)}
+
+
+
+ {plantedAt}
+
+
+ {`${daysOld} ${t("days old")}`}
+
+
+ {`(${x}, ${y})`}
+
+
+ {updatePlant
+ ?
+ : plantStatus}
+