Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Security Solution] Refactor useSelector #75297

Merged

Conversation

patrykkopycinski
Copy link
Contributor

@patrykkopycinski patrykkopycinski commented Aug 18, 2020

Summary

https://react-redux.js.org/api/hooks#equality-comparisons-and-updates

TL;DR: To keep the backward-compatibility with connect() while moving towards hooks we should use shallow comparison instead of the useSelector default, strict reference comparison.

Checklist

@patrykkopycinski patrykkopycinski added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.10.0 labels Aug 18, 2020
@patrykkopycinski patrykkopycinski self-assigned this Aug 18, 2020
@patrykkopycinski patrykkopycinski marked this pull request as ready for review August 19, 2020 10:13
@patrykkopycinski patrykkopycinski requested review from a team as code owners August 19, 2020 10:13
@stephmilovic
Copy link
Contributor

Can you please write a summary for this? Wondering the reasoning

@patrykkopycinski
Copy link
Contributor Author

@elasticmachine merge upstream

.eslintrc.js Outdated
{
name: 'react-redux',
importNames: ['useSelector'],
message: 'Please use "useShallowEqualSelector" instead or create your own selector',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you'll still get the error when you create your own selector correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct

Copy link
Contributor

@oatkiller oatkiller Aug 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should add a rule here. Many teams work in this code base, for that reason I think we should all use the exact set of lint rules defined by Kibana core.

The Resolver code base, for example, has (AFAIK) no reason to use shallow comparison for selectors as it was designed with the expectation that strict comparison would be used.

import { APP_ID } from '../../../../common/constants';
import { SecurityPageName } from '../../../app/types';
import { useKibana } from '../../../common/lib/kibana';
import { getCaseDetailsUrl, getCreateCaseUrl } from '../../../common/components/link_to';
import { State } from '../../../common/store';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that we don't have to import State everywhere now

Copy link
Contributor

@stephmilovic stephmilovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks clean, performed manual testing around timeline. Couldn't find resolver data to test w today, but I'm confident from timeline testing to LGTM 🏁 🇵🇱

Copy link
Contributor

@oatkiller oatkiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am opposed to adding a lint rule.

.eslintrc.js Outdated
{
name: 'react-redux',
importNames: ['useSelector'],
message: 'Please use "useShallowEqualSelector" instead or create your own selector',
Copy link
Contributor

@oatkiller oatkiller Aug 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should add a rule here. Many teams work in this code base, for that reason I think we should all use the exact set of lint rules defined by Kibana core.

The Resolver code base, for example, has (AFAIK) no reason to use shallow comparison for selectors as it was designed with the expectation that strict comparison would be used.

Copy link
Contributor

@oatkiller oatkiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you please provide a change-by-change justification for the changes in Resolver. Resolver was designed with strict comparison of selectors in mind. We don't have plans to adopt the useShallowEqualSelector pattern.

@@ -51,7 +52,7 @@ export const ProcessDetails = memo(function ProcessDetails({
}) {
const processName = event.eventName(processEvent);
const entityId = event.entityId(processEvent);
const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId);
const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated)(entityId);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated to this PR but: isProcessTerminated actually should be a parametric selector in order to work as expected.

const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get(
processEntityId!
);
const relatedEventsForThisProcess = useShallowEqualSelector(
Copy link
Contributor

@oatkiller oatkiller Aug 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also unrelated to this PR, but I'm noticing that in some cases we return a memoized thunk from a selector but we actually expect the return value of the thunk to trigger a rerender. In these cases we should consider a parametric selector (still using strict comparison, as all Resolver selectors return primitives or memoized values.)

@oatkiller
Copy link
Contributor

Suggestion on this PR:

  1. Open a PR that introduces this hook and uses it in places where it's known to work (and solve an issue)
  2. Communicate with the other teams (e.g. via an Issue or email) your idea for standardizing on this. Take feedback.
  3. Revisit this PR.

@patrykkopycinski
Copy link
Contributor Author

@oatkiller you're right, I've reverted all changes related to /management/ and /resolver/ part. Reverted also changes to the ESLint config

@oatkiller oatkiller dismissed their stale review August 25, 2020 18:38

Fixed my issues.

@oatkiller
Copy link
Contributor

@patrykkopycinski Thank you very much. Your PR brought to our attention some potential bugs in Resolver, I thank you for that. Also, we will keep in mind the hook you added and consider using it in the future.

@patrykkopycinski
Copy link
Contributor Author

@elasticmachine merge upstream

@patrykkopycinski
Copy link
Contributor Author

@elasticmachine merge upstream

@patrykkopycinski
Copy link
Contributor Author

@elasticmachine merge upstream

…r-use-selector

# Conflicts:
#	x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx
@kibanamachine
Copy link
Contributor

💛 Build succeeded, but was flaky


Test Failures

Mark one alert in progress when more than one open alerts are selected.Alerts Marking alerts as in-progress Mark one alert in progress when more than one open alerts are selected

Link to Jenkins

Stack Trace

Failed Tests Reporter:
  - Test has failed 1 times on tracked branches: https://github.com/elastic/kibana/issues/78557

AssertionError: Timed out retrying: expected '<span.euiBadge__text>' to have text '1', but the text was '107'
    at Context.eval (http://localhost:6111/__cypress/tests?p=cypress/integration/alerts.spec.ts:726:51)

Metrics [docs]

@kbn/optimizer bundle module count

id value diff baseline
securitySolution 1969 +1 1968

async chunks size

id value diff baseline
securitySolution 10.2MB +3.5KB 10.2MB

page load bundle size

id value diff baseline
securitySolution 581.0KB +1.0B 581.0KB

History

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

@patrykkopycinski patrykkopycinski merged commit 2defe88 into elastic:master Sep 28, 2020
@patrykkopycinski patrykkopycinski deleted the chore/refactor-use-selector branch September 28, 2020 13:28
patrykkopycinski added a commit to patrykkopycinski/kibana that referenced this pull request Sep 28, 2020
gmmorris added a commit to gmmorris/kibana that referenced this pull request Sep 28, 2020
* master: (226 commits)
  [Enterprise Search] Added Logic for the Credentials View (elastic#77626)
  [CSM] Js errors (elastic#77919)
  Add the @kbn/apm-config-loader package (elastic#77855)
  [Security Solution] Refactor useSelector (elastic#75297)
  Implement tagcloud renderer (elastic#77910)
  [APM] Alerting: Add global option to create all alert types (elastic#78151)
  [Ingest pipelines] Upload indexed document to test a pipeline (elastic#77939)
  TypeScript cleanup in visualizations plugin (elastic#78428)
  Lazy load metric & mardown visualizations (elastic#78391)
  [Detections][EQL] EQL rule execution in detection engine (elastic#77419)
  Update tutorial-full-experience.asciidoc (elastic#75836)
  Update tutorial-define-index.asciidoc (elastic#75754)
  Add support for runtime field types to mappings editor. (elastic#77420)
  [Monitoring] Usage collection (elastic#75878)
  [Docs][Actions] Add docs for Jira and IBM Resilient (elastic#78316)
  [Security Solution][Resolver] Update @timestamp formatting (elastic#78166)
  [Security Solution] Fix app layout (elastic#76668)
  [Security Solution][Resolver] 2 new functions to DAL (elastic#78477)
  Adds new elasticsearch client to telemetry plugin (elastic#78046)
  skip flaky suite (elastic#78512) (elastic#78511) (elastic#78510) (elastic#78509) (elastic#78508) (elastic#78507) (elastic#78506) (elastic#78505) (elastic#78504) (elastic#78503) (elastic#78502) (elastic#78501) (elastic#78500)
  ...
patrykkopycinski added a commit that referenced this pull request Sep 28, 2020
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:skip Skip the PR/issue when compiling release notes v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants