[Fleet] Integrations page flickers when scrolling to the bottom #148654
Assignees
Labels
bug
Fixes for quality problems that affect the customer experience
good first issue
low hanging fruit
Team:Fleet
Team label for Observability Data Collection Fleet team
v8.7.0
Comments
criamico
added
bug
criamico
added
the
Team:Fleet
|
Pinging @elastic/fleet (Team:Fleet) |
4 tasks
criamico
added a commit
that referenced
this issue
Jan 19, 2023
## Summary Closes #147125 Closes #148654 - Implement subcategories in integrations UI. - I also refactored the `AvailablePackages`, `InstalledPackages` and `PackageListGrid` components to make easier to do changes. I extracted the logic from `AvailablePackages` in a hook `useAvailablePackages` and updated it. - Sneaked a small bugfix into it. It's in commit 7b2946f: removed the js logic that handled the sticky sidemenu, that would cause flickering in some cases and implemented it with some css instead. ## Repro steps ### Display actual subcategories coming from EPR - Enable `showIntegrationsSubcategories` feature flag; - Navigate to Integrations page. `Security` and `infrastructure` categories have sub categories. - When clicking on a subcategory, the page URL gets updated. For example, if clicking on `Infrastructure` > `Kubernetes`, the url will be `/integrations/browse/infrastructure/kubernetes`. It works with search too, if searching `abc` in the subcategory the url will update to `/integrations/browse/infrastructure/kubernetes?q=abc` ### Display mock data Same repro steps as before, but I added some mock subcategories: Added the following subcategories file <details> <p> ``` export const mockSubcategories = [ { id: 'kubernetes', title: 'Kubernetes', count: 18, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'message_queue', title: 'Message Broker', count: 7, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'monitoring', title: 'Monitoring', count: 16, parent_id: 'observability', parent_title: 'Observability', }, { id: 'threat_intel', title: 'Threat Intelligence', count: 10, parent_id: 'security', parent_title: 'Security', }, { id: 'web', title: 'Web Server', count: 36, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'security_mock_1', title: 'Security mock 1', count: 10, parent_id: 'security', parent_title: 'Security', }, { id: 'infrastructure_mock_1', title: 'Subcategory 1', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_2', title: 'Subcategory 2', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_3', title: 'Subcategory 3', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_4', title: 'Subcategory 4', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_5', title: 'Subcategory 5', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_6', title: 'Subcategory 6', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, ]; ``` </p> </details> I then imported it and replaced the subcategories here: https://github.com/criamico/kibana/blob/7b2946fe3b5067418fffb5fef9812a5080760200/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/hooks/use_available_packages.tsx#L226. It should provide more subcategories under `infrastructure`. ### Screenshots If subcategories are up to 6, they get rendered on top of the integrations page: <img width="1679" alt="Screenshot 2023-01-17 at 16 11 01" src="https://user-images.githubusercontent.com/16084106/212963949-6e1fdccc-872d-4c40-a594-905e34218494.png"> If more the 6 subcategories are present, the remaining ones get hidden under an option button: <img width="1593" alt="Screenshot 2023-01-17 at 16 07 27" src="https://user-images.githubusercontent.com/16084106/212963863-0be8a97f-75ba-4bfb-a28c-bb9bbeb4c8b3.png"> <img width="1693" alt="Screenshot 2023-01-17 at 16 07 41" src="https://user-images.githubusercontent.com/16084106/212963899-2846b292-45c2-4fc2-91ca-e947653ec961.png"> ### Checklist - [ ] 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) - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
wayneseymour
pushed a commit
to wayneseymour/kibana
that referenced
this issue
Jan 19, 2023
## Summary Closes elastic#147125 Closes elastic#148654 - Implement subcategories in integrations UI. - I also refactored the `AvailablePackages`, `InstalledPackages` and `PackageListGrid` components to make easier to do changes. I extracted the logic from `AvailablePackages` in a hook `useAvailablePackages` and updated it. - Sneaked a small bugfix into it. It's in commit elastic@7b2946f: removed the js logic that handled the sticky sidemenu, that would cause flickering in some cases and implemented it with some css instead. ## Repro steps ### Display actual subcategories coming from EPR - Enable `showIntegrationsSubcategories` feature flag; - Navigate to Integrations page. `Security` and `infrastructure` categories have sub categories. - When clicking on a subcategory, the page URL gets updated. For example, if clicking on `Infrastructure` > `Kubernetes`, the url will be `/integrations/browse/infrastructure/kubernetes`. It works with search too, if searching `abc` in the subcategory the url will update to `/integrations/browse/infrastructure/kubernetes?q=abc` ### Display mock data Same repro steps as before, but I added some mock subcategories: Added the following subcategories file <details> <p> ``` export const mockSubcategories = [ { id: 'kubernetes', title: 'Kubernetes', count: 18, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'message_queue', title: 'Message Broker', count: 7, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'monitoring', title: 'Monitoring', count: 16, parent_id: 'observability', parent_title: 'Observability', }, { id: 'threat_intel', title: 'Threat Intelligence', count: 10, parent_id: 'security', parent_title: 'Security', }, { id: 'web', title: 'Web Server', count: 36, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'security_mock_1', title: 'Security mock 1', count: 10, parent_id: 'security', parent_title: 'Security', }, { id: 'infrastructure_mock_1', title: 'Subcategory 1', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_2', title: 'Subcategory 2', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_3', title: 'Subcategory 3', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_4', title: 'Subcategory 4', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_5', title: 'Subcategory 5', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, { id: 'infrastructure_mock_6', title: 'Subcategory 6', count: 12, parent_id: 'infrastructure', parent_title: 'Infrastructure', }, ]; ``` </p> </details> I then imported it and replaced the subcategories here: https://github.com/criamico/kibana/blob/7b2946fe3b5067418fffb5fef9812a5080760200/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/hooks/use_available_packages.tsx#L226. It should provide more subcategories under `infrastructure`. ### Screenshots If subcategories are up to 6, they get rendered on top of the integrations page: <img width="1679" alt="Screenshot 2023-01-17 at 16 11 01" src="https://user-images.githubusercontent.com/16084106/212963949-6e1fdccc-872d-4c40-a594-905e34218494.png"> If more the 6 subcategories are present, the remaining ones get hidden under an option button: <img width="1593" alt="Screenshot 2023-01-17 at 16 07 27" src="https://user-images.githubusercontent.com/16084106/212963863-0be8a97f-75ba-4bfb-a28c-bb9bbeb4c8b3.png"> <img width="1693" alt="Screenshot 2023-01-17 at 16 07 41" src="https://user-images.githubusercontent.com/16084106/212963899-2846b292-45c2-4fc2-91ca-e947653ec961.png"> ### Checklist - [ ] 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) - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reproduced on local environment and present in 8.6.0. Browser is Chrome.
Steps to reproduce:
bug.mov
Note: The source of the issue is in this useEffect that was added to make the menu sticky.
The text was updated successfully, but these errors were encountered: