[Fleet] Implement subcategories in integrations UI (#148894)

## 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>

Author: criamico

x-pack/plugins/fleet/common/experimental_features.ts

@@ -17,6 +17,7 @@ export const allowedExperimentalValues = Object.freeze({
   showDevtoolsRequest: true,
   diagnosticFileUploadEnabled: false,
   experimentalDataStreamSettings: false,
+  showIntegrationsSubcategories: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

x-pack/plugins/fleet/common/types/models/epm.ts

@@ -289,6 +289,8 @@ export interface CategorySummaryItem {
   id: CategoryId;
   title: string;
   count: number;
+  parent_id?: string;
+  parent_title?: string;
 }
 
 export type RequirementsByServiceName = PackageSpecManifest['conditions'];

x-pack/plugins/fleet/cypress/e2e/integrations_real.cy.ts

@@ -172,7 +172,8 @@ describe('Add Integration - Real API', () => {
 
   it('should filter integrations by category', () => {
     setupIntegrations();
-    cy.getBySel(getIntegrationCategories('aws')).click();
+    cy.getBySel(getIntegrationCategories('aws')).click({ scrollBehavior: false });
+
     cy.getBySel(INTEGRATIONS_SEARCHBAR.BADGE).contains('AWS').should('exist');
     cy.getBySel(INTEGRATION_LIST).find('.euiCard').should('have.length.greaterThan', 29);
 

x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_list_grid.stories.tsx

@@ -45,10 +45,13 @@ const categories = [
 export const EmptyList = (props: Args) => (
   <PackageListGrid
     list={[]}
-    onSearchChange={action('onSearchChange')}
-    setSelectedCategory={action('setSelectedCategory')}
+    searchTerm=""
+    setSearchTerm={action('setSearchTerm')}
+    setCategory={action('setCategory')}
     categories={categories}
     selectedCategory=""
+    setUrlandReplaceHistory={action('setUrlandReplaceHistory')}
+    setUrlandPushHistory={action('setUrlandPushHistory')}
     {...props}
   />
 );
@@ -129,10 +132,13 @@ export const List = (props: Args) => (
         categories: ['category_two'],
       },
     ]}
-    onSearchChange={action('onSearchChange')}
-    setSelectedCategory={action('setSelectedCategory')}
+    searchTerm=""
+    setSearchTerm={action('setSearchTerm')}
+    setCategory={action('setCategory')}
     categories={categories}
     selectedCategory=""
+    setUrlandReplaceHistory={action('setUrlandReplaceHistory')}
+    setUrlandPushHistory={action('setUrlandPushHistory')}
     {...props}
   />
 );