Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Integrations UI] Add updated integrations subtitle #102738

Merged
merged 3 commits into from
Jun 21, 2021
Merged

[Integrations UI] Add updated integrations subtitle #102738

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff8dbcd
Add updated integrations subtitle
kpollich Jun 21, 2021
fe2f2f3
Fix header image declarations
kpollich Jun 21, 2021
ec83c54
Use theme hook for dark mode setting
kpollich Jun 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 54 additions & 8 deletions x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,17 @@
* 2.0.
*/
import React, { memo } from 'react';
import { EuiText } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import { useLink } from '../../../hooks';
import { i18n } from '@kbn/i18n';

import styled from 'styled-components';

import { useLink, useStartServices } from '../../../hooks';
import type { Section } from '../sections';

import { HeroImage } from '../sections/epm/screens/home/header';
import { useLinks } from '../hooks';

import { WithHeaderLayout } from './';

Expand All @@ -20,18 +24,60 @@ interface Props {
children?: React.ReactNode;
}

const Illustration = styled(EuiImage)`
margin-bottom: -68px;
width: 80%;
`;

const HeroImage = memo(() => {
const { toAssets } = useLinks();
const { uiSettings } = useStartServices();
const IS_DARK_THEME = uiSettings.get('theme:darkMode');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering what is the best way to get that settings, you can also get it like this useTheme().darkMode

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I copied this component from the previous header.tsx file which was unused. I will update this to use the hook approach.


return (
<Illustration
alt={i18n.translate('xpack.fleet.epm.illustrationAltText', {
defaultMessage: 'Illustration of an integration',
})}
url={
IS_DARK_THEME
? toAssets('illustration_integrations_darkmode.svg')
: toAssets('illustration_integrations_lightmode.svg')
}
/>
);
});

export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, children }) => {
const { getHref } = useLink();

return (
<WithHeaderLayout
rightColumn={<HeroImage />}
leftColumn={
<EuiText>
<h1>
<FormattedMessage id="xpack.fleet.integrationsAppTitle" defaultMessage="Integrations" />{' '}
</h1>
</EuiText>
<EuiFlexGroup direction="column" gutterSize="none" justifyContent="center">
<EuiText>
<h1>
<FormattedMessage
id="xpack.fleet.integrationsAppTitle"
defaultMessage="Integrations"
/>
</h1>
</EuiText>

<EuiSpacer size="s" />

<EuiFlexItem grow={false}>
<EuiText size="m" color="subdued">
<p>
<FormattedMessage
id="xpack.fleet.epm.pageSubtitle"
defaultMessage="Collect data from popular apps and services."
/>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
tabs={[
{
Expand Down
62 changes: 0 additions & 62 deletions x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/header.tsx
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9064,7 +9064,6 @@
"xpack.fleet.epm.categoryLabel": "カテゴリー",
"xpack.fleet.epm.detailsTitle": "詳細",
"xpack.fleet.epm.featuresLabel": "機能",
"xpack.fleet.epm.illustrationAltText": "統合の例",
"xpack.fleet.epm.licenseLabel": "ライセンス",
"xpack.fleet.epm.loadingIntegrationErrorTitle": "統合詳細の読み込みエラー",
"xpack.fleet.epm.packageDetails.integrationList.agentCount": "エージェント",
Expand All @@ -9079,7 +9078,6 @@
"xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText": "ポリシー",
"xpack.fleet.epm.packageDetailsNav.settingsLinkText": "設定",
"xpack.fleet.epm.pageSubtitle": "一般的なアプリやサービスの統合を参照する",
"xpack.fleet.epm.pageTitle": "統合",
"xpack.fleet.epm.releaseBadge.betaDescription": "この統合は本番環境用ではありません。",
"xpack.fleet.epm.releaseBadge.betaLabel": "ベータ",
"xpack.fleet.epm.releaseBadge.experimentalDescription": "この統合は、急に変更されたり、将来のリリースで削除されたりする可能性があります。",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9150,7 +9150,6 @@
"xpack.fleet.epm.categoryLabel": "类别",
"xpack.fleet.epm.detailsTitle": "详情",
"xpack.fleet.epm.featuresLabel": "功能",
"xpack.fleet.epm.illustrationAltText": "集成的图示",
"xpack.fleet.epm.licenseLabel": "许可证",
"xpack.fleet.epm.loadingIntegrationErrorTitle": "加载集成详情时出错",
"xpack.fleet.epm.packageDetails.integrationList.agentCount": "代理",
Expand All @@ -9165,7 +9164,6 @@
"xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText": "策略",
"xpack.fleet.epm.packageDetailsNav.settingsLinkText": "设置",
"xpack.fleet.epm.pageSubtitle": "浏览集成以了解热门应用和服务。",
"xpack.fleet.epm.pageTitle": "集成",
"xpack.fleet.epm.releaseBadge.betaDescription": "在生产环境中不推荐使用此集成。",
"xpack.fleet.epm.releaseBadge.betaLabel": "公测版",
"xpack.fleet.epm.releaseBadge.experimentalDescription": "此集成可能有重大更改或将在未来版本中移除。",
Expand Down