diff --git a/ui/src/app/machines/views/MachineList/MachineListControls/MachineListControls.js b/ui/src/app/machines/views/MachineList/MachineListControls/MachineListControls.js index e2df82727c..33890e17b4 100644 --- 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 index 9e05547728..18a24bdbfe 100644 --- 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( + + + + { + location = props.location; + return null; + }} + /> + + + ); + 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(