From 14fd7cd3a755b8c6bd466305a4dc5a200afaa681 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Tue, 27 Feb 2024 11:27:52 -0500
Subject: [PATCH] refactor: Extract tag count component as generic

---
 src/content-tags-drawer/data/apiHooks.jsx      |  3 ---
 .../tags-sidebar/TagsSidebar.scss              |  4 ----
 .../tags-sidebar/TagsSidebarHeader.jsx         | 18 +++---------------
 src/generic/styles.scss                        |  1 +
 4 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/content-tags-drawer/data/apiHooks.jsx b/src/content-tags-drawer/data/apiHooks.jsx
index e5dab13fa8..5c24c0aa6b 100644
--- a/src/content-tags-drawer/data/apiHooks.jsx
+++ b/src/content-tags-drawer/data/apiHooks.jsx
@@ -149,12 +149,9 @@ export const useContentTaxonomyTagsUpdater = (contentId, taxonomyId) => {
     mutationFn: ({ tags }) => updateContentTaxonomyTags(contentId, taxonomyId, tags),
     onSettled: /* istanbul ignore next */ () => {
       queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTags', contentId] });
-<<<<<<< HEAD
       /// Invalidate query with pattern on course outline
       queryClient.invalidateQueries({ queryKey: ['unitTagsCount'] });
-=======
       queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTagsCount', contentId] });
->>>>>>> 92a9f4d9 (feat: Add count on TagsSidebarHeader)
     },
   });
 };
diff --git a/src/content-tags-drawer/tags-sidebar/TagsSidebar.scss b/src/content-tags-drawer/tags-sidebar/TagsSidebar.scss
index c433bc43c7..a3ab86fd84 100644
--- a/src/content-tags-drawer/tags-sidebar/TagsSidebar.scss
+++ b/src/content-tags-drawer/tags-sidebar/TagsSidebar.scss
@@ -1,10 +1,6 @@
 .tags-sidebar {
   .course-unit-sidebar-header {
     padding-bottom: .25rem !important;
-
-    .course-unit-sidebar-header-count.zero-count {
-      opacity: .4;
-    }
   }
 
   .tags-sidebar-body {
diff --git a/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.jsx b/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.jsx
index 0dabd64b64..83b5cd4457 100644
--- a/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.jsx
+++ b/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.jsx
@@ -1,11 +1,10 @@
-import { Icon, Stack } from '@openedx/paragon';
-import { Tag } from '@openedx/paragon/icons';
+import { Stack } from '@openedx/paragon';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import classNames from 'classnames';
 
 import messages from '../messages';
 import { useContentTaxonomyTagsCount } from '../data/apiHooks';
+import TagCount from '../../generic/tag-count';
 
 const TagsSidebarHeader = () => {
   const intl = useIntl();
@@ -22,18 +21,7 @@ const TagsSidebarHeader = () => {
         {intl.formatMessage(messages.tagsSidebarTitle)}
       </h3>
       { isContentTaxonomyTagsCountLoaded
-        && (
-          <div className={
-            classNames('course-unit-sidebar-header-count d-flex', { 'zero-count': contentTaxonomyTagsCount === 0 })
-          }
-          >
-            <Icon
-              className="mr-1 pt-1"
-              src={Tag}
-            />
-            {contentTaxonomyTagsCount}
-          </div>
-        )}
+        && <TagCount count={contentTaxonomyTagsCount} />}
     </Stack>
   );
 };
diff --git a/src/generic/styles.scss b/src/generic/styles.scss
index becfb9a77a..0a8dde0e9a 100644
--- a/src/generic/styles.scss
+++ b/src/generic/styles.scss
@@ -6,3 +6,4 @@
 @import "./create-or-rerun-course/CreateOrRerunCourseForm";
 @import "./WysiwygEditor";
 @import "./course-stepper/CouseStepper";
+@import "./tag-count/TagCount";