Merge pull request #1610 from madhavi-0701/feat/frontend-enhancements

feat: add polling to BackendCapabilitiesBanner, persist OnboardingChe…

Author: ritik4ever

frontend/src/App.tsx

@@ -307,12 +307,7 @@ function App() {
     return (
         <div className={`App min-h-screen ${contentTopPad}`}>
             <RealtimeStatusBanner />
-            <BackendCapabilitiesBanner
-                notices={notices}
-                loadError={loadError}
-                loading={readinessLoading}
-                belowRealtimeBar={false}
-            />
+            <BackendCapabilitiesBanner belowRealtimeBar={false} />
             {showApiCompatibilityBanner && apiCompatibility ? (
                 <div
                     className={`fixed left-0 right-0 z-40 border-b px-4 py-3 text-sm ${

frontend/src/components/BackendCapabilitiesBanner.test.tsx

@@ -1,83 +1,133 @@
-import { describe, it, expect, afterEach } from 'vitest'
+import { describe, it, expect, afterEach, vi } from 'vitest'
 import { render, screen, cleanup, within } from '@testing-library/react'
 import BackendCapabilitiesBanner from './BackendCapabilitiesBanner'
 import type { CapabilityNotice } from '../hooks/useReadinessReport'
 
+vi.mock('../hooks/queries/useReadinessQuery', () => ({
+    useReadinessQuery: vi.fn(),
+}))
+
+import { useReadinessQuery } from '../hooks/queries/useReadinessQuery'
+
 afterEach(cleanup)
 
-const defaultProps = { loadError: false, loading: false, belowRealtimeBar: false }
+const mockQuery = useReadinessQuery as unknown as ReturnType<typeof vi.fn>
+
+function mockReturn(overrides: Partial<ReturnType<typeof useReadinessQuery>> = {}) {
+    mockQuery.mockReturnValue({
+        notices: [],
+        loadError: false,
+        loading: false,
+        report: null,
+        refresh: vi.fn(),
+        ...overrides,
+    })
+}
 
 function notice(id: string, kind: CapabilityNotice['kind'] = 'disabled', text = 'Some issue.'): CapabilityNotice {
     return { id, kind, text }
 }
 
 describe('BackendCapabilitiesBanner', () => {
+    afterEach(() => {
+        mockQuery.mockReset()
+    })
+
     it('renders nothing when no notices and no error', () => {
-        const { container } = render(<BackendCapabilitiesBanner {...defaultProps} notices={[]} />)
+        mockReturn()
+        const { container } = render(<BackendCapabilitiesBanner />)
         expect(container.firstChild).toBeNull()
     })
 
     it('renders load-error message when loadError is true and no notices', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} loadError notices={[]} />)
+        mockReturn({ loadError: true, notices: [] })
+        render(<BackendCapabilitiesBanner />)
         expect(screen.getByRole('status')).toHaveTextContent(/could not load backend service status/i)
     })
 
     it('renders notice text', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('database', 'limited', 'DB is down.')]} />)
+        mockReturn({ notices: [notice('database', 'limited', 'DB is down.')] })
+        render(<BackendCapabilitiesBanner />)
         expect(screen.getByText(/DB is down\./)).toBeInTheDocument()
     })
 
     it('attaches a doc link for database notice', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('database', 'limited')]} />)
+        mockReturn({ notices: [notice('database', 'limited')] })
+        render(<BackendCapabilitiesBanner />)
         const link = screen.getByRole('link', { name: /database setup/i })
         expect(link).toHaveAttribute('href', expect.stringContaining('#database-setup'))
         expect(link).toHaveAttribute('target', '_blank')
         expect(link).toHaveAttribute('rel', 'noopener noreferrer')
     })
 
     it('attaches a doc link for queue-workers notice', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('queue-workers')]} />)
+        mockReturn({ notices: [notice('queue-workers')] })
+        render(<BackendCapabilitiesBanner />)
         const link = screen.getByRole('link', { name: /redis \/ worker setup/i })
         expect(link).toHaveAttribute('href', expect.stringContaining('CONTRIBUTING'))
     })
 
     it('attaches a doc link for indexer notice', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('indexer')]} />)
+        mockReturn({ notices: [notice('indexer')] })
+        render(<BackendCapabilitiesBanner />)
         const link = screen.getByRole('link', { name: /environment setup/i })
         expect(link).toHaveAttribute('href', expect.stringContaining('ENVIRONMENT'))
     })
 
     it('attaches a doc link for auto-rebalancer notice', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('auto-rebalancer')]} />)
+        mockReturn({ notices: [notice('auto-rebalancer')] })
+        render(<BackendCapabilitiesBanner />)
         const link = screen.getByRole('link', { name: /environment setup/i })
         expect(link).toBeInTheDocument()
     })
 
     it('renders multiple notices each with their own link', () => {
         const notices = [notice('database', 'limited'), notice('queue-workers')]
-        const { container } = render(<BackendCapabilitiesBanner {...defaultProps} notices={notices} />)
+        mockReturn({ notices })
+        const { container } = render(<BackendCapabilitiesBanner />)
         const banner = container.querySelector('[role="status"]')!
         expect(within(banner as HTMLElement).getByRole('link', { name: /database setup/i })).toBeInTheDocument()
         expect(within(banner as HTMLElement).getByRole('link', { name: /redis \/ worker setup/i })).toBeInTheDocument()
     })
 
     it('applies top-14 class when belowRealtimeBar is true', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('database', 'limited')]} belowRealtimeBar />)
+        mockReturn({ notices: [notice('database', 'limited')] })
+        render(<BackendCapabilitiesBanner belowRealtimeBar />)
         expect(screen.getByRole('status').className).toContain('top-14')
     })
 
     it('applies top-0 class when belowRealtimeBar is false', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('database', 'limited')]} />)
+        mockReturn({ notices: [notice('database', 'limited')] })
+        render(<BackendCapabilitiesBanner />)
         expect(screen.getByRole('status').className).toContain('top-0')
     })
 
     it('uses amber styling when any notice is limited', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('database', 'limited')]} />)
+        mockReturn({ notices: [notice('database', 'limited')] })
+        render(<BackendCapabilitiesBanner />)
         expect(screen.getByRole('status').className).toContain('amber')
     })
 
     it('uses slate styling when all notices are disabled', () => {
-        render(<BackendCapabilitiesBanner {...defaultProps} notices={[notice('queue-workers', 'disabled')]} />)
+        mockReturn({ notices: [notice('queue-workers', 'disabled')] })
+        render(<BackendCapabilitiesBanner />)
         expect(screen.getByRole('status').className).not.toContain('amber')
     })
+
+    it('updates banner after a simulated capability change on subsequent poll', () => {
+        mockReturn({ notices: [notice('database', 'limited', 'Initial issue.')] })
+        const { unmount } = render(<BackendCapabilitiesBanner />)
+        expect(screen.getByText(/Initial issue\./)).toBeInTheDocument()
+        unmount()
+
+        mockQuery.mockReturnValue({
+            notices: [notice('database', 'limited', 'Updated issue.')],
+            loadError: false,
+            loading: false,
+            report: null,
+            refresh: vi.fn(),
+        })
+        render(<BackendCapabilitiesBanner />)
+        expect(screen.getByText(/Updated issue\./)).toBeInTheDocument()
+    })
 })

frontend/src/components/BackendCapabilitiesBanner.tsx

@@ -1,11 +1,10 @@
+import { useRef } from 'react'
 import { Info, AlertTriangle, ExternalLink } from 'lucide-react'
+import { useReadinessQuery } from '../hooks/queries/useReadinessQuery'
 import type { CapabilityNotice } from '../hooks/useReadinessReport'
 
 type Props = {
-    notices: CapabilityNotice[]
-    loadError: boolean
-    loading: boolean
-    belowRealtimeBar: boolean
+    belowRealtimeBar?: boolean
 }
 
 interface NoticeHint {
@@ -40,15 +39,32 @@ const NOTICE_HINTS: Record<string, NoticeHint> = {
     },
 }
 
-export default function BackendCapabilitiesBanner({ notices, loadError, loading, belowRealtimeBar }: Props) {
-    const show = loadError || notices.length > 0
+function noticesEqual(a: CapabilityNotice[], b: CapabilityNotice[]): boolean {
+    if (a.length !== b.length) return false
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].id !== b[i].id || a[i].kind !== b[i].kind || a[i].text !== b[i].text) return false
+    }
+    return true
+}
+
+export default function BackendCapabilitiesBanner({ belowRealtimeBar = false }: Props) {
+    const { notices, loadError, loading } = useReadinessQuery()
+    const lastNotices = useRef<CapabilityNotice[]>(notices)
+
+    if (!noticesEqual(notices, lastNotices.current)) {
+        lastNotices.current = notices
+    }
+
+    const stableNotices = lastNotices.current
+    const show = loadError || stableNotices.length > 0
+
     if (!show && !loading) {
         return null
     }
 
     const positionClass = belowRealtimeBar ? 'top-14' : 'top-0'
 
-    if (loadError && notices.length === 0) {
+    if (loadError && stableNotices.length === 0) {
         return (
             <div
                 className={`fixed left-0 right-0 z-[38] border-b border-slate-200 bg-slate-50 px-4 py-2 text-sm text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-200 ${positionClass}`}
@@ -66,11 +82,11 @@ export default function BackendCapabilitiesBanner({ notices, loadError, loading,
         )
     }
 
-    if (notices.length === 0) {
+    if (stableNotices.length === 0) {
         return null
     }
 
-    const hasLimited = notices.some((n) => n.kind === 'limited')
+    const hasLimited = stableNotices.some((n) => n.kind === 'limited')
 
     return (
         <div
@@ -89,7 +105,7 @@ export default function BackendCapabilitiesBanner({ notices, loadError, loading,
                         : 'A few optional backend features are turned off for this environment. Nothing is wrong with your wallet — this is expected when Redis, workers, or certain flags are not enabled.'}
                 </p>
                 <ul className="space-y-1.5 leading-snug">
-                    {notices.map((n) => {
+                    {stableNotices.map((n) => {
                         const hint = NOTICE_HINTS[n.id]
                         return (
                             <li key={n.id} className="flex gap-2">

frontend/src/components/CorrelationHeatmap.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { describe, expect, it } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, afterEach } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import CorrelationHeatmap, { correlationColor } from './CorrelationHeatmap'
 
 const assets = ['XLM', 'BTC', 'ETH']
@@ -23,9 +24,19 @@ const matrices = {
   ],
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+})
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return React.createElement(QueryClientProvider, { client: queryClient }, children)
+}
+
+afterEach(cleanup)
+
 describe('CorrelationHeatmap', () => {
   it('renders diagonal cells as 1.0', () => {
-    render(<CorrelationHeatmap assets={assets} correlations={matrices} />)
+    render(<CorrelationHeatmap assets={assets} correlations={matrices} />, { wrapper: Wrapper })
 
     expect(screen.getByTestId('correlation-cell-0-0')).toHaveTextContent('1.0')
     expect(screen.getByTestId('correlation-cell-1-1')).toHaveTextContent('1.0')
@@ -39,15 +50,15 @@ describe('CorrelationHeatmap', () => {
   })
 
   it('shows exact coefficient and pair names in the tooltip', async () => {
-    render(<CorrelationHeatmap assets={assets} correlations={matrices} />)
+    render(<CorrelationHeatmap assets={assets} correlations={matrices} />, { wrapper: Wrapper })
 
     fireEvent.mouseEnter(screen.getByTestId('correlation-cell-0-1'))
 
     expect(await screen.findByRole('tooltip')).toHaveTextContent('XLM / BTC: -0.50')
   })
 
   it('switches matrices when the time range changes', () => {
-    render(<CorrelationHeatmap assets={assets} correlations={matrices} />)
+    render(<CorrelationHeatmap assets={assets} correlations={matrices} />, { wrapper: Wrapper })
 
     expect(screen.getByTestId('correlation-cell-0-1')).toHaveTextContent('-0.50')
 
@@ -64,9 +75,18 @@ describe('CorrelationHeatmap', () => {
       manyAssets.map((__, columnIndex) => (rowIndex === columnIndex ? 1 : 0.1)),
     )
 
-    render(<CorrelationHeatmap assets={manyAssets} correlations={{ '30D': matrix }} />)
+    render(<CorrelationHeatmap assets={manyAssets} correlations={{ '30D': matrix }} />, { wrapper: Wrapper })
 
     expect(screen.getAllByRole('gridcell')).toHaveLength(100)
     expect(screen.queryByText('A11')).not.toBeInTheDocument()
   })
+
+  it('opens a drill-down modal when a cell is clicked with correct asset pair context', async () => {
+    render(<CorrelationHeatmap assets={assets} correlations={matrices} />, { wrapper: Wrapper })
+
+    fireEvent.click(screen.getByTestId('correlation-cell-0-1'))
+
+    expect(screen.getByText(/correlation detail/i)).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: /correlation detail/i })).toBeInTheDocument()
+  })
 })