UI/ux mentorship program update (#2244)

* fix ui bugs

* update format

* fix test cases

* fix test cases

* update UI

* update UI

* update line clamp property

* fix test case

* Update styling

---------

Co-authored-by: Kate Golovanova <[email protected]>
Co-authored-by: Arkadii Yakovets <[email protected]>

Author: 3 people

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

@@ -24,6 +24,14 @@ jest.mock('components/ActionButton', () => ({
   ),
 }))
 
+jest.mock('@heroui/tooltip', () => ({
+  Tooltip: ({ children, content }: { children: React.ReactNode; content: string }) => (
+    <div data-testid="tooltip" title={content}>
+      {children}
+    </div>
+  ),
+}))
+
 describe('ProgramCard', () => {
   const mockOnEdit = jest.fn()
   const mockOnView = jest.fn()
@@ -178,23 +186,31 @@ describe('ProgramCard', () => {
   })
 
   describe('Description Handling', () => {
-    it('truncates long descriptions to 100 characters', () => {
-      const longDescription = 'A'.repeat(150)
+    it('renders long descriptions with line-clamp-6 CSS class', () => {
+      const longDescription = 'A'.repeat(300) // Long enough to trigger line clamping
       const longDescProgram = { ...baseMockProgram, description: longDescription }
 
       render(<ProgramCard program={longDescProgram} onView={mockOnView} accessLevel="user" />)
 
-      const expectedText = 'A'.repeat(100) + '...'
-      expect(screen.getByText(expectedText)).toBeInTheDocument()
+      // Check that the full description is rendered (CSS handles the visual truncation)
+      expect(screen.getByText(longDescription)).toBeInTheDocument()
+
+      // Check that the paragraph has the line-clamp-6 class
+      const descriptionElement = screen.getByText(longDescription)
+      expect(descriptionElement).toHaveClass('line-clamp-6')
     })
 
-    it('shows full description when under 100 characters', () => {
+    it('shows full description when short', () => {
       const shortDescription = 'Short description'
       const shortDescProgram = { ...baseMockProgram, description: shortDescription }
 
       render(<ProgramCard program={shortDescProgram} onView={mockOnView} accessLevel="user" />)
 
       expect(screen.getByText('Short description')).toBeInTheDocument()
+
+      // Check that it still has line-clamp-6 class for consistency
+      const descriptionElement = screen.getByText('Short description')
+      expect(descriptionElement).toHaveClass('line-clamp-6')
     })
 
     it('shows fallback text when description is empty', () => {

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

@@ -1,10 +1,9 @@
 import { faUsers } from '@fortawesome/free-solid-svg-icons'
-import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React from 'react'
 import { render } from 'wrappers/testUtil'
-import type { ExtendedSession } from 'types/auth'
 import type { Module } from 'types/mentorship'
 import { ExperienceLevelEnum, ProgramStatusEnum } from 'types/mentorship'
 import SingleModuleCard from 'components/SingleModuleCard'
@@ -111,16 +110,6 @@ const mockModule: Module = {
 
 const mockAdmins = [{ login: 'admin1' }, { login: 'admin2' }]
 
-const mockSessionData: ExtendedSession = {
-  user: {
-    login: 'admin1',
-    isLeader: true,
-    email: '[email protected]',
-    image: 'https://example.com/admin-avatar.jpg',
-  },
-  expires: '2024-12-31T23:59:59Z',
-}
-
 describe('SingleModuleCard', () => {
   beforeEach(() => {
     jest.clearAllMocks()
@@ -146,7 +135,6 @@ describe('SingleModuleCard', () => {
       expect(screen.getByText('Test Module')).toBeInTheDocument()
       expect(screen.getByText('This is a test module description')).toBeInTheDocument()
       expect(screen.getByTestId('icon-users')).toBeInTheDocument()
-      expect(screen.getByTestId('icon-ellipsis')).toBeInTheDocument()
     })
 
     it('renders module details correctly', () => {
@@ -183,128 +171,31 @@ describe('SingleModuleCard', () => {
     })
   })
 
-  describe('Dropdown Menu', () => {
-    it('opens dropdown when ellipsis button is clicked', () => {
-      render(<SingleModuleCard module={mockModule} />)
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-    })
-
-    it('closes dropdown when clicking outside', async () => {
-      render(<SingleModuleCard module={mockModule} />)
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-
-      // Click outside the dropdown
-      fireEvent.mouseDown(document.body)
-
-      await waitFor(() => {
-        expect(screen.queryByText('View Module')).not.toBeInTheDocument()
-      })
-    })
-
-    it('navigates to view module when View Module is clicked', () => {
+  describe('Simplified Interface', () => {
+    it('focuses on content display only', () => {
       render(<SingleModuleCard module={mockModule} />)
 
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      const viewButton = screen.getByText('View Module')
-      fireEvent.click(viewButton)
-
-      expect(mockPush).toHaveBeenCalledWith('//modules/test-module')
-    })
-
-    it('shows only View Module option for non-admin users', () => {
-      render(
-        <SingleModuleCard
-          module={mockModule}
-          showEdit={true}
-          accessLevel="user"
-          admins={mockAdmins}
-        />
-      )
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
+      // Should display core content
+      expect(screen.getByText('Test Module')).toBeInTheDocument()
+      expect(screen.getByText('This is a test module description')).toBeInTheDocument()
+      expect(screen.getByText('Experience Level:')).toBeInTheDocument()
 
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-      expect(screen.queryByText('Edit Module')).not.toBeInTheDocument()
-      expect(screen.queryByText('Create Module')).not.toBeInTheDocument()
+      // Should have clickable title for navigation
+      const moduleLink = screen.getByTestId('module-link')
+      expect(moduleLink).toHaveAttribute('href', '//modules/test-module')
     })
   })
 
-  describe('Admin Functionality', () => {
-    beforeEach(() => {
-      mockUseSession.mockReturnValue({
-        data: mockSessionData,
-        status: 'authenticated',
-        update: jest.fn(),
-      })
-    })
-
-    it('shows Edit Module option for admin users when showEdit is true', () => {
-      render(
-        <SingleModuleCard
-          module={mockModule}
-          showEdit={true}
-          accessLevel="admin"
-          admins={mockAdmins}
-        />
-      )
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-      expect(screen.getByText('Edit Module')).toBeInTheDocument()
-      expect(screen.getByText('Create Module')).toBeInTheDocument()
-    })
-
-    it('does not show Edit Module option when showEdit is false', () => {
-      render(
-        <SingleModuleCard
-          module={mockModule}
-          showEdit={false}
-          accessLevel="admin"
-          admins={mockAdmins}
-        />
-      )
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-      expect(screen.queryByText('Edit Module')).not.toBeInTheDocument()
-      expect(screen.getByText('Create Module')).toBeInTheDocument()
-    })
-
-    it('navigates to edit module when Edit Module is clicked', () => {
-      render(
-        <SingleModuleCard
-          module={mockModule}
-          showEdit={true}
-          accessLevel="admin"
-          admins={mockAdmins}
-        />
-      )
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      const editButton = screen.getByText('Edit Module')
-      fireEvent.click(editButton)
+  describe('Props Handling', () => {
+    it('renders correctly with minimal props', () => {
+      render(<SingleModuleCard module={mockModule} />)
 
-      expect(mockPush).toHaveBeenCalledWith('//modules/test-module/edit')
+      expect(screen.getByText('Test Module')).toBeInTheDocument()
+      expect(screen.getByText('This is a test module description')).toBeInTheDocument()
     })
 
-    it('navigates to create module when Create Module is clicked', () => {
+    it('ignores admin-related props since menu is removed', () => {
+      // These props are now ignored but should not cause errors
       render(
         <SingleModuleCard
           module={mockModule}
@@ -314,13 +205,7 @@ describe('SingleModuleCard', () => {
         />
       )
 
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      const createButton = screen.getByText('Create Module')
-      fireEvent.click(createButton)
-
-      expect(mockPush).toHaveBeenCalledWith('//modules/create')
+      expect(screen.getByText('Test Module')).toBeInTheDocument()
     })
   })
 
@@ -338,67 +223,31 @@ describe('SingleModuleCard', () => {
       expect(screen.queryByTestId('top-contributors-list')).not.toBeInTheDocument()
     })
 
-    it('handles undefined admins array', () => {
+    it('handles undefined admins array gracefully', () => {
       render(<SingleModuleCard module={mockModule} showEdit={true} accessLevel="admin" />)
 
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-      expect(screen.queryByText('Edit Module')).not.toBeInTheDocument()
-    })
-
-    it('handles null session data', () => {
-      mockUseSession.mockReturnValue({
-        data: null,
-        status: 'unauthenticated',
-        update: jest.fn(),
-      })
-
-      render(
-        <SingleModuleCard
-          module={mockModule}
-          showEdit={true}
-          accessLevel="admin"
-          admins={mockAdmins}
-        />
-      )
-
-      const ellipsisButton = screen.getByRole('button')
-      fireEvent.click(ellipsisButton)
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
-      expect(screen.queryByText('Edit Module')).not.toBeInTheDocument()
+      // Should render without errors even with admin props
+      expect(screen.getByText('Test Module')).toBeInTheDocument()
     })
   })
 
   describe('Accessibility', () => {
-    it('has proper button roles and interactions', () => {
+    it('has accessible link for module navigation', () => {
       render(<SingleModuleCard module={mockModule} />)
 
-      const ellipsisButton = screen.getByRole('button')
-      expect(ellipsisButton).toBeInTheDocument()
-
-      fireEvent.click(ellipsisButton)
-
-      const viewButton = screen.getByText('View Module')
-      expect(viewButton.closest('button')).toBeInTheDocument()
+      const moduleLink = screen.getByTestId('module-link')
+      expect(moduleLink).toBeInTheDocument()
+      expect(moduleLink).toHaveAttribute('href', '//modules/test-module')
+      expect(moduleLink).toHaveAttribute('target', '_blank')
+      expect(moduleLink).toHaveAttribute('rel', 'noopener noreferrer')
     })
 
-    it('supports keyboard navigation', () => {
+    it('has proper heading structure', () => {
       render(<SingleModuleCard module={mockModule} />)
 
-      const ellipsisButton = screen.getByRole('button')
-
-      // Focus the button
-      ellipsisButton.focus()
-      expect(ellipsisButton).toHaveFocus()
-
-      // Press Enter to open dropdown
-      fireEvent.keyDown(ellipsisButton, { key: 'Enter', code: 'Enter' })
-      fireEvent.click(ellipsisButton) // Simulate the click that would happen
-
-      expect(screen.getByText('View Module')).toBeInTheDocument()
+      const moduleTitle = screen.getByRole('heading', { level: 1 })
+      expect(moduleTitle).toBeInTheDocument()
+      expect(moduleTitle).toHaveTextContent('Test Module')
     })
   })
 

frontend/__tests__/unit/pages/ProgramDetails.test.tsx

@@ -67,7 +67,7 @@ describe('ProgramDetailsPage', () => {
       expect(screen.getByText('Jan 1, 2025')).toBeInTheDocument()
       expect(screen.getByText('Dec 31, 2025')).toBeInTheDocument()
       expect(screen.getByText('20')).toBeInTheDocument()
-      expect(screen.getByText('beginner, intermediate')).toBeInTheDocument()
+      expect(screen.getByText('Beginner, Intermediate')).toBeInTheDocument()
     })
   })
 })

frontend/__tests__/unit/pages/ProgramDetailsMentorship.test.tsx

@@ -67,7 +67,7 @@ describe('ProgramDetailsPage', () => {
       expect(screen.getByText('Jan 1, 2025')).toBeInTheDocument()
       expect(screen.getByText('Dec 31, 2025')).toBeInTheDocument()
       expect(screen.getByText('20')).toBeInTheDocument()
-      expect(screen.getByText('beginner, intermediate')).toBeInTheDocument()
+      expect(screen.getByText('Beginner, Intermediate')).toBeInTheDocument()
     })
   })
 })

frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import { useQuery } from '@apollo/client'
-import upperFirst from 'lodash/upperFirst'
 import { useParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import { GET_PROGRAM_ADMINS_AND_MODULES } from 'server/queries/moduleQueries'
 import type { Module } from 'types/mentorship'
+import { titleCaseWord } from 'utils/capitalize'
 import { formatDate } from 'utils/dateFormatter'
 import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
@@ -49,7 +49,7 @@ const ModuleDetailsPage = () => {
   }
 
   const moduleDetails = [
-    { label: 'Experience Level', value: upperFirst(module.experienceLevel) },
+    { label: 'Experience Level', value: titleCaseWord(module.experienceLevel) },
     { label: 'Start Date', value: formatDate(module.startedAt) },
     { label: 'End Date', value: formatDate(module.endedAt) },
     {