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

Part of https://github.com/elastic/kibana/pull/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://github.com/user-attachments/assets/95fb03a4-5a7b-4e8f-8b03-ee45b0e18633">
This commit is contained in:
Angela Chuang 2024-10-08 15:22:09 +01:00 committed by GitHub
parent 8281517ef5
commit d20c579304
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 5 deletions

View file

@ -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) {

View file

@ -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}