[Onboarding] Hide card labels in search results (#213417)

Closes https://github.com/elastic/kibana/issues/200917

Looking at the code in Fleet search results screen, cards would also
have the `Unverified` badges. ([this
check](https://github.com/elastic/kibana/blob/main/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/home/card_utils.tsx#L101)
would return `true` because this specific page doesn't provides
`packageVerificationKeyId` to the `isPackageUnverified()` function, this
only happens on the individual integration details page. Fleet search
just [hides the
badges](https://github.com/elastic/kibana/blob/main/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/home/available_packages.tsx#L188)
for cards in search results.

This change aligns Onboarding search results with Fleet search results
and hides the card labels which fixes the issue with `Unverified` badge
appearing for installed integrations.

| Before | After |
| --- | --- |
|
![388110694-bd6abaf4-15ac-4d56-b556-fddb11c85ba7](https://github.com/user-attachments/assets/751a6572-192c-45f6-bfa8-82433b73398d)
| ![CleanShot 2025-03-07 at 14 35
53@2x](https://github.com/user-attachments/assets/d1588d7d-eec8-4207-a1e6-9a53272bbddf)
|
This commit is contained in:
Mykola Harmash 2025-03-07 15:40:39 +01:00 committed by GitHub
parent 9a3d83415d
commit 33f71ae678
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 7 additions and 4 deletions

View file

@ -325,7 +325,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
</strong>
</EuiTitle>
<EuiSpacer size="m" />
<PackageList list={featuredCardsForCategory} />
<PackageList list={featuredCardsForCategory} showCardLabels={true} />
</div>
</div>

View file

@ -17,9 +17,10 @@ export const LazyPackageList = lazy(async () => ({
interface Props {
list: IntegrationCardItem[];
searchTerm?: string;
showCardLabels?: boolean;
}
export function PackageList({ list, searchTerm = '' }: Props) {
export function PackageList({ list, searchTerm = '', showCardLabels }: Props) {
return (
/**
* Suspense wrapper is required by PackageListGrid, but
@ -40,7 +41,7 @@ export function PackageList({ list, searchTerm = '' }: Props) {
categories={[]}
setUrlandReplaceHistory={() => {}}
setUrlandPushHistory={() => {}}
showCardLabels={true}
showCardLabels={showCardLabels}
/>
</Suspense>
);

View file

@ -77,7 +77,9 @@ const PackageListGridWrapper = ({
}}
query={searchQuery}
/>
{searchQuery !== '' && <PackageList list={list} searchTerm={searchQuery} />}
{searchQuery !== '' && (
<PackageList list={list} searchTerm={searchQuery} showCardLabels={false} />
)}
</div>
);
};