fix: UI needs hard page refresh to update apps (issue argoproj#9247)

This PR fixes issue argoproj#9247 where the Argo CD UI requires a hard page refresh to see updates to applications.

Root Cause:
The issue was caused by incorrect error handling in the EventSource connection and improper ordering of RxJS operators. Specifically:

1. The EventSource error handler in requests.ts was incorrectly defined as a function that returns another function, which prevented proper error handling and reconnection when the connection was lost.

2. The RxJS operators in applications-service.ts were not ordered optimally, causing issues with retry behavior and reconnection attempts.

3. The application list loading in applications-list.tsx was mutating the original applications array directly, which could lead to inconsistent state updates.

4. The application details page in application-details.tsx had unnecessary repeat and retry operators that were causing issues with the WebSocket connection.

Changes Made:
1. Fixed the EventSource error handler in requests.ts to be a direct function that handles errors properly.

2. Improved the retry logic in applications-service.ts by reordering the RxJS operators and adding a delay parameter to prevent rapid reconnection attempts.

3. Enhanced the application list loading in applications-list.tsx by creating a copy of the applications array and adding better handling for empty update batches.

4. Fixed the application details page in application-details.tsx by removing unnecessary operators and simplifying the stream handling.

Added comprehensive tests for all modified components to ensure the fix works correctly and prevent regression.

These changes ensure that the UI properly reconnects when the WebSocket connection is lost and that updates are properly propagated to the UI without requiring a hard page refresh.

Author: mbergo

ui/src/app/applications/components/application-details/application-details.test.tsx

@@ -0,0 +1,168 @@
+import { BehaviorSubject, from, of } from 'rxjs';
+import { services } from '../../../shared/services';
+import * as AppUtils from '../utils';
+import { ApplicationDetails } from './application-details';
+
+// Mock the services
+jest.mock('../../../shared/services', () => ({
+    applications: {
+        get: jest.fn(),
+        watch: jest.fn(),
+        resourceTree: jest.fn(),
+        watchResourceTree: jest.fn()
+    },
+    viewPreferences: {
+        getPreferences: jest.fn()
+    },
+    extensions: {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        getAppViewExtensions: jest.fn().mockReturnValue([]),
+        getStatusPanelExtensions: jest.fn().mockReturnValue([]),
+        getActionMenuExtensions: jest.fn().mockReturnValue([])
+    }
+}));
+
+jest.mock('../utils', () => ({
+    handlePageVisibility: jest.fn((callback) => callback()),
+    nodeKey: jest.fn((node) => `${node.group}/${node.kind}/${node.namespace}/${node.name}`),
+    appInstanceName: jest.fn((app) => app.metadata.name)
+}));
+
+describe('ApplicationDetails', () => {
+    let component: ApplicationDetails;
+    let mockContext: any;
+    let mockProps: any;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        // Setup mock props
+        mockProps = {
+            match: {
+                params: {
+                    name: 'test-app',
+                    appnamespace: 'test-namespace'
+                }
+            },
+            location: {
+                search: ''
+            },
+            history: {
+                location: {
+                    search: ''
+                }
+            }
+        };
+
+        // Setup mock context
+        mockContext = {
+            apis: {
+                navigation: {
+                    goto: jest.fn()
+                },
+                notifications: {
+                    show: jest.fn()
+                },
+                popup: {
+                    confirm: jest.fn()
+                }
+            }
+        };
+
+        // Setup mock application
+        const mockApp = {
+            metadata: {
+                name: 'test-app',
+                namespace: 'test-namespace',
+                resourceVersion: '123'
+            },
+            spec: {
+                project: 'default'
+            },
+            status: {
+                resources: [],
+                summary: {}
+            }
+        };
+
+        // Setup mock tree
+        const mockTree = {
+            nodes: [],
+            orphanedNodes: [],
+            hosts: []
+        };
+
+        // Setup service mocks
+        (services.applications.get as jest.Mock).mockResolvedValue(mockApp);
+        (services.applications.watch as jest.Mock).mockReturnValue(of({
+            application: mockApp,
+            type: 'MODIFIED'
+        }));
+        (services.applications.resourceTree as jest.Mock).mockResolvedValue(mockTree);
+        (services.applications.watchResourceTree as jest.Mock).mockReturnValue(of(mockTree));
+        (services.viewPreferences.getPreferences as jest.Mock).mockReturnValue(of({
+            appDetails: {
+                resourceFilter: [],
+                view: 'tree'
+            }
+        }));
+    });
+
+    describe('loadAppInfo', () => {
+        it('should load application info and handle updates correctly', (done) => {
+            // Create a new instance with our mocked context
+            component = new ApplicationDetails(mockProps);
+            (component as any).context = mockContext;
+
+            // Create a spy on the appChanged subject
+            const appChangedSpy = jest.spyOn((component as any).appChanged, 'next');
+
+            // Call the loadAppInfo method
+            const result = (component as any).loadAppInfo('test-app', 'test-namespace');
+
+            // Subscribe to the result
+            result.subscribe((data: any) => {
+                expect(data.application).toBeDefined();
+                expect(data.application.metadata.name).toBe('test-app');
+                expect(data.tree).toBeDefined();
+                done();
+            });
+
+            // Verify the mocks were called correctly
+            expect(services.applications.get).toHaveBeenCalledWith('test-app', 'test-namespace');
+            expect(services.applications.watch).toHaveBeenCalledWith({
+                name: 'test-app',
+                appNamespace: 'test-namespace'
+            });
+            expect(services.applications.resourceTree).toHaveBeenCalledWith('test-app', 'test-namespace');
+            expect(services.applications.watchResourceTree).toHaveBeenCalledWith('test-app', 'test-namespace');
+        });
+
+        it('should handle application deletion correctly', (done) => {
+            // Setup mock for deletion event
+            (services.applications.watch as jest.Mock).mockReturnValue(of({
+                application: { metadata: { name: 'test-app' } },
+                type: 'DELETED'
+            }));
+
+            // Create a new instance with our mocked context
+            component = new ApplicationDetails(mockProps);
+            (component as any).context = mockContext;
+
+            // Create a spy on the onAppDeleted method
+            const onAppDeletedSpy = jest.spyOn((component as any), 'onAppDeleted');
+
+            // Call the loadAppInfo method
+            const result = (component as any).loadAppInfo('test-app', 'test-namespace');
+
+            // Subscribe to the result
+            result.subscribe(() => {
+                expect(onAppDeletedSpy).toHaveBeenCalled();
+                expect(mockContext.apis.notifications.show).toHaveBeenCalled();
+                expect(mockContext.apis.navigation.goto).toHaveBeenCalledWith('/applications');
+                done();
+            });
+        });
+    });
+});

ui/src/app/applications/components/applications-list/applications-list.test.tsx

@@ -0,0 +1,139 @@
+import { bufferTime, from, of } from 'rxjs';
+import * as models from '../../../shared/models';
+import { services } from '../../../shared/services';
+import * as AppUtils from '../utils';
+
+// Import the function directly from the file
+// Note: This is a bit of a hack for testing purposes
+import { loadApplications } from './applications-list';
+
+jest.mock('../../../shared/services', () => ({
+    applications: {
+        list: jest.fn(),
+        watch: jest.fn()
+    },
+    viewPreferences: {
+        getPreferences: jest.fn()
+    }
+}));
+
+jest.mock('../utils', () => ({
+    appInstanceName: jest.fn((app) => app.metadata.name),
+    handlePageVisibility: jest.fn((callback) => callback())
+}));
+
+describe('loadApplications', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should load applications and handle updates correctly', (done) => {
+        // Mock initial applications list
+        const initialApps = {
+            items: [
+                { metadata: { name: 'app1', namespace: 'default' } },
+                { metadata: { name: 'app2', namespace: 'default' } }
+            ],
+            metadata: { resourceVersion: '123' }
+        };
+
+        // Mock watch events
+        const watchEvents = [
+            { 
+                type: 'MODIFIED', 
+                application: { metadata: { name: 'app1', namespace: 'default', annotations: { updated: 'true' } } } 
+            },
+            { 
+                type: 'ADDED', 
+                application: { metadata: { name: 'app3', namespace: 'default' } } 
+            },
+            { 
+                type: 'DELETED', 
+                application: { metadata: { name: 'app2', namespace: 'default' } } 
+            }
+        ];
+
+        // Setup mocks
+        (services.applications.list as jest.Mock).mockReturnValue(Promise.resolve(initialApps));
+        (services.applications.watch as jest.Mock).mockReturnValue(of(...watchEvents));
+
+        // Call the function
+        const projects = ['project1'];
+        const appNamespace = 'default';
+        const result = loadApplications(projects, appNamespace);
+
+        // Subscribe to the result
+        let callCount = 0;
+        result.subscribe(apps => {
+            callCount++;
+            
+            if (callCount === 1) {
+                // First emission should be the initial apps
+                expect(apps.length).toBe(2);
+                expect(apps[0].metadata.name).toBe('app1');
+                expect(apps[1].metadata.name).toBe('app2');
+            } else if (callCount === 2) {
+                // Second emission should include all updates
+                expect(apps.length).toBe(2); // app1 (modified) and app3 (added), app2 (deleted)
+                
+                // Check app1 was updated
+                const app1 = apps.find(app => app.metadata.name === 'app1');
+                expect(app1).toBeDefined();
+                expect(app1.metadata.annotations.updated).toBe('true');
+                
+                // Check app3 was added
+                const app3 = apps.find(app => app.metadata.name === 'app3');
+                expect(app3).toBeDefined();
+                
+                // Check app2 was deleted
+                const app2 = apps.find(app => app.metadata.name === 'app2');
+                expect(app2).toBeUndefined();
+                
+                done();
+            }
+        });
+
+        // Verify the mocks were called correctly
+        expect(services.applications.list).toHaveBeenCalledWith(projects, {
+            appNamespace,
+            fields: expect.any(Array)
+        });
+        
+        expect(services.applications.watch).toHaveBeenCalledWith(
+            { projects, resourceVersion: '123' },
+            { fields: expect.any(Array) }
+        );
+    });
+
+    it('should handle empty update batches correctly', (done) => {
+        // Mock initial applications list
+        const initialApps = {
+            items: [
+                { metadata: { name: 'app1', namespace: 'default' } }
+            ],
+            metadata: { resourceVersion: '123' }
+        };
+
+        // Setup mocks
+        (services.applications.list as jest.Mock).mockReturnValue(Promise.resolve(initialApps));
+        (services.applications.watch as jest.Mock).mockReturnValue(of([])); // Empty update batch
+
+        // Call the function
+        const projects = ['project1'];
+        const appNamespace = 'default';
+        const result = loadApplications(projects, appNamespace);
+
+        // Subscribe to the result
+        let callCount = 0;
+        result.subscribe(apps => {
+            callCount++;
+            
+            if (callCount === 1) {
+                // First emission should be the initial apps
+                expect(apps.length).toBe(1);
+                expect(apps[0].metadata.name).toBe('app1');
+                done();
+            }
+        });
+    });
+});