Fix #1792 Added a tooltip to show the entire number on hover (#1855)

* Added a tooltip to show the entire number on hover

* Run make check

* add generated package-lock.json files from make check-test

* Remove unnecessary package-lock.json files

* handled invalid or undefined values

* Update code

* Update tests

---------

Co-authored-by: Arkadii Yakovets <arkadii.yakovets@owasp.org>
Co-authored-by: Kate Golovanova <kate@kgthreads.com>
Co-authored-by: Arkadii Yakovets <2201626+arkid15r@users.noreply.github.com>

Author: 3 people

frontend/__tests__/unit/components/InfoItem.test.tsx

@@ -1,6 +1,7 @@
 import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
 import millify from 'millify'
+import React from 'react'
 import { pluralize } from 'utils/pluralize'
 import InfoItem from 'components/InfoItem'
 
@@ -9,6 +10,14 @@ jest.mock('utils/pluralize', () => ({
   pluralize: jest.fn(),
 }))
 
+jest.mock('@heroui/tooltip', () => ({
+  Tooltip: ({ children, content }: { children: React.ReactNode; content: string }) => (
+    <span data-testid="tooltip" title={content}>
+      {children}
+    </span>
+  ),
+}))
+
 const mockMillify = millify as jest.Mock
 const mockPluralize = pluralize as jest.Mock
 
@@ -39,8 +48,13 @@ describe('InfoItem', () => {
   })
 
   it('respects precision prop when formatting value', () => {
+    mockMillify.mockReturnValue('15.4k')
+    mockPluralize.mockReturnValue('15430 views')
+
     render(<InfoItem icon={faUser} unit="view" value={15430} precision={3} />)
+
     expect(mockMillify).toHaveBeenCalledWith(15430, { precision: 3 })
+    expect(screen.getByText('15.4k')).toBeInTheDocument()
   })
 
   it('handles value = 0 properly', () => {
@@ -59,28 +73,47 @@ describe('InfoItem', () => {
 
     render(<InfoItem icon={faUser} unit="like" value={5} />)
 
-    const container = screen.getByText('5').closest('div')
-    expect(container).toHaveClass('flex items-center justify-between')
+    const container = screen.getByText('5 likes').closest('div')
+    expect(container).toHaveClass('flex', 'items-center', 'justify-between')
 
-    const label = screen.getByText(/like/i).closest('span')
-    expect(label).toHaveClass('flex items-center')
+    const nameSpan = screen.getByText('5 likes').closest('span')
+    expect(nameSpan).toHaveClass('flex', 'items-center')
 
     const icon = screen.getByRole('img', { hidden: true })
-    expect(icon).toHaveClass('mr-2 h-4 w-4')
+    expect(icon).toHaveClass('mr-2', 'h-4', 'w-4')
+
+    const valueSpan = screen.getByText('5').closest('span')
+    expect(valueSpan).toHaveClass('font-medium')
   })
 
   it('uses default precision = 1 when not provided', () => {
+    mockMillify.mockReturnValue('1k')
+    mockPluralize.mockReturnValue('1010 stars')
+
     render(<InfoItem icon={faUser} unit="star" value={1010} />)
+
     expect(mockMillify).toHaveBeenCalledWith(1010, { precision: 1 })
   })
 
-  it('renders both text and number correctly', () => {
+  it('creates tooltip with correct content', () => {
     mockMillify.mockReturnValue('7.5k')
-    mockPluralize.mockReturnValue('7.5 stars')
+    mockPluralize.mockReturnValue('7.5k stars')
 
     render(<InfoItem icon={faUser} unit="star" value={7500} />)
 
+    const tooltip = screen.getByTestId('tooltip')
+    expect(tooltip).toHaveAttribute('title', '7,500 7.5k stars')
     expect(screen.getByText('7.5k')).toBeInTheDocument()
-    expect(screen.getByText('7.5 stars')).toBeInTheDocument()
+  })
+
+  it('handles zero value with proper tooltip content', () => {
+    mockMillify.mockReturnValue('0')
+    mockPluralize.mockReturnValue('0 items')
+
+    render(<InfoItem icon={faUser} unit="item" value={0} />)
+
+    const tooltip = screen.getByTestId('tooltip')
+    expect(tooltip).toHaveAttribute('title', 'No 0 items')
+    expect(screen.getByText('0')).toBeInTheDocument()
   })
 })

frontend/src/components/InfoBlock.tsx

@@ -1,5 +1,6 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Tooltip } from '@heroui/tooltip'
 import millify from 'millify'
 import { pluralize } from 'utils/pluralize'
 
@@ -20,18 +21,19 @@ const InfoBlock = ({
   unit?: string
   value: number
 }) => {
-  const name = pluralizedName
-    ? pluralize(value, unit || '', pluralizedName)
-    : pluralize(value, unit || '')
+  const name = pluralizedName ? pluralize(value, unit, pluralizedName) : pluralize(value, unit)
   const formattedValue = value ? `${millify(value, { precision })} ${name}` : `No ${name}`
+  const tooltipValue = value ? `${value.toLocaleString()} ${name}` : `No ${name}`
 
   return (
     <div className={`flex ${className}`}>
       <FontAwesomeIcon icon={icon} className="mr-3 mt-1 w-5" />
       <div>
         <div className="text-sm md:text-base">
           {label && <div className="text-sm font-medium">{label}</div>}
-          {formattedValue}
+          <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
+            {formattedValue}
+          </Tooltip>
         </div>
       </div>
     </div>

frontend/src/components/InfoItem.tsx

@@ -1,5 +1,6 @@
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Tooltip } from '@heroui/tooltip'
 import millify from 'millify'
 import { pluralize } from 'utils/pluralize'
 
@@ -18,14 +19,17 @@ const InfoItem = ({
 }) => {
   const name = pluralizedName ? pluralize(value, unit, pluralizedName) : pluralize(value, unit)
   const formattedValue = millify(value, { precision })
+  const tooltipValue = value ? `${value.toLocaleString()} ${name}` : `No ${name}`
 
   return (
     <div className="flex items-center justify-between">
       <span className="flex items-center">
         <FontAwesomeIcon icon={icon} className="mr-2 h-4 w-4" />
         {name}
       </span>
-      <span className="font-medium">{formattedValue}</span>
+      <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
+        <span className="font-medium">{formattedValue}</span>
+      </Tooltip>
     </div>
   )
 }

frontend/src/components/RepositoriesCard.tsx

@@ -64,23 +64,18 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
       </button>
 
       <div className="space-y-2 text-sm">
-        <InfoItem icon={faStar} pluralizedName="Stars" unit="Stars" value={details.starsCount} />
-        <InfoItem
-          icon={faCodeFork}
-          pluralizedName="Forks"
-          unit="Forks"
-          value={details.forksCount}
-        />
+        <InfoItem icon={faStar} pluralizedName="Stars" unit="Star" value={details.starsCount} />
+        <InfoItem icon={faCodeFork} pluralizedName="Forks" unit="Fork" value={details.forksCount} />
         <InfoItem
           icon={faUsers}
           pluralizedName="Contributors"
-          unit="Contributors"
+          unit="Contributor"
           value={details.contributorsCount}
         />
         <InfoItem
           icon={faExclamationCircle}
           pluralizedName="Issues"
-          unit="Issues"
+          unit="Issue"
           value={details.openIssuesCount}
         />
       </div>