pinned sequence ui updates

app/mutations/devices/seeders/sequence_fixtures.yml

@@ -13,6 +13,7 @@
             :args:
               :tool_id: 0
   :color: gray
+  :pinned: true
   :name: Mount tool
   :body:
   - :kind: find_home
@@ -207,7 +208,8 @@
               :x: 0
               :y: 0
               :z: 0
-  :color: gray
+  :color: pink
+  :pinned: true
   :name: Take photo of plant
   :body:
   - :kind: move
@@ -263,6 +265,7 @@
               :y: 0
               :x: 0
   :color: blue
+  :pinned: true
   :name: Water plant
   :body:
   - :kind: move
@@ -740,6 +743,7 @@
             :args:
               :tool_id: 0
   :color: gray
+  :pinned: true
   :name: Unmount tool
   :body:
   - :kind: find_home

frontend/constants.ts

@@ -395,6 +395,9 @@ export namespace ToolTips {
     If the sequence is ever run without the variable explicitly set to
     another value, the default value will be used.`);
 
+  export const USING_DEFAULT_VARIABLE_VALUE =
+    trim(`No location selected. Using default value.`);
+
   export const COMPUTED_MOVE =
     trim(`The Move step instructs FarmBot to move to the specified
     coordinate or distance from its current location.`);
@@ -979,6 +982,9 @@ export namespace Content {
   export const INCLUDES_DEPRECATED_STEPS =
     trim(`This sequence includes deprecated steps.`);
 
+  export const IS_PINNED =
+    trim(`This sequence is pinned.`);
+
   // Regimens
   export const NO_REGIMEN_SELECTED =
     trim(`Click one in the Regimens panel to edit, or click "+" to create

frontend/css/farm_designer/farm_designer_panels.scss

@@ -2070,6 +2070,9 @@
     @media screen and (max-width: 767px) {
       padding: 0;
     }
+    .fa-thumb-tack {
+      margin-left: -0.75rem;
+    }
   }
 }
 

frontend/css/global.scss

@@ -1920,6 +1920,7 @@ ul {
 }
 
 textarea {
+  width: 100%;
   border: 0;
   padding: 6px 8px;
   box-shadow: 0 0 10px #ddd;

frontend/css/sequences.scss

@@ -19,7 +19,6 @@
   overflow: hidden;
   .bp3-popover-target .saucer {
     float: left;
-    margin-top: 0.4rem;
   }
   @media screen and (max-width: 767px) {
     h3,
@@ -104,6 +103,15 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
+  .fa-thumb-tack {
+    color: $placeholder_gray;
+    line-height: 3rem;
+    transform: rotate(45deg);
+    &.pinned {
+      transform: rotate(0deg);
+      color: $dark_gray;
+    }
+  }
 }
 
 .locals-list {
@@ -120,11 +128,17 @@
       width: 100%;
       background: darken($off_white, 5%);
       padding: 1rem;
-      i {
+      .fa-caret-down,
+      .fa-caret-up {
         float: right;
         font-size: 2rem;
         color: $dark_gray;
       }
+      .bp3-popover-wrapper {
+        display: inline;
+        margin-left: 1rem;
+        font-size: 1.2rem;
+      }
     }
     >.location-form-content {
       padding: 1rem;
@@ -421,6 +435,10 @@
         width: 2rem;
         color: $orange;
       }
+      .fa-thumb-tack {
+        margin-right: 3rem;
+        width: 2rem;
+      }
     }
     button {
       margin-left: 0.5rem;

frontend/css/steps.scss

@@ -51,6 +51,10 @@
   padding: .75rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
+  &.pinned.no-inputs {
+    border-radius: 3px;
+  }
+  margin-bottom: -1px;
   .bp3-popover-wrapper {
     float: right;
     margin-top: 0.1rem;
@@ -206,10 +210,20 @@
   font-size: 2rem;
 }
 
+.step-control-icons i,
+.step-control-icons .bp3-popover-wrapper,
 .step-control {
-  margin-top: 0.3rem;
+  width: 1.2rem;
+  margin-top: 0.5rem;
   margin-left: 2rem;
   float: right;
+  .bp3-popover-target {
+    display: block;
+    margin-top: -0.5rem;
+  }
+  &.fa-external-link {
+    padding-top: 0.2rem;
+  }
 }
 
 .step-content {
@@ -292,6 +306,9 @@
         }
       }
     }
+    &:empty {
+      display: none;
+    }
   }
   &.execute-script-step {
     background: $light_magenta;

frontend/devices/interfaces.ts

@@ -43,6 +43,7 @@ export enum Feature {
   groups = "groups",
   jest_feature = "jest_feature",
   long_scaling_factor = "long_scaling_factor",
+  lua_step = "lua_step",
   mark_as_step = "mark_as_step",
   named_pins = "named_pins",
   no_firmware_logs = "no_firmware_logs",

frontend/folders/__tests__/component_test.tsx

@@ -302,6 +302,16 @@ describe("<FolderListItem />", () => {
     expect(wrapper.find(".fa-exclamation-triangle").length).toEqual(1);
   });
 
+  it("renders: in use and pinned", () => {
+    const p = fakeProps();
+    p.inUse = true;
+    p.sequence.body.pinned = true;
+    const wrapper = mount(<FolderListItem {...p} />);
+    expect(wrapper.find(".in-use").length).toEqual(1);
+    expect(wrapper.find(".in-use").hasClass("two")).toBeTruthy();
+    expect(wrapper.find(".fa-thumb-tack").length).toEqual(1);
+  });
+
   it("changes color", () => {
     const p = fakeProps();
     p.sequence.body.id = undefined;

frontend/folders/component.tsx

@@ -61,6 +61,7 @@ export const FolderListItem = (props: FolderItemProps) => {
   const active = lastUrlChunk() === urlFriendly(seqName) ? "active" : "";
   const deprecatedSteps = JSON.stringify(props.sequence.body.body)
     .includes("resource_update");
+  const two = props.sequence.body.pinned || deprecatedSteps;
   return <StepDragger
     dispatch={props.dispatch}
     step={{
@@ -81,10 +82,12 @@ export const FolderListItem = (props: FolderItemProps) => {
       </Link>
       <div className="sequence-list-item-icons">
         {props.inUse &&
-          <i className={`in-use fa fa-hdd-o ${deprecatedSteps ? "two" : ""}`}
+          <i className={`in-use fa fa-hdd-o ${two ? "two" : ""}`}
             title={t(Content.IN_USE)} />}
         {deprecatedSteps && <i className="fa fa-exclamation-triangle"
           title={t(Content.INCLUDES_DEPRECATED_STEPS)} />}
+        {props.sequence.body.pinned &&
+          <i className={"fa fa-thumb-tack"} title={t(Content.IS_PINNED)} />}
         <i className="fa fa-arrows-v"
           onMouseDown={() => props.startSequenceMove(sequence.uuid)}
           onMouseUp={() => props.toggleSequenceMove(sequence.uuid)} />

frontend/resources/sequence_meta.ts

@@ -28,7 +28,7 @@ export interface SequenceMeta {
   celeryNode: VariableNode;
   dropdown: DropDownItem;
   vector: Vector3 | Vector3Plus | undefined;
-  default?: boolean;
+  isDefault?: boolean;
 }
 
 /** Converts a "scope declaration body item" (AKA a CeleryScript variable) into
@@ -146,16 +146,17 @@ export const determineEditable = (node: VariableNode): boolean => {
 export const createSequenceMeta =
   (resources: ResourceIndex, sequence: TaggedSequence): VariableNameSet => {
     const collection = sequence.body.args.locals.body || [];
-    const reducer = (acc: VariableNameSet, celeryNode: ScopeDeclarationBodyItem):
-      VariableNameSet =>
-      ({
-        ...acc,
-        [celeryNode.args.label]: {
-          celeryNode,
-          vector: determineVector(celeryNode, resources, sequence.uuid),
-          dropdown: determineDropdown(celeryNode, resources, sequence.uuid),
-        }
-      });
+    const reducer = (
+      acc: VariableNameSet,
+      celeryNode: ScopeDeclarationBodyItem,
+    ): VariableNameSet => ({
+      ...acc,
+      [celeryNode.args.label]: {
+        celeryNode,
+        vector: determineVector(celeryNode, resources, sequence.uuid),
+        dropdown: determineDropdown(celeryNode, resources, sequence.uuid),
+      }
+    });
     return collection.reduce(reducer, {});
   };
 

frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx

@@ -256,7 +256,7 @@ describe("<SequenceEditorMiddleActive />", () => {
     const p = fakeProps();
     p.visualized = true;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    wrapper.find(".fb-button.gray").at(1).simulate("click");
+    wrapper.find(".fb-button.gray").at(0).simulate("click");
     expect(p.dispatch).toHaveBeenCalledWith({
       type: Actions.VISUALIZE_SEQUENCE,
       payload: undefined,
@@ -268,7 +268,7 @@ describe("<SequenceEditorMiddleActive />", () => {
     const p = fakeProps();
     p.sequence.body.pinned = false;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    wrapper.find(".fb-button.gray").at(0).simulate("click");
+    wrapper.find(".fa-thumb-tack").simulate("click");
     expect(pinSequenceToggle).toHaveBeenCalledWith(p.sequence);
   });
 
@@ -277,7 +277,7 @@ describe("<SequenceEditorMiddleActive />", () => {
     const p = fakeProps();
     p.sequence.body.pinned = true;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    wrapper.find(".fb-button.blue").at(0).simulate("click");
+    wrapper.find(".fa-thumb-tack").simulate("click");
     expect(pinSequenceToggle).toHaveBeenCalledWith(p.sequence);
   });
 });

frontend/sequences/__tests__/step_button_cluster_test.tsx

@@ -12,6 +12,7 @@ import { push } from "../../history";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
 import { fakeFarmwareData } from "../../__test_support__/fake_sequence_step_data";
 import { FarmwareName } from "../step_tiles/tile_execute_script";
+import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 
 describe("<StepButtonCluster />", () => {
   const commands = ["move to", "move relative",
@@ -25,6 +26,7 @@ describe("<StepButtonCluster />", () => {
     shouldDisplay: () => false,
     stepIndex: undefined,
     sequences: [],
+    resources: buildResourceIndex().index,
     farmwareData: fakeFarmwareData(),
   });
 
@@ -48,7 +50,7 @@ describe("<StepButtonCluster />", () => {
     const p = fakeProps();
     const wrapper = mount(<StepButtonCluster {...p} />);
     const steps = wrapper.find(".step-dragger");
-    const stepButton = steps.at(steps.length - 3);
+    const stepButton = steps.at(steps.length - 2);
     expect(stepButton.text().toLowerCase()).toEqual("take photo");
     stepButton.simulate("dragStart", { dataTransfer: { setData: jest.fn() } });
     expect(p.dispatch).toHaveBeenCalledWith(expect.objectContaining({

frontend/sequences/__tests__/step_icon_group_test.tsx

@@ -4,18 +4,26 @@ jest.mock("../step_tiles", () => ({
   move: jest.fn(),
 }));
 
+jest.mock("../../history", () => ({
+  push: jest.fn(),
+  getPathArray: () => [],
+  history: { getCurrentLocation: () => "" },
+}));
+
 import React from "react";
 import { mount, shallow } from "enzyme";
 import { StepIconGroup, StepIconBarProps } from "../step_icon_group";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
 import { splice, remove, move } from "../step_tiles";
+import { push } from "../../history";
 
 describe("<StepIconGroup />", () => {
   const fakeProps = (): StepIconBarProps => ({
     index: 0,
     dispatch: jest.fn(),
     step: { kind: "wait", args: { milliseconds: 100 } },
     sequence: fakeSequence(),
+    executeSequenceName: undefined,
     helpText: "helpful text",
     confirmStepDeletion: false,
   });
@@ -50,4 +58,12 @@ describe("<StepIconGroup />", () => {
       step: fakeProps().step
     }));
   });
+
+  it("navigates to sequence", () => {
+    const p = fakeProps();
+    p.executeSequenceName = "My Sequence";
+    const wrapper = mount(<StepIconGroup {...p} />);
+    wrapper.find(".fa-external-link").simulate("click");
+    expect(push).toHaveBeenCalledWith("/app/sequences/my_sequence");
+  });
 });

frontend/sequences/locals_list/__tests__/location_form_test.tsx

@@ -60,6 +60,7 @@ describe("<LocationForm/>", () => {
         dropdown
       }));
     expect(inputs.length).toBe(0);
+    expect(el.html()).not.toContain("fa-exclamation-triangle");
   });
 
   it("uses body variable data", () => {
@@ -148,4 +149,11 @@ describe("<LocationForm/>", () => {
     const wrapper = shallow(<LocationForm {...p} />);
     expect(wrapper.html()).toContain("fa-caret-down");
   });
+
+  it("renders default value warning", () => {
+    const p = fakeProps();
+    p.variable.isDefault = true;
+    const wrapper = shallow(<LocationForm {...p} />);
+    expect(wrapper.html()).toContain("fa-exclamation-triangle");
+  });
 });

frontend/sequences/locals_list/locals_list.tsx

@@ -82,6 +82,6 @@ const convertFormVariable =
       celeryNode: converted,
       dropdown: determineDropdown(converted, resources),
       vector: determineVector(converted, resources),
-      default: true,
+      isDefault: true,
     };
   };