fix: [AXIMST-737] add tooltip, change tag to button (#220)

Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]>

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

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

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>

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;