Merge pull request #238 from AllenInstitute/feature/update-special-fi…

…lters

Feature/update special filter UI and create any/none/fuzzy query params

packages/core/components/AnnotationFilterForm/AnnotationFilterForm.module.css

@@ -19,6 +19,10 @@
     padding-bottom: 16px;
 }
 
+.choice-group {
+    margin-bottom: 6px;
+}
+
 .footer {
     background-color: var(--primary-background-color);
     padding: 16px 30px 16px;

packages/core/components/AnnotationFilterForm/SearchBoxForm/SearchBoxForm.module.css

@@ -1,54 +1,54 @@
-.choice-group {
+.toggle {
     margin-bottom: 6px;
 }
 
-.choice-group input:disabled + label {
+.toggle input:disabled + label {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
-.choice-group :is(input, label, span) {
+.toggle :is(input, label, span), .toggle-label {
     color: var(--primary-text-color);
+    font-size: var(--l-paragraph-size);
+    font-weight: 500;
 }
 
-.choice-group label > span {
-    font-size: var(--xs-paragraph-size);
+.toggle label:hover > span {
+    color: var(--highlight-text-color) !important;
 }
 
-.choice-group label:hover > span {
-    color: var(--highlight-text-color) !important;
+.toggle-pill-off {
+    border-color: var(--border-color) !important;
+    background-color: unset !important;
 }
 
-.choice-group label::before, .choice-group label:hover::before {
-    background-color: var(--highlight-text-color);
-    border-color: var(--highlight-text-color);
+.toggle-pill-off {
+    border-color: var(--border-color) !important;
 }
 
-.choice-group label::after {
-    background-color: var(--aqua);
-    border-color: var(--aqua);
+.toggle-pill-off > span {
+    background-color: var(--border-color) !important;
 }
 
-.choice-group label:hover::after {
-    background-color: var(--bright-aqua) !important;
-    border-color: var(--bright-aqua) !important;
+.toggle-pill-off:hover > span {
+    background-color: var(--primary-text-color) !important;
 }
 
-.choice-group > div > div {
-    display: flex;
+.toggle-pill-on {
+    border: none !important;
+    background-color: var(--aqua) !important;
 }
 
-.choice-group > div > div > div:not(:first-child) {
-    margin-left: 6px;
+.toggle-pill-on > span {
+    background-color: var(--highlight-hover-text-color) !important;
 }
 
-.container {
-    padding: 8px;
+.toggle-pill-on:hover {
+    background-color: var(--dark-aqua) !important;
 }
 
-.list-picker {
-    padding: 0;
-    width: 100%;
+.container {
+    padding: 8px;
 }
 
 .title {

packages/core/components/AnnotationFilterForm/SearchBoxForm/index.tsx

@@ -1,9 +1,10 @@
+import { Toggle } from "@fluentui/react";
 import classNames from "classnames";
 import * as React from "react";
 
 import { ListItem } from "../../ListPicker/ListRow";
 import SearchBox from "../../SearchBox";
-import FileFilter from "../../../entity/FileFilter";
+import FileFilter, { FilterType } from "../../../entity/FileFilter";
 
 import styles from "./SearchBoxForm.module.css";
 
@@ -15,22 +16,44 @@ interface SearchBoxFormProps {
     onDeselectAll: () => void;
     onSelect?: (item: ListItem) => void;
     onSelectAll: () => void;
-    onSearch: (filterValue: string) => void;
+    onSearch: (filterValue: string, type: FilterType) => void;
     fieldName: string;
+    fuzzySearchEnabled?: boolean;
     defaultValue: FileFilter | undefined;
 }
 
 /**
  * This component renders a simple form for searching on text values
+ * with a toggle for exact vs fuzzy (non-exact) search matching
  */
 export default function SearchBoxForm(props: SearchBoxFormProps) {
+    const [isFuzzySearching, setIsFuzzySearching] = React.useState(!!props?.fuzzySearchEnabled);
+
+    function onSearchSubmitted(value: string) {
+        props.onSearch(value, isFuzzySearching ? FilterType.FUZZY : FilterType.DEFAULT);
+    }
+
     return (
         <div className={classNames(props.className, styles.container)}>
             <h3 className={styles.title}>{props.title}</h3>
+            <Toggle
+                label="Fuzzy search"
+                className={styles.toggle}
+                defaultChecked={isFuzzySearching}
+                onText="On"
+                inlineLabel
+                offText="Off"
+                onChange={(_, checked?) => setIsFuzzySearching(!!checked)}
+                title={`Turn ${isFuzzySearching ? "off" : "on"} fuzzy search (non-exact searching)`}
+                styles={{
+                    label: styles.toggleLabel,
+                    pill: isFuzzySearching ? styles.togglePillOn : styles.togglePillOff,
+                }}
+            />
             <SearchBox
                 defaultValue={props.defaultValue}
                 onReset={props.onDeselectAll}
-                onSearch={props.onSearch}
+                onSearch={onSearchSubmitted}
                 placeholder={"Search..."}
                 showSubmitButton={true}
             />

packages/core/components/AnnotationFilterForm/SearchBoxForm/test/SearchBoxForm.test.tsx

@@ -2,32 +2,68 @@ import { render, fireEvent } from "@testing-library/react";
 import { expect } from "chai";
 import { noop } from "lodash";
 import * as React from "react";
+import sinon from "sinon";
 
 import SearchBoxForm from "..";
 
 describe("<SearchBoxForm/>", () => {
-    // TODO: Update with the fuzzy search toggle when filters are complete
-    it.skip("renders a list picker when 'List picker' option is selection", () => {
+    it("renders clickable fuzzy search toggle", () => {
+        // Arrange
+        const onSearch = sinon.spy();
+
+        const { getByText, getByRole } = render(
+            <SearchBoxForm
+                fieldName={"foo"}
+                onSelectAll={noop}
+                onDeselectAll={noop}
+                onSearch={onSearch}
+                defaultValue={undefined}
+            />
+        );
+
+        // Consistency checks
+        expect(getByText("Off")).to.exist;
+        expect(onSearch.called).to.equal(false);
+
         // Act
-        const { getByText, getByTestId } = render(
+        fireEvent.click(getByRole("switch"));
+        // Enter values
+        fireEvent.change(getByRole("searchbox"), {
+            target: {
+                value: "bar",
+            },
+        });
+        fireEvent.keyDown(getByRole("searchbox"), {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13,
+        });
+
+        // Assert
+        expect(getByText("On")).to.exist;
+        expect(onSearch.called).to.equal(true);
+    });
+
+    it("defaults to on when fuzzy searching prop is passed as true", () => {
+        // Arrange
+        const { getByText, getByRole } = render(
             <SearchBoxForm
                 fieldName={"foo"}
-                onSelect={noop}
                 onSelectAll={noop}
-                onDeselect={noop}
                 onDeselectAll={noop}
-                items={[{ value: "foo", selected: false, displayValue: "foo" }]}
+                fuzzySearchEnabled={true}
                 onSearch={noop}
                 defaultValue={undefined}
             />
         );
+        // Consistency check
+        expect(getByText("On")).to.exist;
 
-        // Sanity check
-        expect(() => getByTestId("list-picker")).to.throw();
-
-        // Select 'List picker' filter type
-        fireEvent.click(getByText("List picker"));
+        // Act
+        fireEvent.click(getByRole("switch"));
 
-        expect(() => getByTestId("list-picker")).to.not.throw();
+        // Assert
+        expect(getByText("Off")).to.exist;
     });
 });