Skip to content

Update issues table to use LabelLists instead of custom labels #3816

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

Merged
arkid15r merged 4 commits into from
Feb 7, 2026
Merged

Update issues table to use LabelLists instead of custom labels #3816

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec98372
Update issues table to use LabelLists instead of custom labels
kasya Feb 7, 2026
a1826b8
Add tests
kasya Feb 7, 2026
f20ad45
Update code
kasya Feb 7, 2026
b8a9584
Add more tests
kasya Feb 7, 2026
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
25 changes: 8 additions & 17 deletions frontend/src/components/IssuesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import Image from 'next/image'
import { useRouter } from 'next/navigation'
import type React from 'react'

import { LabelList } from 'components/LabelList'

export type IssueRow = {
objectID: string
number: number
Expand Down Expand Up @@ -141,23 +143,12 @@ const IssuesTable: React.FC<IssuesTableProps> = ({

{/* Labels */}
<td className="block pb-3 lg:table-cell lg:px-6 lg:py-4">
{issue.labels && issue.labels.length > 0 ? (
<div className="flex flex-wrap gap-1 lg:gap-2">
{issue.labels.slice(0, maxVisibleLabels).map((label) => (
<span
key={label}
className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 lg:rounded-lg lg:border lg:border-gray-400 lg:bg-transparent lg:hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:lg:border-gray-300 dark:lg:hover:bg-gray-700"
>
{label}
</span>
))}
{issue.labels.length > maxVisibleLabels && (
<span className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-500 lg:rounded-lg lg:border lg:border-gray-400 lg:bg-transparent lg:text-gray-700 lg:hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:lg:border-gray-300 dark:lg:text-gray-300 dark:lg:hover:bg-gray-700">
+{issue.labels.length - maxVisibleLabels} more
</span>
)}
</div>
) : null}
<LabelList
entityKey={`issue-${issue.objectID}`}
labels={issue.labels ?? []}
maxVisible={maxVisibleLabels}
className="gap-1 lg:gap-2"
/>
</td>

{/* Assignee */}
Expand Down