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

[8.7] [Security Solution] Fix broken Rule Details page when filters are extremely long (#153338) #153537

Merged
merged 1 commit into from
Mar 23, 2023

Conversation

kibanamachine
Copy link
Contributor

Backport

This will backport the following commits from main to 8.7:

Questions ?

Please refer to the Backport tool documentation

…remely long (elastic#153338)

Fixes elastic#145076

## Summary

When creating a rule that has a **filter** which is extremely long, the
Rules Detail UI breaks and information is lost, out of view of the user,
due to a broken layout. See connected issue for examples, or below.

This PR fixes this bug via a a couple simple CSS fixes in the related
components.

# Screenshots

## Desktop

**Before**
<img width="1713" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png">

**After**
<img width="1723" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png">

## Mobile

**Before**
<img width="481" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png">

**After**
<img width="486" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png">

### Checklist

Delete any items that are not applicable to this PR.

- [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 39efe02)
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
securitySolution 13.9MB 13.9MB +484.0B

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

cc @jpdjere

banderror added a commit that referenced this pull request Mar 23, 2023
banderror added a commit that referenced this pull request Mar 24, 2023
…ilters are extremely long (#153338)" (#153563)

Reverts #153537

Should have been backported after the 8.7.0 release.
jpdjere added a commit that referenced this pull request Apr 3, 2023
…re extremely long (#153338) (#154217)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Security Solution] Fix broken Rule Details page when filters are
extremely long (#153338)](#153338)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Juan Pablo
Djeredjian","email":"jpdjeredjian@gmail.com"},"sourceCommit":{"committedDate":"2023-03-23T12:23:00Z","message":"[Security
Solution] Fix broken Rule Details page when filters are extremely long
(#153338)\n\nFixes
#145076
Summary\r\n\r\nWhen creating a rule that has a **filter** which is
extremely long, the\r\nRules Detail UI breaks and information is lost,
out of view of the user,\r\ndue to a broken layout. See connected issue
for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple
simple CSS fixes in the related\r\ncomponents.\r\n\r\n#
Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img
width=\"1723\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n##
Mobile\r\n\r\n**Before**\r\n<img width=\"481\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img
width=\"486\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\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":"39efe026ee8926a412ee0e4206ba4831ea670923","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rules","Feature:Rule
Details","v8.8.0","v8.7.1"],"number":153338,"url":"#153338
Solution] Fix broken Rule Details page when filters are extremely long
(#153338)\n\nFixes
#145076
Summary\r\n\r\nWhen creating a rule that has a **filter** which is
extremely long, the\r\nRules Detail UI breaks and information is lost,
out of view of the user,\r\ndue to a broken layout. See connected issue
for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple
simple CSS fixes in the related\r\ncomponents.\r\n\r\n#
Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img
width=\"1723\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n##
Mobile\r\n\r\n**Before**\r\n<img width=\"481\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img
width=\"486\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\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":"39efe026ee8926a412ee0e4206ba4831ea670923"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/153338","number":153338,"mergeCommit":{"message":"[Security
Solution] Fix broken Rule Details page when filters are extremely long
(#153338)\n\nFixes
#145076
Summary\r\n\r\nWhen creating a rule that has a **filter** which is
extremely long, the\r\nRules Detail UI breaks and information is lost,
out of view of the user,\r\ndue to a broken layout. See connected issue
for examples, or below.\r\n\r\nThis PR fixes this bug via a a couple
simple CSS fixes in the related\r\ncomponents.\r\n\r\n#
Screenshots\r\n\r\n## Desktop\r\n\r\n**Before**\r\n<img width=\"1713\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\">\r\n\r\n\r\n**After**\r\n<img
width=\"1723\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\">\r\n\r\n##
Mobile\r\n\r\n**Before**\r\n<img width=\"481\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\">\r\n\r\n\r\n**After**\r\n<img
width=\"486\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\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":"39efe026ee8926a412ee0e4206ba4831ea670923"}},{"branch":"8.7","label":"v8.7.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/153537","number":153537,"state":"MERGED","mergeCommit":{"sha":"cfdc7d2a83298123bb284b4d77a80ed4a2d03c36","message":"[8.7]
[Security Solution] Fix broken Rule Details page when filters are
extremely long (#153338) (#153537)\n\n# Backport\n\nThis will backport
the following commits from `main` to `8.7`:\n- [[Security Solution] Fix
broken Rule Details page when filters are\nextremely long
(#153338)](https://github.com/elastic/kibana/pull/153338)\n\n<!---
Backport version: 8.9.7 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT
[{\"author\":{\"name\":\"Juan
Pablo\nDjeredjian\",\"email\":\"jpdjeredjian@gmail.com\"},\"sourceCommit\":{\"committedDate\":\"2023-03-23T12:23:00Z\",\"message\":\"[Security\nSolution]
Fix broken Rule Details page when filters are extremely
long\n(#153338)\\n\\nFixes\nhttps://github.com//issues/145076\\r\\n\\r\\n##\nSummary\\r\\n\\r\\nWhen
creating a rule that has a **filter** which is\nextremely long,
the\\r\\nRules Detail UI breaks and information is lost,\nout of view of
the user,\\r\\ndue to a broken layout. See connected issue\nfor
examples, or below.\\r\\n\\r\\nThis PR fixes this bug via a a
couple\nsimple CSS fixes in the
related\\r\\ncomponents.\\r\\n\\r\\n#\nScreenshots\\r\\n\\r\\n##
Desktop\\r\\n\\r\\n**Before**\\r\\n<img
width=\\\"1713\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img
width=\\\"481\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete
any items that are not applicable to this\nPR.\\r\\n\\r\\n- [x] Any UI
touched in this PR does not create any new axe\nfailures\\r\\n(run axe
in\nbrowser:\\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-\n[x]
This renders correctly on smaller devices using
a\nresponsive\\r\\nlayout. (You can test this
[in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x]
This was checked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\",\"sha\":\"39efe026ee8926a412ee0e4206ba4831ea670923\",\"branchLabelMapping\":{\"^v8.8.0$\":\"main\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"bug\",\"release_note:fix\",\"Team:Detections\nand
Resp\",\"Team: SecuritySolution\",\"Team:Detection
Rules\",\"Feature:Rule\nDetails\",\"v8.8.0\",\"v8.7.1\"],\"number\":153338,\"url\":\"#153338
Fix broken Rule Details page when filters are extremely
long\n(#153338)\\n\\nFixes\nhttps://github.com//issues/145076\\r\\n\\r\\n##\nSummary\\r\\n\\r\\nWhen
creating a rule that has a **filter** which is\nextremely long,
the\\r\\nRules Detail UI breaks and information is lost,\nout of view of
the user,\\r\\ndue to a broken layout. See connected issue\nfor
examples, or below.\\r\\n\\r\\nThis PR fixes this bug via a a
couple\nsimple CSS fixes in the
related\\r\\ncomponents.\\r\\n\\r\\n#\nScreenshots\\r\\n\\r\\n##
Desktop\\r\\n\\r\\n**Before**\\r\\n<img
width=\\\"1713\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img
width=\\\"481\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete
any items that are not applicable to this\nPR.\\r\\n\\r\\n- [x] Any UI
touched in this PR does not create any new axe\nfailures\\r\\n(run axe
in\nbrowser:\\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-\n[x]
This renders correctly on smaller devices using
a\nresponsive\\r\\nlayout. (You can test this
[in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x]
This was checked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\",\"sha\":\"39efe026ee8926a412ee0e4206ba4831ea670923\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[\"8.7\"],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v8.8.0\",\"labelRegex\":\"^v8.8.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/153338\",\"number\":153338,\"mergeCommit\":{\"message\":\"[Security\nSolution]
Fix broken Rule Details page when filters are extremely
long\n(#153338)\\n\\nFixes\nhttps://github.com//issues/145076\\r\\n\\r\\n##\nSummary\\r\\n\\r\\nWhen
creating a rule that has a **filter** which is\nextremely long,
the\\r\\nRules Detail UI breaks and information is lost,\nout of view of
the user,\\r\\ndue to a broken layout. See connected issue\nfor
examples, or below.\\r\\n\\r\\nThis PR fixes this bug via a a
couple\nsimple CSS fixes in the
related\\r\\ncomponents.\\r\\n\\r\\n#\nScreenshots\\r\\n\\r\\n##
Desktop\\r\\n\\r\\n**Before**\\r\\n<img
width=\\\"1713\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"1723\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png\\\">\\r\\n\\r\\n##\nMobile\\r\\n\\r\\n**Before**\\r\\n<img
width=\\\"481\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png\\\">\\r\\n\\r\\n\\r\\n**After**\\r\\n<img\nwidth=\\\"486\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png\\\">\\r\\n\\r\\n\\r\\n###\nChecklist\\r\\n\\r\\nDelete
any items that are not applicable to this\nPR.\\r\\n\\r\\n- [x] Any UI
touched in this PR does not create any new axe\nfailures\\r\\n(run axe
in\nbrowser:\\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-\n[x]
This renders correctly on smaller devices using
a\nresponsive\\r\\nlayout. (You can test this
[in\nyour\\r\\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\\r\\n-\n[x]
This was checked
for\n[cross-browser\\r\\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\",\"sha\":\"39efe026ee8926a412ee0e4206ba4831ea670923\"}},{\"branch\":\"8.7\",\"label\":\"v8.7.1\",\"labelRegex\":\"^v(\\\\d+).(\\\\d+).\\\\d+$\",\"isSourceBranch\":false,\"state\":\"NOT_CREATED\"}]}]\nBACKPORT-->\n\nCo-authored-by:
Juan Pablo Djeredjian <jpdjeredjian@gmail.com>"}}]}] BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants