From 9599f2c6237cb9fe46a6b4c115869ddfb0f0f244 Mon Sep 17 00:00:00 2001
From: Jonathan Green <jonathan@razzard.com>
Date: Wed, 27 Mar 2024 14:29:50 -0300
Subject: [PATCH 1/6] Add fiction list filter

---
 src/components/AdvancedSearchBuilder.tsx     |  6 ++++
 src/components/AdvancedSearchFilterInput.tsx | 37 ++++++++++++++++++--
 src/stylesheets/advanced_search.scss         |  6 ++++
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/AdvancedSearchBuilder.tsx b/src/components/AdvancedSearchBuilder.tsx
index 578e47be3..ac5431b4b 100644
--- a/src/components/AdvancedSearchBuilder.tsx
+++ b/src/components/AdvancedSearchBuilder.tsx
@@ -33,6 +33,12 @@ export const fields = [
   { value: "audience", label: "audience" },
   { value: "author", label: "author" },
   { value: "title", label: "title" },
+  {
+    value: "fiction",
+    label: "fiction",
+    options: ["fiction", "nonfiction"],
+    operators: ["eq"],
+  },
 ];
 
 export const operators = [
diff --git a/src/components/AdvancedSearchFilterInput.tsx b/src/components/AdvancedSearchFilterInput.tsx
index c053e4750..feb7500e4 100644
--- a/src/components/AdvancedSearchFilterInput.tsx
+++ b/src/components/AdvancedSearchFilterInput.tsx
@@ -25,6 +25,7 @@ export default function AdvancedSearchFilterInput({
 
   const handleKeyChange = (value) => {
     setFilterKey(value);
+    setFilterValue("");
   };
 
   const handleOpChange = () => {
@@ -64,6 +65,26 @@ export default function AdvancedSearchFilterInput({
   };
 
   const selectedField = fields.find((field) => field.value === filterKey);
+  const selectedFieldOperators =
+    selectedField.operators !== undefined
+      ? operators.filter((element) => {
+          return selectedField.operators.includes(element.value);
+        })
+      : operators;
+
+  const selectedFieldOptions = selectedField.options ?? [];
+  const selectedFieldElementType = selectedFieldOptions.length
+    ? "input"
+    : "select";
+  if (selectedFieldOptions.length !== 0) {
+    if (
+      !selectedFieldOptions.find((element) => {
+        return element === filterValue;
+      })
+    ) {
+      setFilterValue(selectedFieldOptions[0]);
+    }
+  }
 
   return (
     <form className="advanced-search-filter-input">
@@ -89,8 +110,9 @@ export default function AdvancedSearchFilterInput({
           onChange={handleOpChange}
           ref={opSelect}
           value={filterOp}
+          className="filter-operator"
         >
-          {operators.map(({ value, label }) => (
+          {selectedFieldOperators.map(({ value, label }) => (
             <option
               aria-selected={value === filterOp}
               key={value}
@@ -104,14 +126,23 @@ export default function AdvancedSearchFilterInput({
         <EditableInput
           aria-label="filter value"
           description={selectedField.helpText}
-          elementType="input"
+          elementType={selectedFieldElementType}
           type="text"
           optionalText={false}
           placeholder={selectedField.placeholder}
           ref={valueInput}
           value={filterValue}
           onChange={handleValueChange}
-        />
+          className="filter-value"
+        >
+          {selectedFieldOptions.length === 0
+            ? null
+            : selectedFieldOptions.map((value) => (
+                <option key={value} value={value}>
+                  {value}
+                </option>
+              ))}
+        </EditableInput>
 
         <Button
           className="inverted inline"
diff --git a/src/stylesheets/advanced_search.scss b/src/stylesheets/advanced_search.scss
index 3197fb4c1..2dcb1cee1 100644
--- a/src/stylesheets/advanced_search.scss
+++ b/src/stylesheets/advanced_search.scss
@@ -19,6 +19,12 @@
       width: 40em;
     }
 
+    .filter-operator {
+      select {
+        width: 15em;
+      }
+    }
+
     .filter-key-options {
       .form-group {
         margin: 5px 20px 0 2px;;

From 2aa2eb4a483166a9c5993effa5743cb9024bc1b7 Mon Sep 17 00:00:00 2001
From: Jonathan Green <jonathan@razzard.com>
Date: Wed, 27 Mar 2024 14:48:18 -0300
Subject: [PATCH 2/6] Some cleanup

---
 src/components/AdvancedSearchFilterInput.tsx | 22 +++++++++-----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/AdvancedSearchFilterInput.tsx b/src/components/AdvancedSearchFilterInput.tsx
index feb7500e4..62fec1545 100644
--- a/src/components/AdvancedSearchFilterInput.tsx
+++ b/src/components/AdvancedSearchFilterInput.tsx
@@ -25,7 +25,14 @@ export default function AdvancedSearchFilterInput({
 
   const handleKeyChange = (value) => {
     setFilterKey(value);
-    setFilterValue("");
+    const selected = fields.find((field) => field.value === value);
+
+    // Set the value to either the default option, or blank when changing the filter type
+    if (selected.options && selected.options.length) {
+      setFilterValue(selected.options[0]);
+    } else {
+      setFilterValue("");
+    }
   };
 
   const handleOpChange = () => {
@@ -74,17 +81,8 @@ export default function AdvancedSearchFilterInput({
 
   const selectedFieldOptions = selectedField.options ?? [];
   const selectedFieldElementType = selectedFieldOptions.length
-    ? "input"
-    : "select";
-  if (selectedFieldOptions.length !== 0) {
-    if (
-      !selectedFieldOptions.find((element) => {
-        return element === filterValue;
-      })
-    ) {
-      setFilterValue(selectedFieldOptions[0]);
-    }
-  }
+    ? "select"
+    : "input";
 
   return (
     <form className="advanced-search-filter-input">

From 078c364c5cc0b743e6f2a9bc9f8cfae6f59a0ec0 Mon Sep 17 00:00:00 2001
From: Jonathan Green <jonathan@razzard.com>
Date: Wed, 27 Mar 2024 14:54:52 -0300
Subject: [PATCH 3/6] css tweaks

---
 src/stylesheets/advanced_search.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/stylesheets/advanced_search.scss b/src/stylesheets/advanced_search.scss
index 2dcb1cee1..6ec5c39fd 100644
--- a/src/stylesheets/advanced_search.scss
+++ b/src/stylesheets/advanced_search.scss
@@ -15,8 +15,10 @@
       }
     }
 
-    input[type="text"] {
-      width: 40em;
+    .filter-value {
+      input[type="text"],select {
+        width: 40em;
+      }
     }
 
     .filter-operator {

From c4fb0be8aff8f53758464355bb924f55fb819c40 Mon Sep 17 00:00:00 2001
From: Jonathan Green <jonathan@razzard.com>
Date: Wed, 27 Mar 2024 15:54:38 -0300
Subject: [PATCH 4/6] Add some tests

---
 .../AdvancedSearchFilterInput-test.tsx        | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/__tests__/AdvancedSearchFilterInput-test.tsx b/src/components/__tests__/AdvancedSearchFilterInput-test.tsx
index 80be87ace..14b956f95 100644
--- a/src/components/__tests__/AdvancedSearchFilterInput-test.tsx
+++ b/src/components/__tests__/AdvancedSearchFilterInput-test.tsx
@@ -43,12 +43,59 @@ describe("AdvancedSearchFilterInput", () => {
     });
   });
 
+  it("should restrict the operator selection, if the filter requests it", () => {
+    const fictionRadioButton = wrapper.find(
+      'input[type="radio"][value="fiction"]'
+    );
+    fictionRadioButton.getDOMNode().checked = true;
+    fictionRadioButton.simulate("change");
+
+    const options = wrapper.find(".filter-operator select > option");
+    const fictionField = fields.find((element) => {
+      return element.value === "fiction";
+    });
+
+    expect(options).to.have.length(fictionField.operators.length);
+  });
+
   it("should render a text input for value entry", () => {
-    const valueInput = wrapper.find('input[type="text"]');
+    const valueSelect = wrapper.find(".filter-value select");
+    const valueInput = wrapper.find('.filter-value input[type="text"]');
 
+    expect(valueSelect).to.have.length(0);
     expect(valueInput).to.have.length(1);
   });
 
+  it("should render a select for value selection, if the filter requests it", () => {
+    const fictionRadioButton = wrapper.find(
+      'input[type="radio"][value="fiction"]'
+    );
+    fictionRadioButton.getDOMNode().checked = true;
+    fictionRadioButton.simulate("change");
+
+    const valueSelect = wrapper.find(".filter-value select");
+    const valueInput = wrapper.find('.filter-value input[type="text"]');
+
+    expect(valueSelect).to.have.length(1);
+    expect(valueInput).to.have.length(0);
+  });
+
+  it("should clear the current value when changing the filter", () => {
+    const valueInput = wrapper.find(".filter-value input");
+
+    valueInput.getDOMNode().value = "ABC";
+    valueInput.simulate("change");
+
+    const filterRadioButton = wrapper.find(
+      'input[type="radio"][value="data_source"]'
+    );
+
+    filterRadioButton.getDOMNode().checked = true;
+    filterRadioButton.simulate("change");
+
+    expect(valueInput.getDOMNode().value).to.equal("");
+  });
+
   it("should render an Add Filter button", () => {
     const button = wrapper.find("button");
 

From 0e696bc9d4176932071f9d0417efe8200d40bffe Mon Sep 17 00:00:00 2001
From: Jonathan Green <jonathan@razzard.com>
Date: Thu, 28 Mar 2024 10:00:10 -0300
Subject: [PATCH 5/6] Code review feedback

---
 src/components/AdvancedSearchFilterInput.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/AdvancedSearchFilterInput.tsx b/src/components/AdvancedSearchFilterInput.tsx
index 62fec1545..7a1efe561 100644
--- a/src/components/AdvancedSearchFilterInput.tsx
+++ b/src/components/AdvancedSearchFilterInput.tsx
@@ -72,12 +72,9 @@ export default function AdvancedSearchFilterInput({
   };
 
   const selectedField = fields.find((field) => field.value === filterKey);
-  const selectedFieldOperators =
-    selectedField.operators !== undefined
-      ? operators.filter((element) => {
-          return selectedField.operators.includes(element.value);
-        })
-      : operators;
+  const selectedFieldOperators = selectedField.operators
+    ? operators.filter((op) => selectedField.operators.includes(op.value))
+    : operators;
 
   const selectedFieldOptions = selectedField.options ?? [];
   const selectedFieldElementType = selectedFieldOptions.length

From 1645480983d2a67f9b33beb441ca05400db9cc54 Mon Sep 17 00:00:00 2001
From: Jonathan Green <jonathan@razzard.com>
Date: Thu, 28 Mar 2024 11:04:56 -0300
Subject: [PATCH 6/6] Update filter operator as well, if needed. Add an
 additional test for this case.

---
 src/components/AdvancedSearchFilterInput.tsx  | 11 +++++-
 .../AdvancedSearchFilterInput-test.tsx        | 37 +++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/AdvancedSearchFilterInput.tsx b/src/components/AdvancedSearchFilterInput.tsx
index 7a1efe561..126731a1f 100644
--- a/src/components/AdvancedSearchFilterInput.tsx
+++ b/src/components/AdvancedSearchFilterInput.tsx
@@ -27,12 +27,21 @@ export default function AdvancedSearchFilterInput({
     setFilterKey(value);
     const selected = fields.find((field) => field.value === value);
 
-    // Set the value to either the default option, or blank when changing the filter type
+    // Set the value to either the first option, or blank.
     if (selected.options && selected.options.length) {
       setFilterValue(selected.options[0]);
     } else {
       setFilterValue("");
     }
+
+    // Update operator if the filter doesn't support it.
+    if (
+      selected.operators &&
+      selected.operators.length &&
+      !selected.operators.find((op) => op === filterOp)
+    ) {
+      setFilterOp(selected.operators[0]);
+    }
   };
 
   const handleOpChange = () => {
diff --git a/src/components/__tests__/AdvancedSearchFilterInput-test.tsx b/src/components/__tests__/AdvancedSearchFilterInput-test.tsx
index 14b956f95..5b66dc645 100644
--- a/src/components/__tests__/AdvancedSearchFilterInput-test.tsx
+++ b/src/components/__tests__/AdvancedSearchFilterInput-test.tsx
@@ -58,6 +58,43 @@ describe("AdvancedSearchFilterInput", () => {
     expect(options).to.have.length(fictionField.operators.length);
   });
 
+  it("should use the currently selected operator when changing filters", () => {
+    const sourceFilterButton = wrapper.find(
+      'input[type="radio"][value="data_source"]'
+    );
+    const fictionFilterButton = wrapper.find(
+      'input[type="radio"][value="fiction"]'
+    );
+    const fictionField = fields.find((element) => {
+      return element.value === "fiction";
+    });
+
+    const operatorOptions = wrapper.find(".filter-operator select");
+    operatorOptions.getDOMNode().value = "regex";
+    operatorOptions.simulate("change");
+
+    sourceFilterButton.getDOMNode().checked = true;
+    sourceFilterButton.simulate("change");
+
+    expect(operatorOptions.getDOMNode().value).to.equal("regex");
+
+    // unless the operator is not supported by the filter.
+    fictionFilterButton.getDOMNode().checked = true;
+    fictionFilterButton.simulate("change");
+
+    expect(operatorOptions.getDOMNode().value).to.equal(
+      fictionField.operators[0]
+    );
+
+    // the new operator will be persisted when changing back to source filter
+    sourceFilterButton.getDOMNode().checked = true;
+    sourceFilterButton.simulate("change");
+
+    expect(operatorOptions.getDOMNode().value).to.equal(
+      fictionField.operators[0]
+    );
+  });
+
   it("should render a text input for value entry", () => {
     const valueSelect = wrapper.find(".filter-value select");
     const valueInput = wrapper.find('.filter-value input[type="text"]');