From 27be24b3f6737739bee9bfe8ce3d7b0b747e817e Mon Sep 17 00:00:00 2001
From: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>
Date: Mon, 1 Apr 2024 15:45:53 +0300
Subject: [PATCH] fix: [AXIMST-737] add tooltip, change tag to button

---
 .../course-xblock/CourseXBlock.jsx            |  2 +-
 src/generic/tag-count/TagCount.test.jsx       | 14 ++++++++---
 src/generic/tag-count/index.jsx               | 25 ++++++++++++++++---
 src/generic/tag-count/messages.js             | 10 ++++++++
 4 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/generic/tag-count/messages.js

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
index 6556cfb432..702b65d73f 100644
--- a/src/course-unit/course-xblock/CourseXBlock.jsx
+++ b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -120,7 +120,7 @@ const CourseXBlock = ({
               {
                 isContentTaxonomyTagsCountLoaded
                 && contentTaxonomyTagsCount > 0
-                && <div className="ml-2"><TagCount count={contentTaxonomyTagsCount} /></div>
+                && <div className="ml-2"><TagCount count={contentTaxonomyTagsCount} onClick={openManageTagsModal} /></div>
               }
               <IconButton
                 alt={intl.formatMessage(messages.blockAltButtonEdit)}
diff --git a/src/generic/tag-count/TagCount.test.jsx b/src/generic/tag-count/TagCount.test.jsx
index bb88d44a52..f583c51435 100644
--- a/src/generic/tag-count/TagCount.test.jsx
+++ b/src/generic/tag-count/TagCount.test.jsx
@@ -1,20 +1,28 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
 import TagCount from '.';
 
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <TagCount {...props} />,
+  </IntlProvider>,
+);
+
 describe('<TagCount>', () => {
   it('should render the component', () => {
-    render(<TagCount count={17} />);
+    renderComponent({ count: 17 });
     expect(screen.getByText('17')).toBeInTheDocument();
   });
 
   it('should render the component with zero', () => {
-    render(<TagCount count={0} />);
+    renderComponent({ count: 0 });
     expect(screen.getByText('0')).toBeInTheDocument();
   });
 
   it('should render a button with onClick', () => {
-    render(<TagCount count={17} onClick={() => {}} />);
+    renderComponent({ count: 17, onClick: () => {} });
     expect(screen.getByRole('button', {
       name: /17/i,
     }));
diff --git a/src/generic/tag-count/index.jsx b/src/generic/tag-count/index.jsx
index bb6dada9d7..5827072812 100644
--- a/src/generic/tag-count/index.jsx
+++ b/src/generic/tag-count/index.jsx
@@ -1,9 +1,16 @@
 import PropTypes from 'prop-types';
-import { Icon, Button } from '@openedx/paragon';
+import {
+  Icon, Button, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
 import { Tag } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 
+import messages from './messages';
+
 const TagCount = ({ count, onClick }) => {
+  const intl = useIntl();
+
   const renderContent = () => (
     <>
       <Icon className="mr-1 pt-1" src={Tag} />
@@ -17,9 +24,19 @@ const TagCount = ({ count, onClick }) => {
     }
     >
       { onClick ? (
-        <Button variant="tertiary" onClick={onClick}>
-          {renderContent()}
-        </Button>
+        <OverlayTrigger
+          placement="top"
+          overlay={(
+            <Tooltip id={intl.formatMessage(messages.tooltipText)}>
+              {intl.formatMessage(messages.tooltipText)}
+            </Tooltip>
+          )}
+        >
+          <Button variant="tertiary" onClick={onClick}>
+            {renderContent()}
+          </Button>
+        </OverlayTrigger>
+
       )
         : renderContent()}
     </div>
diff --git a/src/generic/tag-count/messages.js b/src/generic/tag-count/messages.js
new file mode 100644
index 0000000000..fcdf61504b
--- /dev/null
+++ b/src/generic/tag-count/messages.js
@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  tooltipText: {
+    id: 'course-authoring.generic.tag-count.tooltip.text',
+    defaultMessage: 'Manage tags',
+  },
+});
+
+export default messages;