Skip to content

Improve user details UX on member page (#1889) #1934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Improve user details UX on member page (#1889) #1934

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
19b2131
Improve user details UX on member page (#1889)
adithya-naik Jul 31, 2025
a6b50ae
✅ refactor: cleanup and optimizations in DetailsCard as suggested-#1889
adithya-naik Jul 31, 2025
2cfad49
refactor/handled ReDoS vulnerability
adithya-naik Aug 1, 2025
23984ac
removed excess coomments-#1889
adithya-naik Aug 5, 2025
7c7ac79
Resolved merge conflict in CardDetailsPage.tsx
adithya-naik Aug 5, 2025
fbe45d3
Merge branch 'main' into enhance/improve-member-details-ux-#1889
kasya Aug 9, 2025
866da53
Fix tests
kasya Aug 9, 2025
467b995
Merge branch 'main' into enhance/improve-member-details-ux-#1889
kasya Aug 9, 2025
c79faf5
Update n/a vs unknown
kasya Aug 9, 2025
fd717a9
Merge branch 'main' into enhance/improve-member-details-ux-#1889
kasya Aug 9, 2025
e431022
Merge branch 'main' of github.com:OWASP/Nest into pr/adithya-naik/1934-1
kasya Aug 30, 2025
5a498f3
Merge branch 'main' into enhance/improve-member-details-ux-#1889
kasya Aug 30, 2025
112b703
unknown to N/A
adithya-naik Aug 31, 2025
bfa5c0d
in tests -- unknown to N/A
adithya-naik Aug 31, 2025
6c9b194
Merge branch 'main' into enhance/improve-member-details-ux-#1889
kasya Sep 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/components/CardDetailsPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,7 +810,7 @@ describe('CardDetailsPage', () => {

render(<CardDetailsPage {...defaultProps} details={detailsWithMissingValues} />)

expect(screen.getAllByText('Unknown')).toHaveLength(3)
expect(screen.getAllByText('N/A')).toHaveLength(3)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify consistency across tests for fallback changes.

Ensure no lingering expectations for "Unknown" remain in tests or UI. You can run:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Searching for 'Unknown' in tests (may indicate outdated fallback expectations)..."
rg -n --no-heading -S "Unknown" frontend/__tests__ || true

echo
echo "Searching for 'Unknown' in source (may indicate inconsistent fallback rendering)..."
rg -n --no-heading -S "Unknown" frontend/src || true

echo
echo "Optional: verify presence of tests for new link behaviors"
echo "Searching tests for mailto links..."
rg -n --no-heading -S "mailto:" frontend/__tests__ || true

echo
echo "Searching source for mailto links..."
rg -n --no-heading -S "mailto:" frontend/src || true

echo
echo "Searching tests for company '@' link rendering (heuristic)..."
rg -n --no-heading -S "@[a-zA-Z0-9_-]+" frontend/__tests__ || true

Length of output: 41269

Update fallback text from “Unknown” to “N/A” throughout the codebase

We’ve verified that while the CardDetailsPage tests have been updated to expect “N/A”, both the source and many other tests still use “Unknown” as the fallback. Those need to be aligned:

• In source files:
– frontend/src/components/LeadersList.tsx (line 16): replace <>Unknown</> with <>N/A</>.
– frontend/src/components/CardDetailsPage.tsx (lines 71 and 168): update both occurrences of 'Unknown' to 'N/A'.

• In unit tests:
Run rg -n "Unknown" frontend/__tests__ and replace all expect(...get(Text|ByText)('Unknown')…) assertions with 'N/A'. In particular:
– frontend/tests/unit/components/LeadersList.test.tsx
– frontend/tests/unit/global-error.test.tsx (if the literal “Unknown crash” is now outdated)
– Any other component/page tests that assert on “Unknown”

• Optional: add or update tests for the new mailto link behavior in CardDetailsPage (e.g. check href="mailto:…") to ensure coverage.

Once these changes are made, rerun your test suite to confirm no “Unknown” expectations remain.

🤖 Prompt for AI Agents 
In frontend/__tests__/unit/components/CardDetailsPage.test.tsx at line 813 and
throughout the codebase, update all fallback text from "Unknown" to "N/A".
Specifically, replace `<>Unknown</>` with `<>N/A</>` in
frontend/src/components/LeadersList.tsx at line 16 and change both occurrences
of 'Unknown' to 'N/A' in frontend/src/components/CardDetailsPage.tsx at lines 71
and 168. Also, search all test files under frontend/__tests__ for assertions
expecting "Unknown" and update them to expect "N/A" instead, including in
LeadersList.test.tsx and global-error.test.tsx. Optionally, add or update tests
in CardDetailsPage to verify the new mailto link behavior. Finally, rerun tests
to ensure no "Unknown" expectations remain.

})

it('handles empty languages and topics arrays', () => {
Expand Down
63 changes: 62 additions & 1 deletion frontend/src/components/CardDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { useCallback } from 'react'
import type { JSX } from 'react'
import type { DetailsCardProps } from 'types/card'
import { capitalize } from 'utils/capitalize'
import { IS_PROJECT_HEALTH_ENABLED } from 'utils/credentials'
Expand All @@ -29,6 +31,8 @@ import SecondaryCard from 'components/SecondaryCard'
import SponsorCard from 'components/SponsorCard'
import ToggleableList from 'components/ToggleableList'
import TopContributorsList from 'components/TopContributorsList'
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i
const sanitizeForUrl = (str: string) => encodeURIComponent(str.trim())

const DetailsCard = ({
description,
Expand All @@ -55,6 +59,63 @@ const DetailsCard = ({
type,
userSummary,
}: DetailsCardProps) => {
const renderDetailValue = useCallback(
(detail: { label: string; value: string | JSX.Element }) => {
const { label, value } = detail

if (
value == null ||
value === '' ||
value === 'N/A' ||
value === 'Not available' ||
value === 'Unknown'
) {
return 'N/A'
}

if (typeof value !== 'string') {
return value
}

switch (label) {
case 'Email':
if (!EMAIL_REGEX.test(value)) {
return value
}
return (
<a
href={`mailto:${sanitizeForUrl(value)}`}
className="text-blue-400 hover:underline"
aria-label={`Send email to ${value}`}
>
{value}
</a>
)

case 'Company':
if (value.startsWith('@')) {
const companyName = sanitizeForUrl(value.slice(1))
return (
<a
href={`https://github.com/${companyName}`}
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:underline"
aria-label={`Visit ${value} on GitHub`}
>
{value}
</a>
)
}
return value

default:
return value
}
},
[]
)

return (
<div className="min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
<div className="mx-auto max-w-6xl">
Expand Down Expand Up @@ -108,7 +169,7 @@ const DetailsCard = ({
</div>
) : (
<div key={detail.label} className="pb-1">
<strong>{detail.label}:</strong> {detail?.value || 'Unknown'}
<strong>{detail.label}:</strong> {renderDetailValue(detail)}
</div>
)
)}
Expand Down