diff --git a/frontend/src/metabase/nav/components/SearchBar.tsx b/frontend/src/metabase/nav/components/SearchBar.tsx index d69c213c8b506966a103d2d816300219da7188bf..8bf04223b885f4201a5d9651502ca7c64ec3b7e8 100644 --- a/frontend/src/metabase/nav/components/SearchBar.tsx +++ b/frontend/src/metabase/nav/components/SearchBar.tsx @@ -194,16 +194,19 @@ function SearchBarView({ location, onSearchActive, onSearchInactive }: Props) { onKeyPress={handleInputKeyPress} ref={searchInput} /> - <SearchFunnelButton - icon="filter" - data-is-filtered={isFiltered} - data-testid="search-bar-filter-button" - isFiltered={isFiltered} - onClick={e => { - e.stopPropagation(); - setIsFilterModalOpen(true); - }} - /> + + {(!isSmallScreen() || isActive) && ( + <SearchFunnelButton + icon="filter" + data-is-filtered={isFiltered} + data-testid="search-bar-filter-button" + isFiltered={isFiltered} + onClick={e => { + e.stopPropagation(); + setIsFilterModalOpen(true); + }} + /> + )} {isSmallScreen() && isActive && ( <CloseSearchButton onClick={handleClickOnClose}> <Icon name="close" /> diff --git a/frontend/src/metabase/nav/components/SearchBar.unit.spec.tsx b/frontend/src/metabase/nav/components/SearchBar.unit.spec.tsx index fbbb12ad9f9c7e86d25022673247e9c3661f5b94..572a18a611b479427b9505899d6b3c7754b378d5 100644 --- a/frontend/src/metabase/nav/components/SearchBar.unit.spec.tsx +++ b/frontend/src/metabase/nav/components/SearchBar.unit.spec.tsx @@ -17,6 +17,7 @@ import { import { CollectionItem, RecentItem } from "metabase-types/api"; import SearchBar from "metabase/nav/components/SearchBar"; import { checkNotNull } from "metabase/core/utils/types"; +import * as domUtils from "metabase/lib/dom"; const TEST_SEARCH_RESULTS: CollectionItem[] = [ "Card ABC", @@ -97,6 +98,34 @@ describe("SearchBar", () => { }); }); + describe("rendering filter button with screen size", () => { + it("should not render filter button on small screens", () => { + const isSmallScreenMock = jest.spyOn(domUtils, "isSmallScreen"); + isSmallScreenMock.mockReturnValue(true); + + setup(); + + expect( + screen.queryByTestId("search-bar-filter-button"), + ).not.toBeInTheDocument(); + + isSmallScreenMock.mockRestore(); + }); + + it("should render filter button on large screens", () => { + const isSmallScreenMock = jest.spyOn(domUtils, "isSmallScreen"); + isSmallScreenMock.mockReturnValue(false); + + setup(); + + expect( + screen.getByTestId("search-bar-filter-button"), + ).toBeInTheDocument(); + + isSmallScreenMock.mockRestore(); + }); + }); + describe("focusing on search bar", () => { it("should render `Recent Searches` list when clicking the search bar", async () => { setup();