fix: clear all filters when in list view (backport #20342) (#20746)

cypress/integration/folder_navigation.js

@@ -7,8 +7,8 @@ context("Folder Navigation", () => {
 
 	it("Adding Folders", () => {
 		//Adding filter to go into the home folder
-		cy.get(".filter-selector > .btn").findByText("1 filter").click();
-		cy.findByRole("button", { name: "Clear Filters" }).click();
+		cy.get(".filter-x-button").click();
+		cy.click_filter_button();
 		cy.get(".filter-action-buttons > .text-muted").findByText("+ Add a Filter").click();
 		cy.get(".fieldname-select-area > .awesomplete > .form-control:last").type("Fol{enter}");
 		cy.get(
@@ -47,9 +47,13 @@ context("Folder Navigation", () => {
 		//Adding a file inside the Test Folder
 		cy.findByRole("button", { name: "Add File" }).eq(0).click({ force: true });
 		cy.get(".file-uploader").findByText("Link").click();
-		cy.get(".input-group > .form-control").type(
-			"https://wallpaperplay.com/walls/full/8/2/b/72402.jpg"
-		);
+		cy.get(".input-group > input.form-control:visible").as("upload_input");
+		cy.get("@upload_input").type("https://wallpaperplay.com/walls/full/8/2/b/72402.jpg", {
+			waitForAnimations: false,
+			parseSpecialCharSequences: false,
+			force: true,
+			delay: 100,
+		});
 		cy.click_modal_primary_button("Upload");
 
 		//To check if the added file is present in the Test Folder

cypress/integration/list_paging.js

@@ -12,7 +12,7 @@ context("List Paging", () => {
 
 	it("test load more with count selection buttons", () => {
 		cy.visit("/app/todo/view/report");
-		cy.clear_filters();
+		cy.get(".filter-x-button").click();
 
 		cy.get(".list-paging-area .list-count").should("contain.text", "20 of");
 		cy.get(".list-paging-area .btn-more").click();

cypress/integration/list_view_drag_select.js

@@ -5,6 +5,7 @@ context("List View", () => {
 	});
 
 	it("List view check rows on drag", () => {
+		cy.get(".filter-x-button").click();
 		cy.get(".list-row-checkbox").then(($checkbox) => {
 			cy.wrap($checkbox).first().trigger("mousedown");
 			cy.get(".level.list-row").each(($ele) => {

cypress/integration/sidebar.js

@@ -53,7 +53,7 @@ context("Sidebar", () => {
 		);
 
 		//To check if there is no filter added to the listview
-		cy.get(".filter-selector > .btn").should("contain", "Filter");
+		cy.get(".filter-button").should("contain", "Filter");
 
 		//To add a filter to display data into the listview
 		cy.get(".group-by-field.show > .dropdown-menu > .group-by-item > .dropdown-item").click();

cypress/support/commands.js

@@ -475,7 +475,7 @@ Cypress.Commands.add("click_listview_row_item_with_text", (text) => {
 });
 
 Cypress.Commands.add("click_filter_button", () => {
-	cy.get(".filter-selector > .btn").click();
+	cy.get(".filter-button").click();
 });
 
 Cypress.Commands.add("click_listview_primary_button", (btn_name) => {

frappe/public/js/frappe/list/base_list.js

@@ -831,22 +831,31 @@ class FilterArea {
 
 	make_filter_list() {
 		$(`<div class="filter-selector">
-			<button class="btn btn-default btn-sm filter-button">
-				<span class="filter-icon">
-					${frappe.utils.icon("filter")}
-				</span>
-				<span class="button-label hidden-xs">
+			<div class="btn-group">
+				<button class="btn btn-default btn-sm filter-button">
+					<span class="filter-icon">
+						${frappe.utils.icon("filter")}
+					</span>
+					<span class="button-label hidden-xs">
 					${__("Filter")}
-				<span>
-			</button>
+					<span>
+				</button>
+				<button class="btn btn-default btn-sm filter-x-button" title="${__("Clear all filters")}">
+					<span class="filter-icon">
+						${frappe.utils.icon("filter-x")}
+					</span>
+				</button>
+			</div>
 		</div>`).appendTo(this.$filter_list_wrapper);
 
 		this.filter_button = this.$filter_list_wrapper.find(".filter-button");
+		this.filter_x_button = this.$filter_list_wrapper.find(".filter-x-button");
 		this.filter_list = new frappe.ui.FilterGroup({
 			base_list: this.list_view,
 			parent: this.$filter_list_wrapper,
 			doctype: this.list_view.doctype,
 			filter_button: this.filter_button,
+			filter_x_button: this.filter_x_button,
 			default_filters: [],
 			on_change: () => this.refresh_list_view(),
 		});

frappe/public/js/frappe/ui/filters/filter_list.js

@@ -14,9 +14,29 @@ frappe.ui.FilterGroup = class {
 
 	make_popover() {
 		this.init_filter_popover();
+		this.set_clear_all_filters_event();
 		this.set_popover_events();
 	}
 
+	set_clear_all_filters_event() {
+		this.filter_x_button.on("click", () => {
+			this.toggle_empty_filters(true);
+			if (typeof this.base_list !== "undefined") {
+				// It's a list view. Clear all the filters, also the ones in the
+				// FilterArea outside this FilterGroup
+				this.base_list.filter_area.clear();
+			} else {
+				// Not a list view, just clear the filters in this FilterGroup
+				this.clear_filters();
+			}
+			this.update_filter_button();
+		});
+	}
+
+	hide_popover() {
+		this.filter_button.popover("hide");
+	}
+
 	init_filter_popover() {
 		this.filter_button.popover({
 			content: this.get_filter_area_template(),
@@ -54,7 +74,7 @@ frappe.ui.FilterGroup = class {
 					!$(e.target).is(this.filter_button) &&
 					!in_datepicker
 				) {
-					this.wrapper && this.filter_button.popover("hide");
+					this.wrapper && this.hide_popover();
 				}
 			}
 		});
@@ -85,7 +105,7 @@ frappe.ui.FilterGroup = class {
 		// REDESIGN-TODO: (Temporary) Review and find best solution for this
 		frappe.router.on("change", () => {
 			if (this.wrapper && this.wrapper.is(":visible")) {
-				this.filter_button.popover("hide");
+				this.hide_popover();
 			}
 		});
 	}
@@ -130,11 +150,10 @@ frappe.ui.FilterGroup = class {
 			this.toggle_empty_filters(true);
 			this.clear_filters();
 			this.on_change();
+			this.hide_popover();
 		});
 
-		this.wrapper.find(".apply-filters").on("click", () => {
-			this.filter_button.popover("hide");
-		});
+		this.wrapper.find(".apply-filters").on("click", () => this.hide_popover());
 	}
 
 	add_filters(filters) {

frappe/public/scss/desk/filters.scss

@@ -1,7 +1,5 @@
 .filter-icon.active {
-	use {
-		stroke: var(--text-on-blue);
-	}
+	--icon-stroke: var(--text-on-blue);
 }
 
 .filter-popover {

frappe/public/scss/desk/list.scss

@@ -378,13 +378,14 @@ input.list-check-all {
 		padding: 0 var(--padding-xs);
 	}
 
-	.filter-button {
-		margin: 5px;
-		// padding: 4px 8px;
+	.filter-selector .btn-group {
+		margin: var(--margin-xs);
 	}
 
 	.filter-button.btn-primary-light {
 		color: var(--text-on-blue);
+		outline: 1px solid var(--bg-dark-blue);
+		z-index: 1;
 	}
 
 	.sort-selector {