[8.x] [SecuritySolution] Allow custom sorting on integration cards (#…

…195397) (#195428)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[SecuritySolution] Allow custom sorting on integration cards
(#195397)](#195397)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-08T14:22:09Z","message":"[SecuritySolution]
Allow custom sorting on integration cards (#195397)\n\nPart of
https://github.com/elastic/kibana/pull/193131\r\n\r\nIt shows the
customised cards without applying the default sorting under\r\nthe
`recommended` tab:\r\n\r\nAdded two optional props:\r\n1.
`calloutTopSpacerSize` - Props to decide the size of the spacer
above\r\ncallout. Security Solution uses this prop to customize the size
of the\r\nspacer\r\n2. `sortByFeaturedIntegrations` - Customizing
whether to sort by the\r\ndefault featured integrations' categories.
Security Solution has `custom\r\nsorting logic`\r\n\r\nFeatured
cards:\r\n\r\n1. AWS\r\n3. GCP\r\n4. Azure\r\n5. Elastic Defend\r\n6.
CrowdStrike (to promote our extended protections/3rd party
EDR\r\nsupport)\r\n7. Wiz (or another cloud integration to promote
extended protections)\r\n8. Network Packet Capture\r\n9. Osquery
Manager\r\n10. ~**Cloud Asset Inventory (need to confirm that's
confirmed for\r\n8.16)** - Currently Not Found any integration
matched~\r\n\r\n<img width=\"1249\" alt=\"Screenshot 2024-10-08 at 13 31
12\"\r\nsrc=\"https://github.com/user-attachments/assets/95fb03a4-5a7b-4e8f-8b03-ee45b0e18633\">","sha":"d20c579304b5fd212971bd9ef80cfbbda0932d94","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","Team:Fleet","v9.0.0","Team:Threat
Hunting:Explore","v8.16.0"],"title":"[SecuritySolution] Allow custom
sorting on integration
cards","number":195397,"url":"https://github.com/elastic/kibana/pull/195397","mergeCommit":{"message":"[SecuritySolution]
Allow custom sorting on integration cards (#195397)\n\nPart of
https://github.com/elastic/kibana/pull/193131\r\n\r\nIt shows the
customised cards without applying the default sorting under\r\nthe
`recommended` tab:\r\n\r\nAdded two optional props:\r\n1.
`calloutTopSpacerSize` - Props to decide the size of the spacer
above\r\ncallout. Security Solution uses this prop to customize the size
of the\r\nspacer\r\n2. `sortByFeaturedIntegrations` - Customizing
whether to sort by the\r\ndefault featured integrations' categories.
Security Solution has `custom\r\nsorting logic`\r\n\r\nFeatured
cards:\r\n\r\n1. AWS\r\n3. GCP\r\n4. Azure\r\n5. Elastic Defend\r\n6.
CrowdStrike (to promote our extended protections/3rd party
EDR\r\nsupport)\r\n7. Wiz (or another cloud integration to promote
extended protections)\r\n8. Network Packet Capture\r\n9. Osquery
Manager\r\n10. ~**Cloud Asset Inventory (need to confirm that's
confirmed for\r\n8.16)** - Currently Not Found any integration
matched~\r\n\r\n<img width=\"1249\" alt=\"Screenshot 2024-10-08 at 13 31
12\"\r\nsrc=\"https://github.com/user-attachments/assets/95fb03a4-5a7b-4e8f-8b03-ee45b0e18633\">","sha":"d20c579304b5fd212971bd9ef80cfbbda0932d94"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195397","number":195397,"mergeCommit":{"message":"[SecuritySolution]
Allow custom sorting on integration cards (#195397)\n\nPart of
https://github.com/elastic/kibana/pull/193131\r\n\r\nIt shows the
customised cards without applying the default sorting under\r\nthe
`recommended` tab:\r\n\r\nAdded two optional props:\r\n1.
`calloutTopSpacerSize` - Props to decide the size of the spacer
above\r\ncallout. Security Solution uses this prop to customize the size
of the\r\nspacer\r\n2. `sortByFeaturedIntegrations` - Customizing
whether to sort by the\r\ndefault featured integrations' categories.
Security Solution has `custom\r\nsorting logic`\r\n\r\nFeatured
cards:\r\n\r\n1. AWS\r\n3. GCP\r\n4. Azure\r\n5. Elastic Defend\r\n6.
CrowdStrike (to promote our extended protections/3rd party
EDR\r\nsupport)\r\n7. Wiz (or another cloud integration to promote
extended protections)\r\n8. Network Packet Capture\r\n9. Osquery
Manager\r\n10. ~**Cloud Asset Inventory (need to confirm that's
confirmed for\r\n8.16)** - Currently Not Found any integration
matched~\r\n\r\n<img width=\"1249\" alt=\"Screenshot 2024-10-08 at 13 31
12\"\r\nsrc=\"https://github.com/user-attachments/assets/95fb03a4-5a7b-4e8f-8b03-ee45b0e18633\">","sha":"d20c579304b5fd212971bd9ef80cfbbda0932d94"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <[email protected]>

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}