[Fleet] Implement subcategories in integrations UI

[criamico]

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

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',
  },
];

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:

If more the 6 subcategories are present, the remaining ones get hidden under an option button:

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests 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)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

[criamico]

@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[jlind23]

@criamico looks like the broken tests might be related to your changes.

[hop-dev]

Hi @criamico just pulled down to test, it seems the URL reading isn't working at the moment? e.g navigating to http://localhost:5601/mark/app/integrations/browse/infrastructure/kubernetes does not apply the kubernetes subcategory filter for me.

Thanks, let me check that

Also using the mock data, should these subcategories be displayed in the categories list?

Yes those are just mock data, it's fine. I just needed a way to have a longer list of subcategories on the top

[criamico]

@hop-dev I just pushed another commit where I fix the url reading. Thanks for pointing it out, I had forgot that part!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 9d2f603
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
fleet	760	761	+1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
fleet	931	932	+1

Async chunks

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

id	before	after	diff
fleet	911.2KB	914.6KB	+3.5KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
fleet	121.5KB	121.6KB	+84.0B

Unknown metric groups

API count

id	before	after	diff
fleet	1036	1037	+1

History

• 💔 Build #101002 failed 7b2946f
• 💚 Build #100939 succeeded 5005ad9
• 💚 Build #100785 succeeded 3295dbf
• 💚 Build #100661 succeeded d4b810b
• 💔 Build #100653 failed b3885cc

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

cc @criamico

[hop-dev]

Some UX feedback before I do one last code review:

I do think from a usability point of view it would be nice to have an indicator of which subcategory is selected. Also, if I have selected a category under the "..." maybe it should be promoted to the front of the list, e.g here subcategory 5 is the selected category but there is no way of telling :

[criamico]

Some UX feedback before I do one last code review:

I do think from a usability point of view it would be nice to have an indicator of which subcategory is selected. Also, if I have selected a category under the "..." maybe it should be promoted to the front of the list, e.g here subcategory 5 is the selected category but there is no way of telling :

I agree that we need a visual indication. I pinged @dborodyansky in the original ticket, I'm not sure which way he wants to go about this.

Yours would be a good solution, another could be adding the subcategory in the search bar (Infrastructure/kubernetes), since there's enough space there. I think that this requires a bit of discussion though.

[hop-dev]

I've left some UX feedback but that shouldn't block this PR. A couple of general questions but nothing serious

[hop-dev]

nit: Should we split some of these UI elements into smaller components and import them? This file is getting quite big

[criamico]

It would be good, yes. I stopped there to avoid doing an even bigger PR.

[hop-dev]

Is any of this hooks logic worth splitting into smaller functions and unit testing?

[jlind23]

@kpollich should we merge this and after follow up with the discussion Cristina mentioned?

[kpollich]

Code LGTM - I do think we need to figure out some kind of "currently selected category" state before this goes live to users, but seems that need is already addressed above. Awesome job here.

[kpollich]

should we merge this and after follow up with the discussion Cristina mentioned?

Yes let's merge this and follow up ASAP with some kind of selected state when the design is set.