[Security][Lists] Add API functions and react hooks for value list APIs #69603

rylnd · 2020-06-19T00:59:45Z

Summary

This adds new API functions and their corresponding react hooks to be used for #67068.

This does not represent all value list endpoints, only those needed for the 7.9 management modal:

findLists
importList
deleteList
exportList

This also adds a generic hook, useAsyncTask, that wraps an async function to provide basic utilities:

loading state
error state
abort/cancel function
along with type inference of the provided function.

TODO:

validate request/response of API functions

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility, including a check against IE11

For maintainers

This was checked for breaking API changes and was labeled appropriately

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

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

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

* 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.

This cleans up our validation pipeline considerably.

* 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.

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

elasticmachine · 2020-06-26T01:49:28Z

Pinging @elastic/siem (Team:SIEM)

rylnd · 2020-06-26T01:50:54Z

This is ready for review, but I'm a little concerned about the increased bundle size. I'm going to take a look at that but I don't expect it will affect much.

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

rylnd · 2020-06-26T17:15:55Z

@elasticmachine merge upstream

rylnd · 2020-06-26T19:26:18Z

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

+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.


The one caveat with useAsyncTask right now. Otherwise, it Just Works™ and is type safe.

rylnd · 2020-06-26T19:30:34Z

x-pack/plugins/lists/public/lists/hooks/use_delete_list.ts

+  args: DeleteListTaskArgs
+): ReturnType<typeof deleteList> => deleteList({ signal, ...args });
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type


Half the value of useAsyncTask is inferring arguments of the passed task, so this rule is ignored.

Would it be worth adding this comment in the file itself for future reference?

@yctercero that's a good idea, in the interest of build time I'll add that in the subsequent PR 😉

* master: skip failing suite (elastic#70104) (elastic#70103) [ENDPOINT] Hide the Timeline Flyout while on the Management Pages (elastic#69998) [SIEM][CASE] Persist callout when dismissed (elastic#68372) [SIEM][Exceptions] - Cleaned up and updated exception list item comment structure (elastic#69532) [Maps] remove indexing state from redux (elastic#69765) Add API integration test for deleting data streams. (elastic#70020) renames SIEM to Security Solution (elastic#70070)

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

rylnd · 2020-06-27T00:47:52Z

Update: @XavierM diligently asked about useAsyncTask's state being updated after a consuming component had been unmounted. While it does not (although it's hard to pin that down with a unit test), it did uncover some bugs I had introduced by chaining onto the start call.

To solve these and to encourage the safer, more idiomatic use of useEffect, I opted to have start not return anything (02101c7):

// BEFORE: potential unhandled rejection, potential call to handleSuccess after unmounted
task.start().then(handleSuccess);

// AFTER: no rejection to handle, no chance of handleSuccess being called after unmount 
// since task.result will not change
useEffect(() => {
 task.result && handleSuccess(task.result);
}, [task.result]);
task.start();

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

rylnd · 2020-06-29T18:21:20Z

@elasticmachine merge upstream

yctercero · 2020-06-29T19:16:20Z

x-pack/plugins/lists/public/lists/api.ts

+  pageSize,
+  signal,
+}: FindListsParams): Promise<FoundListSchema> =>
+  pipe(


Love this. I did validations on the exceptions, but it's way more verbose. I'd opt to update the exceptions list to use these same patterns.

yctercero · 2020-06-29T19:19:00Z

x-pack/plugins/lists/public/lists/api.ts

+    flow(toPromise)
+  );
+
+export { importListWithValidation as importList };


I like that they're separated out. Maybe for our future selves or other sake we can add a comment above the non validation versions asking that they not be exported. I could see the case of someone in the future getting annoyed and wanting to just skirt the validations 🦺 Just a thought...

@yctercero I had a similar thought, but I think that making the "default" function have validations makes sense for now. If in the future we need the unsafe version it'll have to be exported with a new name, and we can discuss said naming then.

yctercero

LGTM! Pulled into my branch for the exceptions builder and am using the hooks - working great! Left a few super minor comments. Really like the new patterns introduced in this PR.

FrankHassanabad

Brief, look, this is all great to me though. Lots of good techniques going on. Can't wait to begin using some of it.

rylnd · 2020-06-29T22:54:23Z

@elasticmachine merge upstream

kibanamachine · 2020-06-30T00:36:47Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 946fa74

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
securitySolution	792	+12	780

History

💚 Build #56963 succeeded 4f43637
💔 Build #56915 failed 02101c7
💚 Build #56840 succeeded 9364770
💔 Build #56778 failed 15da0f7
💚 Build #56531 succeeded e7f5b86

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…ata-streams * 'master' of github.com:elastic/kibana: (50 commits) [Logs UI] [Alerting] "Group by" functionality (elastic#68250) [Discover] Deangularize Skip to bottom button (elastic#69811) Implement recursive plugin discovery (elastic#68811) Use ts-expect-error in platform code (elastic#69883) [SIEM][Detection Engine][Lists] Moves getQueryFilter to common folder for use by both front and backend [Ingest Manager][SECURITY SOLUTION] adjust config reassign link and add roundtrip to Reassignment flow (elastic#70208) [Security][Lists] Add API functions and react hooks for value list APIs (elastic#69603) [ILM] Fix bug when clearing priority field (elastic#70154) [Platform][Security] Updates cluster_manager ignorePaths to include security scripts (elastic#70139) [IngestManager] Allow to filter agent by packages (elastic#69731) [code coverage] exclude folders: test_helpers, tests_bundle (elastic#70199) [Metrics UI] UX improvements for saved views (elastic#69910) [APM] docs: unique transaction troubleshooting (elastic#69831) Cross cluster search functional test with minimun privileges assigned to the test_user (elastic#70007) [Maps] choropleth layer wizard (elastic#69699) Make custom errors by extending Error (elastic#69966) [Ingest Manager] Support updated package output structure (elastic#69864) Resolver test coverage (elastic#70246) Async Discover search test (elastic#64388) [ui-shared-deps] include styled-components (elastic#69322) ... # Conflicts: # x-pack/plugins/snapshot_restore/server/types.ts

…bana into alerting/consumer-based-rbac * 'alerting/consumer-based-rbac' of github.com:gmmorris/kibana: (49 commits) [Discover] Deangularize Skip to bottom button (elastic#69811) Implement recursive plugin discovery (elastic#68811) Use ts-expect-error in platform code (elastic#69883) [SIEM][Detection Engine][Lists] Moves getQueryFilter to common folder for use by both front and backend [Ingest Manager][SECURITY SOLUTION] adjust config reassign link and add roundtrip to Reassignment flow (elastic#70208) [Security][Lists] Add API functions and react hooks for value list APIs (elastic#69603) [ILM] Fix bug when clearing priority field (elastic#70154) [Platform][Security] Updates cluster_manager ignorePaths to include security scripts (elastic#70139) [IngestManager] Allow to filter agent by packages (elastic#69731) [code coverage] exclude folders: test_helpers, tests_bundle (elastic#70199) [Metrics UI] UX improvements for saved views (elastic#69910) [APM] docs: unique transaction troubleshooting (elastic#69831) Cross cluster search functional test with minimun privileges assigned to the test_user (elastic#70007) [Maps] choropleth layer wizard (elastic#69699) Make custom errors by extending Error (elastic#69966) [Ingest Manager] Support updated package output structure (elastic#69864) Resolver test coverage (elastic#70246) Async Discover search test (elastic#64388) [ui-shared-deps] include styled-components (elastic#69322) SECURITY-ENDPOINT: add host properties (elastic#70238) ...

…Is (#69603) (#70279) * 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]> Co-authored-by: Elastic Machine <[email protected]>

…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]>

elasticmachine · 2021-09-23T14:32:52Z

Pinging @elastic/security-solution (Team: SecuritySolution)

Add pure API functions and react hooks for value list APIs

c35bb4b

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

rylnd added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.9.0 labels Jun 19, 2020

rylnd self-assigned this Jun 19, 2020

rylnd changed the title ~~Add pure API functions and react hooks for value list APIs~~ [Security][Lists] Add API functions and react hooks for value list APIs Jun 19, 2020

rylnd added 11 commits June 18, 2020 21:38

Fix type errors in hook tests

c83dabc

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

Merge branch 'master' into value_lists_api

fa512d7

Document current limitations of useAsyncTask

247f8e4

Defines a new validation function that returns an Either instead of a…

b657229

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

Remove duplicated copyright comment

d627a64

Adds helper function to convert a TaskEither back to a Promise

d99ba54

This cleans up our validation pipeline considerably.

Refactor our API types

6d6b5cc

Add request/response validation to import/export functions

0f223aa

Fix type errors

e7f5b86

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

rylnd marked this pull request as ready for review June 26, 2020 01:49

rylnd requested review from a team as code owners June 26, 2020 01:49

Attempting to reduce plugin bundle size

f433c51

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

Merge branch 'master' into value_lists_api

15da0f7

rylnd commented Jun 26, 2020

View reviewed changes

rylnd added 2 commits June 26, 2020 14:47

Fix failing test

4f43637

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

yctercero reviewed Jun 29, 2020

View reviewed changes

yctercero approved these changes Jun 29, 2020

View reviewed changes

FrankHassanabad approved these changes Jun 29, 2020

View reviewed changes

Merge branch 'master' into value_lists_api

946fa74

rylnd merged commit 590fc8d into elastic:master Jun 30, 2020

rylnd deleted the value_lists_api branch June 30, 2020 01:02

rylnd mentioned this pull request Jun 30, 2020

[7.x] [Security][Lists] Add API functions and react hooks for value list APIs (#69603) #70279

Merged

rylnd mentioned this pull request Jun 30, 2020

[Security Solution][Lists] More composable hooks/utilities #70372

Merged

2 tasks

MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Sep 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security][Lists] Add API functions and react hooks for value list APIs #69603

[Security][Lists] Add API functions and react hooks for value list APIs #69603

rylnd commented Jun 19, 2020 •

edited

Loading

elasticmachine commented Jun 26, 2020

rylnd commented Jun 26, 2020

rylnd commented Jun 26, 2020

rylnd Jun 26, 2020

rylnd Jun 26, 2020

yctercero Jun 29, 2020

rylnd Jun 29, 2020

rylnd commented Jun 27, 2020

rylnd commented Jun 29, 2020

yctercero Jun 29, 2020

yctercero Jun 29, 2020

rylnd Jun 29, 2020

yctercero left a comment

FrankHassanabad left a comment

rylnd commented Jun 29, 2020

kibanamachine commented Jun 30, 2020

elasticmachine commented Sep 23, 2021

[Security][Lists] Add API functions and react hooks for value list APIs #69603

[Security][Lists] Add API functions and react hooks for value list APIs #69603

Conversation

rylnd commented Jun 19, 2020 • edited Loading

Summary

TODO:

Checklist

For maintainers

elasticmachine commented Jun 26, 2020

rylnd commented Jun 26, 2020

rylnd commented Jun 26, 2020

rylnd Jun 26, 2020

Choose a reason for hiding this comment

rylnd Jun 26, 2020

Choose a reason for hiding this comment

yctercero Jun 29, 2020

Choose a reason for hiding this comment

rylnd Jun 29, 2020

Choose a reason for hiding this comment

rylnd commented Jun 27, 2020

rylnd commented Jun 29, 2020

yctercero Jun 29, 2020

Choose a reason for hiding this comment

yctercero Jun 29, 2020

Choose a reason for hiding this comment

rylnd Jun 29, 2020

Choose a reason for hiding this comment

yctercero left a comment

Choose a reason for hiding this comment

FrankHassanabad left a comment

Choose a reason for hiding this comment

rylnd commented Jun 29, 2020

kibanamachine commented Jun 30, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

History

elasticmachine commented Sep 23, 2021

rylnd commented Jun 19, 2020 •

edited

Loading