Fix filter accordion URL update regression. (#1032)

Co-authored-by: Adam Collard <[email protected]>
canonical · Apr 24, 2020 · 845508e · 845508e
1 parent cf82332
commit 845508e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/ui/src/app/machines/views/MachineList/MachineListControls/MachineListControls.js b/ui/src/app/machines/views/MachineList/MachineListControls/MachineListControls.js
@@ -25,15 +25,20 @@ const MachineListControls = ({
   // Handle setting the URL and filter in state whenever search text changes.
   // Filtering function is debounced to prevent excessive repaints.
   useEffect(() => {
+    const updateURL = () => {
+      const filters = getCurrentFilters(searchText);
+      history.push({ search: filtersToQueryString(filters) });
+    };
+
     if (debouncing) {
       intervalRef.current = setTimeout(() => {
         setFilter(searchText);
-        const filters = getCurrentFilters(searchText);
-        history.push({ search: filtersToQueryString(filters) });
+        updateURL();
         setDebouncing(false);
       }, DEBOUNCE_INTERVAL);
     } else {
       setFilter(searchText);
+      updateURL();
     }
     return () => clearTimeout(intervalRef.current);
   }, [debouncing, history, searchText, setFilter]);

diff --git a/ui/src/app/machines/views/MachineList/MachineListControls/MachineListControls.test.js b/ui/src/app/machines/views/MachineList/MachineListControls/MachineListControls.test.js
@@ -66,6 +66,40 @@ describe("MachineListControls", () => {
     expect(location.search).toBe("?status=new");
   });
 
+  it("changes the URL when the filter accordion changes", () => {
+    let location;
+    const store = mockStore(initialState);
+    const wrapper = mount(
+      <Provider store={store}>
+        <MemoryRouter
+          initialEntries={[
+            { pathname: "/machines", search: "?q=test+search", key: "testKey" },
+          ]}
+        >
+          <MachineListControls
+            filter=""
+            grouping="none"
+            setFilter={jest.fn()}
+            setGrouping={jest.fn()}
+            setHiddenGroups={jest.fn()}
+          />
+          <Route
+            path="*"
+            render={(props) => {
+              location = props.location;
+              return null;
+            }}
+          />
+        </MemoryRouter>
+      </Provider>
+    );
+    act(() => {
+      wrapper.find("FilterAccordion").props().setSearchText("status:new");
+    });
+    wrapper.update();
+    expect(location.search).toBe("?status=new");
+  });
+
   it("displays a spinner while debouncing search box input", () => {
     const store = mockStore(initialState);
     const wrapper = mount(