feat: Add archived badge for repositories (#2388)

backend/apps/github/api/internal/nodes/repository.py

@@ -27,6 +27,7 @@
         "created_at",
         "description",
         "forks_count",
+        "is_archived",
         "key",
         "license",
         "name",

backend/tests/apps/github/api/internal/nodes/repository_test.py

@@ -23,6 +23,7 @@ def test_meta_configuration(self):
             "created_at",
             "description",
             "forks_count",
+            "is_archived",
             "issues",
             "key",
             "languages",
@@ -202,3 +203,16 @@ def test_url_method(self):
 
         result = RepositoryNode.url(mock_repository)
         assert result == "https://github.com/test-org/test-repo"
+
+    def test_is_archived_field_exists(self):
+        """Test that is_archived field is exposed in the GraphQL schema."""
+        field_names = {field.name for field in RepositoryNode.__strawberry_definition__.fields}
+        assert "is_archived" in field_names, (
+            "is_archived field should be exposed in RepositoryNode"
+        )
+
+    def test_resolve_is_archived(self):
+        """Test is_archived field type."""
+        field = self._get_field_by_name("is_archived")
+        assert field is not None
+        assert field.type is bool

frontend/__tests__/unit/components/ArchivedBadge.test.tsx

@@ -0,0 +1,205 @@
+import { render, screen } from '@testing-library/react'
+import ArchivedBadge from 'components/ArchivedBadge'
+
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  FontAwesomeIcon: ({ className }: { className: string }) => (
+    <i data-testid="archive-icon" className={className} />
+  ),
+}))
+
+describe('ArchivedBadge', () => {
+  describe('Basic Rendering', () => {
+    it('renders successfully with default props', () => {
+      render(<ArchivedBadge />)
+
+      expect(screen.getByText('Archived')).toBeInTheDocument()
+    })
+
+    it('displays the archived text', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toBeVisible()
+    })
+
+    it('has the correct tooltip', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveAttribute('title', 'This repository has been archived and is read-only')
+    })
+  })
+
+  describe('Size Variants', () => {
+    it('renders with small size', () => {
+      render(<ArchivedBadge size="sm" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('px-2', 'py-1', 'text-xs')
+    })
+
+    it('renders with medium size (default)', () => {
+      render(<ArchivedBadge size="md" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('px-3', 'py-1', 'text-sm')
+    })
+
+    it('renders with large size', () => {
+      render(<ArchivedBadge size="lg" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('px-4', 'py-2', 'text-base')
+    })
+
+    it('defaults to medium size when size prop is not provided', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('px-3', 'py-1', 'text-sm')
+    })
+  })
+
+  describe('Icon Display', () => {
+    it('shows icon by default', () => {
+      render(<ArchivedBadge />)
+
+      const icon = screen.getByTestId('archive-icon')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('shows icon when showIcon is true', () => {
+      render(<ArchivedBadge showIcon={true} />)
+
+      const icon = screen.getByTestId('archive-icon')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('hides icon when showIcon is false', () => {
+      render(<ArchivedBadge showIcon={false} />)
+
+      const icon = screen.queryByTestId('archive-icon')
+      expect(icon).not.toBeInTheDocument()
+    })
+
+    it('applies correct icon class', () => {
+      render(<ArchivedBadge />)
+
+      const icon = screen.getByTestId('archive-icon')
+      expect(icon).toHaveClass('h-3', 'w-3')
+    })
+  })
+
+  describe('Styling', () => {
+    it('has correct base styling classes', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('inline-flex', 'items-center', 'gap-1.5', 'rounded-full', 'border')
+    })
+
+    it('has correct light mode color classes', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('border-yellow-600', 'bg-yellow-50', 'text-yellow-800')
+    })
+
+    it('has correct dark mode color classes', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass(
+        'dark:border-yellow-500',
+        'dark:bg-yellow-900/30',
+        'dark:text-yellow-400'
+      )
+    })
+
+    it('has font-medium class', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('font-medium')
+    })
+  })
+
+  describe('Custom ClassName', () => {
+    it('applies custom className', () => {
+      render(<ArchivedBadge className="custom-class" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('custom-class')
+    })
+
+    it('preserves default classes with custom className', () => {
+      render(<ArchivedBadge className="ml-2" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('ml-2', 'inline-flex', 'rounded-full')
+    })
+
+    it('handles empty custom className', () => {
+      render(<ArchivedBadge className="" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toBeInTheDocument()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('renders as a span element', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge.tagName).toBe('SPAN')
+    })
+
+    it('has descriptive tooltip for screen readers', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      const title = badge.getAttribute('title')
+      expect(title).toBeTruthy()
+      expect(title).toContain('archived')
+      expect(title).toContain('read-only')
+    })
+
+    it('has appropriate semantic structure with icon', () => {
+      render(<ArchivedBadge />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toContainHTML('i')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles all props together', () => {
+      render(<ArchivedBadge size="lg" showIcon={false} className="extra-margin" />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toBeInTheDocument()
+      expect(badge).toHaveClass('px-4', 'py-2', 'text-base', 'extra-margin')
+      expect(screen.queryByTestId('archive-icon')).not.toBeInTheDocument()
+    })
+
+    it('renders consistently across multiple instances', () => {
+      const { rerender } = render(<ArchivedBadge />)
+
+      const firstRender = screen.getByText('Archived').className
+
+      rerender(<ArchivedBadge />)
+
+      const secondRender = screen.getByText('Archived').className
+      expect(firstRender).toBe(secondRender)
+    })
+
+    it('does not render any interactive elements', () => {
+      const { container } = render(<ArchivedBadge />)
+
+      expect(container.querySelector('button')).not.toBeInTheDocument()
+      expect(container.querySelector('a')).not.toBeInTheDocument()
+      expect(container.querySelector('input')).not.toBeInTheDocument()
+    })
+  })
+})

frontend/__tests__/unit/components/CardDetailsPage.test.tsx

@@ -614,7 +614,8 @@ describe('CardDetailsPage', () => {
       render(<CardDetailsPage {...defaultProps} isActive={false} />)
 
       expect(screen.getByText('Inactive')).toBeInTheDocument()
-      expect(screen.getByText('Inactive')).toHaveClass('bg-red-200', 'text-red-800')
+      // Updated classes for consistent badge styling
+      expect(screen.getByText('Inactive')).toHaveClass('bg-red-50', 'text-red-800')
     })
 
     it('does not render inactive badge when isActive is true', () => {
@@ -1395,4 +1396,120 @@ describe('CardDetailsPage', () => {
       ).toBeInTheDocument()
     })
   })
+
+  describe('Archived Badge Functionality', () => {
+    it('displays archived badge for archived repository', () => {
+      const archivedProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: true,
+      }
+
+      render(<CardDetailsPage {...archivedProps} />)
+
+      expect(screen.getByText('Archived')).toBeInTheDocument()
+    })
+
+    it('does not display archived badge for non-archived repository', () => {
+      const activeProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: false,
+      }
+
+      render(<CardDetailsPage {...activeProps} />)
+
+      expect(screen.queryByText('Archived')).not.toBeInTheDocument()
+    })
+
+    it('does not display archived badge when isArchived is undefined', () => {
+      const undefinedProps = {
+        ...defaultProps,
+        type: 'repository',
+      }
+
+      render(<CardDetailsPage {...undefinedProps} />)
+
+      expect(screen.queryByText('Archived')).not.toBeInTheDocument()
+    })
+
+    it('does not display archived badge for non-repository types', () => {
+      const projectProps = {
+        ...defaultProps,
+        type: 'project',
+        isArchived: true,
+      }
+
+      render(<CardDetailsPage {...projectProps} />)
+
+      expect(screen.queryByText('Archived')).not.toBeInTheDocument()
+    })
+
+    it('displays archived badge alongside inactive badge', () => {
+      const bothBadgesProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: true,
+        isActive: false,
+      }
+
+      render(<CardDetailsPage {...bothBadgesProps} />)
+
+      expect(screen.getByText('Archived')).toBeInTheDocument()
+      expect(screen.getByText('Inactive')).toBeInTheDocument()
+    })
+
+    it('displays archived badge independently of active status', () => {
+      const archivedAndActiveProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: true,
+        isActive: true,
+      }
+
+      render(<CardDetailsPage {...archivedAndActiveProps} />)
+
+      expect(screen.getByText('Archived')).toBeInTheDocument()
+      expect(screen.queryByText('Inactive')).not.toBeInTheDocument()
+    })
+
+    it('archived badge has correct positioning with flex container', () => {
+      const archivedProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: true,
+      }
+
+      const { container } = render(<CardDetailsPage {...archivedProps} />)
+
+      // New structure: badges are in a flex container with items-center and gap-3
+      const badgeContainer = container.querySelector('.flex.items-center.gap-3')
+      expect(badgeContainer).toBeInTheDocument()
+    })
+
+    it('archived badge renders with medium size', () => {
+      const archivedProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: true,
+      }
+
+      render(<CardDetailsPage {...archivedProps} />)
+
+      const badge = screen.getByText('Archived')
+      expect(badge).toHaveClass('px-3', 'py-1', 'text-sm')
+    })
+
+    it('handles null isArchived gracefully', () => {
+      const nullArchivedProps = {
+        ...defaultProps,
+        type: 'repository',
+        isArchived: null,
+      }
+
+      render(<CardDetailsPage {...nullArchivedProps} />)
+
+      expect(screen.queryByText('Archived')).not.toBeInTheDocument()
+    })
+  })
 })