github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Fleet] Only override settings for badges; not all package icons (#98143)

Browse source 
## Summary

fixes #97865 [[Fleet] Bug: Netscout icon breaks the alignment of the integrations page](https://github.com/elastic/kibana/issues/97865) 

<table>
<thead><td>7.12</td><td>7.13-SNAPSHOT</td><td>PR</td>
<tr><td>
<img width="245" alt="Screen Shot 2021-04-23 at 9 48 04 AM" src="https://user-images.githubusercontent.com/57655/115881135-6fb1e800-a419-11eb-9791-58ccc5d2b58b.png">
</td>
<td><img width="300" alt="Screen Shot 2021-04-23 at 9 49 19 AM" src="https://user-images.githubusercontent.com/57655/115881137-6fb1e800-a419-11eb-8cc1-c90caf2e1f94.png">
</td>
<td>
<img width="251" alt="Screen Shot 2021-04-23 at 9 57 04 AM" src="https://user-images.githubusercontent.com/57655/115882009-53627b00-a41a-11eb-81d8-0f61cb0ae607.png">
</td>
</tr>
</table>

Reverts the overly broad changes icon changes from 77b3906b68 and applies them to the only place they were intended -- badges:

<img width="1123" alt="Screen Shot 2021-04-23 at 10 03 18 AM" src="https://user-images.githubusercontent.com/57655/115882898-38443b00-a41b-11eb-886c-f29e2eae2423.png">
<img width="391" alt="Screen Shot 2021-04-23 at 10 03 28 AM" src="https://user-images.githubusercontent.com/57655/115882899-38443b00-a41b-11eb-95d2-dcc18cafb3cc.png">
This commit is contained in:
John Schulz 2021-04-24 13:15:38 -04:00 • committed by GitHub
parent 6fbc39d722
commit b4cd9a63dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

15
x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx
View file

@ -14,18 +14,7 @@ import { usePackageIconType } from '../hooks';
export const PackageIcon: React.FunctionComponent<
UsePackageIconType & Omit<EuiIconProps, 'type'>
> = ({ size = 's', packageName, version, icons, tryApi, ...euiIconProps }) => {
> = ({ packageName, version, icons, tryApi, ...euiIconProps }) => {
const iconType = usePackageIconType({ packageName, version, icons, tryApi });
return (
<EuiIcon
// when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
// 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 <EuiIcon size="s" type={iconType} {...euiIconProps} />;
};

13
x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx
View file

@ -71,7 +71,18 @@ export const AgentPolicyPackageBadges: React.FunctionComponent<Props> = ({
<EuiBadge key={idx} color="hollow">
<EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
<EuiFlexItem grow={false}>
<PackageIcon packageName={pkg.name} version={pkg.version} size="s" tryApi={true} />
<PackageIcon
packageName={pkg.name}
version={pkg.version}
tryApi={true}
style={
// when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
// 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' }
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>{pkg.title}</EuiFlexItem>
</EuiFlexGroup>

62
x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/icon_panel.tsx
View file

@ -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<UsePackageIconType, 'packageName' | 'version' | 'icons'>) {
const iconType = usePackageIconType({ packageName, version, icons });
return (
<PanelWrapper>
<Panel>
<EuiIcon type={iconType} size="original" />
</Panel>
</PanelWrapper>
);
}
export function LoadingIconPanel() {
return (
<PanelWrapper>
<Panel>
<Loading />
</Panel>
</PanelWrapper>
);
}