fix(Tenant): fix infinite load if describe returns empty data (#1167)

Author: ValeraS

README.md

@@ -94,7 +94,7 @@ Install all Playwright dependencies and chromium to run tests.
 npm run test:e2e:install
 ```
 
-Run tests. If `PLAYWRIGHT_BASE_URL` is provided, tests run on this url, otherwise Playwright `webServer` is started with `npm run dev` on `http://localhost:3000` and all tests run there.
+Run tests. If `PLAYWRIGHT_BASE_URL` is provided, tests run on this url, otherwise Playwright `webServer` is started with `npm run dev` on `http://localhost:3000` and all tests run there. If `PLAYWRIGHT_APP_BACKEND` is provided, tests will be use this url as backend, otherwise `http://localhost:8765` will be used.
 
 ```
 npm run test:e2e

src/containers/Tenant/Tenant.tsx

@@ -91,14 +91,19 @@ export function Tenant(props: TenantProps) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
 
+    const [initialLoading, setInitialLoading] = React.useState(true);
+    if (initialLoading && !isLoading) {
+        setInitialLoading(false);
+    }
+
     const title = path || i18n('page.title');
     return (
         <div className={b()}>
             <Helmet
                 defaultTitle={`${title} — YDB Monitoring`}
                 titleTemplate={`%s — ${title} — YDB Monitoring`}
             />
-            <LoaderWrapper loading={isLoading}>
+            <LoaderWrapper loading={initialLoading}>
                 <PageError error={showBlockingError ? error : undefined}>
                     <SplitPane
                         defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}

tests/suites/tenant/initialLoad.test.ts

@@ -0,0 +1,55 @@
+import {expect, test} from '@playwright/test';
+
+import {backend, tenantName} from '../../utils/constants';
+
+import {TenantPage} from './TenantPage';
+
+const pageQueryParams = {
+    schema: tenantName,
+    name: tenantName,
+    tenantPage: 'diagnostics',
+};
+
+test.describe('Tenant initial load', () => {
+    test('Tenant diagnostics page is visible', async ({page}) => {
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        await expect(page.locator('.kv-tenant-diagnostics')).toBeVisible();
+    });
+
+    test('Tenant diagnostics page is visible when describe returns no data', async ({page}) => {
+        await page.route(`${backend}/viewer/json/describe?*`, async (route) => {
+            await route.fulfill({json: ''});
+        });
+
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        await expect(page.locator('.kv-tenant-diagnostics')).toBeVisible();
+    });
+
+    test('Tenant page shows error message when describe returns 401', async ({page}) => {
+        await page.route(`${backend}/viewer/json/describe?*`, async (route) => {
+            await route.fulfill({status: 401});
+        });
+
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        await expect(page.locator('.empty-state')).toBeVisible();
+        await expect(page.locator('.empty-state__title')).toHaveText('Access denied');
+    });
+
+    test('Tenant page shows error message when describe returns 403', async ({page}) => {
+        await page.route(`${backend}/viewer/json/describe?*`, async (route) => {
+            await route.fulfill({status: 403});
+        });
+
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        await expect(page.locator('.empty-state')).toBeVisible();
+        await expect(page.locator('.empty-state__title')).toHaveText('Access denied');
+    });
+});

tests/utils/constants.ts

@@ -8,3 +8,6 @@ export const tenantPage = 'tenant';
 
 // Entities
 export const tenantName = '/local';
+
+// URLs
+export const backend = process.env.PLAYWRIGHT_APP_BACKEND || 'http://localhost:8765';