[7.x] [Security_Solution][Resolver] Resolver loading and error state (#…

…75600) (#76192)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/emptify_mock.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ResolverRelatedEvents,
+  ResolverTree,
+  ResolverEntityIndex,
+} from '../../../../common/endpoint/types';
+import { mockTreeWithNoProcessEvents } from '../../mocks/resolver_tree';
+import { DataAccessLayer } from '../../types';
+
+type EmptiableRequests = 'relatedEvents' | 'resolverTree' | 'entities' | 'indexPatterns';
+
+interface Metadata<T> {
+  /**
+   * The `_id` of the document being analyzed.
+   */
+  databaseDocumentID: string;
+  /**
+   * A record of entityIDs to be used in tests assertions.
+   */
+  entityIDs: T;
+}
+
+/**
+ * A simple mock dataAccessLayer that allows you to control whether a request comes back with data or empty.
+ */
+export function emptifyMock<T>(
+  {
+    metadata,
+    dataAccessLayer,
+  }: {
+    dataAccessLayer: DataAccessLayer;
+    metadata: Metadata<T>;
+  },
+  dataShouldBeEmpty: EmptiableRequests[]
+): {
+  dataAccessLayer: DataAccessLayer;
+  metadata: Metadata<T>;
+} {
+  return {
+    metadata,
+    dataAccessLayer: {
+      /**
+       * Fetch related events for an entity ID
+       */
+      async relatedEvents(...args): Promise<ResolverRelatedEvents> {
+        return dataShouldBeEmpty.includes('relatedEvents')
+          ? Promise.resolve({
+              entityID: args[0],
+              events: [],
+              nextEvent: null,
+            })
+          : dataAccessLayer.relatedEvents(...args);
+      },
+
+      /**
+       * Fetch a ResolverTree for a entityID
+       */
+      async resolverTree(...args): Promise<ResolverTree> {
+        return dataShouldBeEmpty.includes('resolverTree')
+          ? Promise.resolve(mockTreeWithNoProcessEvents())
+          : dataAccessLayer.resolverTree(...args);
+      },
+
+      /**
+       * Get an array of index patterns that contain events.
+       */
+      indexPatterns(...args): string[] {
+        return dataShouldBeEmpty.includes('indexPatterns')
+          ? []
+          : dataAccessLayer.indexPatterns(...args);
+      },
+
+      /**
+       * Get entities matching a document.
+       */
+      async entities(...args): Promise<ResolverEntityIndex> {
+        return dataShouldBeEmpty.includes('entities')
+          ? Promise.resolve([])
+          : dataAccessLayer.entities(...args);
+      },
+    },
+  };
+}

x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/pausify_mock.ts

@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ResolverRelatedEvents,
+  ResolverTree,
+  ResolverEntityIndex,
+} from '../../../../common/endpoint/types';
+import { DataAccessLayer } from '../../types';
+
+type PausableRequests = 'relatedEvents' | 'resolverTree' | 'entities';
+
+interface Metadata<T> {
+  /**
+   * The `_id` of the document being analyzed.
+   */
+  databaseDocumentID: string;
+  /**
+   * A record of entityIDs to be used in tests assertions.
+   */
+  entityIDs: T;
+}
+
+/**
+ * A simple mock dataAccessLayer that allows you to manually pause and resume a request.
+ */
+export function pausifyMock<T>({
+  metadata,
+  dataAccessLayer,
+}: {
+  dataAccessLayer: DataAccessLayer;
+  metadata: Metadata<T>;
+}): {
+  dataAccessLayer: DataAccessLayer;
+  metadata: Metadata<T>;
+  pause: (pausableRequests: PausableRequests[]) => void;
+  resume: (pausableRequests: PausableRequests[]) => void;
+} {
+  let relatedEventsPromise = Promise.resolve();
+  let resolverTreePromise = Promise.resolve();
+  let entitiesPromise = Promise.resolve();
+
+  let relatedEventsResolver: (() => void) | null;
+  let resolverTreeResolver: (() => void) | null;
+  let entitiesResolver: (() => void) | null;
+
+  return {
+    metadata,
+    pause: (pausableRequests: PausableRequests[]) => {
+      const pauseRelatedEventsRequest = pausableRequests.includes('relatedEvents');
+      const pauseResolverTreeRequest = pausableRequests.includes('resolverTree');
+      const pauseEntitiesRequest = pausableRequests.includes('entities');
+
+      if (pauseRelatedEventsRequest && !relatedEventsResolver) {
+        relatedEventsPromise = new Promise((resolve) => {
+          relatedEventsResolver = resolve;
+        });
+      }
+      if (pauseResolverTreeRequest && !resolverTreeResolver) {
+        resolverTreePromise = new Promise((resolve) => {
+          resolverTreeResolver = resolve;
+        });
+      }
+      if (pauseEntitiesRequest && !entitiesResolver) {
+        entitiesPromise = new Promise((resolve) => {
+          entitiesResolver = resolve;
+        });
+      }
+    },
+    resume: (pausableRequests: PausableRequests[]) => {
+      const resumeEntitiesRequest = pausableRequests.includes('entities');
+      const resumeResolverTreeRequest = pausableRequests.includes('resolverTree');
+      const resumeRelatedEventsRequest = pausableRequests.includes('relatedEvents');
+
+      if (resumeEntitiesRequest && entitiesResolver) {
+        entitiesResolver();
+        entitiesResolver = null;
+      }
+      if (resumeResolverTreeRequest && resolverTreeResolver) {
+        resolverTreeResolver();
+        resolverTreeResolver = null;
+      }
+      if (resumeRelatedEventsRequest && relatedEventsResolver) {
+        relatedEventsResolver();
+        relatedEventsResolver = null;
+      }
+    },
+    dataAccessLayer: {
+      /**
+       * Fetch related events for an entity ID
+       */
+      async relatedEvents(...args): Promise<ResolverRelatedEvents> {
+        await relatedEventsPromise;
+        return dataAccessLayer.relatedEvents(...args);
+      },
+
+      /**
+       * Fetch a ResolverTree for a entityID
+       */
+      async resolverTree(...args): Promise<ResolverTree> {
+        await resolverTreePromise;
+        return dataAccessLayer.resolverTree(...args);
+      },
+
+      /**
+       * Get an array of index patterns that contain events.
+       */
+      indexPatterns(...args): string[] {
+        return dataAccessLayer.indexPatterns(...args);
+      },
+
+      /**
+       * Get entities matching a document.
+       */
+      async entities(...args): Promise<ResolverEntityIndex> {
+        await entitiesPromise;
+        return dataAccessLayer.entities(...args);
+      },
+    },
+  };
+}

x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts

@@ -44,23 +44,25 @@ expect.extend({
     const received: T[] = [];
 
     // Set to true if the test passes.
-    let pass: boolean = false;
+    let lastCheckPassed: boolean = false;
 
     // Async iterate over the iterable
     for await (const next of receivedIterable) {
       // keep track of all received values. Used in pass and fail messages
       received.push(next);
       // Use deep equals to compare the value to the expected value
       if (this.equals(next, expected)) {
-        // If the value is equal, break
-        pass = true;
+        lastCheckPassed = true;
+      } else if (lastCheckPassed) {
+        // the previous check passed but this one didn't
+        lastCheckPassed = false;
         break;
       }
     }
 
     // Use `pass` as set in the above loop (or initialized to `false`)
     // See https://jestjs.io/docs/en/expect#custom-matchers-api and https://jestjs.io/docs/en/expect#thisutils
-    const message = pass
+    const message = lastCheckPassed
       ? () =>
           `${this.utils.matcherHint(matcherName, undefined, undefined, options)}\n\n` +
           `Expected: not ${this.utils.printExpected(expected)}\n${
@@ -84,7 +86,7 @@ expect.extend({
             )
             .join(`\n\n`)}`;
 
-    return { message, pass };
+    return { message, pass: lastCheckPassed };
   },
   /**
    * A custom matcher that takes an async generator and compares each value it yields to an expected value.

x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx

@@ -242,6 +242,7 @@ describe('Resolver, when analyzing a tree that has two related events for the or
         );
         if (button) {
           button.simulate('click');
+          button.simulate('click'); // The first click opened the menu, this second click closes it
         }
       });
       it('should close the submenu', async () => {