add regimen in-use indicators

webpack/css/sequences.scss

@@ -83,8 +83,8 @@
   }
 }
 
-.sequence-list-items {
-  margin-right: 15px;
+.sequence-list-items,
+.regimen-list {
   button {
     label {
       width: 90%;
@@ -101,6 +101,10 @@
   }
 }
 
+.sequence-list-items {
+  margin-right: 15px;
+}
+
 .sequence-list-panel,
 .regimen-list-panel {
   padding-top: 0.4rem;

webpack/regimens/list/__tests__/index_test.tsx

@@ -6,22 +6,24 @@ import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
 
 describe("<RegimensList />", () => {
   function fakeProps(): RegimensListProps {
-    const regimen = fakeRegimen();
-    regimen.body.name = "Fake Regimen";
+    const regimen1 = fakeRegimen();
+    regimen1.body.name = "Fake Regimen 1";
+    const regimen2 = fakeRegimen();
+    regimen2.body.name = "Fake Regimen 2";
     return {
       dispatch: jest.fn(),
-      regimens: [regimen, regimen],
+      regimens: [regimen1, regimen2],
       regimen: undefined
     };
   }
   it("renders", () => {
-    const wrapper = mount(<RegimensList {...fakeProps() } />);
-    expect(wrapper.text()).toContain("Regimen");
-    expect(wrapper.text()).toContain("Fake Regimen Fake Regimen");
+    const wrapper = mount(<RegimensList {...fakeProps()} />);
+    ["Regimens", "Fake Regimen 1", "Fake Regimen 2"]
+      .map(string => expect(wrapper.text()).toContain(string));
   });
 
   it("sets search term", () => {
-    const wrapper = shallow(<RegimensList {...fakeProps() } />);
+    const wrapper = shallow(<RegimensList {...fakeProps()} />);
     wrapper.find("input").simulate("change",
       { currentTarget: { value: "term" } });
     expect(wrapper.state().searchTerm).toEqual("term");

webpack/regimens/list/__tests__/regimen_list_item_test.tsx

@@ -5,16 +5,32 @@ import { render } from "enzyme";
 import { fakeRegimen } from "../../../__test_support__/fake_state/resources";
 
 describe("<RegimenListItem/>", () => {
-  it("renders the base case", () => {
-    const props: RegimenListItemProps = {
+  const fakeProps = (): RegimenListItemProps => {
+    return {
       length: 1,
       regimen: fakeRegimen(),
       dispatch: jest.fn(),
       index: 0
     };
+  };
+
+  it("renders the base case", () => {
+    const props = fakeProps();
     const el = render(<RegimenListItem {...props} />);
     const html = el.html();
     expect(html).toContain(props.regimen.body.name);
     expect(html).toContain(props.regimen.body.color);
   });
+
+  it("shows in-use indicator", () => {
+    const props = fakeProps();
+    props.regimen.body.in_use = true;
+    const wrapper = render(<RegimenListItem {...props} />);
+    expect(wrapper.find(".in-use").length).toEqual(1);
+  });
+
+  it("doesn't show in-use indicator", () => {
+    const wrapper = render(<RegimenListItem {...fakeProps()} />);
+    expect(wrapper.find(".in-use").length).toEqual(0);
+  });
 });

webpack/regimens/list/regimen_list_item.tsx

@@ -7,9 +7,11 @@ import {
   TaggedRegimen,
   isTaggedRegimen
 } from "../../resources/tagged_resources";
+import { t } from "i18next";
+import { Content } from "../../constants";
 
 export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
-  const name = regimen.body.name || "";
+  const name = (regimen.body.name || "") + (regimen.specialStatus ? " *" : "");
   const color = (regimen.body.color) || "gray";
   const style = [`block`, `full-width`, `fb-button`, `${color}`];
   lastUrlChunk() === urlFriendly(name) && style.push("active");
@@ -20,7 +22,9 @@ export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
     <button
       className={style.join(" ")}
       onClick={select(dispatch, regimen)}>
-      {name} {regimen.specialStatus && ("*")}
+      <label>{name}</label>
+      {regimen.body.in_use &&
+        <i className="in-use fa fa-hdd-o" title={t(Content.IN_USE)} />}
     </button>
   </Link>;
 }