mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[Fleet] Move integration labels below title and normalise styling (#134360)
* move badges below integration title * normalise release badge styling
This commit is contained in:
Mark Hopkin
GitHub
parent
4eda70e383
commit
f45e09e58b
4 changed files with 84 additions and 57 deletions
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { EuiCard, EuiFlexItem, EuiBadge, EuiToolTip, EuiSpacer } from '@elastic/eui';
|
||||
import { EuiCard, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
|
||||
import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ import type { IntegrationCardItem } from '../../../../../../common/types/models/
|
|||
import { useStartServices } from '../../../hooks';
|
||||
import { INTEGRATIONS_BASE_PATH, INTEGRATIONS_PLUGIN_ID } from '../../../constants';
|
||||
|
||||
import { RELEASE_BADGE_DESCRIPTION, RELEASE_BADGE_LABEL } from './release_badge';
|
||||
import { CardReleaseBadge } from './release_badge';
|
||||
|
||||
export type PackageCardProps = IntegrationCardItem;
|
||||
|
||||
|
|
@ -46,9 +46,7 @@ export function PackageCard({
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiSpacer size="xs" />
|
||||
<span>
|
||||
<EuiToolTip display="inlineBlock" content={RELEASE_BADGE_DESCRIPTION[release]}>
|
||||
<EuiBadge color="hollow">{RELEASE_BADGE_LABEL[release]}</EuiBadge>
|
||||
</EuiToolTip>
|
||||
<CardReleaseBadge release={release} />
|
||||
</span>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,29 +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 { i18n } from '@kbn/i18n';
|
||||
|
||||
import type { RegistryRelease } from '../../../types';
|
||||
|
||||
export const RELEASE_BADGE_LABEL: { [key in Exclude<RegistryRelease, 'ga'>]: string } = {
|
||||
beta: i18n.translate('xpack.fleet.epm.releaseBadge.betaLabel', {
|
||||
defaultMessage: 'Beta',
|
||||
}),
|
||||
experimental: i18n.translate('xpack.fleet.epm.releaseBadge.experimentalLabel', {
|
||||
defaultMessage: 'Technical preview',
|
||||
}),
|
||||
};
|
||||
|
||||
export const RELEASE_BADGE_DESCRIPTION: { [key in Exclude<RegistryRelease, 'ga'>]: string } = {
|
||||
beta: i18n.translate('xpack.fleet.epm.releaseBadge.betaDescription', {
|
||||
defaultMessage: 'This integration is not recommended for use in production environments.',
|
||||
}),
|
||||
experimental: i18n.translate('xpack.fleet.epm.releaseBadge.experimentalDescription', {
|
||||
defaultMessage:
|
||||
'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
|
||||
}),
|
||||
};
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* 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 { EuiBadge, EuiToolTip } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import type { PackageInfo, RegistryRelease } from '../../../types';
|
||||
|
||||
const RELEASE_BADGE_LABEL: { [key in Exclude<RegistryRelease, 'ga'>]: string } = {
|
||||
beta: i18n.translate('xpack.fleet.epm.releaseBadge.betaLabel', {
|
||||
defaultMessage: 'Beta',
|
||||
}),
|
||||
experimental: i18n.translate('xpack.fleet.epm.releaseBadge.experimentalLabel', {
|
||||
defaultMessage: 'Technical preview',
|
||||
}),
|
||||
};
|
||||
|
||||
const RELEASE_BADGE_DESCRIPTION: { [key in Exclude<RegistryRelease, 'ga'>]: string } = {
|
||||
beta: i18n.translate('xpack.fleet.epm.releaseBadge.betaDescription', {
|
||||
defaultMessage: 'This integration is not recommended for use in production environments.',
|
||||
}),
|
||||
experimental: i18n.translate('xpack.fleet.epm.releaseBadge.experimentalDescription', {
|
||||
defaultMessage:
|
||||
'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
|
||||
}),
|
||||
};
|
||||
|
||||
export const HeaderReleaseBadge: React.FC<{ release: NonNullable<PackageInfo['release']> }> = ({
|
||||
release,
|
||||
}) => {
|
||||
if (release === 'ga') return null;
|
||||
|
||||
const releaseLabel = RELEASE_BADGE_LABEL[release];
|
||||
return (
|
||||
<EuiToolTip position="bottom" content={RELEASE_BADGE_DESCRIPTION[release]} title={releaseLabel}>
|
||||
<EuiBadge>{releaseLabel}</EuiBadge>
|
||||
</EuiToolTip>
|
||||
);
|
||||
};
|
||||
|
||||
export const CardReleaseBadge: React.FC<{ release: NonNullable<PackageInfo['release']> }> = ({
|
||||
release,
|
||||
}) => {
|
||||
if (release === 'ga') return null;
|
||||
|
||||
const releaseLabel = RELEASE_BADGE_LABEL[release];
|
||||
|
||||
return (
|
||||
<EuiToolTip
|
||||
display="inlineBlock"
|
||||
content={RELEASE_BADGE_DESCRIPTION[release]}
|
||||
title={releaseLabel}
|
||||
>
|
||||
<EuiBadge color="hollow">{releaseLabel}</EuiBadge>
|
||||
</EuiToolTip>
|
||||
);
|
||||
};
|
||||
|
|
@ -10,7 +10,6 @@ import { Redirect, Route, Switch, useLocation, useParams, useHistory } from 'rea
|
|||
import styled from 'styled-components';
|
||||
import {
|
||||
EuiBadge,
|
||||
EuiBetaBadge,
|
||||
EuiButtonEmpty,
|
||||
EuiCallOut,
|
||||
EuiDescriptionList,
|
||||
|
|
@ -45,11 +44,11 @@ import { InstallStatus } from '../../../../types';
|
|||
import { Error, Loading } from '../../../../components';
|
||||
import type { WithHeaderLayoutProps } from '../../../../layouts';
|
||||
import { WithHeaderLayout } from '../../../../layouts';
|
||||
import { RELEASE_BADGE_DESCRIPTION, RELEASE_BADGE_LABEL } from '../../components/release_badge';
|
||||
|
||||
import { HeaderReleaseBadge } from '../../components/release_badge';
|
||||
|
||||
import { useIsFirstTimeAgentUser } from './hooks';
|
||||
import { getInstallPkgRouteOptions } from './utils';
|
||||
|
||||
import {
|
||||
IntegrationAgentPolicyCount,
|
||||
UpdateIcon,
|
||||
|
|
@ -234,16 +233,16 @@ export function Detail() {
|
|||
/>
|
||||
)}
|
||||
</FlexItemWithMaxHeight>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="m">
|
||||
<FlexItemWithMinWidth grow={true}>
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
{/* Render space in place of package name while package info loads to prevent layout from jumping around */}
|
||||
<h1>{integrationInfo?.title || packageInfo?.title || '\u00A0'}</h1>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<FlexItemWithMinWidth grow={true}>
|
||||
<EuiFlexGroup direction="column" justifyContent="flexStart" gutterSize="xs">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
{/* Render space in place of package name while package info loads to prevent layout from jumping around */}
|
||||
<h1>{integrationInfo?.title || packageInfo?.title || '\u00A0'}</h1>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="xs">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="default">
|
||||
{i18n.translate('xpack.fleet.epm.elasticAgentBadgeLabel', {
|
||||
|
|
@ -251,18 +250,15 @@ export function Detail() {
|
|||
})}
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
{packageInfo?.release && packageInfo.release !== 'ga' ? (
|
||||
<EuiFlexItem grow={false}>
|
||||
<HeaderReleaseBadge release={packageInfo.release} />
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
</EuiFlexGroup>
|
||||
</FlexItemWithMinWidth>
|
||||
{packageInfo?.release && packageInfo.release !== 'ga' ? (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBetaBadge
|
||||
label={RELEASE_BADGE_LABEL[packageInfo.release]}
|
||||
tooltipContent={RELEASE_BADGE_DESCRIPTION[packageInfo.release]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</FlexItemWithMinWidth>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue