[fleet][unified integrations] Fix flaky test (#114202)

src/plugins/custom_integrations/public/components/replacement_card/replacement_card.component.tsx

@@ -62,8 +62,8 @@ export const ReplacementCard = ({ replacements }: Props) => {
     return null;
   }
 
-  const buttons = replacements.map((replacement) => (
-    <EuiFlexItem grow={false}>
+  const buttons = replacements.map((replacement, index) => (
+    <EuiFlexItem grow={false} key={`button-${index}`}>
       <span>
         <EuiButton
           key={replacement.id}
@@ -91,7 +91,7 @@ export const ReplacementCard = ({ replacements }: Props) => {
       <EuiAccordion id={idGenerator()} buttonContent={alsoAvailable} paddingSize="none">
         <EuiPanel color="subdued" hasShadow={false} paddingSize="m">
           <EuiFlexGroup direction="column" gutterSize="m">
-            <EuiFlexItem>
+            <EuiFlexItem key="message">
               <EuiText size="s">
                 <FormattedMessage
                   id="customIntegrations.components.replacementAccordion.recommendationDescription"
@@ -103,7 +103,7 @@ export const ReplacementCard = ({ replacements }: Props) => {
                 />
               </EuiText>
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem key="buttons">
               <EuiFlexGroup direction="column" gutterSize="m">
                 {buttons}
               </EuiFlexGroup>

src/plugins/custom_integrations/public/services/stub/platform.ts

@@ -22,5 +22,5 @@ export type CustomIntegrationsPlatformServiceFactory =
  */
 export const platformServiceFactory: CustomIntegrationsPlatformServiceFactory = () => ({
   getBasePath: () => '/basePath',
-  getAbsolutePath: (path: string): string => `/basePath${path}`,
+  getAbsolutePath: (path: string): string => `https://example.com/basePath${path}`,
 });

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

@@ -9,12 +9,6 @@ import React from 'react';
 
 import { action } from '@storybook/addon-actions';
 
-import type { SavedObject } from 'src/core/public';
-
-import type { Installation } from '../../../../../../common';
-
-import type { IntegrationCardItem } from '../../../../../../common';
-
 import type { ListProps } from './package_list_grid';
 import { PackageListGrid } from './package_list_grid';
 
@@ -31,24 +25,6 @@ const args: Args = {
   showMissingIntegrationMessage: false,
 };
 
-const savedObject: SavedObject<Installation> = {
-  id: 'id',
-  type: 'integration',
-  attributes: {
-    name: 'savedObject',
-    version: '1.2.3',
-    install_version: '1.2.3',
-    es_index_patterns: {},
-    installed_kibana: [],
-    installed_es: [],
-    install_status: 'installed',
-    install_source: 'registry',
-    install_started_at: '2020-01-01T00:00:00.000Z',
-    keep_policies_up_to_date: false,
-  },
-  references: [],
-};
-
 export const EmptyList = (props: Args) => (
   <PackageListGrid
     list={[]}
@@ -60,88 +36,74 @@ export const EmptyList = (props: Args) => (
 
 export const List = (props: Args) => (
   <PackageListGrid
-    list={
-      [
-        {
-          title: 'Package One',
-          description: 'Not Installed Description',
-          name: 'beats',
-          release: 'ga',
-          id: 'package_one',
-          version: '1.0.0',
-          uiInternalPath: '/',
-          path: 'path',
-          status: 'not_installed',
-        },
-        {
-          title: 'Package Two',
-          description: 'Not Installed Description',
-          name: 'aws',
-          release: 'beta',
-          id: 'package_two',
-          version: '1.0.0',
-          uiInternalPath: '/',
-          path: 'path',
-          status: 'not_installed',
-        },
-        {
-          title: 'Package Three',
-          description: 'Not Installed Description',
-          name: 'azure',
-          release: 'experimental',
-          id: 'package_three',
-          version: '1.0.0',
-          uiInternalPath: '/',
-          path: 'path',
-          status: 'not_installed',
-        },
-        {
-          title: 'Package Four',
-          description: 'Installed Description',
-          name: 'elastic',
-          release: 'ga',
-          id: 'package_four',
-          version: '1.0.0',
-          uiInternalPath: '/',
-          path: 'path',
-          status: 'installed',
-          savedObject: {
-            ...savedObject,
-            id: 'package_four',
-          },
-        },
-        {
-          title: 'Package Five',
-          description: 'Installed Description',
-          name: 'unknown',
-          release: 'beta',
-          id: 'package_five',
-          version: '1.0.0',
-          uiInternalPath: '/',
-          path: 'path',
-          status: 'installed',
-          savedObject: {
-            ...savedObject,
-            id: 'package_five',
-          },
-        },
-        {
-          title: 'Package Six',
-          description: 'Installed Description',
-          name: 'kibana',
-          release: 'experimental',
-          id: 'package_six',
-          version: '1.0.0',
-          uiInternalPath: '/',
-          path: 'path',
-          status: 'installed',
-          savedObject: {
-            ...savedObject,
-            id: 'package_six',
-          },
-        },
-      ] as unknown as IntegrationCardItem[]
-    }
+    list={[
+      {
+        title: 'Package One',
+        description: 'Not Installed Description',
+        name: 'beats',
+        release: 'ga',
+        id: 'package_one',
+        version: '1.0.0',
+        url: 'https://example.com',
+        icons: [],
+        integration: 'integation',
+      },
+      {
+        title: 'Package Two',
+        description: 'Not Installed Description',
+        name: 'aws',
+        release: 'beta',
+        id: 'package_two',
+        version: '1.0.0',
+        url: 'https://example.com',
+        icons: [],
+        integration: 'integation',
+      },
+      {
+        title: 'Package Three',
+        description: 'Not Installed Description',
+        name: 'azure',
+        release: 'experimental',
+        id: 'package_three',
+        version: '1.0.0',
+        url: 'https://example.com',
+        icons: [],
+        integration: 'integation',
+      },
+      {
+        title: 'Package Four',
+        description: 'Installed Description',
+        name: 'elastic',
+        release: 'ga',
+        id: 'package_four',
+        version: '1.0.0',
+        url: 'https://example.com',
+        icons: [],
+        integration: 'integation',
+      },
+      {
+        title: 'Package Five',
+        description: 'Installed Description',
+        name: 'unknown',
+        release: 'beta',
+        id: 'package_five',
+        version: '1.0.0',
+        url: 'https://example.com',
+        icons: [],
+        integration: 'integation',
+      },
+      {
+        title: 'Package Six',
+        description: 'Installed Description',
+        name: 'kibana',
+        release: 'experimental',
+        id: 'package_six',
+        version: '1.0.0',
+        url: 'https://example.com',
+        icons: [],
+        integration: 'integation',
+      },
+    ]}
     onSearchChange={action('onSearchChange')}
     setSelectedCategory={action('setSelectedCategory')}
     {...props}

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx

@@ -18,9 +18,7 @@ import {
 } from '@elastic/eui';
 import type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 
-import styled, { useTheme } from 'styled-components';
-
-import type { EuiTheme } from '../../../../../../../../../../../src/plugins/kibana_react/common';
+import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
 
 import type {
   PackageInfo,
@@ -45,8 +43,24 @@ interface Props {
   packageInfo: PackageInfo;
 }
 
+const Replacements = euiStyled(EuiFlexItem)`
+  margin: 0;
+
+  & .euiAccordion {
+    padding-top: ${({ theme }) => parseInt(theme.eui.euiSizeL, 10) * 2}px;
+
+    &::before {
+      content: '';
+      display: block;
+      border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+      position: relative;
+      top: -${({ theme }) => theme.eui.euiSizeL};
+      margin: 0 ${({ theme }) => theme.eui.euiSizeXS};
+    }
+  }
+`;
+
 export const Details: React.FC<Props> = memo(({ packageInfo }) => {
-  const theme = useTheme() as EuiTheme;
   const { data: categoriesData, isLoading: isLoadingCategories } = useGetCategories();
   const packageCategories: string[] = useMemo(() => {
     if (!isLoadingCategories && categoriesData && categoriesData.response) {
@@ -175,23 +189,6 @@ export const Details: React.FC<Props> = memo(({ packageInfo }) => {
     toggleNoticeModal,
   ]);
 
-  const Replacements = styled(EuiFlexItem)`
-    margin: 0;
-
-    & .euiAccordion {
-      padding-top: ${parseInt(theme.eui.euiSizeL, 10) * 2}px;
-
-      &::before {
-        content: '';
-        display: block;
-        border-top: 1px solid ${theme.eui.euiColorLightShade};
-        position: relative;
-        top: -${theme.eui.euiSizeL};
-        margin: 0 ${theme.eui.euiSizeXS};
-      }
-    }
-  `;
-
   return (
     <>
       <EuiPortal>

x-pack/plugins/fleet/storybook/smoke.test.tsx

@@ -11,7 +11,7 @@ import { act } from 'react-dom/test-utils';
 import initStoryshots from '@storybook/addon-storyshots';
 
 // skipped: https://github.com/elastic/kibana/issues/113991
-describe.skip('Fleet Storybook Smoke', () => {
+describe('Fleet Storybook Smoke', () => {
   initStoryshots({
     configPath: __dirname,
     framework: 'react',