refactor: Extract tag count component as generic

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 {

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>
   );
 };

src/generic/styles.scss

@@ -6,3 +6,4 @@
 @import "./create-or-rerun-course/CreateOrRerunCourseForm";
 @import "./WysiwygEditor";
 @import "./course-stepper/CouseStepper";
+@import "./tag-count/TagCount";

src/generic/tag-count/TagCount.scss

@@ -0,0 +1,3 @@
+.generic-tag-count.zero-count {
+  opacity: .4;
+}

src/generic/tag-count/TagCount.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TagCount from '.';
+
+describe('<TagCount>', () => {
+  it('should render the component', () => {
+    const count = 17;
+    render(<TagCount count={count} />);
+    expect(screen.getByText('17')).toBeInTheDocument();
+  });
+
+  it('should render the component with zero', () => {
+    const count = 0;
+    render(<TagCount count={count} />);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+});

src/generic/tag-count/index.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import { Icon } from '@openedx/paragon';
+import { Tag } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+
+const TagCount = ({ count }) => (
+  <div className={
+    classNames('generic-tag-count d-flex', { 'zero-count': count === 0 })
+  }
+  >
+    <Icon className="mr-1 pt-1" src={Tag} />
+    {count}
+  </div>
+);
+
+TagCount.propTypes = {
+  count: PropTypes.number.isRequired,
+};
+
+export default TagCount;