[EuiProvider/Security Solution] Remove usage of deprecated React rendering utilities #181099
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tsullivan
force-pushed
the
sharedux/cleanup-tomountpoint-deprecations-viii
branch
2 times, most recently
from
9b0343c to
7bdbf29
Compare
|
/ci |
tsullivan
force-pushed
the
sharedux/cleanup-tomountpoint-deprecations-viii
branch
from
7bdbf29 to
7e947e9
Compare
|
/ci |
tsullivan
requested review from
jaredburgettelastic,
ashokaditya,
gergoabraham,
vitaliidm and
xcrzx
tsullivan
added
the
release_note:skip
machadoum
approved these changes
Apr 23, 2024
vitaliidm
approved these changes
Apr 23, 2024
xcrzx
approved these changes
Apr 24, 2024
tsullivan
added
technical debt
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
jaredburgettelastic
approved these changes
Apr 24, 2024
gergoabraham
approved these changes
Apr 25, 2024
…hub.com:tsullivan/kibana into sharedux/cleanup-tomountpoint-deprecations-viii
|
/ci |
💚 Build Succeeded
Metrics [docs]Async chunks
Unknown metric groupsReferences to deprecated APIs
History
To update your PR or re-run it, just comment with: |
kibanamachine
added
v8.15.0
backport:skip
3 tasks
tsullivan
added a commit
that referenced
this pull request
May 7, 2024
…eact, Part II (#182061) ## Summary Partially addresses elastic/kibana-team#805 These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. **Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.** This is the **2nd** PR to focus on code within **Security Solution**, following #181099. <img width="1196" alt="image" src="https://github.com/elastic/kibana/assets/908371/7f8d3707-94f0-4746-8dd5-dd858ce027f9"> Note: this also makes inclusion of `i18n` and `analytics` dependencies consistent. Analytics is an optional dependency for the SharedUX modules, which wrap `KibanaErrorBoundaryProvider` and is designed to capture telemetry about errors that are caught in the error boundary. ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
maximpn
added a commit
that referenced
this pull request
Jul 15, 2024
**Resolves:** #177734 ## Summary This PR fixes a non-responsive rule details page under non default space. ## Details **[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause. The problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx` ```ts const panels = useAsync( () => buildContextMenuForActions({ actions: contextMenuActions.map((action) => ({ action, context: {}, trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER, })), }), [contextMenuActions] ); ``` where `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`. The actual fix is to replace ```ts const { lens, ...startServices } = useKibana().services; ``` with ```ts const startServices = useKibana().services; ``` Since `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 15, 2024
) **Resolves:** elastic#177734 ## Summary This PR fixes a non-responsive rule details page under non default space. ## Details **[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [elastic#177734](elastic#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [elastic#181099](elastic#181099 is the cause. The problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx` ```ts const panels = useAsync( () => buildContextMenuForActions({ actions: contextMenuActions.map((action) => ({ action, context: {}, trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER, })), }), [contextMenuActions] ); ``` where `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [elastic#181099](elastic#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`. The actual fix is to replace ```ts const { lens, ...startServices } = useKibana().services; ``` with ```ts const startServices = useKibana().services; ``` Since `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem. (cherry picked from commit 8a539a8)
kibanamachine
added a commit
that referenced
this pull request
Jul 15, 2024
) (#188305) # Backport This will backport the following commits from `main` to `8.15`: - [[Security Solution] Fix non-responsive rule details page (#187953)](#187953) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Maxim Palenov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-07-15T11:37:26Z","message":"[Security Solution] Fix non-responsive rule details page (#187953)\n\n**Resolves:** https://github.com/elastic/kibana/issues/177734\r\n\r\n## Summary\r\n\r\nThis PR fixes a non-responsive rule details page under non default space.\r\n\r\n## Details\r\n\r\n**[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause.\r\n\r\nThe problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx`\r\n\r\n```ts\r\n const panels = useAsync(\r\n () =>\r\n buildContextMenuForActions({\r\n actions: contextMenuActions.map((action) => ({\r\n action,\r\n context: {},\r\n trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER,\r\n })),\r\n }),\r\n [contextMenuActions]\r\n );\r\n```\r\n\r\nwhere `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`.\r\n\r\nThe actual fix is to replace\r\n\r\n```ts\r\nconst { lens, ...startServices } = useKibana().services;\r\n```\r\n\r\nwith\r\n\r\n```ts\r\nconst startServices = useKibana().services;\r\n```\r\n\r\nSince `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.","sha":"8a539a8a4ce483d2e5d3aa484d8ec78887f338b8","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","impact:critical","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","Feature:Rule Details","v8.15.0","v8.16.0"],"title":"[Security Solution] Fix non-responsive rule details page","number":187953,"url":"https://github.com/elastic/kibana/pull/187953","mergeCommit":{"message":"[Security Solution] Fix non-responsive rule details page (#187953)\n\n**Resolves:** https://github.com/elastic/kibana/issues/177734\r\n\r\n## Summary\r\n\r\nThis PR fixes a non-responsive rule details page under non default space.\r\n\r\n## Details\r\n\r\n**[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause.\r\n\r\nThe problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx`\r\n\r\n```ts\r\n const panels = useAsync(\r\n () =>\r\n buildContextMenuForActions({\r\n actions: contextMenuActions.map((action) => ({\r\n action,\r\n context: {},\r\n trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER,\r\n })),\r\n }),\r\n [contextMenuActions]\r\n );\r\n```\r\n\r\nwhere `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`.\r\n\r\nThe actual fix is to replace\r\n\r\n```ts\r\nconst { lens, ...startServices } = useKibana().services;\r\n```\r\n\r\nwith\r\n\r\n```ts\r\nconst startServices = useKibana().services;\r\n```\r\n\r\nSince `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.","sha":"8a539a8a4ce483d2e5d3aa484d8ec78887f338b8"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187953","number":187953,"mergeCommit":{"message":"[Security Solution] Fix non-responsive rule details page (#187953)\n\n**Resolves:** https://github.com/elastic/kibana/issues/177734\r\n\r\n## Summary\r\n\r\nThis PR fixes a non-responsive rule details page under non default space.\r\n\r\n## Details\r\n\r\n**[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause.\r\n\r\nThe problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx`\r\n\r\n```ts\r\n const panels = useAsync(\r\n () =>\r\n buildContextMenuForActions({\r\n actions: contextMenuActions.map((action) => ({\r\n action,\r\n context: {},\r\n trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER,\r\n })),\r\n }),\r\n [contextMenuActions]\r\n );\r\n```\r\n\r\nwhere `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`.\r\n\r\nThe actual fix is to replace\r\n\r\n```ts\r\nconst { lens, ...startServices } = useKibana().services;\r\n```\r\n\r\nwith\r\n\r\n```ts\r\nconst startServices = useKibana().services;\r\n```\r\n\r\nSince `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.","sha":"8a539a8a4ce483d2e5d3aa484d8ec78887f338b8"}}]}] BACKPORT--> Co-authored-by: Maxim Palenov <[email protected]>
tsullivan
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Partially addresses https://github.com/elastic/kibana-team/issues/805
These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.
This focuses on code within Security Solution.
Note: this also makes inclusion of
i18nandanalyticsdependencies consistent. Analytics is an optional dependency for the SharedUX modules, which wrapKibanaErrorBoundaryProviderand is designed to capture telemetry about errors that are caught in the error boundary.Checklist
Delete any items that are not applicable to this PR.