From ce8cafe9321e84f8b46ff248ef8dfef08e8b4c23 Mon Sep 17 00:00:00 2001
From: Ray Lee <ray.lee@lyrasis.org>
Date: Mon, 3 Oct 2022 13:46:17 -0400
Subject: [PATCH] Add list filtering to lane editor. (#50)

* Add filter select to available lists on lane editor.

* Update tests.

* Add tests.

* Remove extra whitespace.

* Add share icon to lists that are not owned.

* Consolidate duplicate list info rendering code.
---
 src/components/LaneCustomListsEditor.tsx      |  81 ++++++++---
 src/components/LaneEditor.tsx                 |  28 ++++
 .../__tests__/LaneCustomListsEditor-test.tsx  | 136 ++++++++++++++++--
 src/components/__tests__/LaneEditor-test.tsx  |  41 +++++-
 src/stylesheets/lane_editor.scss              |  15 +-
 5 files changed, 273 insertions(+), 28 deletions(-)

diff --git a/src/components/LaneCustomListsEditor.tsx b/src/components/LaneCustomListsEditor.tsx
index 659a62e34..e7d06da0c 100644
--- a/src/components/LaneCustomListsEditor.tsx
+++ b/src/components/LaneCustomListsEditor.tsx
@@ -2,14 +2,19 @@ import * as React from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { CustomListData } from "../interfaces";
 import AddIcon from "./icons/AddIcon";
+import ShareIcon from "./icons/ShareIcon";
 import TrashIcon from "./icons/TrashIcon";
 import GrabIcon from "./icons/GrabIcon";
+import EditableInput from "./EditableInput";
 import { Button } from "library-simplified-reusable-components";
 
 export interface LaneCustomListsEditorProps
   extends React.Props<LaneCustomListsEditor> {
   allCustomLists: CustomListData[];
   customListIds: number[];
+  filter?: string;
+  filteredCustomLists?: CustomListData[];
+  changeFilter?: (value: string) => void;
   onUpdate?: (customListIds: number[]) => void;
 }
 
@@ -22,6 +27,11 @@ export default class LaneCustomListsEditor extends React.Component<
   LaneCustomListsEditorProps,
   LaneCustomListsEditorState
 > {
+  static defaultProps = {
+    filter: "owned",
+    filteredCustomLists: [],
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -32,6 +42,56 @@ export default class LaneCustomListsEditor extends React.Component<
     this.onDragEnd = this.onDragEnd.bind(this);
   }
 
+  renderFilterSelect(): JSX.Element {
+    const filters = [
+      ["All", ""],
+      ["Owned", "owned"],
+      ["Subscribed", "shared-in"],
+    ];
+
+    return (
+      <fieldset>
+        <legend className="visuallyHidden">Select filter type</legend>
+
+        <EditableInput
+          elementType="select"
+          name="filter"
+          label="Show "
+          value={this.props.filter}
+          onChange={this.props.changeFilter}
+        >
+          {filters.map(([label, value]) => (
+            <option
+              key={value}
+              value={value}
+              aria-selected={this.props.filter === value}
+            >
+              {label}
+            </option>
+          ))}
+        </EditableInput>
+      </fieldset>
+    );
+  }
+
+  renderListInfo(list): JSX.Element {
+    return (
+      <>
+        <GrabIcon />
+        <div className="list-info">
+          <div className="list-name">
+            {!list.is_owner && (
+              <ShareIcon title="This list is shared by another library." />
+            )}
+            {list.name}
+          </div>
+          <div className="list-count">Items in list: {list.entry_count}</div>
+          <div className="list-id">ID-{list.id}</div>
+        </div>
+      </>
+    );
+  }
+
   render(): JSX.Element {
     return (
       <DragDropContext
@@ -42,6 +102,7 @@ export default class LaneCustomListsEditor extends React.Component<
           <div className="available-lists">
             <div className="droppable-header">
               <h4>Available Lists ({this.listsNotInLane().length})</h4>
+              {this.renderFilterSelect()}
             </div>
             <Droppable
               droppableId="available-lists"
@@ -73,14 +134,7 @@ export default class LaneCustomListsEditor extends React.Component<
                               style={provided.draggableStyle}
                               {...provided.dragHandleProps}
                             >
-                              <GrabIcon />
-                              <div className="list-info">
-                                <div className="list-name">{list.name}</div>
-                                <div className="list-count">
-                                  Items in list: {list.entry_count}
-                                </div>
-                                <div className="list-id">ID-{list.id}</div>
-                              </div>
+                              {this.renderListInfo(list)}
                               <div className="links">
                                 <Button
                                   className="inverted"
@@ -137,14 +191,7 @@ export default class LaneCustomListsEditor extends React.Component<
                             style={provided.draggableStyle}
                             {...provided.dragHandleProps}
                           >
-                            <GrabIcon />
-                            <div className="list-info">
-                              <div className="list-name">{list.name}</div>
-                              <div className="list-count">
-                                Items in list: {list.entry_count}
-                              </div>
-                              <div className="list-id">ID-{list.id}</div>
-                            </div>
+                            {this.renderListInfo(list)}
                             <div className="links">
                               <Button
                                 className="danger"
@@ -176,7 +223,7 @@ export default class LaneCustomListsEditor extends React.Component<
 
   listsNotInLane(): CustomListData[] {
     const lists = [];
-    for (const list of this.props.allCustomLists || []) {
+    for (const list of this.props.filteredCustomLists || []) {
       let found = false;
       for (const listId of this.getCustomListIds()) {
         if (list.id === listId) {
diff --git a/src/components/LaneEditor.tsx b/src/components/LaneEditor.tsx
index f4ea43811..f00ffebcb 100644
--- a/src/components/LaneEditor.tsx
+++ b/src/components/LaneEditor.tsx
@@ -24,6 +24,7 @@ export interface LaneEditorProps extends React.Props<LaneEditor> {
 }
 
 export interface LaneEditorState {
+  filter: string;
   name: string;
   customListIds: number[];
   inheritParentRestrictions: boolean;
@@ -39,6 +40,7 @@ export default class LaneEditor extends React.Component<
   constructor(props) {
     super(props);
     this.state = {
+      filter: "owned",
       name: this.props.lane && this.props.lane.display_name,
       customListIds: (this.props.lane && this.props.lane.custom_list_ids) || [],
       inheritParentRestrictions:
@@ -46,6 +48,7 @@ export default class LaneEditor extends React.Component<
     };
     this.changeName = this.changeName.bind(this);
     this.changeCustomLists = this.changeCustomLists.bind(this);
+    this.changeFilter = this.changeFilter.bind(this);
     this.changeInheritParentRestrictions = this.changeInheritParentRestrictions.bind(
       this
     );
@@ -56,6 +59,24 @@ export default class LaneEditor extends React.Component<
     this.renderInfo = this.renderInfo.bind(this);
   }
 
+  filterLists(lists?: CustomListData[]) {
+    lists = lists || this.props.customLists || [];
+
+    const { filter } = this.state;
+
+    let selectedFilter = null;
+
+    if (filter === "owned") {
+      selectedFilter = (list) => list.is_owner;
+    } else if (filter === "shared-in") {
+      selectedFilter = (list) => !list.is_owner;
+    } else if (filter === "shared-out") {
+      selectedFilter = (list) => list.is_owner && list.is_shared;
+    }
+
+    return selectedFilter ? lists.filter(selectedFilter) : lists;
+  }
+
   render(): JSX.Element {
     const parent = this.props.findParentOfLane(this.props.lane);
     return (
@@ -116,6 +137,9 @@ export default class LaneEditor extends React.Component<
           <LaneCustomListsEditor
             allCustomLists={this.props.customLists}
             customListIds={this.state.customListIds}
+            filter={this.state.filter}
+            filteredCustomLists={this.filterLists()}
+            changeFilter={this.changeFilter}
             onUpdate={this.changeCustomLists}
             ref={this.laneCustomListsRef}
           />
@@ -205,6 +229,10 @@ export default class LaneEditor extends React.Component<
     this.setState(Object.assign({}, this.state, { customListIds }));
   }
 
+  changeFilter(filter) {
+    this.setState({ filter });
+  }
+
   changeInheritParentRestrictions() {
     const inheritParentRestrictions = !this.state.inheritParentRestrictions;
     this.setState(Object.assign({}, this.state, { inheritParentRestrictions }));
diff --git a/src/components/__tests__/LaneCustomListsEditor-test.tsx b/src/components/__tests__/LaneCustomListsEditor-test.tsx
index d6497fbe1..dab4e8070 100644
--- a/src/components/__tests__/LaneCustomListsEditor-test.tsx
+++ b/src/components/__tests__/LaneCustomListsEditor-test.tsx
@@ -6,6 +6,7 @@ import { shallow, mount } from "enzyme";
 
 import { Droppable, Draggable } from "react-beautiful-dnd";
 import LaneCustomListsEditor from "../LaneCustomListsEditor";
+import ShareIcon from "../icons/ShareIcon";
 
 describe("LaneCustomListsEditor", () => {
   let wrapper;
@@ -22,10 +23,17 @@ describe("LaneCustomListsEditor", () => {
   });
 
   it("renders available lists", () => {
+    const filteredCustomListsData = [
+      allCustomListsData[0],
+      allCustomListsData[2],
+    ];
+
     let wrapper = mount(
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[]}
+        filter="owned"
+        filteredCustomLists={filteredCustomListsData}
       />
     );
     let container = wrapper.find(".available-lists");
@@ -35,19 +43,19 @@ describe("LaneCustomListsEditor", () => {
     expect(droppable.length).to.equal(1);
 
     let lists = droppable.find(Draggable);
-    expect(lists.length).to.equal(3);
+    expect(lists.length).to.equal(2);
 
     expect(lists.at(0).text()).to.contain("list 1");
     expect(lists.at(0).text()).to.contain("Items in list: 0");
-    expect(lists.at(1).text()).to.contain("list 2");
-    expect(lists.at(1).text()).to.contain("Items in list: 2");
-    expect(lists.at(2).text()).to.contain("list 3");
-    expect(lists.at(2).text()).to.contain("Items in list: 0");
+    expect(lists.at(1).text()).to.contain("list 3");
+    expect(lists.at(1).text()).to.contain("Items in list: 0");
 
     wrapper = mount(
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
-        customListIds={[1, 3]}
+        customListIds={[1]}
+        filter="owned"
+        filteredCustomLists={filteredCustomListsData}
       />
     );
 
@@ -60,8 +68,71 @@ describe("LaneCustomListsEditor", () => {
     lists = droppable.find(Draggable);
     expect(lists.length).to.equal(1);
 
-    expect(lists.at(0).text()).to.contain("list 2");
-    expect(lists.at(0).text()).to.contain("Items in list: 2");
+    expect(lists.at(0).text()).to.contain("list 3");
+    expect(lists.at(0).text()).to.contain("Items in list: 0");
+  });
+
+  it("renders a share icon on available lists that are not owned by the current library", () => {
+    const sharedCustomListsData = [
+      ...allCustomListsData,
+      {
+        id: 4,
+        name: "list 4",
+        entry_count: 0,
+        is_owner: false,
+        is_shared: true,
+      },
+    ];
+
+    const wrapper = mount(
+      <LaneCustomListsEditor
+        allCustomLists={sharedCustomListsData}
+        customListIds={[]}
+        filter=""
+        filteredCustomLists={sharedCustomListsData}
+      />
+    );
+
+    const lists = wrapper.find(".available-lists").find(Draggable);
+
+    expect(lists.length).to.equal(4);
+
+    expect(lists.at(0).find(ShareIcon).length).to.equal(0);
+    expect(lists.at(1).find(ShareIcon).length).to.equal(0);
+    expect(lists.at(2).find(ShareIcon).length).to.equal(0);
+    expect(lists.at(3).find(ShareIcon).length).to.equal(1);
+  });
+
+  it("renders filter select", () => {
+    const changeFilter = stub();
+
+    const wrapper = mount(
+      <LaneCustomListsEditor
+        allCustomLists={allCustomListsData}
+        customListIds={[]}
+        filter="owned"
+        filteredCustomLists={allCustomListsData}
+        changeFilter={changeFilter}
+      />
+    );
+
+    const select = wrapper.find('select[name="filter"]');
+
+    expect(select.prop("value")).to.equal("owned");
+
+    const options = select.find("option");
+
+    expect(options.length).to.equal(3);
+
+    expect(options.at(0).prop("value")).to.equal("");
+    expect(options.at(1).prop("value")).to.equal("owned");
+    expect(options.at(2).prop("value")).to.equal("shared-in");
+
+    select.getDOMNode().value = "shared-in";
+    select.simulate("change");
+
+    expect(changeFilter.callCount).to.equal(1);
+    expect(changeFilter.args[0]).to.deep.equal(["shared-in"]);
   });
 
   it("renders current lists", () => {
@@ -69,6 +140,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
       />
     );
     let container = wrapper.find(".current-lists");
@@ -84,6 +157,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[2, 3]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
       />
     );
 
@@ -102,11 +177,42 @@ describe("LaneCustomListsEditor", () => {
     expect(lists.at(1).text()).to.contain("Items in list: 0");
   });
 
+  it("renders a share icon on current lists that are not owned by the current library", () => {
+    const sharedCustomListsData = [
+      ...allCustomListsData,
+      {
+        id: 4,
+        name: "list 4",
+        entry_count: 0,
+        is_owner: false,
+        is_shared: true,
+      },
+    ];
+
+    const wrapper = mount(
+      <LaneCustomListsEditor
+        allCustomLists={sharedCustomListsData}
+        customListIds={[3, 4]}
+        filter=""
+        filteredCustomLists={sharedCustomListsData}
+      />
+    );
+
+    const lists = wrapper.find(".current-lists").find(Draggable);
+
+    expect(lists.length).to.equal(2);
+
+    expect(lists.at(0).find(ShareIcon).length).to.equal(0);
+    expect(lists.at(1).find(ShareIcon).length).to.equal(1);
+  });
+
   it("prevents dragging within available lists", () => {
     const wrapper = mount(
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
       />
     );
 
@@ -128,6 +234,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[1, 2]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
       />
     );
 
@@ -149,6 +257,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[1]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
         onUpdate={onUpdate}
       />
     );
@@ -194,6 +304,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[1]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
       />
     );
 
@@ -235,6 +347,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[1, 2]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
         onUpdate={onUpdate}
       />
     );
@@ -281,6 +395,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[2]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
         onUpdate={onUpdate}
       />
     );
@@ -304,6 +420,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[1, 2]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
         onUpdate={onUpdate}
       />
     );
@@ -326,6 +444,8 @@ describe("LaneCustomListsEditor", () => {
       <LaneCustomListsEditor
         allCustomLists={allCustomListsData}
         customListIds={[1]}
+        filter=""
+        filteredCustomLists={allCustomListsData}
         onUpdate={onUpdate}
       />
     );
diff --git a/src/components/__tests__/LaneEditor-test.tsx b/src/components/__tests__/LaneEditor-test.tsx
index ff7fb957a..4c1dd9b55 100644
--- a/src/components/__tests__/LaneEditor-test.tsx
+++ b/src/components/__tests__/LaneEditor-test.tsx
@@ -131,14 +131,14 @@ describe("LaneEditor", () => {
       />
     );
 
-    let input = wrapper.find(EditableInput);
+    let input = wrapper.find(".lane-details").find(EditableInput);
     expect(input.props().checked).to.be.true;
     expect(input.props().label).to.contain("restrictions");
 
     const onChange = input.props().onChange;
     onChange();
     wrapper.update();
-    input = wrapper.find(EditableInput);
+    input = wrapper.find(".lane-details").find(EditableInput);
     expect(input.props().checked).to.be.false;
   });
 
@@ -146,9 +146,46 @@ describe("LaneEditor", () => {
     const listsEditor = wrapper.find(LaneCustomListsEditor);
     expect(listsEditor.length).to.equal(1);
     expect(listsEditor.props().allCustomLists).to.deep.equal(customListsData);
+    expect(listsEditor.props().filteredCustomLists).to.deep.equal(
+      customListsData
+    );
     expect(listsEditor.props().customListIds).to.deep.equal([1]);
   });
 
+  it("filters the lists passed to the custom lists editor's filteredCustomLists prop", () => {
+    const allCustomListsData = [
+      { id: 1, name: "list 1", entries: [], is_owner: true, is_shared: false },
+      { id: 2, name: "list 2", entries: [], is_owner: false, is_shared: true },
+    ];
+
+    wrapper.setProps({
+      customLists: allCustomListsData,
+    });
+
+    let listsEditor;
+
+    listsEditor = wrapper.find(LaneCustomListsEditor);
+
+    // The default filter is owned.
+    expect(listsEditor.props().filteredCustomLists).to.deep.equal([
+      allCustomListsData[0],
+    ]);
+
+    listsEditor.invoke("changeFilter")("shared-in");
+    listsEditor = wrapper.find(LaneCustomListsEditor);
+
+    expect(listsEditor.props().filteredCustomLists).to.deep.equal([
+      allCustomListsData[1],
+    ]);
+
+    listsEditor.invoke("changeFilter")("");
+    listsEditor = wrapper.find(LaneCustomListsEditor);
+
+    expect(listsEditor.props().filteredCustomLists).to.deep.equal(
+      allCustomListsData
+    );
+  });
+
   it("deletes lane", () => {
     wrapper = mount(
       <LaneEditor
diff --git a/src/stylesheets/lane_editor.scss b/src/stylesheets/lane_editor.scss
index fbfb589cc..f2fafb0b0 100644
--- a/src/stylesheets/lane_editor.scss
+++ b/src/stylesheets/lane_editor.scss
@@ -93,8 +93,17 @@
     }
 
     .droppable-header {
+      display: flex;
+      justify-content: space-between;
       flex: 0 0 auto;
       overflow: hidden;
+
+      .form-group {
+        .form-control {
+          display: inline;
+          width: auto;
+        }
+      }
     }
 
     .droppable {
@@ -132,7 +141,7 @@
           }
         }
 
-        svg {
+        > svg {
           margin-top: 6px;
           margin-right: 10px;
         }
@@ -150,6 +159,10 @@
 
         .list-name, .list-id {
           font-weight: bold;
+
+          svg {
+            margin-right: 4px;
+          }
         }
 
         .list-count {