From 7eeacc92528656806c26a489136a3b58ccc968de Mon Sep 17 00:00:00 2001 From: John Schulz Date: Tue, 31 Mar 2020 16:25:47 -0400 Subject: [PATCH] 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. --- .../components/package_icon.tsx | 38 +++++++++---------- .../sections/epm/components/icon_panel.tsx | 3 +- .../sections/epm/screens/detail/index.tsx | 7 ++-- 3 files changed, 23 insertions(+), 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 index c5a0e600b7d50..b758a4e7d8eb5 100644 --- 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(); @@ -19,14 +16,25 @@ export const PackageIcon: React.FunctionComponent<{ version?: string; icons?: Package['icons']; } & Omit> = ({ packageName, version, icons, ...euiIconProps }) => { - const iconType = usePackageIcon(packageName, version, icons); + const iconType = usePackageIconType({ packageName, version, icons }); return ; }; -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(''); // 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({ - path: epmRouteService.getInfoPath(pkgKey), - method: 'get', - }); - return data?.response?.icons; -}; diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx index 7ce386ed56f5f..684b158b5da86 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/icon_panel.tsx +++ b/x-pack/plugins/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/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx index 4bc90c6a0f8fd..7b29bb0232d67 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx +++ b/x-pack/plugins/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 & Pick; 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 (