PM-5265: Add awards see less toggle

src/apps/profiles/src/member-profile/community-awards/CommunityAwards.spec.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
 import '@testing-library/jest-dom'
 import type { PropsWithChildren, ReactNode } from 'react'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 
 import { useMemberBadges, type UserBadge, type UserBadgesResponse, type UserProfile } from '~/libs/core'
 
@@ -32,25 +32,32 @@ jest.mock('../../components', () => ({
 
 const mockUseMemberBadges = useMemberBadges as jest.MockedFunction<typeof useMemberBadges>
 
-function createBadge(badgeName: string): UserBadge {
+/**
+ * Builds a profile award fixture for CommunityAwards tests. The badge name and
+ * index are used to create stable display text and IDs, it returns a UserBadge
+ * accepted by the component, and it does not raise exceptions.
+ */
+function createBadge(badgeName: string, index: number = 1): UserBadge {
+    const badgeId: string = `badge-${index}`
+
     return {
         awarded_at: new Date('2026-06-04T00:00:00.000Z'),
         awarded_by: 'admin',
         org_badge: {
             active: true,
             badge_description: 'Awarded for AI profile work.',
-            badge_image_url: 'https://example.com/ai-rookie.svg',
+            badge_image_url: `https://example.com/${badgeId}.svg`,
             badge_name: badgeName,
             badge_status: 'active',
-            id: 'badge-1',
+            id: badgeId,
             organization_id: 'topcoder',
             orgranization: {
                 id: 'topcoder',
                 name: 'Topcoder',
             },
             tags_id_tags: [],
         },
-        org_badge_id: 'badge-1',
+        org_badge_id: badgeId,
         user_handle: 'tester',
         user_id: '123',
     }
@@ -83,4 +90,38 @@ describe('CommunityAwards', () => {
         expect(mockUseMemberBadges)
             .toHaveBeenCalledWith(123, { limit: 500 })
     })
+
+    it('lets members expand awards and collapse them back to the default view', () => {
+        const memberBadges: UserBadgesResponse = {
+            count: 6,
+            rows: Array.from({ length: 6 }, (_, index) => createBadge(`AI Award ${index + 1}`, index + 1)),
+        }
+
+        mockUseMemberBadges.mockReturnValue(memberBadges)
+
+        render(<CommunityAwards profile={{ userId: 123 } as UserProfile} />)
+
+        expect(screen.getByRole('button', { name: 'View AI Award 1 award details' }))
+            .toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'View AI Award 4 award details' }))
+            .toBeInTheDocument()
+        expect(screen.queryByRole('button', { name: 'View AI Award 5 award details' }))
+            .not
+            .toBeInTheDocument()
+
+        fireEvent.click(screen.getByRole('button', { name: '+ 2 more badges' }))
+
+        expect(screen.getByRole('button', { name: 'View AI Award 5 award details' }))
+            .toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'See less' }))
+            .toBeInTheDocument()
+
+        fireEvent.click(screen.getByRole('button', { name: 'See less' }))
+
+        expect(screen.queryByRole('button', { name: 'View AI Award 5 award details' }))
+            .not
+            .toBeInTheDocument()
+        expect(screen.getByRole('button', { name: '+ 2 more badges' }))
+            .toBeInTheDocument()
+    })
 })

src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx

@@ -37,10 +37,20 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
         setIsAwardsExpanded(false)
     }, [props.profile?.userId])
 
-    function handleAwardsExpandClick(): void {
-        setIsAwardsExpanded(true)
+    /**
+     * Toggles the awards section between the collapsed four-badge preview and
+     * the expanded list. It is used by the more/less control, takes no
+     * parameters, returns nothing, and does not raise exceptions.
+     */
+    function handleAwardsToggleClick(): void {
+        setIsAwardsExpanded(isExpanded => !isExpanded)
     }
 
+    /**
+     * Closes the selected badge details modal. It is passed to
+     * MemberBadgeModal, takes no parameters, returns nothing, and does not
+     * raise exceptions.
+     */
     function handleMemberBadgeModalClose(): void {
         setIsBadgeDetailsOpen(false)
     }
@@ -82,13 +92,15 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
                 }
             </div>
 
-            {!isAwardsExpanded && additionalBadgeCount > 0 && (
+            {additionalBadgeCount > 0 && (
                 <button
                     className={styles.moreBadgesButton}
-                    onClick={handleAwardsExpandClick}
+                    onClick={handleAwardsToggleClick}
                     type='button'
                 >
-                    {`+ ${additionalBadgeCount} more ${additionalBadgeCount === 1 ? 'badge' : 'badges'}`}
+                    {isAwardsExpanded
+                        ? 'See less'
+                        : `+ ${additionalBadgeCount} more ${additionalBadgeCount === 1 ? 'badge' : 'badges'}`}
                 </button>
             )}
 

src/apps/review/src/lib/components/AiReviewsTable/AiReviewsTable.module.scss

@@ -216,4 +216,51 @@
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px solid rgba(255,255,255,0.3);
-}
+}
+
+// Score with inline override
+.scoreWithOverride {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.originalScore {
+    color: $black-40;
+    font-size: 12px;
+}
+
+.overrideInput {
+    width: 70px;
+    padding: 4px 6px;
+    border: 1px solid $link-blue-dark;
+    border-radius: 4px;
+    font-size: 13px;
+    font-family: inherit;
+    text-align: center;
+
+    &:focus {
+        outline: none;
+        border-color: $link-blue-dark;
+        box-shadow: 0 0 0 2px rgba(13, 105, 212, 0.15);
+    }
+
+    &::placeholder {
+        color: $black-40;
+        font-size: 10px;
+    }
+}
+
+.overriddenScore {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: $orange-120;
+    font-weight: 600;
+}
+
+.overrideLabel {
+    font-size: 11px;
+    font-weight: 400;
+    color: $black-40;
+}

src/apps/review/src/lib/components/AiReviewsTable/AiReviewsTable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 /* eslint-disable max-len */
 import { FC, MouseEvent as ReactMouseEvent, useCallback, useContext, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
@@ -42,11 +43,18 @@ import styles from './AiReviewsTable.module.scss'
 interface AiReviewsTableProps {
     submission: Pick<BackendSubmission, 'id'|'virusScan'>
     aiReviewers?: { aiWorkflowId: string }[]
+    /** Enable editing mode for manager score overrides */
+    editMode?: boolean
+    /** Current edited scores by workflowId */
+    editedScores?: Record<string, string>
+    /** Callback when a score is changed */
+    onScoreChange?: (workflowId: string, value: string) => void
 }
 
 interface AiReviewerRow {
     id: string
     isGating?: boolean
+    managerScore?: number | null
     minScore?: number
     reviewDate?: string
     run?: Pick<AiWorkflowRun, 'id'|'score'|'status'|'workflow'>
@@ -249,16 +257,17 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
             const status = fromDecision
                 ? normalizeStatus(run && aiRunInProgress(run)
                     ? undefined
-                    : fromDecision.runStatus, fromDecision.runScore, minScore)
+                    : fromDecision.runStatus, fromDecision.managerScore ?? fromDecision.runScore, minScore)
                 : undefined
 
             return {
                 id: workflowId,
                 isGating: fromDecision?.isGating ?? configured?.isGating,
+                managerScore: fromDecision?.managerScore ?? (run?.initialScore !== null && run?.initialScore !== undefined ? run.score : undefined),
                 minScore,
                 reviewDate: run?.completedAt,
                 run,
-                score: fromDecision?.runScore ?? run?.score,
+                score: fromDecision?.managerScore ?? fromDecision?.runScore ?? run?.score,
                 status,
                 title: getConfiguredWorkflowName(configured?.workflow) ?? run?.workflow?.name ?? 'AI Review',
                 weight: fromDecision?.weightPercent ?? configured?.weightPercent,
@@ -502,13 +511,40 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
                         <div className={styles.mobileRow}>
                             <div className={styles.label}>Score</div>
                             <div className={styles.value}>
-                                {typeof row.score === 'number' ? (
+                                {row.workflowId && props.editMode && props.onScoreChange ? (
+                                    <div className={styles.scoreWithOverride}>
+                                        <span className={styles.originalScore}>
+                                            {typeof row.score === 'number' ? formatScore(row.score) : '-'}
+                                        </span>
+                                        <input
+                                            type='number'
+                                            step='0.01'
+                                            className={styles.overrideInput}
+                                            value={props.editedScores?.[row.workflowId] ?? ''}
+                                            onChange={function onChange(
+                                                e: React.ChangeEvent<HTMLInputElement>,
+                                            ) {
+                                                if (props.onScoreChange && row.workflowId) {
+                                                    props.onScoreChange(row.workflowId, e.target.value)
+                                                }
+                                            }}
+                                            placeholder='Override'
+                                        />
+                                    </div>
+                                ) : typeof row.score === 'number' ? (
                                     row.workflowId ? (
-                                        <Link
-                                            to={`../reviews/${props.submission.id}?workflowId=${row.workflowId}`}
-                                        >
-                                            {formatScore(row.score)}
-                                        </Link>
+                                        <>
+                                            <Link
+                                                to={`../reviews/${props.submission.id}?workflowId=${row.workflowId}`}
+                                            >
+                                                {formatScore(row.score)}
+                                            </Link>
+                                            {row.managerScore !== null && row.managerScore !== undefined && (
+                                                <span className={styles.overriddenScore}>
+                                                    <span className={styles.overrideLabel}>(override)</span>
+                                                </span>
+                                            )}
+                                        </>
                                     ) : formatScore(row.score)
                                 ) : '-'}
                             </div>
@@ -612,13 +648,40 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
                                 )}
                             </td>
                             <td className={styles.scoreCol}>
-                                {typeof row.score === 'number' ? (
+                                {row.workflowId && props.editMode && props.onScoreChange ? (
+                                    <div className={styles.scoreWithOverride}>
+                                        <span className={styles.originalScore}>
+                                            {typeof row.score === 'number' ? formatScore(row.score) : '-'}
+                                        </span>
+                                        <input
+                                            type='number'
+                                            step='0.01'
+                                            className={styles.overrideInput}
+                                            value={props.editedScores?.[row.workflowId] ?? ''}
+                                            onChange={function onChange(
+                                                e: React.ChangeEvent<HTMLInputElement>,
+                                            ) {
+                                                if (props.onScoreChange && row.workflowId) {
+                                                    props.onScoreChange(row.workflowId, e.target.value)
+                                                }
+                                            }}
+                                            placeholder='Override'
+                                        />
+                                    </div>
+                                ) : typeof row.score === 'number' ? (
                                     row.workflowId ? (
-                                        <Link
-                                            to={`../reviews/${props.submission.id}?workflowId=${row.workflowId}`}
-                                        >
-                                            {formatScore(row.score)}
-                                        </Link>
+                                        <>
+                                            <Link
+                                                to={`../reviews/${props.submission.id}?workflowId=${row.workflowId}`}
+                                            >
+                                                {formatScore(row.score)}
+                                            </Link>
+                                            {row.managerScore !== null && row.managerScore !== undefined && (
+                                                <span className={styles.overriddenScore}>
+                                                    <span className={styles.overrideLabel}>(override)</span>
+                                                </span>
+                                            )}
+                                        </>
                                     ) : formatScore(row.score)
                                 ) : '-'}
                             </td>

src/apps/review/src/lib/components/AppealComment/AppealComment.tsx

@@ -24,10 +24,7 @@ import {
     ScorecardQuestion,
     SelectOption,
 } from '../../models'
-import { formAppealResponseSchema, isAppealsResponsePhase } from '../../utils'
-import {
-    QUESTION_YES_NO_OPTIONS,
-} from '../../../config/index.config'
+import { formAppealResponseSchema, getScoreResponseOptions, isAppealsResponsePhase } from '../../utils'
 import { ChallengeDetailContext } from '../../contexts'
 
 import styles from './AppealComment.module.scss'
@@ -103,28 +100,9 @@ export const AppealComment: FC<Props> = (props: Props) => {
         }
     }, [addAppealResponse, appealInfo, reviewItem, updatedResponse])
 
-    const responseOptions = useMemo<SelectOption[]>(() => {
-        if (scorecardQuestion.type === 'SCALE') {
-            const length
-                = scorecardQuestion.scaleMax
-                - scorecardQuestion.scaleMin
-                + 1
-            return Array.from(
-                new Array(length),
-                (x, i) => `${i + scorecardQuestion.scaleMin}`,
-            )
-                .map(item => ({
-                    label: item,
-                    value: item,
-                }))
-        }
-
-        if (scorecardQuestion.type === 'YES_NO') {
-            return QUESTION_YES_NO_OPTIONS
-        }
-
-        return []
-    }, [scorecardQuestion])
+    const responseOptions = useMemo<SelectOption[]>(() => (
+        getScoreResponseOptions(scorecardQuestion)
+    ), [scorecardQuestion])
 
     useEffect(() => {
         setAppealResponse(data.appealResponse?.content ?? '')