From b4cd9a63dda8963289fa3e353fe8113aebc72d9a Mon Sep 17 00:00:00 2001 From: John Schulz Date: Sat, 24 Apr 2021 13:15:38 -0400 Subject: [PATCH] [Fleet] Only override settings for badges; not all package icons (#98143) ## Summary fixes #97865 [[Fleet] Bug: Netscout icon breaks the alignment of the integrations page](https://github.com/elastic/kibana/issues/97865)
7.127.13-SNAPSHOTPR
Screen Shot 2021-04-23 at 9 48 04 AM Screen Shot 2021-04-23 at 9 49 19 AM Screen Shot 2021-04-23 at 9 57 04 AM
Reverts the overly broad changes icon changes from 77b3906b68e4cfcc9898c7d901eef86081cf0d53 and applies them to the only place they were intended -- badges: Screen Shot 2021-04-23 at 10 03 18 AM Screen Shot 2021-04-23 at 10 03 28 AM --- .../fleet/components/package_icon.tsx | 15 +---- .../agent_policy_package_badges.tsx | 13 +++- .../sections/epm/components/icon_panel.tsx | 62 ------------------- 3 files changed, 14 insertions(+), 76 deletions(-) delete mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx index e7fd1da394bb3..cb0b02527f756 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx @@ -14,18 +14,7 @@ import { usePackageIconType } from '../hooks'; export const PackageIcon: React.FunctionComponent< UsePackageIconType & Omit -> = ({ size = 's', packageName, version, icons, tryApi, ...euiIconProps }) => { +> = ({ packageName, version, icons, tryApi, ...euiIconProps }) => { const iconType = usePackageIconType({ packageName, version, icons, tryApi }); - return ( - - // this collides with some EuiText (+img) CSS from the EuiIcon component - // which makes the button large, wide, and poorly layed out - // override those styles until the bug is fixed or we find a better approach - style={{ margin: 'unset', width: 'unset' }} - size={size} - type={iconType} - {...euiIconProps} - /> - ); + return ; }; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx index dcc87b0032d77..cff0dc55515c4 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx @@ -71,7 +71,18 @@ export const AgentPolicyPackageBadges: React.FunctionComponent = ({ - + + // this collides with some EuiText (+img) CSS from the EuiIcon component + // which makes the button large, wide, and poorly layed out + // override those styles until the bug is fixed or we find a better approach + { margin: 'unset', width: '16px' } + } + /> {pkg.title} diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx deleted file mode 100644 index 63c6897021f4e..0000000000000 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; -import styled from 'styled-components'; -import { EuiIcon, EuiPanel } from '@elastic/eui'; - -import type { UsePackageIconType } from '../../../hooks'; -import { usePackageIconType } from '../../../hooks'; -import { Loading } from '../../../components'; - -const PanelWrapper = styled.div` - // NOTE: changes to the width here will impact navigation tabs page layout under integration package details - width: ${(props) => - parseFloat(props.theme.eui.euiSize) * 6 + parseFloat(props.theme.eui.euiSizeXL) * 2}px; - height: 1px; - z-index: 1; -`; - -const Panel = styled(EuiPanel)` - padding: ${(props) => props.theme.eui.spacerSizes.xl}; - margin-bottom: -100%; - svg, - img { - height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px; - width: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px; - } - .euiFlexItem { - height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px; - justify-content: center; - } -`; - -export function IconPanel({ - packageName, - version, - icons, -}: Pick) { - const iconType = usePackageIconType({ packageName, version, icons }); - - return ( - - - - - - ); -} - -export function LoadingIconPanel() { - return ( - - - - - - ); -}