entity leader component added (#1143)

* entity leader component added

* code quality

* removed code smells

* improved code logic

* unknown keyword added

* unstagged changes retry

* updated test case

* code formatting updated

* Update code

---------

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

Author: nipunh

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

@@ -47,7 +47,8 @@ describe('CommitteeDetailsPage Component', () => {
       expect(screen.getByText('Test Committee')).toBeInTheDocument()
     })
     expect(screen.getByText('This is a test committee summary.')).toBeInTheDocument()
-    expect(screen.getByText('Leader 1, Leader 2')).toBeInTheDocument()
+    expect(screen.getByText('Leader 1')).toBeInTheDocument()
+    expect(screen.getByText('Leader 2')).toBeInTheDocument()
     expect(screen.getByText('https://owasp.org/test-committee')).toBeInTheDocument()
   })
 

frontend/src/components/CardDetailsPage.tsx

@@ -12,6 +12,7 @@ import RepositoriesCard from 'components/RepositoriesCard'
 import SecondaryCard from 'components/SecondaryCard'
 import ToggleableList from 'components/ToggleableList'
 import TopContributors from 'components/ToggleContributors'
+import LeadersList from './LeadersList'
 
 const DetailsCard = ({
   title,
@@ -56,12 +57,18 @@ const DetailsCard = ({
             title={`${capitalize(type)} Details`}
             className={`${type !== 'chapter' ? 'md:col-span-5' : 'md:col-span-3'} gap-2`}
           >
-            {details &&
-              details.map((detail, index) => (
-                <div key={index} className="pb-1">
-                  <strong>{detail.label}:</strong> {detail.value ? detail.value : 'Unknown'}
+            {details?.map((detail) =>
+              detail?.label === 'Leaders' ? (
+                <div key={detail.label} className="pb-1">
+                  <strong>{detail.label}:</strong>{' '}
+                  <LeadersList leaders={detail?.value != null ? String(detail.value) : 'Unknown'} />
                 </div>
-              ))}
+              ) : (
+                <div key={detail.label} className="pb-1">
+                  <strong>{detail.label}:</strong> {detail?.value || 'Unknown'}
+                </div>
+              )
+            )}
             {socialLinks && (type === 'chapter' || type === 'committee') && (
               <SocialLinks urls={socialLinks || []} />
             )}

frontend/src/components/LeadersList.tsx

@@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom'
+import { LeadersListProps } from 'types/leaders'
+
+/**
+ * Component that renders a list of project leaders as clickable links.
+ * Takes a comma-separated string of leader names and renders each as a link
+ * to their user profile page.
+ *
+ * @param {LeadersListProps} props - Component props
+ * @param {string} props.leaders - Comma-separated string of leader names
+ * @returns {JSX.Element} A list of leader links
+ */
+
+const LeadersList = ({ leaders }: LeadersListProps) => {
+  if (!leaders || leaders.trim() === '') return <>Unknown</>
+
+  const leadersArray = leaders.split(',').map((leader) => leader.trim())
+
+  return (
+    <>
+      {leadersArray.map((leader, index) => (
+        <span key={`${leader}-${index}`}>
+          <Link
+            to={`/community/users?q=${encodeURIComponent(leader)}`}
+            aria-label={`View profile of ${leader}`}
+          >
+            {leader}
+          </Link>
+          {index < leadersArray.length - 1 && ', '}
+        </span>
+      ))}
+    </>
+  )
+}
+
+export default LeadersList

frontend/src/types/leaders.ts

@@ -0,0 +1,3 @@
+export interface LeadersListProps {
+  leaders: string
+}