fix variables ui bugs

frontend/css/global.scss

@@ -885,7 +885,7 @@ ul {
   .locals-list {
     margin-top: 1rem;
     margin-left: 1rem;
-    margin-right: -3rem;
+    margin-right: 1rem;
   }
 }
 

frontend/css/regimens.scss

@@ -56,10 +56,54 @@
 .regimen-event {
   position: relative;
   background: $gray;
-  padding: 0.7rem;
   border-radius: 3px;
   min-height: 3.5rem;
   margin-bottom: 1rem;
+  &.blue {
+    .regimen-item-variables {
+      background: $panel_light_blue;
+    }
+  }
+  &.green {
+    .regimen-item-variables {
+      background: $light_green;
+    }
+  }
+  &.yellow {
+    .regimen-item-variables {
+      background: $light_yellow;
+    }
+  }
+  &.orange {
+    .regimen-item-variables {
+      background: $light_orange;
+    }
+  }
+  &.purple {
+    .regimen-item-variables {
+      background: $light_purple;
+    }
+  }
+  &.pink {
+    .regimen-item-variables {
+      background: $light_pink;
+    }
+  }
+  &.gray {
+    .regimen-item-variables {
+      background: $light_gray;
+    }
+  }
+  &.red {
+    .regimen-item-variables {
+      background: $light_red;
+    }
+  }
+}
+
+.regimen-event-titlebar {
+  padding: 0.5rem;
+  padding-left: 1rem;
 }
 
 .regimen-event-title {
@@ -77,6 +121,15 @@
   margin-right: 1.5rem;
 }
 
+.regimen-item-variables {
+  padding: 1rem;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  .variable-icon {
+    margin-right: 1rem;
+  }
+}
+
 .regimen-event-variable {
   display: block;
   margin-right: 1.5rem;

frontend/css/sequences.scss

@@ -440,6 +440,9 @@
     }
   }
   .location-form-content {
+    .row {
+      display: flex;
+    }
     .bp3-popover-wrapper {
       display: inline;
       margin-left: 1rem;

frontend/css/steps.scss

@@ -315,12 +315,18 @@
     .row {
       margin: 0;
     }
+    .unpinned-view {
+      margin-top: 1rem;
+    }
     .locals-list {
       margin-left: -1rem;
       margin-right: 0;
     }
+    .location-form:not(:first-of-type) {
+      margin-top: 1rem;
+    }
     .location-form {
-      .row {
+      .row:not(:first-of-type) {
         margin-top: 1rem;
       }
     }

frontend/farm_events/edit_fe_form.tsx

@@ -359,6 +359,9 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
 
   render() {
     const { farmEvent } = this.props;
+    const variableCount = Object.values(this.variableData || {})
+      .filter(v => v?.celeryNode.kind == "parameter_declaration")
+      .length;
     return <div className="edit-farm-event-form">
       <ErrorBoundary>
         <FarmEventForm
@@ -374,12 +377,11 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
             || this.state.specialStatusLocal}
           onSave={() => this.commitViewModel()}>
           <div className={"farm-event-form-content"}>
-            <SectionHeader title={t("Variables")}
-              count={Object.values(this.variableData || {})
-                .filter(v => v?.celeryNode.kind == "parameter_declaration")
-                .length}
-              collapsed={this.state.variablesCollapsed}
-              toggle={this.toggleVarShow} />
+            {variableCount > 0 &&
+              <SectionHeader title={t("Variables")}
+                count={variableCount}
+                collapsed={this.state.variablesCollapsed}
+                toggle={this.toggleVarShow} />}
             <Collapse isOpen={!this.state.variablesCollapsed}>
               <ErrorBoundary>
                 <this.LocalsList />

frontend/regimens/editor/regimen_rows.tsx

@@ -14,6 +14,9 @@ import {
   setActiveSequenceByName,
 } from "../../sequences/set_active_sequence_by_name";
 import { Path } from "../../internal_urls";
+import {
+  determineVariableType, VariableIcon,
+} from "../../sequences/locals_list/new_variable";
 
 export const RegimenRows = (props: RegimenRowsProps) =>
   <div className={"regimen"}>
@@ -33,17 +36,19 @@ const regimenItemRow = (
   (row: RegimenItemCalendarRow, itemIndex: number) =>
     <div className={`${row.color} regimen-event`}
       key={`${dayIndex}.${itemIndex}`}>
-      <span className="regimen-event-title">
-        {row.sequenceName}
-        <Link to={Path.sequences(urlFriendly(row.sequenceName))}
-          onClick={setActiveSequenceByName}>
-          <i className="fa fa-external-link" />
-        </Link>
-      </span>
-      <span className="regimen-event-time">{row.hhmm}</span>
+      <div className={"regimen-event-titlebar"}>
+        <span className={"regimen-event-title"}>
+          {row.sequenceName}
+          <Link to={Path.sequences(urlFriendly(row.sequenceName))}
+            onClick={setActiveSequenceByName}>
+            <i className="fa fa-external-link" />
+          </Link>
+        </span>
+        <span className="regimen-event-time">{row.hhmm}</span>
+        <i className="fa fa-trash regimen-control" onClick={() =>
+          dispatch(removeRegimenItem(row.item, row.regimen))} />
+      </div>
       <DisplayVarValue row={row} resources={resources} />
-      <i className="fa fa-trash regimen-control" onClick={() =>
-        dispatch(removeRegimenItem(row.item, row.regimen))} />
     </div>;
 
 const removeRegimenItem = (item: RegimenItem, r: TaggedRegimen) => {
@@ -61,12 +66,14 @@ const DisplayVarValue = (props: DisplayVarValueProps) => {
         if (variableNode) {
           return <span key={variable}
             className="regimen-event-variable">
+            <VariableIcon variableType={determineVariableType(variableNode)} />
             {withPrefix(variable,
               determineDropdown(variableNode, props.resources).label)}
           </span>;
         }
       }
-      return <span key={"no-variable"} className={"no-regimen-variable"} />;
+      return <span key={"no-variable-" + variable}
+        className={"no-regimen-variable"} />;
     })}
   </div>;
 };

frontend/sequences/locals_list/__tests__/location_form_test.tsx

@@ -177,6 +177,64 @@ describe("<LocationForm />", () => {
     expect(wrapper.html()).toContain("fa-exclamation-triangle");
   });
 
+  it("renders number variable input", () => {
+    const p = fakeProps();
+    p.variableType = VariableType.Number;
+    p.variable.celeryNode = {
+      kind: "parameter_declaration",
+      args: {
+        label: "label", default_value: { kind: "numeric", args: { number: 0 } }
+      }
+    };
+    p.locationDropdownKey = "default_value";
+    const wrapper = shallow(<LocationForm {...p} />);
+    expect(wrapper.html()).toContain("number-input");
+  });
+
+  it("renders text variable input", () => {
+    const p = fakeProps();
+    p.variableType = VariableType.Text;
+    p.variable.celeryNode = {
+      kind: "parameter_declaration",
+      args: {
+        label: "label", default_value: { kind: "text", args: { string: "" } }
+      }
+    };
+    p.locationDropdownKey = "default_value";
+    const wrapper = shallow(<LocationForm {...p} />);
+    expect(wrapper.html()).toContain("string-input");
+  });
+
+  it("renders narrow number variable input", () => {
+    const p = fakeProps();
+    p.variableType = VariableType.Number;
+    p.variable.celeryNode = {
+      kind: "variable_declaration",
+      args: {
+        label: "label", data_value: { kind: "numeric", args: { number: 0 } }
+      }
+    };
+    p.locationDropdownKey = "";
+    p.removeVariable = jest.fn();
+    const wrapper = shallow(<LocationForm {...p} />);
+    expect(wrapper.html()).toContain("col-xs-5");
+  });
+
+  it("renders narrow text variable input", () => {
+    const p = fakeProps();
+    p.variableType = VariableType.Text;
+    p.variable.celeryNode = {
+      kind: "variable_declaration",
+      args: {
+        label: "label", data_value: { kind: "text", args: { string: "" } }
+      }
+    };
+    p.locationDropdownKey = "";
+    p.removeVariable = jest.fn();
+    const wrapper = shallow(<LocationForm {...p} />);
+    expect(wrapper.html()).toContain("col-xs-5");
+  });
+
   it("doesn't change label", () => {
     const p = fakeProps();
     p.inUse = true;
@@ -220,11 +278,18 @@ describe("<LocationForm />", () => {
     const wrapper = mount(<LocationForm {...p} />);
     expect(wrapper.find(".numeric-variable-input").length)
       .toBeGreaterThanOrEqual(1);
-    expect(wrapper.find("FBSelect").props().list).toEqual([{
-      headingId: "Variable",
-      label: "Externally defined",
-      value: "label",
-    }]);
+    expect(wrapper.find("FBSelect").props().list).toEqual([
+      {
+        headingId: "Variable",
+        label: "Externally defined",
+        value: "label",
+      },
+      {
+        headingId: "Numeric",
+        label: "Custom number",
+        value: 0,
+      },
+    ]);
   });
 
   it("renders text variable", () => {
@@ -238,11 +303,18 @@ describe("<LocationForm />", () => {
     };
     const wrapper = mount(<LocationForm {...p} />);
     expect(wrapper.find(".text-variable-input").length).toBeGreaterThanOrEqual(1);
-    expect(wrapper.find("FBSelect").props().list).toEqual([{
-      headingId: "Variable",
-      label: "Externally defined",
-      value: "label",
-    }]);
+    expect(wrapper.find("FBSelect").props().list).toEqual([
+      {
+        headingId: "Variable",
+        label: "Externally defined",
+        value: "label",
+      },
+      {
+        headingId: "Text",
+        label: "Custom text",
+        value: "",
+      },
+    ]);
   });
 });
 
@@ -262,7 +334,6 @@ describe("<NumericInput />", () => {
     },
     onChange: jest.fn(),
     label: "label",
-    isDefaultValueForm: false,
   });
 
   it("changes variable", () => {
@@ -285,7 +356,6 @@ describe("<NumericInput />", () => {
 
   it("changes default variable", () => {
     const p = fakeProps();
-    p.isDefaultValueForm = true;
     p.variable.celeryNode = {
       kind: "parameter_declaration",
       args: {
@@ -319,7 +389,6 @@ describe("<TextInput />", () => {
     },
     onChange: jest.fn(),
     label: "label",
-    isDefaultValueForm: false,
   });
 
   it("changes variable", () => {
@@ -342,7 +411,6 @@ describe("<TextInput />", () => {
 
   it("changes default variable", () => {
     const p = fakeProps();
-    p.isDefaultValueForm = true;
     p.variable.celeryNode = {
       kind: "parameter_declaration",
       args: {

frontend/sequences/locals_list/__tests__/new_variable_test.tsx

@@ -4,6 +4,7 @@ import { VariableNode, VariableType } from "../locals_list_support";
 import {
   determineVariableType,
   newVariableDataValue, newVariableLabel, VariableIcon, VariableIconProps,
+  varTypeFromLabel,
 } from "../new_variable";
 import { NOTHING_SELECTED } from "../handle_select";
 
@@ -21,6 +22,14 @@ describe("newVariableLabel()", () => {
   });
 });
 
+describe("varTypeFromLabel()", () => {
+  it("returns type", () => {
+    expect(varTypeFromLabel("Location 1")).toEqual(VariableType.Location);
+    expect(varTypeFromLabel("Number 1")).toEqual(VariableType.Number);
+    expect(varTypeFromLabel("Text 1")).toEqual(VariableType.Text);
+  });
+});
+
 describe("newVariableDataValue()", () => {
   it("returns location data value", () => {
     expect(newVariableDataValue(VariableType.Location)).toEqual(NOTHING_SELECTED);

frontend/sequences/locals_list/handle_select.ts

@@ -178,7 +178,6 @@ export const convertDDItoVariable =
       return createNewVariable({
         ...p,
         newVarLabel: "" + p.dropdown.value,
-        variableType: p.variableType,
       });
     } else {
       return createNewVariable({