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] Fix a broken header on small screens #156525

Merged

Conversation

maximpn
Copy link
Contributor

@maximpn maximpn commented May 3, 2023

Resolves: #155596

Summary

It fixes a broken header on small screen after adding rule snooze badge component.

Before:

image
image
image

After:

image
image
image

Checklist

@maximpn maximpn added bug Fixes for quality problems that affect the customer experience release_note:fix 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 backport:prev-minor Backport to the previous minor version (i.e. one version back from main) labels May 3, 2023
@maximpn maximpn self-assigned this May 3, 2023
@maximpn maximpn marked this pull request as ready for review May 3, 2023 12:30
@maximpn maximpn requested review from a team as code owners May 3, 2023 12:30
@elasticmachine
Copy link
Contributor

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

@elasticmachine
Copy link
Contributor

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

@maximpn maximpn requested a review from xcrzx May 3, 2023 14:00
@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

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 9.1MB 9.1MB +137.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
enterpriseSearch 19 21 +2
securitySolution 399 402 +3
total +5

Total ESLint disabled count

id before after diff
enterpriseSearch 20 22 +2
securitySolution 479 482 +3
total +5

History

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

cc @maximpn

Copy link
Contributor

@xcrzx xcrzx left a comment

Choose a reason for hiding this comment

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

Tested in Chrome, Safari, and FF locally, and the header now looks good in all browsers. Thank you for the fix, @maximpn 👍

@maximpn maximpn added the v8.8.0 label May 3, 2023
Copy link
Contributor

@angorayc angorayc left a comment

Choose a reason for hiding this comment

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

Tested locally, LGTM, thank you!

@maximpn maximpn merged commit 0a9bbe7 into elastic:main May 4, 2023
@banderror banderror added release_note:skip Skip the PR/issue when compiling release notes and removed release_note:fix labels May 4, 2023
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request May 4, 2023
)

**Resolves:** elastic#155596

## Summary

It fixes a broken header on small screen after adding rule snooze badge component.

*Before:*

![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)
![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)
![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)

*After:*

![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)
![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)
![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)

### Checklist

- [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
- [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 0a9bbe7)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.8

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

@maximpn maximpn deleted the fix-rule-details-header-on-small-screens branch May 4, 2023 08:28
kibanamachine added a commit that referenced this pull request May 4, 2023
…) (#156650)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Security Solution] Fix a broken header on small screens
(#156525)](#156525)

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

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

<!--BACKPORT [{"author":{"name":"Maxim
Palenov","email":"maxim.palenov@elastic.co"},"sourceCommit":{"committedDate":"2023-05-04T08:19:36Z","message":"[Security
Solution] Fix a broken header on small screens
(#156525)\n\n**Resolves:**
#155596
Summary\r\n\r\nIt fixes a broken header on small screen after adding
rule snooze badge component.
\r\n\r\n*Before:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)\r\n\r\n*After:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)\r\n\r\n\r\n###
Checklist\r\n\r\n- [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\r\n- [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))\r\n-
[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))\r\n-
[x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"0a9bbe7c1fd32765116f508b9d01879ba58482fb","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection
Rules","backport:prev-minor","v8.8.0","v8.9.0"],"number":156525,"url":"#156525
Solution] Fix a broken header on small screens
(#156525)\n\n**Resolves:**
#155596
Summary\r\n\r\nIt fixes a broken header on small screen after adding
rule snooze badge component.
\r\n\r\n*Before:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)\r\n\r\n*After:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)\r\n\r\n\r\n###
Checklist\r\n\r\n- [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\r\n- [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))\r\n-
[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))\r\n-
[x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"0a9bbe7c1fd32765116f508b9d01879ba58482fb"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/156525","number":156525,"mergeCommit":{"message":"[Security
Solution] Fix a broken header on small screens
(#156525)\n\n**Resolves:**
#155596
Summary\r\n\r\nIt fixes a broken header on small screen after adding
rule snooze badge component.
\r\n\r\n*Before:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235914975-d30c75c4-f4fe-4887-86d1-417787e16521.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915062-b079fac0-0fef-447a-b2e5-d571f6862441.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915165-d34cb157-ecf1-4074-9a08-48c4dfa3605d.png)\r\n\r\n*After:*\r\n\r\n![image](https://user-images.githubusercontent.com/3775283/235915333-ca658f3a-8dfe-47d4-90ec-8bc629566d5c.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915401-31a7ff25-933e-4c8e-938d-323433e85d66.png)\r\n![image](https://user-images.githubusercontent.com/3775283/235915479-fc56dd64-e113-4535-b268-f3dacdd6f4a4.png)\r\n\r\n\r\n###
Checklist\r\n\r\n- [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\r\n- [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))\r\n-
[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))\r\n-
[x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"0a9bbe7c1fd32765116f508b9d01879ba58482fb"}}]}]
BACKPORT-->

Co-authored-by: Maxim Palenov <maxim.palenov@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to the previous minor version (i.e. one version back from main) bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes 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.8.0 v8.9.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants