Task/badge implementation in frontend (#2273)

* created some initial file and add some changes

* Add Badge functionality to UserNode and integrate Badges component

- Introduced BadgeNode for GraphQL representation of badges.
- Enhanced UserNode with badges and badge count fields.
- Updated UserCard to display badge count and integrated Badges component in UserDetailsPage.
- Added tests for badge display and functionality across components.
- Updated GraphQL queries to include badge data and counts.

* updated the backend file for sorting badges

* Refactor tests and mock data for badges functionality

- Improved formatting and readability in user_test.py by adjusting line breaks.
- Updated mockBadgeData.ts to enhance consistency in object formatting.
- Simplified Tooltip mock in Badges.test.tsx for better clarity.
- Minor adjustments in Badges.tsx for consistent className formatting.

* Update frontend/__tests__/unit/components/Badges.test.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/src/components/Badges.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/__tests__/unit/pages/UserDetails.test.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Add Font Awesome icons to custom dictionary

* Make Badge properties readonly

* Sort badges by weight before rendering

* Use nullish coalescing for user badges

* Add aria-label to FontAwesomeIcon for accessibility

* Update user.py

* Refactor badge count resolver for improved readability and performance; update badge component imports and cleanup

* Update backend/apps/github/api/internal/nodes/user.py

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/src/components/Badges.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update frontend/src/components/Badges.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Add badgeCount field to UserNode and update related queries; refactor badge count test for clarity

* frontend: fix Badges non-prefixed and invalid cssClass handling; adjust UserDetails avatar/layout classes to satisfy tests

* fix: correct badge relationship reference in UserNode and update tests

- Fixed self.badges to self.user_badges in badges() method
- Fixed self.badges to self.user_badges in badge_count() method
- Updated all test mocks to use user_badges instead of badges
- This resolves the incorrect relationship reference for badge filtering

* refactor: streamline badge display in UserDetailsPage component

* fix: update useParams to use memberKey in UserDetailsPage and adjust test mocks

* fix: adjust class names for better layout consistency in UserDetailsPage

* Revert "fix: adjust class names for better layout consistency in UserDetailsPage"

This reverts commit 5c69863.

* Refactor UserNode badge logic and improve Badge component rendering

- Updated UserNode to remove unnecessary filters for badge retrieval and count.
- Modified BadgeNode to inherit from Node and adjusted fields accordingly.
- Enhanced unit tests for UserNode to reflect changes in badge logic.
- Simplified Badges component by removing FontAwesome dependencies and using a wrapper for icon rendering.
- Improved UserDetailsPage to utilize badgeCount directly from user data.
- Adjusted UsersPage to reference badgeCount instead of calculating length.
- Updated GraphQL types to ensure BadgeNode extends Node for consistency.

* done with changes suggested by kate .

* Update frontend/src/components/Badges.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* CodeRabbit: For Font Awesome icons, the CSS classes are backend-driven (e.g., fa-crown for fa-solid). The frontend dynamically extracts the correct prefix for lookup and rendering. This is a critical design for backend compatibility,they are only fa-solid icons so badges.tsx only checks for fa-solid not anyother families.

fix the coderabbit issue with syntax.
also run make check-test

* migration

* Update migration timestamp, enhance badge component, and import icon type definition

* Refactor badge class key from 'bug_slash' to 'bugSlash' for consistency

* Fix issues with badges

* Fix make check

* Guard against null/undefined cssClass in normalizeCssClass

* Add test to verify badge rendering order per backend contract

* Fix backend test for getting users

* Update code

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: root <[email protected]>
Co-authored-by: Kate Golovanova <[email protected]>
Co-authored-by: Arkadii Yakovets <[email protected]>

Author: 5 people

backend/apps/core/utils/index.py

@@ -196,6 +196,7 @@ def get_params_for_index(index_name: str) -> dict:
         case "users":
             params["attributesToRetrieve"] = [
                 "idx_avatar_url",
+                "idx_badge_count",
                 "idx_bio",
                 "idx_company",
                 "idx_created_at",

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

@@ -28,18 +28,27 @@
 class UserNode:
     """GitHub user node."""
 
+    @strawberry.field
+    def badge_count(self) -> int:
+        """Resolve badge count."""
+        return self.user_badges.filter(is_active=True).count()
+
     @strawberry.field
     def badges(self) -> list[BadgeNode]:
         """Return user badges."""
         user_badges = (
-            self.user_badges.select_related("badge")
-            .filter(is_active=True)
+            self.user_badges.filter(
+                is_active=True,
+            )
+            .select_related(
+                "badge",
+            )
             .order_by(
                 "badge__weight",
                 "badge__name",
             )
         )
-        return [ub.badge for ub in user_badges]
+        return [user_badge.badge for user_badge in user_badges]
 
     @strawberry.field
     def created_at(self) -> float:

backend/apps/github/index/registry/user.py

@@ -14,6 +14,7 @@ class UserIndex(IndexBase):
 
     fields = (
         "idx_avatar_url",
+        "idx_badge_count",
         "idx_bio",
         "idx_company",
         "idx_contributions",

backend/apps/github/index/search/user.py

@@ -32,6 +32,7 @@ def get_users(
         "attributesToRetrieve": attributes
         or [
             "idx_avatar_url",
+            "idx_badge_count",
             "idx_bio",
             "idx_company",
             "idx_contributions",

backend/apps/github/models/mixins/user.py

@@ -24,6 +24,11 @@ def idx_avatar_url(self) -> str:
         """Return avatar URL for indexing."""
         return self.avatar_url
 
+    @property
+    def idx_badge_count(self) -> int:
+        """Return badge count for indexing."""
+        return self.user_badges.filter(is_active=True).count()
+
     @property
     def idx_bio(self) -> str:
         """Return bio for indexing."""

backend/apps/nest/migrations/0007_alter_badge_css_class.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.2.6 on 2025-10-09 04:06
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("nest", "0006_delete_apikey"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="badge",
+            name="css_class",
+            field=models.CharField(
+                choices=[
+                    ("award", "Award"),
+                    ("medal", "Medal"),
+                    ("ribbon", "Ribbon"),
+                    ("star", "Star"),
+                    ("certificate", "Certificate"),
+                    ("bug_slash", "Bug Slash"),
+                ],
+                default="medal",
+                max_length=255,
+                verbose_name="CSS Class",
+            ),
+        ),
+    ]

backend/apps/nest/models/badge.py

@@ -10,6 +10,14 @@
 class Badge(BulkSaveModel, TimestampedModel):
     """Represents a user badge for roles or achievements."""
 
+    class BadgeCssClass(models.TextChoices):
+        AWARD = "award", "Award"
+        BUG_SLASH = "bug_slash", "Bug Slash"
+        CERTIFICATE = "certificate", "Certificate"
+        MEDAL = "medal", "Medal"
+        RIBBON = "ribbon", "Ribbon"
+        STAR = "star", "Star"
+
     class Meta:
         db_table = "nest_badges"
         ordering = ["weight", "name"]
@@ -18,7 +26,8 @@ class Meta:
     css_class = models.CharField(
         verbose_name="CSS Class",
         max_length=255,
-        default="",
+        choices=BadgeCssClass.choices,
+        default=BadgeCssClass.MEDAL,
     )
     description = models.CharField(
         verbose_name="Description",

backend/tests/apps/core/utils/match_test.py

@@ -114,6 +114,7 @@ def test_get_params_for_users(self):
             "typoTolerance": "min",
             "attributesToRetrieve": [
                 "idx_avatar_url",
+                "idx_badge_count",
                 "idx_bio",
                 "idx_company",
                 "idx_created_at",

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

@@ -5,6 +5,7 @@
 import pytest
 
 from apps.github.api.internal.nodes.user import UserNode
+from apps.nest.api.internal.nodes.badge import BadgeNode
 
 
 class TestUserNode:
@@ -19,6 +20,7 @@ def test_meta_configuration(self):
         field_names = {field.name for field in UserNode.__strawberry_definition__.fields}
         expected_field_names = {
             "avatar_url",
+            "badge_count",
             "badges",
             "bio",
             "company",
@@ -81,42 +83,110 @@ def test_url_field(self):
         result = UserNode.url(mock_user)
         assert result == "https://github.com/testuser"
 
-    def test_badges_resolver_behavior(self):
-        """Unit test verifies the badges method returns badges sorted by weight."""
-        badge_high = Mock()
-        badge_high.weight = 1
-        badge_high.name = "High Priority Badge"
-
-        badge_medium = Mock()
-        badge_medium.weight = 5
-        badge_medium.name = "Medium Priority Badge"
+    def test_badge_count_field(self):
+        """Test badge_count field resolution."""
+        mock_user = Mock()
+        mock_badges_queryset = Mock()
+        mock_badges_queryset.filter.return_value.count.return_value = 3
+        mock_user.user_badges = mock_badges_queryset
 
-        badge_low = Mock()
-        badge_low.weight = 10
-        badge_low.name = "Low Priority Badge"
+        result = UserNode.badge_count(mock_user)
+        assert result == 3
+        mock_badges_queryset.filter.assert_called_once_with(is_active=True)
+        mock_badges_queryset.filter.return_value.count.assert_called_once()
 
-        user_badge_high = Mock()
-        user_badge_high.badge = badge_high
+    def test_badges_field_empty(self):
+        """Test badges field resolution with no badges."""
+        mock_user = Mock()
+        mock_badges_queryset = Mock()
+        mock_filter = mock_badges_queryset.filter.return_value
+        mock_select_related = mock_filter.select_related.return_value
+        mock_select_related.order_by.return_value = []
+        mock_user.user_badges = mock_badges_queryset
 
-        user_badge_medium = Mock()
-        user_badge_medium.badge = badge_medium
+        result = UserNode.badges(mock_user)
+        assert result == []
+        mock_badges_queryset.filter.assert_called_once_with(is_active=True)
+        mock_filter.select_related.assert_called_once_with("badge")
+        mock_select_related.order_by.assert_called_once_with("badge__weight", "badge__name")
 
-        user_badge_low = Mock()
-        user_badge_low.badge = badge_low
+    def test_badges_field_single_badge(self):
+        """Test badges field resolution with single badge."""
+        mock_user = Mock()
+        mock_badge = Mock(spec=BadgeNode)
+        mock_user_badge = Mock()
+        mock_user_badge.badge = mock_badge
 
-        sorted_user_badges = [user_badge_high, user_badge_medium, user_badge_low]
+        mock_badges_queryset = Mock()
+        mock_filter = mock_badges_queryset.filter.return_value
+        mock_select_related = mock_filter.select_related.return_value
+        mock_select_related.order_by.return_value = [mock_user_badge]
+        mock_user.user_badges = mock_badges_queryset
 
+        result = UserNode.badges(mock_user)
+        assert result == [mock_badge]
+        mock_badges_queryset.filter.assert_called_once_with(is_active=True)
+        mock_filter.select_related.assert_called_once_with("badge")
+        mock_select_related.order_by.assert_called_once_with("badge__weight", "badge__name")
+
+    def test_badges_field_sorted_by_weight_and_name(self):
+        """Test badges field resolution with multiple badges sorted by weight and name."""
+        # Create mock badges with different weights and names
+        mock_badge_high_weight = Mock(spec=BadgeNode)
+        mock_badge_high_weight.weight = 100
+        mock_badge_high_weight.name = "High Weight Badge"
+
+        mock_badge_medium_weight_a = Mock(spec=BadgeNode)
+        mock_badge_medium_weight_a.weight = 50
+        mock_badge_medium_weight_a.name = "Medium Weight A"
+
+        mock_badge_medium_weight_b = Mock(spec=BadgeNode)
+        mock_badge_medium_weight_b.weight = 50
+        mock_badge_medium_weight_b.name = "Medium Weight B"
+
+        mock_badge_low_weight = Mock(spec=BadgeNode)
+        mock_badge_low_weight.weight = 10
+        mock_badge_low_weight.name = "Low Weight Badge"
+
+        # Create mock user badges
+        mock_user_badge_high = Mock()
+        mock_user_badge_high.badge = mock_badge_high_weight
+
+        mock_user_badge_medium_a = Mock()
+        mock_user_badge_medium_a.badge = mock_badge_medium_weight_a
+
+        mock_user_badge_medium_b = Mock()
+        mock_user_badge_medium_b.badge = mock_badge_medium_weight_b
+
+        mock_user_badge_low = Mock()
+        mock_user_badge_low.badge = mock_badge_low_weight
+
+        # Set up the mock queryset to return badges in the expected sorted order
+        # (lowest weight first, then by name for same weight)
+        mock_badges_queryset = Mock()
+        mock_filter = mock_badges_queryset.filter.return_value
+        mock_select_related = mock_filter.select_related.return_value
+        mock_select_related.order_by.return_value = [
+            mock_user_badge_low,  # weight 10
+            mock_user_badge_medium_a,  # weight 50, name "Medium Weight A"
+            mock_user_badge_medium_b,  # weight 50, name "Medium Weight B"
+            mock_user_badge_high,  # weight 100
+        ]
         mock_user = Mock()
-        mock_queryset = Mock()
-        mock_queryset.filter.return_value.order_by.return_value = sorted_user_badges
-        mock_user.user_badges.select_related.return_value = mock_queryset
+        mock_user.user_badges = mock_badges_queryset
 
         result = UserNode.badges(mock_user)
 
-        mock_user.user_badges.select_related.assert_called_once_with("badge")
-        mock_queryset.filter.assert_called_once_with(is_active=True)
-        mock_queryset.filter.return_value.order_by.assert_called_once_with(
-            "badge__weight", "badge__name"
-        )
-
-        assert result == [ub.badge for ub in sorted_user_badges]
+        # Verify the badges are returned in the correct order
+        expected_badges = [
+            mock_badge_low_weight,
+            mock_badge_medium_weight_a,
+            mock_badge_medium_weight_b,
+            mock_badge_high_weight,
+        ]
+        assert result == expected_badges
+
+        # Verify the queryset was called with correct ordering
+        mock_badges_queryset.filter.assert_called_once_with(is_active=True)
+        mock_filter.select_related.assert_called_once_with("badge")
+        mock_select_related.order_by.assert_called_once_with("badge__weight", "badge__name")