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.

Sign up for GitHub

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

Jump to bottom

[Fleet]: No scroller available for LHS category list under Integrations tab. #149378

Closed
amolnater-qasource opened this issue Jan 24, 2023 · 8 comments · Fixed by #153181
Closed

[Fleet]: No scroller available for LHS category list under Integrations tab. #149378

amolnater-qasource opened this issue Jan 24, 2023 · 8 comments · Fixed by #153181
Assignees
@criamico
Labels
bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. QA:Validated Issue has been validated by QA Team:Fleet Team label for Observability Data Collection Fleet team

Comments

@amolnater-qasource
Copy link

Kibana version: 8.7 Snapshot Kibana cloud environment

Host OS: All

Build details:
VERSION: 8.7 Snapshot
BUILD: 59953
COMMIT: e7746b2

Preconditions:

  1. 8.7 Snapshot Kibana cloud environment should be available.

Steps to reproduce:

  1. Navigate to Integrations tab.
  2. Scroll the LHS category list and observe scroller not available for LHS list.
  3. Observe entire page starts scrolling.

What's working fine:

  • On 8.6.1 BC1 scroller is available and user is able to scroll LHS category list under Integrations tab.

Screen Recording:

Browse.integrations.-.Integrations.-.Elastic.-.Google.Chrome.2023-01-23.19-19-23.mp4

Expected Result:
Scroller should be available for LHS category list under Integrations tab.
@amolnater-qasource amolnater-qasource added bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team:Fleet Team label for Observability Data Collection Fleet team labels Jan 24, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@amolnater-qasource
Copy link
Author

@manishgupta-qasource Please review.

@manishgupta-qasource
Copy link

Secondary review for this ticket is Done

@kpollich
Copy link
Member

kpollich commented Mar 1, 2023

@criamico - I think this might be related to that issue with the flickering overflow around the category list that we fixed recently. Could you take a look at this when you get time?

@criamico
Copy link
Contributor

criamico commented Mar 1, 2023

@kpollich sure I'll take a look

@criamico criamico self-assigned this Mar 7, 2023
@jlind23
Copy link
Contributor

jlind23 commented Mar 9, 2023

@criamico any update on this one?

@criamico
Copy link
Contributor

criamico commented Mar 9, 2023 •
edited
Loading

@jlind23 no, sorry I've been busy with another ticket, since this is marked low priority.

However I took a quick look, the sticky property that I applied on the categories removes the visible scroller from the div (diff is here). The reason why I did that change was that it was obtained by some js code which was causing weird issues like flickering when scrolling at the bottom, as it's visible in this previous ticket.

I'm going to see if I can fix it with css without need of reintroducing the js code to do it.

@criamico criamico mentioned this issue Mar 13, 2023
Merged
criamico added a commit that referenced this issue Mar 13, 2023
@criamico
[Fleet] Fix missing scrolling bar in categories column (#153181)
bb3f917 
Closes #149378

## Summary
Fixing missing scrolling bar in Integrations `categories` left column. I
replaced the `sticky` css property with the class `kbnStickyMenu`
defined
[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).
This class is applied above a certain breakpoint.

### Large viewport
The categories column is sticky:


https://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov

### Smaller viewport
The categories column now has a scrolling bar:


https://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Mar 13, 2023
@criamico
[Fleet] Fix missing scrolling bar in categories column (elastic#153181)
5b352bf 
Closes elastic#149378

## Summary
Fixing missing scrolling bar in Integrations `categories` left column. I
replaced the `sticky` css property with the class `kbnStickyMenu`
defined
[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).
This class is applied above a certain breakpoint.

### Large viewport
The categories column is sticky:

https://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov

### Smaller viewport
The categories column now has a scrolling bar:

https://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov
(cherry picked from commit bb3f917)
kibanamachine referenced this issue Mar 13, 2023
@kibanamachine @criamico
[8.7] [Fleet] Fix missing scrolling bar in categories column (#153181) (
bebe420 
#153183)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Fleet] Fix missing scrolling bar in categories column
(#153181)](#153181)

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

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

<!--BACKPORT [{"author":{"name":"Cristina
Amico","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-03-13T16:00:33Z","message":"[Fleet]
Fix missing scrolling bar in categories column (#153181)\n\nCloses
https://github.com/elastic/kibana/issues/149378\r\n\r\n##
Summary\r\nFixing missing scrolling bar in Integrations `categories`
left column. I\r\nreplaced the `sticky` css property with the class
`kbnStickyMenu`\r\ndefined\r\n[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).\r\nThis
class is applied above a certain breakpoint.\r\n\r\n### Large
viewport\r\nThe categories column is
sticky:\r\n\r\n\r\nhttps://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov\r\n\r\n###
Smaller viewport\r\nThe categories column now has a scrolling
bar:\r\n\r\n\r\nhttps://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov","sha":"bb3f91715e2780238b02e69e80cca83534ee6eff","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","backport:prev-minor","v8.8.0"],"number":153181,"url":"https://github.com/elastic/kibana/pull/153181","mergeCommit":{"message":"[Fleet]
Fix missing scrolling bar in categories column (#153181)\n\nCloses
https://github.com/elastic/kibana/issues/149378\r\n\r\n##
Summary\r\nFixing missing scrolling bar in Integrations `categories`
left column. I\r\nreplaced the `sticky` css property with the class
`kbnStickyMenu`\r\ndefined\r\n[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).\r\nThis
class is applied above a certain breakpoint.\r\n\r\n### Large
viewport\r\nThe categories column is
sticky:\r\n\r\n\r\nhttps://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov\r\n\r\n###
Smaller viewport\r\nThe categories column now has a scrolling
bar:\r\n\r\n\r\nhttps://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov","sha":"bb3f91715e2780238b02e69e80cca83534ee6eff"}},"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/153181","number":153181,"mergeCommit":{"message":"[Fleet]
Fix missing scrolling bar in categories column (#153181)\n\nCloses
https://github.com/elastic/kibana/issues/149378\r\n\r\n##
Summary\r\nFixing missing scrolling bar in Integrations `categories`
left column. I\r\nreplaced the `sticky` css property with the class
`kbnStickyMenu`\r\ndefined\r\n[here](https://github.com/elastic/kibana/blob/3c7bf5840539fad8e45e6d490bb7a82b955ba9f5/src/core/public/styles/rendering/_base.scss#L47-L51).\r\nThis
class is applied above a certain breakpoint.\r\n\r\n### Large
viewport\r\nThe categories column is
sticky:\r\n\r\n\r\nhttps://user-images.githubusercontent.com/16084106/224733525-362d6b0c-321a-476d-ae5f-caad45ef3fcc.mov\r\n\r\n###
Smaller viewport\r\nThe categories column now has a scrolling
bar:\r\n\r\n\r\nhttps://user-images.githubusercontent.com/16084106/224733690-b310fb78-1ee3-45a7-bc45-dd29ffdc280b.mov","sha":"bb3f91715e2780238b02e69e80cca83534ee6eff"}}]}]
BACKPORT-->

Co-authored-by: Cristina Amico <[email protected]>
@amolnater-qasource amolnater-qasource added the QA:Ready for Testing Code is merged and ready for QA to validate label Mar 14, 2023
@amolnater-qasource
Copy link
Author

Hi @criamico

We have revalidated this issue on latest 8.7.0 BC9 kibana cloud environment and found it fixed now.

Observations:

  • Scroller is now available for LHS category list under Integrations tab.

Build details:
BUILD: 61093
COMMIT: 8eda067

Screen Recording:

Browse.integrations.-.Integrations.-.Elastic.-.Google.Chrome.2023-03-28.14-36-55.mp4

Hence, we are marking this issue as QA:Validated.
Thanks!

@amolnater-qasource amolnater-qasource added QA:Validated Issue has been validated by QA and removed QA:Ready for Testing Code is merged and ready for QA to validate labels Mar 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@criamico criamico

Labels
bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. QA:Validated Issue has been validated by QA Team:Fleet Team label for Observability Data Collection Fleet team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Fleet] Fix missing scrolling bar in categories column criamico/kibana
6 participants
@kpollich @elasticmachine @criamico @jlind23 @manishgupta-qasource @amolnater-qasource