[SecuritySolution] Allow custom sorting on integration cards (#195397)

Part of #193131

It shows the customised cards without applying the default sorting under
the `recommended` tab:

Added two optional props:
1. `calloutTopSpacerSize` - Props to decide the size of the spacer above
callout. Security Solution uses this prop to customize the size of the
spacer
2. `sortByFeaturedIntegrations` - Customizing whether to sort by the
default featured integrations' categories. Security Solution has `custom
sorting logic`

Featured cards:

1. AWS
3. GCP
4. Azure
5. Elastic Defend
6. CrowdStrike (to promote our extended protections/3rd party EDR
support)
7. Wiz (or another cloud integration to promote extended protections)
8. Network Packet Capture
9. Osquery Manager
10. ~**Cloud Asset Inventory (need to confirm that's confirmed for
8.16)** - Currently Not Found any integration matched~

<img width="1249" alt="Screenshot 2024-10-08 at 13 31 12"
src="https:/user-attachments/assets/95fb03a4-5a7b-4e8f-8b03-ee45b0e18633">

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

@@ -68,7 +68,6 @@ export const GridColumn = ({
 }: GridColumnProps) => {
  const itemsSizeRefs = useRef(new Map<number, number>());
  const listRef = useRef<List>(null);
-
  const onHeightChange = useCallback((index: number, size: number) => {
  itemsSizeRefs.current.set(index, size);
  if (listRef.current) {

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

@@ -61,6 +61,8 @@ export interface PackageListGridProps {
  setUrlandReplaceHistory: (params: IntegrationsURLParameters) => void;
  setUrlandPushHistory: (params: IntegrationsURLParameters) => void;
  callout?: JSX.Element | null;
+ // Props to decide the size of the spacer above callout. Security Solution uses this prop to customize the size of the spacer
+ calloutTopSpacerSize?: 's' | 'm' | 'xs' | 'l' | 'xl' | 'xxl';
  // Props used only in AvailablePackages component:
  showCardLabels?: boolean;
  title?: string;
@@ -70,6 +72,8 @@ export interface PackageListGridProps {
  showMissingIntegrationMessage?: boolean;
  showControls?: boolean;
  showSearchTools?: boolean;
+ // Customizing whether to sort by the default featured integrations' categories. Security Solution has custom sorting logic
+ sortByFeaturedIntegrations?: boolean;
  spacer?: boolean;
  // Security Solution sends the id to determine which element to scroll when the user interacting with the package list
  scrollElementId?: string;
@@ -92,7 +96,9 @@ export const PackageListGrid: FunctionComponent<PackageListGridProps> = ({
  setUrlandReplaceHistory,
  setUrlandPushHistory,
  showMissingIntegrationMessage = false,
+ sortByFeaturedIntegrations = true,
  callout,
+ calloutTopSpacerSize = 'l', // Default EUI spacer size
  showCardLabels = true,
  showControls = true,
  showSearchTools = true,
@@ -141,9 +147,10 @@ export const PackageListGrid: FunctionComponent<PackageListGridProps> = ({
  )
  : list;
 
- return promoteFeaturedIntegrations(filteredList, selectedCategory);
- }, [isLoading, list, localSearchRef, searchTerm, selectedCategory]);
-
+ return sortByFeaturedIntegrations
+ ? promoteFeaturedIntegrations(filteredList, selectedCategory)
+ : filteredList;
+ }, [isLoading, list, localSearchRef, searchTerm, selectedCategory, sortByFeaturedIntegrations]);
  const splitSubcategories = (
  subcategories: CategoryFacet[] | undefined
  ): { visibleSubCategories?: CategoryFacet[]; hiddenSubCategories?: CategoryFacet[] } => {
@@ -270,7 +277,7 @@ export const PackageListGrid: FunctionComponent<PackageListGridProps> = ({
  ) : null}
  {callout ? (
  <>
- <EuiSpacer />
+ <EuiSpacer size={calloutTopSpacerSize} />
  {callout}
  </>
  ) : null}