close plant info on grid click

webpack/css/farm_designer/farm_designer.scss

@@ -38,6 +38,10 @@
   overflow: visible;
 }
 
+.drop-area-background a {
+  cursor: default !important;
+}
+
 .crop-drag-info-image {
   width: 100%;
   background-color: $translucent;

webpack/farm_designer/map/__tests__/grid_test.tsx

@@ -1,14 +1,31 @@
+const mockHistory = jest.fn();
+jest.mock("../../../history", () => ({
+  history: {
+    push: mockHistory,
+    getCurrentLocation: jest.fn()
+      .mockImplementationOnce(() => { return { pathname: "//app/plants" } })
+      .mockImplementationOnce(() => { return { pathname: "//app/plants/1/edit" } })
+      .mockImplementationOnce(() => { return { pathname: "//app/plants/1" } })
+  }
+}));
+
+
 import * as React from "react";
 import { Grid } from "../grid";
 import { shallow } from "enzyme";
 import { GridProps } from "../interfaces";
 
 describe("<Grid/>", () => {
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+
   function fakeProps(): GridProps {
     return {
       mapTransformProps: {
         quadrant: 2, gridSize: { x: 3000, y: 1500 }
-      }
+      },
+      dispatch: jest.fn()
     };
   }
 
@@ -21,4 +38,21 @@ describe("<Grid/>", () => {
     expect(wrapper.find("#axis-values").find("text").length).toEqual(43);
   });
 
+  it("closes plant info", () => {
+    const p = fakeProps();
+    const wrapper = shallow(<Grid {...p } />);
+    const gridArea = wrapper.find("g").first();
+    gridArea.simulate("click") // no plant info open
+    expect(mockHistory).not.toHaveBeenCalled();
+    expect(p.dispatch).not.toHaveBeenCalled();
+    gridArea.simulate("click") // plant edit open
+    expect(mockHistory).not.toHaveBeenCalled();
+    expect(p.dispatch).not.toHaveBeenCalled();
+    gridArea.simulate("click") // plant info open
+    expect(mockHistory).toHaveBeenCalledWith("/app/designer/plants");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      payload: undefined, type: "SELECT_PLANT"
+    });
+  });
+
 });

webpack/farm_designer/map/garden_map.tsx

@@ -247,7 +247,8 @@ export class GardenMap extends
           onMouseMove={this.drag}
           onClick={this.click}>
           <Grid
-            mapTransformProps={mapTransformProps} />
+            mapTransformProps={mapTransformProps}
+            dispatch={this.props.dispatch} />
           <SpreadLayer
             mapTransformProps={mapTransformProps}
             plants={this.props.plants}

webpack/farm_designer/map/grid.tsx

@@ -2,14 +2,24 @@ import * as React from "react";
 import { GridProps } from "./interfaces";
 import { getXYFromQuadrant } from "./util";
 import * as _ from "lodash";
+import { history } from "../../history";
 
 export function Grid(props: GridProps) {
+  function closePlantInfo() {
+    const currentPath = history.getCurrentLocation().pathname;
+    if (!isNaN(parseInt(currentPath.split("/").slice(-1)[0]))) {
+      // A plant is selected and plant info is open. Unselect and close it.
+      props.dispatch({ type: "SELECT_PLANT", payload: undefined });
+      history.push("/app/designer/plants")
+    }
+  }
+
   const { quadrant, gridSize } = props.mapTransformProps;
   const origin = getXYFromQuadrant(0, 0, quadrant, gridSize);
   const arrowEnd = getXYFromQuadrant(25, 25, quadrant, gridSize);
   const xLabel = getXYFromQuadrant(15, -10, quadrant, gridSize);
   const yLabel = getXYFromQuadrant(-11, 18, quadrant, gridSize);
-  return <g id="drop-area-background">
+  return <g className="drop-area-background" onClick={closePlantInfo}>
     <defs>
       <pattern id="minor_grid" width={10} height={10} patternUnits="userSpaceOnUse">
         <path d="M10,0 L0,0 L0,10" strokeWidth={1}

webpack/farm_designer/map/interfaces.ts

@@ -87,6 +87,7 @@ export interface MapBackgroundProps {
 
 export interface GridProps {
   mapTransformProps: MapTransformProps;
+  dispatch: Function;
 }
 
 export interface VirtualFarmBotProps {