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] Implement a rule details flyout for installing and upgrading prebuilt rules #162334

Closed
15 tasks done
Tracked by #174167
banderror opened this issue Jul 20, 2023 · 6 comments · Fixed by #164179
Closed
15 tasks done
Tracked by #174167
Assignees
Labels
8.10 candidate enhancement New value added to drive a business result Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. v8.10.0

Comments

@banderror
Copy link
Contributor

banderror commented Jul 20, 2023

Epic: https://github.com/elastic/security-team/issues/1974 (internal)

Summary

User story:
As a user I want to see the details of the rules I am about to install.
As a user I want to see the details of the rule update I am going to apply.

Design

Figma

Screenshot 2023-07-28 at 21 37 24

Technical notes

The flyout should be reusable between the rule installation/upgrade workflows, MITRE Coverage dashboard, and potentially other parts of the app in the future.

Todo (before release)

  • Initial implementation (PR)
  • Tweak UI so that the flyout matches the design
  • Rewrite preview installation and upgrade API endpoints to respond with RuleResponse instead of DiffableRule
  • Revert some changes introduced by this PR
    • Revert exports in x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/rule_schemas.ts
    • Delete x-pack/plugins/security_solution/common/detection_engine/diffable_rule_to_rule_response.ts
  • Make the data contexts unaware of any UI elements that are consuming them
  • Move rendering of specialized flyout components into to the context provider so that the table is unaware of the flyout.
  • Make "flyoutRule" and "closeFlyout" internal to the context. Components outside don't need to know anything about how a rule is displayed. We can encapsulate this knowledge inside the context and expose only a generic method, like openRulePreview(ruleId)
  • Remove unnecessary checks after using "invariant"
  • Make sure query, timeline template and all the other fields are shown in the flyout. Compare each rule in a flyout with the Rule Details to ensure that all fields are in place.
  • Remove the enable / disable switch machine learning job UI switch element
  • Add custom highlighted fields to the flyout (comment)
  • Check that we don't show rules for which there's no version to upgrade to
  • Create a ticket for the docs team ([DOCS] Document the new prebuilt rule installation / upgrade flyout security-docs#3798)
@banderror banderror added enhancement New value added to drive a business result Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Detection Rule Management Security Detection Rule Management Team Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area 8.10 candidate labels Jul 20, 2023
@elasticmachine
Copy link
Contributor

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

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detections-response (Team:Detections and Resp)

@ARWNightingale
Copy link

ARWNightingale commented Jul 24, 2023

@banderror The UX team had a design review of the flyouts to agree a consistent design moving forward. The top design style is correct, I have updated designs to reflect this.

@ARWNightingale
Copy link

Latest 8.10 Flyout design after comments.

https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3563%3A612771&mode=design&t=UQrjbkqhNi4TTrJO-1

nikitaindik added a commit that referenced this issue Aug 15, 2023
)

**Addresses:** #162334

## Summary

This PR adds a flyout for viewing a prebuilt rule before installing or
updating it. The flyout can be opened by clicking on a rule title within
"Add Elastic Rules" page and within "Rule Updates" tab of the Rule
Managament table.

I plan to add tests and do minor visual tweaks after the FF.

<img width="1269" alt="Screenshot 2023-08-14 at 03 59 30"
src="https://github.com/elastic/kibana/assets/15949146/c8200ff8-fbe2-445a-a03e-3545ea77f750">

An additional goal of these changes was to create lightweight reusable
components for rule details sections ("About", "Definition", "Schedule")
and for rule properties, so that these can later be reused in other
flyouts within the Security Solution, on MITRE ATT&CK™ overview page and
potentially on the Rule Details page.
These reusable section components are basically copy-pasted components
from the Rule Details page that were refactored to remove the dependence
from the form schema,

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] 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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
@banderror
Copy link
Contributor Author

@nikitaindik I added a Todo section to the description. Please fill it out with items based on @xcrzx 's feedback in #163304

hop-dev pushed a commit to hop-dev/kibana that referenced this issue Aug 16, 2023
…tic#163304)

**Addresses:** elastic#162334

## Summary

This PR adds a flyout for viewing a prebuilt rule before installing or
updating it. The flyout can be opened by clicking on a rule title within
"Add Elastic Rules" page and within "Rule Updates" tab of the Rule
Managament table.

I plan to add tests and do minor visual tweaks after the FF.

<img width="1269" alt="Screenshot 2023-08-14 at 03 59 30"
src="https://github.com/elastic/kibana/assets/15949146/c8200ff8-fbe2-445a-a03e-3545ea77f750">

An additional goal of these changes was to create lightweight reusable
components for rule details sections ("About", "Definition", "Schedule")
and for rule properties, so that these can later be reused in other
flyouts within the Security Solution, on MITRE ATT&CK™ overview page and
potentially on the Rule Details page.
These reusable section components are basically copy-pasted components
from the Rule Details page that were refactored to remove the dependence
from the form schema,

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] 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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
bryce-b pushed a commit that referenced this issue Aug 22, 2023
)

**Addresses:** #162334

## Summary

This PR adds a flyout for viewing a prebuilt rule before installing or
updating it. The flyout can be opened by clicking on a rule title within
"Add Elastic Rules" page and within "Rule Updates" tab of the Rule
Managament table.

I plan to add tests and do minor visual tweaks after the FF.

<img width="1269" alt="Screenshot 2023-08-14 at 03 59 30"
src="https://github.com/elastic/kibana/assets/15949146/c8200ff8-fbe2-445a-a03e-3545ea77f750">

An additional goal of these changes was to create lightweight reusable
components for rule details sections ("About", "Definition", "Schedule")
and for rule properties, so that these can later be reused in other
flyouts within the Security Solution, on MITRE ATT&CK™ overview page and
potentially on the Rule Details page.
These reusable section components are basically copy-pasted components
from the Rule Details page that were refactored to remove the dependence
from the form schema,

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] 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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
nikitaindik added a commit that referenced this issue Aug 25, 2023
…ovements (#164179)

**Addresses: #162334
**Base PR: #163304

<img width="1177" alt="Screenshot 2023-08-24 at 04 09 07"
src="https://github.com/elastic/kibana/assets/15949146/73ac6726-69d4-4c46-bb16-da704a02aba5">

## Summary

This is a follow-up refactoring and bugfix PR to improve the prebuilt
rules flyout. Base PR: #163304

#### Changes
- [x] Tweak UI so that it matches the design more closely.
[Design](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3563-612771&mode=design&t=yqZ6LI0vAjbir9xc-0)
(external).
- [x] Rewrite preview installation and upgrade API endpoints to respond
with `RuleResponse` instead of `DiffableRule`
- [x] Revert some changes introduced by this
[PR](#163304)
- [x] Revert exports in
`x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/rule_schemas.ts`
- [x] Delete
`x-pack/plugins/security_solution/common/detection_engine/diffable_rule_to_rule_response.ts`
- [x] Make the data contexts unaware of any UI elements that are
consuming them
- [x] Move rendering of specialized flyout components into to the
context provider so that the table is unaware of the flyout.
- [x] Make "flyoutRule" and "closeFlyout" internal to the context.
Components outside don't need to know anything about how a rule is
displayed. We can encapsulate this knowledge inside the context and
expose only a generic method, like openRulePreview(ruleId)
 - [x] Remove unnecessary checks after using "invariant"
- [x] Make sure query, timeline template and all the other fields are
shown in the flyout. Compare each rule in a flyout with the Rule Details
to ensure that all fields are in place.
- [x] Remove the enable / disable switch machine learning job UI switch
element
- [x] Add custom highlighted fields to the flyout
([comment](#163235 (comment)))


### Checklist

Delete any items that are not applicable to this PR.

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials. [Docs
ticket](elastic/security-docs#3798)
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] 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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
nikitaindik added a commit to banderror/kibana that referenced this issue Aug 26, 2023
…ovements (elastic#164179)

**Addresses: elastic#162334
**Base PR: elastic#163304

<img width="1177" alt="Screenshot 2023-08-24 at 04 09 07"
src="https://github.com/elastic/kibana/assets/15949146/73ac6726-69d4-4c46-bb16-da704a02aba5">

## Summary

This is a follow-up refactoring and bugfix PR to improve the prebuilt
rules flyout. Base PR: elastic#163304

#### Changes
- [x] Tweak UI so that it matches the design more closely.
[Design](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3563-612771&mode=design&t=yqZ6LI0vAjbir9xc-0)
(external).
- [x] Rewrite preview installation and upgrade API endpoints to respond
with `RuleResponse` instead of `DiffableRule`
- [x] Revert some changes introduced by this
[PR](elastic#163304)
- [x] Revert exports in
`x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/rule_schemas.ts`
- [x] Delete
`x-pack/plugins/security_solution/common/detection_engine/diffable_rule_to_rule_response.ts`
- [x] Make the data contexts unaware of any UI elements that are
consuming them
- [x] Move rendering of specialized flyout components into to the
context provider so that the table is unaware of the flyout.
- [x] Make "flyoutRule" and "closeFlyout" internal to the context.
Components outside don't need to know anything about how a rule is
displayed. We can encapsulate this knowledge inside the context and
expose only a generic method, like openRulePreview(ruleId)
 - [x] Remove unnecessary checks after using "invariant"
- [x] Make sure query, timeline template and all the other fields are
shown in the flyout. Compare each rule in a flyout with the Rule Details
to ensure that all fields are in place.
- [x] Remove the enable / disable switch machine learning job UI switch
element
- [x] Add custom highlighted fields to the flyout
([comment](elastic#163235 (comment)))

### Checklist

Delete any items that are not applicable to this PR.

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials. [Docs
ticket](elastic/security-docs#3798)
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] 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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

(cherry picked from commit c115f5d)

# Conflicts:
#	x-pack/plugins/security_solution/server/lib/detection_engine/prebuilt_rules/api/review_rule_installation/review_rule_installation_route.ts
banderror referenced this issue Aug 26, 2023
…ut improvements (#164179) (#164897)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution] Prebuilt rules installation / upgrade flyout
improvements (#164179)](#164179)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nikita
Indik","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-25T19:47:13Z","message":"[Security
Solution] Prebuilt rules installation / upgrade flyout improvements
(#164179)\n\n**Addresses:
https://github.com/elastic/kibana/issues/162334**\r\n**Base PR:
https://github.com/elastic/kibana/pull/163304**\r\n\r\n<img
width=\"1177\" alt=\"Screenshot 2023-08-24 at 04 09
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/73ac6726-69d4-4c46-bb16-da704a02aba5\">\r\n\r\n##
Summary\r\n\r\nThis is a follow-up refactoring and bugfix PR to improve
the prebuilt\r\nrules flyout. Base PR: #163304\r\n\r\n#### Changes\r\n-
[x] Tweak UI so that it matches the design more
closely.\r\n[Design](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3563-612771&mode=design&t=yqZ6LI0vAjbir9xc-0)\r\n(external).\r\n-
[x] Rewrite preview installation and upgrade API endpoints to
respond\r\nwith `RuleResponse` instead of `DiffableRule`\r\n- [x] Revert
some changes introduced by
this\r\n[PR](https://github.com/elastic/kibana/pull/163304)\r\n- [x]
Revert exports
in\r\n`x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/rule_schemas.ts`\r\n-
[x]
Delete\r\n`x-pack/plugins/security_solution/common/detection_engine/diffable_rule_to_rule_response.ts`\r\n-
[x] Make the data contexts unaware of any UI elements that
are\r\nconsuming them\r\n- [x] Move rendering of specialized flyout
components into to the\r\ncontext provider so that the table is unaware
of the flyout.\r\n- [x] Make \"flyoutRule\" and \"closeFlyout\" internal
to the context.\r\nComponents outside don't need to know anything about
how a rule is\r\ndisplayed. We can encapsulate this knowledge inside the
context and\r\nexpose only a generic method, like
openRulePreview(ruleId)\r\n - [x] Remove unnecessary checks after using
\"invariant\"\r\n- [x] Make sure query, timeline template and all the
other fields are\r\nshown in the flyout. Compare each rule in a flyout
with the Rule Details\r\nto ensure that all fields are in place.\r\n-
[x] Remove the enable / disable switch machine learning job UI
switch\r\nelement\r\n- [x] Add custom highlighted fields to the
flyout\r\n([comment](https://github.com/elastic/kibana/pull/163235#discussion_r1293821203))\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials.
[Docs\r\nticket](https://github.com/elastic/security-docs/issues/3798)\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"c115f5d3d6f580b195e823c9e948f7b1daf8fddc","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rule
Management","Feature:Prebuilt Detection
Rules","v8.10.0","v8.11.0"],"number":164179,"url":"https://github.com/elastic/kibana/pull/164179","mergeCommit":{"message":"[Security
Solution] Prebuilt rules installation / upgrade flyout improvements
(#164179)\n\n**Addresses:
https://github.com/elastic/kibana/issues/162334**\r\n**Base PR:
https://github.com/elastic/kibana/pull/163304**\r\n\r\n<img
width=\"1177\" alt=\"Screenshot 2023-08-24 at 04 09
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/73ac6726-69d4-4c46-bb16-da704a02aba5\">\r\n\r\n##
Summary\r\n\r\nThis is a follow-up refactoring and bugfix PR to improve
the prebuilt\r\nrules flyout. Base PR: #163304\r\n\r\n#### Changes\r\n-
[x] Tweak UI so that it matches the design more
closely.\r\n[Design](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3563-612771&mode=design&t=yqZ6LI0vAjbir9xc-0)\r\n(external).\r\n-
[x] Rewrite preview installation and upgrade API endpoints to
respond\r\nwith `RuleResponse` instead of `DiffableRule`\r\n- [x] Revert
some changes introduced by
this\r\n[PR](https://github.com/elastic/kibana/pull/163304)\r\n- [x]
Revert exports
in\r\n`x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/rule_schemas.ts`\r\n-
[x]
Delete\r\n`x-pack/plugins/security_solution/common/detection_engine/diffable_rule_to_rule_response.ts`\r\n-
[x] Make the data contexts unaware of any UI elements that
are\r\nconsuming them\r\n- [x] Move rendering of specialized flyout
components into to the\r\ncontext provider so that the table is unaware
of the flyout.\r\n- [x] Make \"flyoutRule\" and \"closeFlyout\" internal
to the context.\r\nComponents outside don't need to know anything about
how a rule is\r\ndisplayed. We can encapsulate this knowledge inside the
context and\r\nexpose only a generic method, like
openRulePreview(ruleId)\r\n - [x] Remove unnecessary checks after using
\"invariant\"\r\n- [x] Make sure query, timeline template and all the
other fields are\r\nshown in the flyout. Compare each rule in a flyout
with the Rule Details\r\nto ensure that all fields are in place.\r\n-
[x] Remove the enable / disable switch machine learning job UI
switch\r\nelement\r\n- [x] Add custom highlighted fields to the
flyout\r\n([comment](https://github.com/elastic/kibana/pull/163235#discussion_r1293821203))\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials.
[Docs\r\nticket](https://github.com/elastic/security-docs/issues/3798)\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"c115f5d3d6f580b195e823c9e948f7b1daf8fddc"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164179","number":164179,"mergeCommit":{"message":"[Security
Solution] Prebuilt rules installation / upgrade flyout improvements
(#164179)\n\n**Addresses:
https://github.com/elastic/kibana/issues/162334**\r\n**Base PR:
https://github.com/elastic/kibana/pull/163304**\r\n\r\n<img
width=\"1177\" alt=\"Screenshot 2023-08-24 at 04 09
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/15949146/73ac6726-69d4-4c46-bb16-da704a02aba5\">\r\n\r\n##
Summary\r\n\r\nThis is a follow-up refactoring and bugfix PR to improve
the prebuilt\r\nrules flyout. Base PR: #163304\r\n\r\n#### Changes\r\n-
[x] Tweak UI so that it matches the design more
closely.\r\n[Design](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU/%5B8.7%5D-%5BRules%5D-Rule-Immutability%2FCustomization?type=design&node-id=3563-612771&mode=design&t=yqZ6LI0vAjbir9xc-0)\r\n(external).\r\n-
[x] Rewrite preview installation and upgrade API endpoints to
respond\r\nwith `RuleResponse` instead of `DiffableRule`\r\n- [x] Revert
some changes introduced by
this\r\n[PR](https://github.com/elastic/kibana/pull/163304)\r\n- [x]
Revert exports
in\r\n`x-pack/plugins/security_solution/common/api/detection_engine/model/rule_schema/rule_schemas.ts`\r\n-
[x]
Delete\r\n`x-pack/plugins/security_solution/common/detection_engine/diffable_rule_to_rule_response.ts`\r\n-
[x] Make the data contexts unaware of any UI elements that
are\r\nconsuming them\r\n- [x] Move rendering of specialized flyout
components into to the\r\ncontext provider so that the table is unaware
of the flyout.\r\n- [x] Make \"flyoutRule\" and \"closeFlyout\" internal
to the context.\r\nComponents outside don't need to know anything about
how a rule is\r\ndisplayed. We can encapsulate this knowledge inside the
context and\r\nexpose only a generic method, like
openRulePreview(ruleId)\r\n - [x] Remove unnecessary checks after using
\"invariant\"\r\n- [x] Make sure query, timeline template and all the
other fields are\r\nshown in the flyout. Compare each rule in a flyout
with the Rule Details\r\nto ensure that all fields are in place.\r\n-
[x] Remove the enable / disable switch machine learning job UI
switch\r\nelement\r\n- [x] Add custom highlighted fields to the
flyout\r\n([comment](https://github.com/elastic/kibana/pull/163235#discussion_r1293821203))\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials.
[Docs\r\nticket](https://github.com/elastic/security-docs/issues/3798)\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"c115f5d3d6f580b195e823c9e948f7b1daf8fddc"}}]}]
BACKPORT-->

Co-authored-by: Nikita Indik <[email protected]>
Co-authored-by: Patryk Kopyciński <[email protected]>
@banderror
Copy link
Contributor Author

The flyout was implemented in #163304 and #164179.

Further enhancements will be done in follow-up tickets. These enhancements are:

  • Test plan and test coverage for the current implementation
  • Refactoring: pass flyout footer as a prop to flyout, allow passing the diff tab inside of the component
  • Performance optimization: fix the unnecessary whole-table re-render that happens when you open a flyout
  • Showing field diffs in the rule upgrade flyout

You will find the tickets in https://github.com/elastic/security-team/issues/7451 (internal) once it's ready.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
8.10 candidate enhancement New value added to drive a business result Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. v8.10.0
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants