Merge branch 'staging' into roryaronson-cla-patch

webpack/constants.ts

@@ -460,6 +460,9 @@ export namespace Content {
     encoders or endstops enabled for the chosen axis. Enable endstops or
     encoders from the Device page for: `);
 
+  export const IN_USE =
+    trim(`Used in another resource. Protected from deletion.`);
+
   // Regimens
   export const NO_REGIMEN_SELECTED =
     trim(`No Regimen selected. Click one in the Regimens panel to edit, or

webpack/css/sequences.scss

@@ -85,6 +85,20 @@
 
 .sequence-list-items {
   margin-right: 15px;
+  button {
+    label {
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-top: 0.5rem;
+      float: left;
+    }
+  }
+  i {
+    float: right;
+    margin-top: 0.75rem;
+  }
 }
 
 .sequence-list-panel,

webpack/sequences/__tests__/sequences_list_test.tsx

@@ -3,43 +3,58 @@ import { mount } from "enzyme";
 import { SequencesList } from "../sequences_list";
 import { auth } from "../../__test_support__/fake_state/token";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
+import { SequencesListProps } from "../interfaces";
+import { Actions } from "../../constants";
 
 describe("<SequencesList />", () => {
-  function mountComponent(dispatch: Function) {
+  const fakeProps = (): SequencesListProps => {
     const fakeSequence1 = fakeSequence();
     fakeSequence1.body.name = "Sequence 1";
     const fakeSequence2 = fakeSequence();
     fakeSequence2.body.name = "Sequence 2";
-    const wrapper = mount(<SequencesList
-      dispatch={dispatch}
-      auth={auth}
-      sequence={undefined}
-      sequences={[fakeSequence1, fakeSequence2]} />);
     return {
-      wrapper,
-      fakeSequence1,
-      fakeSequence2
+      dispatch: jest.fn(),
+      auth,
+      sequence: undefined,
+      sequences: [fakeSequence1, fakeSequence2]
     };
-  }
+  };
 
   it("renders list", () => {
-    const wrapper = mountComponent(jest.fn()).wrapper;
+    const p = fakeProps();
+    const wrapper = mount(<SequencesList {...p} />);
     expect(wrapper.find("input").first().props().placeholder)
       .toContain("Search Sequences");
     ["Sequence 1", "Sequence 2"].map(string =>
       expect(wrapper.text()).toContain(string));
   });
 
   it("has correct drag data", () => {
-    const dispatch = jest.fn();
-    const componentData = mountComponent(dispatch);
-    const seq = componentData.wrapper.find("div").last();
+    const p = fakeProps();
+    const wrapper = mount(<SequencesList {...p} />);
+    const seq = wrapper.find("div").last();
     expect(seq.text()).toEqual("Sequence 2");
     seq.simulate("dragStart", { dataTransfer: { setData: jest.fn() } });
-    const [[{ type, payload }]] = dispatch.mock.calls;
-    expect(type).toEqual("PUT_DATA_XFER");
-    expect(payload.value.args.sequence_id)
-      .toEqual(componentData.fakeSequence2.body.id);
-    expect(payload.value.kind).toEqual("execute");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.PUT_DATA_XFER,
+      payload: expect.objectContaining({
+        value: {
+          kind: "execute",
+          args: { sequence_id: p.sequences[1].body.id },
+        }
+      })
+    });
+  });
+
+  it("shows in-use indicator", () => {
+    const p = fakeProps();
+    p.sequences[0].body.in_use = true;
+    const wrapper = mount(<SequencesList {...p} />);
+    expect(wrapper.find(".in-use").length).toEqual(1);
+  });
+
+  it("doesn't show in-use indicator", () => {
+    const wrapper = mount(<SequencesList {...fakeProps()} />);
+    expect(wrapper.find(".in-use").length).toEqual(0);
   });
 });

webpack/sequences/sequences_list.tsx

@@ -8,7 +8,7 @@ import { sortResourcesById, urlFriendly, lastUrlChunk } from "../util";
 import { Row, Col, ToolTip } from "../ui/index";
 import { TaggedSequence, SpecialStatus } from "../resources/tagged_resources";
 import { init } from "../api/crud";
-import { ToolTips } from "../constants";
+import { ToolTips, Content } from "../constants";
 import { StepDragger, NULL_DRAGGER_ID } from "../draggable/step_dragger";
 
 const sequenceList = (dispatch: Function) =>
@@ -37,7 +37,9 @@ const sequenceList = (dispatch: Function) =>
           key={uuid}
           onClick={click} >
           <button className={css.join(" ")} draggable={true}>
-            {name}
+            <label>{name}</label>
+            {ts.body.in_use &&
+              <i className="in-use fa fa-hdd-o" title={t(Content.IN_USE)} />}
           </button>
         </Link>
       </StepDragger>