fix: fix: handle incorrect response for operations

Author: astandrik

src/containers/Operations/Operations.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
-import {AccessDenied} from '../../components/Errors/403';
-import {ResponseError} from '../../components/Errors/ResponseError';
+import {PageError} from '../../components/Errors/PageError/PageError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {isAccessError} from '../../utils/response';
 
 import {OperationsControls} from './OperationsControls';
 import {getColumns} from './columns';
@@ -41,8 +39,8 @@ export function Operations({database, scrollContainerRef}: OperationsProps) {
         };
     }, []);
 
-    if (isAccessError(error)) {
-        return <AccessDenied position="left" />;
+    if (error) {
+        return <PageError error={error} position="left" />;
     }
 
     return (
@@ -58,7 +56,6 @@ export function Operations({database, scrollContainerRef}: OperationsProps) {
                     handleSearchChange={handleSearchChange}
                 />
             </TableWithControlsLayout.Controls>
-            {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
                 {operations.length > 0 || isLoading ? (
                     <ResizeableDataTable

tests/suites/tenant/diagnostics/tabs/OperationsModel.ts

@@ -15,6 +15,9 @@ export class OperationsTable extends BaseModel {
     private scrollContainer: Locator;
     private accessDeniedState: Locator;
     private accessDeniedTitle: Locator;
+    private pageErrorState: Locator;
+    private pageErrorTitle: Locator;
+    private pageErrorDescription: Locator;
 
     constructor(page: Page) {
         super(page, page.locator('.kv-tenant-diagnostics'));
@@ -27,6 +30,10 @@ export class OperationsTable extends BaseModel {
         // AccessDenied component is rendered at the root level of Operations component
         this.accessDeniedState = page.locator('.kv-tenant-diagnostics .empty-state');
         this.accessDeniedTitle = this.accessDeniedState.locator('.empty-state__title');
+        // PageError component also uses empty-state but with error illustration
+        this.pageErrorState = page.locator('.kv-tenant-diagnostics .empty-state');
+        this.pageErrorTitle = this.pageErrorState.locator('.empty-state__title');
+        this.pageErrorDescription = this.pageErrorState.locator('.empty-state__description .error');
     }
 
     async waitForTableVisible() {
@@ -194,4 +201,22 @@ export class OperationsTable extends BaseModel {
         // Now get the actual new count
         return await this.getOperationsCount();
     }
+
+    async isPageErrorVisible(): Promise<boolean> {
+        try {
+            await this.pageErrorState.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+            // Check if it has error description to distinguish from access denied
+            return await this.pageErrorDescription.isVisible();
+        } catch {
+            return false;
+        }
+    }
+
+    async getPageErrorTitle(): Promise<string> {
+        return await this.pageErrorTitle.innerText();
+    }
+
+    async getPageErrorDescription(): Promise<string> {
+        return await this.pageErrorDescription.innerText();
+    }
 }

tests/suites/tenant/diagnostics/tabs/operations.test.ts

@@ -7,6 +7,7 @@ import {Diagnostics, DiagnosticsTab} from '../Diagnostics';
 import {
     setupEmptyOperationsMock,
     setupOperation403Mock,
+    setupOperationNetworkErrorMock,
     setupOperationsMock,
 } from './operationsMocks';
 
@@ -160,6 +161,37 @@ test.describe('Operations Tab - Infinite Query', () => {
         expect(accessDeniedTitle).toBe('Access denied');
     });
 
+    test('shows error state when operations request returns network error', async ({page}) => {
+        // Setup network error mock (simulates CORS blocking)
+        await setupOperationNetworkErrorMock(page);
+
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+
+        const tenantPageInstance = new TenantPage(page);
+        await tenantPageInstance.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Operations);
+        // Wait a bit for potential loading
+        await page.waitForTimeout(2000);
+
+        // Wait for error state to be visible
+        const isPageErrorVisible = await diagnostics.operations.isPageErrorVisible();
+        expect(isPageErrorVisible).toBe(true);
+
+        // Verify the error title
+        const errorTitle = await diagnostics.operations.getPageErrorTitle();
+        expect(errorTitle).toBe('Error');
+
+        // Verify the error description shows network error
+        const errorDescription = await diagnostics.operations.getPageErrorDescription();
+        expect(errorDescription.toLowerCase()).toContain('network');
+    });
+
     test('loads all operations when scrolling to the bottom multiple times', async ({page}) => {
         // Setup mocks with 80 operations (4 pages of 20)
         await setupOperationsMock(page, {totalOperations: 80});

tests/suites/tenant/diagnostics/tabs/operationsMocks.ts

@@ -245,3 +245,11 @@ export const setupAllOperationMocks = async (page: Page, options?: {totalOperati
     await setupOperationsMock(page, options);
     await setupOperationMutationMocks(page);
 };
+
+export const setupOperationNetworkErrorMock = async (page: Page) => {
+    await page.route(`${backend}/operation/list*`, async (route) => {
+        // Simulate a network error by aborting the request
+        // This mimics what happens when CORS blocks a request
+        await route.abort('failed');
+    });
+};