Refactor to use new top-level PackageIcon component (#60628) (#60671)

- removes PackageIcon from EPM section
- refactors code to use new top-level `PackageIcon` component

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx

@@ -25,7 +25,7 @@ export const PackageIcon: React.FunctionComponent<{
 
 const usePackageIcon = (packageName: string, version?: string, icons?: Package['icons']) => {
   const { toImage } = useLinks();
-  const [iconType, setIconType] = useState<string>('');
+  const [iconType, setIconType] = useState<string>(''); // FIXME: use `empty` icon during initialization - see: https://github.com/elastic/kibana/issues/60622
   const pkgKey = `${packageName}-${version ?? ''}`;
 
   // Generates an icon path or Eui Icon name based on an icon list from the package

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx

@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { WithHeaderLayout } from '../../../../layouts';
 import { AgentConfig, PackageInfo } from '../../../../types';
-import { PackageIcon } from '../../../epm/components';
+import { PackageIcon } from '../../../../components/package_icon';
 import { CreateDatasourceFrom, CreateDatasourceStep } from '../types';
 import { CreateDatasourceStepsNavigation } from './navigation';
 
@@ -94,7 +94,12 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
                     <EuiDescriptionListDescription>
                       <EuiFlexGroup alignItems="center" gutterSize="s">
                         <EuiFlexItem grow={false}>
-                          <PackageIcon packageName={packageInfo?.name || ''} size="m" />
+                          <PackageIcon
+                            packageName={packageInfo?.name || ''}
+                            version={packageInfo?.version || ''}
+                            icons={packageInfo?.icons}
+                            size="m"
+                          />
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           {packageInfo?.title || packageInfo?.name || '-'}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_select_package.tsx

@@ -18,7 +18,7 @@ import {
 import { Error } from '../../../components';
 import { AgentConfig, PackageInfo } from '../../../types';
 import { useGetOneAgentConfig, useGetPackages, sendGetPackageInfoByKey } from '../../../hooks';
-import { PackageIcon } from '../../epm/components';
+import { PackageIcon } from '../../../components/package_icon';
 
 export const StepSelectPackage: React.FunctionComponent<{
   agentConfigId: string;
@@ -125,12 +125,12 @@ export const StepSelectPackage: React.FunctionComponent<{
           allowExclusions={false}
           singleSelection={true}
           isLoading={isPackagesLoading}
-          options={packages.map(({ title, name, version }) => {
+          options={packages.map(({ title, name, version, icons }) => {
             const pkgkey = `${name}-${version}`;
             return {
               label: title || name,
               key: pkgkey,
-              prepend: <PackageIcon packageName={name} size="m" />,
+              prepend: <PackageIcon packageName={name} version={version} icons={icons} size="m" />,
               checked: selectedPkgKey === pkgkey ? 'on' : undefined,
             };
           })}

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts

@@ -3,5 +3,3 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-export { PackageIcon } from './package_icon';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import { EuiCard } from '@elastic/eui';
 import { PackageInfo, PackageListItem } from '../../../types';
 import { useLinks } from '../hooks';
-import { PackageIcon } from './package_icon';
+import { PackageIcon } from '../../../components/package_icon';
 
 export interface BadgeProps {
   showInstalledBadge?: boolean;
@@ -40,7 +40,7 @@ export function PackageCard({
       layout="horizontal"
       title={title || ''}
       description={description}
-      icon={<PackageIcon icons={icons} packageName={name} size="l" />}
+      icon={<PackageIcon icons={icons} packageName={name} version={version} size="l" />}
       href={url}
     />
   );