fix: address CodeRabbit feedback for multi-column sorting

- Fix URL/state desync for browser back/forward navigation
- Canonicalize invalid order inputs to prevent UI mismatch
- Add type-safe FIELD_MAPPING with 'as const'
- Improve accessibility with ARIA attributes
- Add comprehensive test for 3-state sorting cycle
- Regenerate GraphQL types with new sortable fields

Author: EclipseAditya

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

@@ -143,10 +143,56 @@ describe('MetricsPage', () => {
       sortableColumns.forEach((column) => {
         const sortButton = screen.getByTitle(`Sort by ${column}`)
         expect(sortButton).toBeInTheDocument()
-        fireEvent.click(sortButton)
       })
     })
   })
+
+  test('handles sorting state and URL updates', async () => {
+    const mockReplace = jest.fn()
+    const { useRouter, useSearchParams } = jest.requireMock('next/navigation')
+    ;(useRouter as jest.Mock).mockReturnValue({
+      push: jest.fn(),
+      replace: mockReplace,
+    })
+
+    // Test unsorted -> descending
+    ;(useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams())
+    const { rerender } = render(<MetricsPage />)
+
+    const sortButton = screen.getByTitle('Sort by Stars')
+    fireEvent.click(sortButton)
+
+    await waitFor(() => {
+      expect(mockReplace).toHaveBeenCalledWith(expect.stringContaining('order=-stars'))
+    })
+
+    // Test descending -> ascending
+    mockReplace.mockClear()
+    ;(useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams('order=-stars'))
+    rerender(<MetricsPage />)
+
+    const sortButtonDesc = screen.getByTitle('Sort by Stars')
+    fireEvent.click(sortButtonDesc)
+
+    await waitFor(() => {
+      const lastCall = mockReplace.mock.calls[mockReplace.mock.calls.length - 1][0]
+      expect(lastCall).toContain('order=stars')
+      expect(lastCall).not.toContain('order=-stars')
+    })
+
+    // Test ascending -> unsorted (removes order param, defaults to -score)
+    mockReplace.mockClear()
+    ;(useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams('order=stars'))
+    rerender(<MetricsPage />)
+
+    const sortButtonAsc = screen.getByTitle('Sort by Stars')
+    fireEvent.click(sortButtonAsc)
+
+    await waitFor(() => {
+      const lastCall = mockReplace.mock.calls[mockReplace.mock.calls.length - 1][0]
+      expect(lastCall).not.toContain('order=')
+    })
+  })
   test('render health metrics data', async () => {
     render(<MetricsPage />)
     const metrics = mockHealthMetricsData.projectHealthMetrics

frontend/src/app/projects/dashboard/metrics/page.tsx

@@ -17,13 +17,15 @@ import ProjectsDashboardDropDown from 'components/ProjectsDashboardDropDown'
 
 const PAGINATION_LIMIT = 10
 
-const FIELD_MAPPING: Record<string, string> = {
+const FIELD_MAPPING = {
   score: 'score',
   stars: 'starsCount',
   forks: 'forksCount',
   contributors: 'contributorsCount',
   createdAt: 'createdAt',
-}
+} as const
+
+type OrderKey = keyof typeof FIELD_MAPPING
 
 const parseOrderParam = (orderParam: string | null) => {
   if (!orderParam) {
@@ -32,10 +34,13 @@ const parseOrderParam = (orderParam: string | null) => {
 
   const isDescending = orderParam.startsWith('-')
   const fieldKey = isDescending ? orderParam.slice(1) : orderParam
-  const graphqlField = FIELD_MAPPING[fieldKey] || 'score'
+  const isValidKey = fieldKey in FIELD_MAPPING
+  const normalizedKey = isValidKey ? fieldKey : 'score'
+  const graphqlField = FIELD_MAPPING[normalizedKey as OrderKey]
   const direction = isDescending ? Ordering.Desc : Ordering.Asc
+  const normalizedUrlKey = direction === Ordering.Desc ? `-${normalizedKey}` : normalizedKey
 
-  return { field: graphqlField, direction, urlKey: orderParam }
+  return { field: graphqlField, direction, urlKey: normalizedUrlKey }
 }
 
 const buildGraphQLOrdering = (field: string, direction: Ordering) => {
@@ -53,7 +58,7 @@ const buildOrderingWithTieBreaker = (primaryOrdering: Record<string, Ordering>)
 ]
 const SortableColumnHeader: FC<{
   label: string
-  fieldKey: string
+  fieldKey: OrderKey
   currentOrderKey: string
   onSort: (orderKey: string | null) => void
   align?: 'left' | 'center' | 'right'
@@ -83,6 +88,8 @@ const SortableColumnHeader: FC<{
         onClick={handleClick}
         className={`flex items-center gap-1 font-semibold transition-colors hover:text-blue-600 ${textAlignClass}`}
         title={`Sort by ${label}`}
+        aria-label={`Sort by ${label}`}
+        aria-pressed={isActive}
       >
         <span className="truncate">{label}</span>
         <FontAwesomeIcon
@@ -171,6 +178,15 @@ const MetricsPage: FC = () => {
     },
   })
 
+  useEffect(() => {
+    const { field: f, direction: d } = parseOrderParam(searchParams.get('order'))
+    const nextOrdering = buildGraphQLOrdering(f, d)
+    if (JSON.stringify(nextOrdering) !== JSON.stringify(ordering)) {
+      setOrdering(nextOrdering)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams])
+
   useEffect(() => {
     if (data) {
       setMetrics(data.projectHealthMetrics)