Scopes: Add RTK Query API client for caching (#115494)

* Scopes API client * Initial RTK query commit * Copy API client from generated enterprise folder * Mock ScopesApiClient for integration tests * Update e2e tests * Handle group expansion for dashboard navigation * Extract integration test mocks * Move mock to only be for integration tests * Update path for enterprise sync script * Re-export mockData * Disregard caching for search * Leave name parameters empty * Disable subscriptions for client requests * Add functionality to reset cache between mocked requests * Use grafana-test-utils for scopes integration tests * Rollback mock setup * Remove store form window object * Remove cache helper * Restore scopenode search functionality * Improve request erro handling * Clean up subscription in case subscription: false lies * Fix logging security risk * Rewrite tests to cover RTK query usage and improve error catching * Update USE_LIVE_DATA to be consistent * Remove unused timout parameter * Fix error handling * Make dashboard-navigation test pass
2026-01-13 13:09:08 +01:00
parent b57b8d4359
commit d1064da4cd
29 changed files with 3591 additions and 908 deletions
@@ -6,7 +6,150 @@ import { Resource } from '../../public/app/features/apiserver/types';

 import { testScopes } from './scopes';

-const USE_LIVE_DATA = Boolean(process.env.API_CALLS_CONFIG_PATH);
+const USE_LIVE_DATA = Boolean(process.env.API_CONFIG_PATH);
+
+/**
+ * Sets up all scope-related API routes before navigation.
+ * This ensures that ALL scope API requests (including those made during initial page load)
+ * are intercepted by the mocks, preventing RTK Query from caching real API responses.
+ *
+ * Call this BEFORE navigating to a page (e.g., before gotoDashboardPage).
+ */
+export async function setupScopeRoutes(page: Page, scopes: TestScope[]): Promise<void> {
+  // Route for scope node children (tree structure)
+  await page.route(`**/apis/scope.grafana.app/v0alpha1/namespaces/*/find/scope_node_children*`, async (route) => {
+    const url = new URL(route.request().url());
+    const parentParam = url.searchParams.get('parent');
+    const queryParam = url.searchParams.get('query');
+
+    // Find the appropriate scopes based on parent
+    let scopesToReturn = scopes;
+    if (parentParam) {
+      // Find nested scopes based on parent name
+      const findChildren = (items: TestScope[]): TestScope[] => {
+        for (const item of items) {
+          if (item.name === parentParam && item.children) {
+            return item.children;
+          }
+          if (item.children) {
+            const found = findChildren(item.children);
+            if (found.length > 0) {
+              return found;
+            }
+          }
+        }
+        return [];
+      };
+      scopesToReturn = findChildren(scopes);
+      if (scopesToReturn.length === 0) {
+        scopesToReturn = scopes; // Fallback to root scopes
+      }
+    }
+
+    // Filter by search query if provided
+    if (queryParam) {
+      const query = queryParam.toLowerCase();
+      const filterByQuery = (items: TestScope[]): TestScope[] => {
+        const results: TestScope[] = [];
+        for (const item of items) {
+          // Exact match on name or title containing the query
+          if (item.name.toLowerCase() === query || item.title.toLowerCase() === query) {
+            results.push(item);
+          } else if (item.name.toLowerCase().includes(query) || item.title.toLowerCase().includes(query)) {
+            results.push(item);
+          }
+          // Also search in children
+          if (item.children) {
+            results.push(...filterByQuery(item.children));
+          }
+        }
+        return results;
+      };
+      scopesToReturn = filterByQuery(scopesToReturn);
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        apiVersion: 'scope.grafana.app/v0alpha1',
+        kind: 'FindScopeNodeChildrenResults',
+        metadata: {},
+        items: scopesToReturn.map((scope) => ({
+          kind: 'ScopeNode',
+          apiVersion: 'scope.grafana.app/v0alpha1',
+          metadata: {
+            name: scope.name,
+            namespace: 'default',
+          },
+          spec: {
+            title: scope.title,
+            description: scope.title,
+            disableMultiSelect: scope.disableMultiSelect ?? false,
+            nodeType: scope.children ? 'container' : 'leaf',
+            ...(parentParam && { parentName: parentParam }),
+            ...((scope.addLinks || scope.children) && {
+              linkType: 'scope',
+              linkId: `scope-${scope.name}`,
+            }),
+            ...(scope.redirectPath && { redirectPath: scope.redirectPath }),
+          },
+        })),
+      }),
+    });
+  });
+
+  // Route for individual scope fetching
+  await page.route(`**/apis/scope.grafana.app/v0alpha1/namespaces/*/scopes/*`, async (route) => {
+    const url = route.request().url();
+    const scopeName = url.split('/scopes/')[1]?.split('?')[0];
+
+    // Find the scope in the test data
+    const findScope = (items: TestScope[]): TestScope | undefined => {
+      for (const item of items) {
+        if (`scope-${item.name}` === scopeName) {
+          return item;
+        }
+        if (item.children) {
+          const found = findScope(item.children);
+          if (found) {
+            return found;
+          }
+        }
+      }
+      return undefined;
+    };
+
+    const scope = findScope(scopes);
+
+    if (scope) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          kind: 'Scope',
+          apiVersion: 'scope.grafana.app/v0alpha1',
+          metadata: {
+            name: `scope-${scope.name}`,
+            namespace: 'default',
+          },
+          spec: {
+            title: scope.title,
+            description: '',
+            filters: scope.filters,
+            category: scope.category,
+            type: scope.type,
+          },
+        }),
+      });
+    } else {
+      await route.fulfill({ status: 404 });
+    }
+  });
+
+  // Note: Dashboard bindings and navigations routes are set up dynamically in applyScopes()
+  // with scope-specific URL patterns to avoid cache issues. They are not set up here.
+}

 export type TestScope = {
  name: string;
@@ -24,6 +167,9 @@ export type TestScope = {

 type ScopeDashboardBinding = Resource<ScopeDashboardBindingSpec, ScopeDashboardBindingStatus, 'ScopeDashboardBinding'>;

+/**
+ * Sets up a route for scope node children requests and waits for the response.
+ */
 export async function scopeNodeChildrenRequest(
  page: Page,
  scopes: TestScope[],
@@ -68,10 +214,13 @@ export async function scopeNodeChildrenRequest(
  return page.waitForResponse((response) => response.url().includes(`/find/scope_node_children`));
 }

+/**
+ * Opens the scopes selector dropdown and waits for the tree to load.
+ */
 export async function openScopesSelector(page: Page, scopes?: TestScope[]) {
  const click = async () => await page.getByTestId('scopes-selector-input').click();

-  if (!scopes) {
+  if (!scopes || USE_LIVE_DATA) {
    await click();
    return;
  }
@@ -82,10 +231,13 @@ export async function openScopesSelector(page: Page, scopes?: TestScope[]) {
  await responsePromise;
 }

+/**
+ * Expands a scope tree node and waits for children to load.
+ */
 export async function expandScopesSelection(page: Page, parentScope: string, scopes?: TestScope[]) {
  const click = async () => await page.getByTestId(`scopes-tree-${parentScope}-expand`).click();

-  if (!scopes) {
+  if (!scopes || USE_LIVE_DATA) {
    await click();
    return;
  }
@@ -96,6 +248,9 @@ export async function expandScopesSelection(page: Page, parentScope: string, sco
  await responsePromise;
 }

+/**
+ * Sets up a route for individual scope requests and waits for the response.
+ */
 export async function scopeSelectRequest(page: Page, selectedScope: TestScope): Promise<Response> {
  await page.route(
    `**/apis/scope.grafana.app/v0alpha1/namespaces/*/scopes/scope-${selectedScope.name}`,
@@ -125,6 +280,9 @@ export async function scopeSelectRequest(page: Page, selectedScope: TestScope):
  return page.waitForResponse((response) => response.url().includes(`/scopes/scope-${selectedScope.name}`));
 }

+/**
+ * Selects a scope in the tree.
+ */
 export async function selectScope(page: Page, scopeName: string, selectedScope?: TestScope) {
  const click = async () => {
    const element = page.locator(
@@ -134,7 +292,7 @@ export async function selectScope(page: Page, scopeName: string, selectedScope?:
    await element.click({ force: true });
  };

-  if (!selectedScope) {
+  if (!selectedScope || USE_LIVE_DATA) {
    await click();
    return;
  }
@@ -145,14 +303,22 @@ export async function selectScope(page: Page, scopeName: string, selectedScope?:
  await responsePromise;
 }

+/**
+ * Applies the selected scopes and waits for the selector to close and page to settle.
+ * Sets up routes dynamically with scope-specific URL patterns to avoid cache issues.
+ */
 export async function applyScopes(page: Page, scopes?: TestScope[]) {
  const click = async () => {
    await page.getByTestId('scopes-selector-apply').scrollIntoViewIfNeeded();
    await page.getByTestId('scopes-selector-apply').click({ force: true });
  };

-  if (!scopes) {
+  if (!scopes || USE_LIVE_DATA) {
    await click();
+    // Wait for the apply button to disappear (selector closed)
+    await page.waitForSelector('[data-testid="scopes-selector-apply"]', { state: 'hidden', timeout: 5000 });
+    // Wait for any resulting API calls (dashboard bindings, etc.) to complete
+    await page.waitForLoadState('networkidle');
    return;
  }

@@ -166,7 +332,7 @@ export async function applyScopes(page: Page, scopes?: TestScope[]) {

  const groups: string[] = ['Most relevant', 'Dashboards', 'Something else', ''];

-  // Mock scope_dashboard_bindings endpoint
+  // Mock scope_dashboard_bindings endpoint with scope-specific URL pattern
  await page.route(dashboardBindingsUrl, async (route) => {
    await route.fulfill({
      status: 200,
@@ -220,7 +386,7 @@ export async function applyScopes(page: Page, scopes?: TestScope[]) {
    });
  });

-  // Mock scope_navigations endpoint
+  // Mock scope_navigations endpoint with scope-specific URL pattern
  await page.route(scopeNavigationsUrl, async (route) => {
    await route.fulfill({
      status: 200,
@@ -266,21 +432,23 @@ export async function applyScopes(page: Page, scopes?: TestScope[]) {
    (response) =>
      response.url().includes(`/find/scope_dashboard_bindings`) || response.url().includes(`/find/scope_navigations`)
  );
-  const scopeRequestPromises: Array<Promise<Response>> = [];
-
-  for (const scope of scopes) {
-    scopeRequestPromises.push(scopeSelectRequest(page, scope));
-  }

  await click();
  await responsePromise;
-  await Promise.all(scopeRequestPromises);
+  // Wait for the apply button to disappear (selector closed)
+  await page.waitForSelector('[data-testid="scopes-selector-apply"]', { state: 'hidden', timeout: 5000 });
+  // Wait for any resulting API calls to complete
+  await page.waitForLoadState('networkidle');
 }

-export async function searchScopes(page: Page, value: string, resultScopes: TestScope[]) {
+/**
+ * Searches for scopes in the tree and waits for results.
+ * Sets up a route dynamically with filtered results to return only matching scopes.
+ */
+export async function searchScopes(page: Page, value: string, resultScopes?: TestScope[]) {
  const click = async () => await page.getByTestId('scopes-tree-search').fill(value);

-  if (!resultScopes) {
+  if (!resultScopes || USE_LIVE_DATA) {
    await click();
    return;
  }