[Security][Lists] Add API functions and react hooks for value list AP…

…Is (elastic#69603)

* Add pure API functions and react hooks for value list APIs

This also adds a generic hook, useAsyncTask, that wraps an async
function to provide basic utilities:
  * loading state
  * error state
  * abort/cancel function

* Fix type errors in hook tests

These were not caught locally as I was accidentally running typescript
without the full project.

* Document current limitations of useAsyncTask

* Defines a new validation function that returns an Either instead of a tuple

This allows callers to further leverage fp-ts functions as needed.

* Remove duplicated copyright comment

* WIP: Perform request/response validations in the FP style

* leverages new validateEither fn which returns an Either
* constructs a pipeline that:
  * validates the payload
  * performs the API call
  * validates the response
and short-circuits if any of those produce a Left value.

It then converts the Either into a promise that either rejects with the
Left or resolves with the Right.

* Adds helper function to convert a TaskEither back to a Promise

This cleans up our validation pipeline considerably.

* Adds request/response validations to findLists

* refactors private API functions to accept the encoded request schema
(i.e. snake cased)
* refactors validateEither to use `schema.validate` instead of
`schema.decode` since we don't actually want the decoded value, we just
want to verify that it'll be able to be decoded on the backend.

* Refactor our API types

* Add request/response validation to import/export functions

* Fix type errors

* Continue to export decoded types without a qualifier
* pull types used by hooks from their new location
* Fix errors with usage of act()

* Attempting to reduce plugin bundle size

By pulling from the module directly instead of an index, we can
hopefully narrow down our dependencies until tree-shaking does this for
us.

* useAsyncFn's initiator does not return a promise

Rather than returning a promise and requiring the caller to handle a
rejection, we instead return nothing and require the user to watch the
hook's state.

* success can be handled with a useEffect on state.result
* errors can be handled with a useEffect on state.error

* Fix failing test

Assertion count wasn't updated following interface changes; we've now
got two inline expectations so this isn't needed.

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/lists/common/schemas/request/delete_list_schema.ts

@@ -17,3 +17,4 @@ export const deleteListSchema = t.exact(
 );
 
 export type DeleteListSchema = t.TypeOf<typeof deleteListSchema>;
+export type DeleteListSchemaEncoded = t.OutputOf<typeof deleteListSchema>;

x-pack/plugins/lists/common/schemas/request/export_list_item_query_schema.ts

@@ -18,3 +18,4 @@ export const exportListItemQuerySchema = t.exact(
 );
 
 export type ExportListItemQuerySchema = t.TypeOf<typeof exportListItemQuerySchema>;
+export type ExportListItemQuerySchemaEncoded = t.OutputOf<typeof exportListItemQuerySchema>;

x-pack/plugins/lists/common/schemas/request/find_list_schema.ts

@@ -9,7 +9,6 @@
 import * as t from 'io-ts';
 
 import { cursor, filter, sort_field, sort_order } from '../common/schemas';
-import { RequiredKeepUndefined } from '../../types';
 import { StringToPositiveNumber } from '../types/string_to_positive_number';
 
 export const findListSchema = t.exact(
@@ -23,6 +22,5 @@ export const findListSchema = t.exact(
   })
 );
 
-export type FindListSchemaPartial = t.TypeOf<typeof findListSchema>;
-
-export type FindListSchema = RequiredKeepUndefined<t.TypeOf<typeof findListSchema>>;
+export type FindListSchema = t.TypeOf<typeof findListSchema>;
+export type FindListSchemaEncoded = t.OutputOf<typeof findListSchema>;

x-pack/plugins/lists/common/schemas/request/import_list_item_query_schema.ts

@@ -9,11 +9,11 @@
 import * as t from 'io-ts';
 
 import { list_id, type } from '../common/schemas';
-import { Identity, RequiredKeepUndefined } from '../../types';
+import { Identity } from '../../types';
 
 export const importListItemQuerySchema = t.exact(t.partial({ list_id, type }));
 
 export type ImportListItemQuerySchemaPartial = Identity<t.TypeOf<typeof importListItemQuerySchema>>;
-export type ImportListItemQuerySchema = RequiredKeepUndefined<
-  t.TypeOf<typeof importListItemQuerySchema>
->;
+
+export type ImportListItemQuerySchema = t.TypeOf<typeof importListItemQuerySchema>;
+export type ImportListItemQuerySchemaEncoded = t.OutputOf<typeof importListItemQuerySchema>;

x-pack/plugins/lists/common/schemas/request/import_list_item_schema.ts

@@ -17,3 +17,4 @@ export const importListItemSchema = t.exact(
 );
 
 export type ImportListItemSchema = t.TypeOf<typeof importListItemSchema>;
+export type ImportListItemSchemaEncoded = t.OutputOf<typeof importListItemSchema>;

x-pack/plugins/lists/common/siem_common_deps.ts

@@ -9,5 +9,5 @@ export { DefaultUuid } from '../../security_solution/common/detection_engine/sch
 export { DefaultStringArray } from '../../security_solution/common/detection_engine/schemas/types/default_string_array';
 export { exactCheck } from '../../security_solution/common/exact_check';
 export { getPaths, foldLeftRight } from '../../security_solution/common/test_utils';
-export { validate } from '../../security_solution/common/validate';
+export { validate, validateEither } from '../../security_solution/common/validate';
 export { formatErrors } from '../../security_solution/common/format_errors';

x-pack/plugins/lists/public/common/fp_utils.test.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { tryCatch } from 'fp-ts/lib/TaskEither';
+
+import { toPromise } from './fp_utils';
+
+describe('toPromise', () => {
+  it('rejects with left if TaskEither is left', async () => {
+    const task = tryCatch(() => Promise.reject(new Error('whoops')), String);
+
+    await expect(toPromise(task)).rejects.toEqual('Error: whoops');
+  });
+
+  it('resolves with right if TaskEither is right', async () => {
+    const task = tryCatch(() => Promise.resolve('success'), String);
+
+    await expect(toPromise(task)).resolves.toEqual('success');
+  });
+});

x-pack/plugins/lists/public/common/fp_utils.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 { pipe } from 'fp-ts/lib/pipeable';
+import { TaskEither } from 'fp-ts/lib/TaskEither';
+import { fold } from 'fp-ts/lib/Either';
+
+export const toPromise = async <E, A>(taskEither: TaskEither<E, A>): Promise<A> =>
+  pipe(
+    await taskEither(),
+    fold(
+      (e) => Promise.reject(e),
+      (a) => Promise.resolve(a)
+    )
+  );

x-pack/plugins/lists/public/common/hooks/use_async_task.test.ts

@@ -0,0 +1,93 @@
+/*
+ * 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 { act, renderHook } from '@testing-library/react-hooks';
+
+import { useAsyncTask } from './use_async_task';
+
+describe('useAsyncTask', () => {
+  let task: jest.Mock;
+
+  beforeEach(() => {
+    task = jest.fn().mockResolvedValue('resolved value');
+  });
+
+  it('does not invoke task if start was not called', () => {
+    renderHook(() => useAsyncTask(task));
+    expect(task).not.toHaveBeenCalled();
+  });
+
+  it('invokes the task when start is called', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useAsyncTask(task));
+
+    act(() => {
+      result.current.start({});
+    });
+    await waitForNextUpdate();
+
+    expect(task).toHaveBeenCalled();
+  });
+
+  it('invokes the task with a signal and start args', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useAsyncTask(task));
+
+    act(() => {
+      result.current.start({
+        arg1: 'value1',
+        arg2: 'value2',
+      });
+    });
+    await waitForNextUpdate();
+
+    expect(task).toHaveBeenCalledWith(expect.any(AbortController), {
+      arg1: 'value1',
+      arg2: 'value2',
+    });
+  });
+
+  it('populates result with the resolved value of the task', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useAsyncTask(task));
+
+    act(() => {
+      result.current.start({});
+    });
+    await waitForNextUpdate();
+
+    expect(result.current.result).toEqual('resolved value');
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it('populates error if task rejects', async () => {
+    task.mockRejectedValue(new Error('whoops'));
+    const { result, waitForNextUpdate } = renderHook(() => useAsyncTask(task));
+
+    act(() => {
+      result.current.start({});
+    });
+    await waitForNextUpdate();
+
+    expect(result.current.result).toBeUndefined();
+    expect(result.current.error).toEqual(new Error('whoops'));
+  });
+
+  it('populates the loading state while the task is pending', async () => {
+    let resolve: () => void;
+    task.mockImplementation(() => new Promise((_resolve) => (resolve = _resolve)));
+
+    const { result, waitForNextUpdate } = renderHook(() => useAsyncTask(task));
+
+    act(() => {
+      result.current.start({});
+    });
+
+    expect(result.current.loading).toBe(true);
+
+    act(() => resolve());
+    await waitForNextUpdate();
+
+    expect(result.current.loading).toBe(false);
+  });
+});

x-pack/plugins/lists/public/common/hooks/use_async_task.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { useCallback, useRef } from 'react';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+
+// Params can be generalized to a ...rest parameter extending unknown[] once https://github.com/microsoft/TypeScript/pull/39094 is available.
+// for now, the task must still receive unknown as a second argument, and an argument must be passed to start()
+export type UseAsyncTask = <Result, Params extends unknown>(
+  task: (...args: [AbortController, Params]) => Promise<Result>
+) => AsyncTask<Result, Params>;
+
+export interface AsyncTask<Result, Params extends unknown> {
+  start: (params: Params) => void;
+  abort: () => void;
+  loading: boolean;
+  error: Error | undefined;
+  result: Result | undefined;
+}
+
+/**
+ *
+ * @param task Async function receiving an AbortController and optional arguments
+ *
+ * @returns An {@link AsyncTask} containing the underlying task's state along with start/abort helpers
+ */
+export const useAsyncTask: UseAsyncTask = (task) => {
+  const ctrl = useRef(new AbortController());
+  const abort = useCallback((): void => {
+    ctrl.current.abort();
+  }, []);
+
+  // @ts-ignore typings are incorrect, see: https://github.com/streamich/react-use/pull/589
+  const [state, initiator] = useAsyncFn(task, [task]);
+
+  const start = useCallback(
+    (args) => {
+      ctrl.current = new AbortController();
+      initiator(ctrl.current, args);
+    },
+    [initiator]
+  );
+
+  return { abort, error: state.error, loading: state.loading, result: state.value, start };
+};

x-pack/plugins/lists/public/index.tsx

@@ -3,11 +3,16 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 // Exports to be shared with plugins
 export { useApi } from './exceptions/hooks/use_api';
 export { usePersistExceptionItem } from './exceptions/hooks/persist_exception_item';
 export { usePersistExceptionList } from './exceptions/hooks/persist_exception_list';
 export { useExceptionList } from './exceptions/hooks/use_exception_list';
+export { useFindLists } from './lists/hooks/use_find_lists';
+export { useImportList } from './lists/hooks/use_import_list';
+export { useDeleteList } from './lists/hooks/use_delete_list';
+export { useExportList } from './lists/hooks/use_export_list';
 export {
   ExceptionList,
   ExceptionIdentifiers,