diff --git a/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss b/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss index 352f4e7b6..415500b69 100644 --- a/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss +++ b/src/apps/support/src/pages/ticket-details/TicketDetailPage.module.scss @@ -12,9 +12,11 @@ text-decoration: none; } -.challengeLink { - color: var(--Actived); +.challengeLink, +.challengeLink:hover { + color: $link-blue-dark; font-weight: 700; + text-decoration: underline; } .header { diff --git a/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx b/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx index 0c2298da4..03a275c91 100644 --- a/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx +++ b/src/apps/support/src/pages/ticket-details/TicketDetailPage.spec.tsx @@ -1,4 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports, react/jsx-no-bind */ +import { readFileSync } from 'fs' import { fireEvent, render, @@ -17,6 +18,7 @@ import { TicketDetailPage } from './TicketDetailPage' const mockMutate = jest.fn() const mockUseSWR = jest.fn() let mockProfile: { roles: string[]; userId: number | string } +const ticketDetailStyles = readFileSync(`${__dirname}/TicketDetailPage.module.scss`, 'utf8') interface Deferred { promise: Promise @@ -196,6 +198,17 @@ describe('TicketDetailPage reply access', () => { .toBeTruthy() }) + it('styles the challenge anchor as a visible link', () => { + const challengeLinkRule = ticketDetailStyles.match( + /\.challengeLink,\s*\.challengeLink:hover \{[^}]*\}/, + )?.[0] + + expect(challengeLinkRule) + .toContain('color: $link-blue-dark;') + expect(challengeLinkRule) + .toContain('text-decoration: underline;') + }) + it('identifies the support staff member who closed the ticket', () => { mockUseSWR.mockReturnValue({ data: { @@ -239,7 +252,7 @@ describe('TicketDetailPage reply access', () => { .toBeTruthy() }) - it('preserves freshly revalidated assignees when marking a ticket read completes', async () => { + it('revalidates fresh detail after marking the ticket read', async () => { const markReadRequest = createDeferred() mockedMarkRead.mockReturnValue(markReadRequest.promise) mockUseSWR.mockReturnValue({ @@ -254,35 +267,10 @@ describe('TicketDetailPage reply access', () => { await waitFor(() => { expect(mockMutate) - .toHaveBeenCalledWith(expect.any(Function), false) + .toHaveBeenCalledTimes(1) }) - - const updateCachedTicket = mockMutate.mock.calls[0][0] as ( - ticket?: SupportTicketDetail, - ) => SupportTicketDetail | undefined - const freshlyRevalidatedTicket: SupportTicketDetail = { - ...closedTicket, - assignees: [{ - assignedAt: '2026-08-07T01:30:00.000Z', - handle: 'support-staff', - userId: '67890', - }], - hasUnread: true, - responseCount: 1, - responses: [{ - createdAt: '2026-08-07T01:30:00.000Z', - id: 'response-1', - markdown: 'We are investigating.', - readBy: [], - userHandle: 'support-staff', - userId: '67890', - }], - } - - expect(updateCachedTicket(freshlyRevalidatedTicket)) - .toEqual({ ...freshlyRevalidatedTicket, hasUnread: false }) - expect(updateCachedTicket(undefined)) - .toBeUndefined() + expect(mockMutate.mock.calls[0]) + .toEqual([]) }) it('identifies support team replies without labelling the ticket owner', () => { diff --git a/src/apps/support/src/pages/ticket-details/TicketDetailPage.tsx b/src/apps/support/src/pages/ticket-details/TicketDetailPage.tsx index e0a731c86..b870423ab 100644 --- a/src/apps/support/src/pages/ticket-details/TicketDetailPage.tsx +++ b/src/apps/support/src/pages/ticket-details/TicketDetailPage.tsx @@ -75,9 +75,7 @@ export const TicketDetailPage: FC = () => { markedReadTicket.current = data.id markSupportTicketRead(data.id) - .then(() => mutate(current => (current - ? { ...current, hasUnread: false } - : current), false)) + .then(() => mutate()) .catch(() => undefined) }, [data, mutate])