feat: add clear filters option in bookings page (#12629)

* add clear filters option

* fix vscode settings.json

* use removeAllQueryParams()

* fix yarn lock

* remove toggleoption

apps/web/public/static/locales/en/common.json

@@ -1865,6 +1865,7 @@
   "looking_for_more_analytics": "Looking for more analytics?",
   "looking_for_more_insights": "Looking for more Insights?",
   "add_filter": "Add filter",
+  "remove_filters": "Clear all filters",
   "select_user": "Select User",
   "select_event_type": "Select Event Type",
   "select_date_range": "Select Date Range",

packages/features/bookings/components/FiltersContainer.tsx

@@ -21,6 +21,7 @@ import {
   Avatar,
   FilterSearchField,
   Tooltip,
+  Button,
 } from "@calcom/ui";
 import { Plus } from "@calcom/ui/components/icon";
 
@@ -94,6 +95,8 @@ const PeopleFilter = () => {
 export function FiltersContainer() {
   const { t } = useLocale();
 
+  const { removeAllQueryParams } = useFilterQuery();
+
   const [addFilterOptions, toggleOption, isFilterActive] = useBookingMultiFilterStore((state) => [
     state.addFilterOptions,
     state.toggleOption,
@@ -135,7 +138,18 @@ export function FiltersContainer() {
 
       {isPeopleFilterActive && <PeopleFilter />}
       {isEventTypeFilterActive && <EventTypeFilter />}
-
+      {(isPeopleFilterActive || isEventTypeFilterActive) && (
+        <Tooltip content={t("remove_filters")}>
+          <Button
+            color="secondary"
+            type="button"
+            onClick={() => {
+              removeAllQueryParams();
+            }}>
+            {t("remove_filters")}
+          </Button>
+        </Tooltip>
+      )}
       <TeamsFilter />
     </div>
   );