EPM detail page now uses same icon as list page.

Export the hook used by PackageIcon component. Removed HTTP API call. `icons` comes from the API, so we don't want to call the API again.
elastic · Mar 31, 2020 · 7eeacc9 · 7eeacc9
1 parent c8b7b55
commit 7eeacc9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx
@@ -7,9 +7,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { ICON_TYPES, EuiIcon, EuiIconProps } from '@elastic/eui';
 import { PackageInfo, PackageListItem } from '../../../../common/types/models';
 import { useLinks } from '../sections/epm/hooks';
-import { epmRouteService } from '../../../../common/services';
-import { sendRequest } from '../hooks/use_request';
-import { GetInfoResponse } from '../types';
 type Package = PackageInfo | PackageListItem;
 
 const CACHED_ICONS = new Map<string, string>();
@@ -19,14 +16,25 @@ export const PackageIcon: React.FunctionComponent<{
   version?: string;
   icons?: Package['icons'];
 } & Omit<EuiIconProps, 'type'>> = ({ packageName, version, icons, ...euiIconProps }) => {
-  const iconType = usePackageIcon(packageName, version, icons);
+  const iconType = usePackageIconType({ packageName, version, icons });
   return <EuiIcon size="s" type={iconType} {...euiIconProps} />;
 };
 
-const usePackageIcon = (packageName: string, version?: string, icons?: Package['icons']) => {
+interface UsePackageIconType {
+  packageName: string;
+  version?: string;
+  icons?: Package['icons'];
+}
+
+export const usePackageIconType = ({
+  packageName = '',
+  version = '',
+  icons = [],
+}: UsePackageIconType) => {
   const { toImage } = useLinks();
   const [iconType, setIconType] = useState<string>(''); // FIXME: use `empty` icon during initialization - see: https://github.com/elastic/kibana/issues/60622
-  const pkgKey = `${packageName}-${version ?? ''}`;
+  const pkgKey = `${packageName}-${version}`;
+  const defaultType = 'package';
 
   // Generates an icon path or Eui Icon name based on an icon list from the package
   // or by using the package name against logo icons from Eui
@@ -47,8 +55,8 @@ const usePackageIcon = (packageName: string, version?: string, icons?: Package['
         return;
       }
 
-      CACHED_ICONS.set(pkgKey, 'package');
-      setIconType('package');
+      CACHED_ICONS.set(pkgKey, defaultType);
+      setIconType(defaultType);
     };
   }, [packageName, pkgKey, toImage]);
 
@@ -59,22 +67,10 @@ const usePackageIcon = (packageName: string, version?: string, icons?: Package['
     }
 
     // Use API to see if package has icons defined
-    if (!icons && version !== undefined) {
-      fromPackageInfo(pkgKey)
-        .catch(() => undefined) // ignore API errors
-        .then(fromInput);
-    } else {
+    if (icons) {
       fromInput(icons);
     }
   }, [icons, toImage, packageName, version, fromInput, pkgKey]);
 
   return iconType;
 };
-
-const fromPackageInfo = async (pkgKey: string) => {
-  const { data } = await sendRequest<GetInfoResponse>({
-    path: epmRouteService.getInfoPath(pkgKey),
-    method: 'get',
-  });
-  return data?.response?.icons;
-};
diff --git a/.../ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx b/.../ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx
@@ -16,7 +16,8 @@ export function IconPanel({ iconType }: { iconType: IconType }) {
       text-align: center;
       vertical-align: middle;
       padding: ${props => props.theme.eui.spacerSizes.xl};
-      svg {
+      svg,
+      img {
         height: ${props => props.theme.eui.euiKeyPadMenuSize};
         width: ${props => props.theme.eui.euiKeyPadMenuSize};
       }

diff --git a/...s/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx b/...s/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiPage, EuiPageBody, EuiPageProps, ICON_TYPES } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageProps } from '@elastic/eui';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
@@ -12,6 +12,7 @@ import { PackageInfo } from '../../../../types';
 import { useSetPackageInstallStatus } from '../../hooks';
 import { Content } from './content';
 import { Header } from './header';
+import { usePackageIconType } from '../../../../components/package_icon';
 import { sendGetPackageInfoByKey } from '../../../../hooks';
 
 export const DEFAULT_PANEL: DetailViewPanelName = 'overview';
@@ -62,8 +63,8 @@ const FullWidthContent = styled(EuiPage)`
 
 type LayoutProps = PackageInfo & Pick<DetailParams, 'panel'> & Pick<EuiPageProps, 'restrictWidth'>;
 export function DetailLayout(props: LayoutProps) {
-  const { name, restrictWidth } = props;
-  const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);
+  const { name: packageName, version, icons, restrictWidth } = props;
+  const iconType = usePackageIconType({ packageName, version, icons });
 
   return (
     <Fragment>