Fix cypress test and subcategory url reading

Author: criamico

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.tsx

@@ -64,8 +64,8 @@ export interface Props {
   showCardLabels?: boolean;
   title?: string;
   availableSubCategories?: CategoryFacet[];
-  selectedSubCategory?: CategoryFacet;
-  setSelectedSubCategory?: (c: CategoryFacet | undefined) => void;
+  selectedSubCategory?: string;
+  setSelectedSubCategory?: (c: string | undefined) => void;
   showMissingIntegrationMessage?: boolean;
 }
 
@@ -111,7 +111,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
     setUrlandReplaceHistory({
       searchString: queryText,
       categoryId: selectedCategory,
-      subCategoryId: selectedSubCategory?.id,
+      subCategoryId: selectedSubCategory,
     });
   };
 
@@ -121,11 +121,11 @@ export const PackageListGrid: FunctionComponent<Props> = ({
   };
 
   const onSubCategoryClick = useCallback(
-    (subCategory: CategoryFacet) => {
+    (subCategory: string) => {
       if (setSelectedSubCategory) setSelectedSubCategory(subCategory);
       setUrlandPushHistory({
         categoryId: selectedCategory,
-        subCategoryId: subCategory.id,
+        subCategoryId: subCategory,
       });
     },
     [selectedCategory, setSelectedSubCategory, setUrlandPushHistory]
@@ -171,7 +171,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
         <EuiContextMenuItem
           key={subCategory.id}
           onClick={() => {
-            onSubCategoryClick(subCategory);
+            onSubCategoryClick(subCategory.id);
             closePopover();
           }}
         >
@@ -194,7 +194,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
       >
         <ControlsColumn controls={controls} title={title} />
       </EuiFlexItem>
-      <EuiFlexItem grow={5}>
+      <EuiFlexItem grow={5} data-test-subj="epmList.mainColumn">
         <EuiFieldSearch
           data-test-subj="epmList.searchBar"
           placeholder={i18n.translate('xpack.fleet.epmList.searchPackagesPlaceholder', {
@@ -269,7 +269,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
                 <EuiButton
                   color="text"
                   aria-label={subCategory?.title}
-                  onClick={() => onSubCategoryClick(subCategory)}
+                  onClick={() => onSubCategoryClick(subCategory.id)}
                 >
                   <FormattedMessage
                     id="xpack.fleet.epmList.subcategoriesButton"

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/hooks/use_available_packages.tsx

@@ -114,12 +114,16 @@ export const useAvailablePackages = () => {
   const { http } = useStartServices();
   const addBasePath = http.basePath.prepend;
 
-  const { selectedCategory: initialSelectedCategory, searchParam } = getParams(
-    useParams<CategoryParams>(),
-    useLocation().search
-  );
+  const {
+    selectedCategory: initialSelectedCategory,
+    selectedSubcategory: initialSubcategory,
+    searchParam,
+  } = getParams(useParams<CategoryParams>(), useLocation().search);
+
   const [selectedCategory, setCategory] = useState(initialSelectedCategory);
-  const [selectedSubCategory, setSelectedSubCategory] = useState<CategoryFacet | undefined>();
+  const [selectedSubCategory, setSelectedSubCategory] = useState<string | undefined>(
+    initialSubcategory
+  );
   const [searchTerm, setSearchTerm] = useState(searchParam || '');
 
   const { getHref, getAbsolutePath } = useLink();
@@ -211,7 +215,7 @@ export const useAvailablePackages = () => {
         }
         if (!selectedSubCategory) return c.categories.includes(selectedCategory);
 
-        return c.categories.includes(selectedSubCategory.id);
+        return c.categories.includes(selectedSubCategory);
       }),
     [cards, selectedCategory, selectedSubCategory]
   );

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx

@@ -35,14 +35,15 @@ import { AvailablePackages } from './available_packages';
 
 export interface CategoryParams {
   category?: ExtendedIntegrationCategory;
+  subcategory?: string;
 }
 
 export const getParams = (params: CategoryParams, search: string) => {
-  const { category } = params;
+  const { category, subcategory } = params;
   const selectedCategory: ExtendedIntegrationCategory = category || '';
   const queryParams = new URLSearchParams(search);
   const searchParam = queryParams.get(INTEGRATIONS_SEARCH_QUERYPARAM) || '';
-  return { selectedCategory, searchParam };
+  return { selectedCategory, searchParam, selectedSubcategory: subcategory };
 };
 
 export const categoryExists = (category: string, categories: CategoryFacet[]) => {

x-pack/plugins/fleet/public/constants/page_paths.ts

@@ -91,7 +91,7 @@ export const FLEET_ROUTING_PATHS = {
 export const INTEGRATIONS_SEARCH_QUERYPARAM = 'q';
 export const INTEGRATIONS_ROUTING_PATHS = {
   integrations: '/:tabId',
-  integrations_all: '/browse/:category?',
+  integrations_all: '/browse/:category?/:subcategory?',
   integrations_installed: '/installed/:category?',
   integrations_installed_updates_available: '/installed/updates_available/:category?',
   integration_details: '/detail/:pkgkey/:panel?',