move step updates

frontend/constants.ts

@@ -190,12 +190,12 @@ export namespace ToolTips {
     trim(`Here is the list of all of your sequences. Click one to edit.`);
 
   export const MOVE_ABSOLUTE =
-    trim(`The Move Absolute step instructs FarmBot to move to the specified
+    trim(`The Move To step instructs FarmBot to move to the specified
     coordinate regardless of the current position. For example, if FarmBot is
-    currently at X=1000, Y=1000 and it receives a Move Absolute where X=0 and
+    currently at X=1000, Y=1000 and it receives a Move To where X=0 and
     Y=3000, then FarmBot will move to X=0, Y=3000. If FarmBot must move in
     multiple directions, it will move diagonally. If you require straight
-    movements along one axis at a time, use multiple Move Absolute steps.
+    movements along one axis at a time, use multiple Move To steps.
     Offsets allow you to more easily instruct FarmBot to move to a location,
     but offset from it by the specified amount. For example moving to just
     above where a peripheral is located. Using offsets lets FarmBot do the
@@ -208,7 +208,7 @@ export namespace ToolTips {
     will move to X=1000, Y=4000. If FarmBot must move in multiple directions,
     it will move diagonally. If you require straight movements along one axis
     at a time, use  multiple Move Relative steps. Move Relative steps should be
-    preceded by a Move Absolute step to ensure you are starting from a known
+    preceded by a Move To step to ensure you are starting from a known
     location.`);
 
   export const WRITE_PIN =

frontend/css/global.scss

@@ -283,11 +283,8 @@ a {
   }
 }
 
-.hardware-widget,
-.device-widget {
-  h4 {
-    cursor: pointer;
-  }
+.expandable-header {
+  cursor: pointer;
   .icon-toggle {
     font-size: 1.2rem;
     font-weight: bold;
@@ -296,6 +293,10 @@ a {
       font-size: 1rem;
     }
   }
+}
+
+.hardware-widget,
+.device-widget {
   .row {
     margin-bottom: 0.6rem;
   }

frontend/devices/components/hardware_settings/__tests__/header_test.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Header } from "../header";
-import { shallow } from "enzyme";
+import { mount } from "enzyme";
 
 describe("<Header/>", () => {
   it("renders", () => {
     const fn = jest.fn();
-    const el = shallow(<Header
+    const el = mount(<Header
       title="FOO"
       expanded={true}
       name={"motors"}

frontend/devices/components/hardware_settings/header.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-
 import { ControlPanelState } from "../../interfaces";
 import { toggleControlPanel } from "../../actions";
-import { t } from "../../../i18next_wrapper";
+import { ExpandableHeader } from "../../../ui/expandable_header";
 
 interface Props {
   dispatch: Function;
@@ -13,11 +12,8 @@ interface Props {
 
 export let Header = (props: Props) => {
   const { dispatch, name, title, expanded } = props;
-  const icon_string = expanded ? "minus" : "plus";
-  return <h4 onClick={() => dispatch(toggleControlPanel(name))}>
-    {t(title)}
-    <span className="icon-toggle">
-      &nbsp;&nbsp;[<i className={`fa fa-${icon_string}`} />]
-    </span>
-  </h4>;
+  return <ExpandableHeader
+    expanded={expanded}
+    title={title}
+    onClick={() => dispatch(toggleControlPanel(name))} />;
 };

frontend/sequences/__tests__/step_button_cluster_test.tsx

@@ -4,7 +4,7 @@ import { StepButtonCluster, StepButtonProps } from "../step_button_cluster";
 import { Actions } from "../../constants";
 
 describe("<StepButtonCluster />", () => {
-  const commands = ["move absolute", "move relative", "write pin", "read pin",
+  const commands = ["move to", "move relative", "write pin", "read pin",
     "wait", "send message", "find home", "if statement", "execute sequence",
     "run farmware", "take photo"];
 

frontend/sequences/interfaces.ts

@@ -127,7 +127,7 @@ export interface SequencesListState {
 }
 
 export interface MoveAbsState {
-  isToolSelected: boolean;
+  more: boolean;
 }
 
 export interface StepButtonParams {

frontend/sequences/locals_list/__tests__/location_form_list_test.ts

@@ -4,52 +4,51 @@ import { fakeResourceIndex } from "../test_helpers";
 describe("locationFormList()", () => {
   it("returns dropdown list", () => {
     const items = locationFormList(fakeResourceIndex(), []);
-    const toolHeading = items[0];
+    const coordinate = items[0];
+    expect(coordinate).toEqual({
+      headingId: "Coordinate",
+      label: "Custom Coordinates",
+      value: "",
+    });
+    const toolHeading = items[1];
     expect(toolHeading).toEqual({
       headingId: "Tool",
       label: "Tools",
       value: 0,
       heading: true,
     });
-    const tool = items[1];
+    const tool = items[2];
     expect(tool).toEqual({
       headingId: "Tool",
       label: "Generic tool (100, 200, 300)",
       value: "1",
     });
-    const plantHeading = items[2];
+    const plantHeading = items[3];
     expect(plantHeading).toEqual({
       headingId: "Plant",
       label: "Plants",
       value: 0,
       heading: true,
     });
-    const plant = items[3];
+    const plant = items[4];
     expect(plant).toEqual({
       headingId: "Plant",
       label: "Plant 1 (1, 2, 3)",
       value: "1"
     });
-    const pointHeading = items[5];
+    const pointHeading = items[6];
     expect(pointHeading).toEqual({
       headingId: "GenericPointer",
       label: "Map Points",
       value: 0,
       heading: true,
     });
-    const point = items[6];
+    const point = items[7];
     expect(point).toEqual({
       headingId: "GenericPointer",
       label: "Point 1 (10, 20, 30)",
       value: "2"
     });
-    const otherHeading = items[7];
-    expect(otherHeading).toEqual({
-      headingId: "Other",
-      label: "Other",
-      value: 0,
-      heading: true,
-    });
   });
 });
 

frontend/sequences/locals_list/locals_list_support.ts

@@ -73,4 +73,4 @@ export interface LocationFormProps extends CommonProps {
 }
 
 export const PARENT =
-  ({ value: "parent", label: "Parent", headingId: "parameter" });
+  ({ value: "parent", label: "Variable", headingId: "parameter" });

frontend/sequences/locals_list/location_form_list.ts

@@ -70,7 +70,9 @@ export function locationFormList(resources: ResourceIndex,
     .map(({ tool, location }) => formatTools(tool, location))
     .filter(x => parseInt("" + x.value) > 0);
   const group = maybeGroup(!!displayGroups);
-  return heading("Tool")
+  return [COORDINATE_DDI()]
+    .concat(additionalItems)
+    .concat(heading("Tool"))
     .concat(toolDDI)
     .concat(group(everyPointDDI("Tool")))
     .concat(group(everyPointDDI("ToolSlot")))
@@ -79,10 +81,7 @@ export function locationFormList(resources: ResourceIndex,
     .concat(group(everyPointDDI("Plant")))
     .concat(heading("GenericPointer"))
     .concat(genericPointerDDI)
-    .concat(group(everyPointDDI("GenericPointer")))
-    .concat(heading("Other"))
-    .concat(additionalItems)
-    .concat(COORDINATE_DDI());
+    .concat(group(everyPointDDI("GenericPointer")));
 }
 
 /** Create drop down item with label; i.e., "Point/Plant (1, 2, 3)" */
@@ -136,7 +135,7 @@ export const everyPointDDI = (value: EveryPointType): DropDownItem =>
   ({ value, label: t(EVERY_POINT_LABEL[value]), headingId: "every_point" });
 
 export const COORDINATE_DDI = (): DropDownItem =>
-  ({ value: "", label: t("Coordinate"), headingId: "Coordinate" });
+  ({ value: "", label: t("Custom Coordinates"), headingId: "Coordinate" });
 
 export const NO_VALUE_SELECTED_DDI = (): DropDownItem =>
   ({ label: t("Select a location"), value: "", isNull: true });

frontend/sequences/step_button_cluster.tsx

@@ -29,7 +29,7 @@ export function StepButtonCluster(props: StepButtonProps) {
         }
       }}
       color="blue">
-      {t("MOVE ABSOLUTE")}
+      {t("MOVE TO")}
     </StepButton>,
     <StepButton {...commonStepProps}
       step={{

frontend/sequences/step_tiles/__tests__/tile_move_absolute_test.tsx

@@ -53,13 +53,14 @@ describe("<TileMoveAbsolute/>", () => {
 
   it("renders inputs", () => {
     const block = mount(<TileMoveAbsolute {...fakeProps()} />);
+    block.setState({ more: true });
     const inputs = block.find("input");
     const labels = block.find("label");
     const buttons = block.find("button");
     expect(inputs.length).toEqual(8);
     expect(labels.length).toEqual(8);
     expect(buttons.length).toEqual(1);
-    expect(inputs.first().props().placeholder).toEqual("Move Absolute");
+    expect(inputs.first().props().placeholder).toEqual("Move To");
     expect(buttons.at(0).text()).toEqual("Coordinate (1.1, 2, 3)");
     checkField(block, 1, "x (mm)", "1.1");
     checkField(block, 2, "y (mm)", "2");
@@ -79,6 +80,13 @@ describe("<TileMoveAbsolute/>", () => {
     expect(mock.mock.calls[0][0].location.args.x).toBe(23.456);
   });
 
+  it("expands form", () => {
+    const wrapper = mount<TileMoveAbsolute>(<TileMoveAbsolute {...fakeProps()} />);
+    expect(wrapper.state().more).toEqual(false);
+    wrapper.find("h4").simulate("click");
+    expect(wrapper.state().more).toEqual(true);
+  });
+
   describe("updateArgs", () => {
     it("calls OVERWRITE_RESOURCE for the correct resource", () => {
       const tma = ordinaryMoveAbs();

frontend/sequences/step_tiles/step_title_bar.tsx

@@ -15,7 +15,7 @@ function translate(input: Step): string {
     "execute_script": t("Run Farmware"),
     "execute": t("Execute Sequence"),
     "find_home": t("Find Home"),
-    "move_absolute": t("Move Absolute"),
+    "move_absolute": t("Move To"),
     "move_relative": t("Move Relative"),
     "read_pin": t("Read Pin"),
     "send_message": t("Send Message"),

frontend/sequences/step_tiles/tile_move_absolute.tsx

@@ -21,8 +21,11 @@ import {
 import { merge } from "lodash";
 import { MoveAbsoluteWarning } from "./tile_move_absolute_conflict_check";
 import { t } from "../../i18next_wrapper";
+import { Collapse } from "@blueprintjs/core";
+import { ExpandableHeader } from "../../ui/expandable_header";
 
 export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState> {
+  state: MoveAbsState = { more: false };
   get step() { return this.props.currentStep as MoveAbsolute; }
   get args() { return this.step.args; }
 
@@ -138,7 +141,14 @@ export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState>
       </StepHeader>
       <StepContent className={className}>
         <this.LocationForm />
-        <this.OffsetForm />
+        <ExpandableHeader
+          expanded={this.state.more}
+          title={t("More")}
+          onClick={() =>
+            this.setState({ more: !this.state.more })} />
+        <Collapse isOpen={this.state.more}>
+          <this.OffsetForm />
+        </Collapse>
       </StepContent>
     </StepWrapper>;
   }

frontend/ui/expandable_header.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { t } from "../i18next_wrapper";
+
+interface Props {
+  onClick(): void;
+  title: string;
+  expanded: boolean;
+}
+
+export let ExpandableHeader = (props: Props) => {
+  const { onClick, title, expanded } = props;
+  const icon_string = expanded ? "minus" : "plus";
+  return <h4 className="expandable-header" onClick={onClick}>
+    {t(title)}
+    <span className="icon-toggle">
+      &nbsp;&nbsp;[<i className={`fa fa-${icon_string}`} />]
+    </span>
+  </h4>;
+};