From 3400f71363c9b687b564392a87997bbe75341e8b Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Wed, 3 Jul 2024 17:17:01 +0200
Subject: [PATCH] feat: Add clear filter btn to filter widget

---
 src/search-manager/FilterBy.scss          |  4 ++++
 src/search-manager/FilterByBlockType.tsx  |  3 ++-
 src/search-manager/FilterByTags.tsx       |  5 +++--
 src/search-manager/SearchFilterWidget.tsx | 25 +++++++++++++++++++++++
 src/search-manager/messages.ts            |  5 +++++
 5 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/search-manager/FilterBy.scss b/src/search-manager/FilterBy.scss
index 189f31f11c..3caccac691 100644
--- a/src/search-manager/FilterBy.scss
+++ b/src/search-manager/FilterBy.scss
@@ -5,3 +5,7 @@
     width: 100%;
   }
 }
+
+.clear-filter-button:hover {
+  color: $info-900 !important;
+}
diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx
index 2c0c506422..dc65c7ca86 100644
--- a/src/search-manager/FilterByBlockType.tsx
+++ b/src/search-manager/FilterByBlockType.tsx
@@ -70,9 +70,10 @@ const FilterByBlockType: React.FC<Record<never, never>> = () => {
     <SearchFilterWidget
       appliedFilters={blockTypesFilter.map(blockType => ({ label: <BlockTypeLabel type={blockType} /> }))}
       label={<FormattedMessage {...messages.blockTypeFilter} />}
+      clearFilter={() => setBlockTypesFilter([])}
       icon={FilterList}
     >
-      <Form.Group>
+      <Form.Group className="mb-0">
         <Form.CheckboxSet
           name="block-type-filter"
           defaultValue={blockTypesFilter}
diff --git a/src/search-manager/FilterByTags.tsx b/src/search-manager/FilterByTags.tsx
index f583d37c7f..b368e8a503 100644
--- a/src/search-manager/FilterByTags.tsx
+++ b/src/search-manager/FilterByTags.tsx
@@ -168,7 +168,7 @@ const TagOptions: React.FC<{
 
 const FilterByTags: React.FC<Record<never, never>> = () => {
   const intl = useIntl();
-  const { tagsFilter } = useSearchContext();
+  const { tagsFilter, setTagsFilter } = useSearchContext();
   const [tagSearchKeywords, setTagSearchKeywords] = React.useState('');
 
   // e.g. {"Location", "Location > North America"} if those two paths of the tag tree are expanded
@@ -186,9 +186,10 @@ const FilterByTags: React.FC<Record<never, never>> = () => {
     <SearchFilterWidget
       appliedFilters={tagsFilter.map(tf => ({ label: tf.split(TAG_SEP).pop() }))}
       label={<FormattedMessage {...messages.blockTagsFilter} />}
+      clearFilter={() => setTagsFilter([])}
       icon={Tag}
     >
-      <Form.Group className="pt-3">
+      <Form.Group className="pt-3 mb-0">
         <SearchField
           onSubmit={setTagSearchKeywords}
           onChange={setTagSearchKeywords}
diff --git a/src/search-manager/SearchFilterWidget.tsx b/src/search-manager/SearchFilterWidget.tsx
index be92812dae..fff2264287 100644
--- a/src/search-manager/SearchFilterWidget.tsx
+++ b/src/search-manager/SearchFilterWidget.tsx
@@ -6,6 +6,9 @@ import {
   ModalPopup,
   useToggle,
 } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
 
 /**
  * A button that represents a filter on the search.
@@ -22,11 +25,18 @@ const SearchFilterWidget: React.FC<{
   appliedFilters: { label: React.ReactNode }[];
   label: React.ReactNode;
   children: React.ReactNode;
+  clearFilter: () => void,
   icon?: React.ReactNode; // eslint-disable-line react/require-default-props
 }> = ({ appliedFilters, ...props }) => {
+  const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = React.useState(null);
 
+  const clearAndClose = React.useCallback(() => {
+    props.clearFilter();
+    close();
+  }, [props.clearFilter]);
+
   return (
     <>
       <div className="d-flex mr-3">
@@ -53,6 +63,21 @@ const SearchFilterWidget: React.FC<{
           style={{ textAlign: 'start' }}
         >
           {props.children}
+
+          {
+            !!appliedFilters.length
+            && (
+              <div className="d-flex justify-content-end">
+                <Button
+                  onClick={clearAndClose}
+                  variant="link"
+                  className="text-info-500 text-decoration-none clear-filter-button"
+                >
+                  { intl.formatMessage(messages.clearFilter) }
+                </Button>
+              </div>
+            )
+          }
         </div>
       </ModalPopup>
     </>
diff --git a/src/search-manager/messages.ts b/src/search-manager/messages.ts
index 507013497a..7336878470 100644
--- a/src/search-manager/messages.ts
+++ b/src/search-manager/messages.ts
@@ -70,6 +70,11 @@ const messages = defineMessages({
     defaultMessage: '{numResults, plural, one {# result} other {# results}} found',
     description: 'This count displays how many matching results were found from the user\'s search',
   },
+  clearFilter: {
+    id: 'course-authoring.search-manager.searchFilterWidget.clearFilter',
+    defaultMessage: 'Clear Filter',
+    description: 'Label for the button that removes applied search filters in a specific widget',
+  },
 });
 
 export default messages;