Skip to content

Commit 9b9c47b

Browse files
jloleysenskibanamachine
jloleysens
and
kibanamachine
authored
[Fleet] Fix double policy header layout (#103076)
* Fix double policy header layout - Use the default page title without tabs while loading the add integration view * remove unused import Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent 7a3d61f commit 9b9c47b

File tree

5 files changed

+75
-41
lines changed

5 files changed

+75
-41
lines changed

‎x-pack/plugins/fleet/public/applications/fleet/app.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
* 2.0.
66
*/
77

8+
import type { FunctionComponent } from 'react';
89
import React, { memo, useEffect, useState } from 'react';
910
import type { AppMountParameters } from 'kibana/public';
1011
import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel, EuiPortal } from '@elastic/eui';
1112
import type { History } from 'history';
1213
import { createHashHistory } from 'history';
13-
import { Router, Redirect, Route, Switch } from 'react-router-dom';
14+
import { Router, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
1415
import { FormattedMessage } from '@kbn/i18n/react';
1516
import { i18n } from '@kbn/i18n';
1617
import styled from 'styled-components';
@@ -39,7 +40,7 @@ import { Error, Loading, SettingFlyout, FleetSetupLoading } from './components';
3940
import type { UIExtensionsStorage } from './types';
4041

4142
import { FLEET_ROUTING_PATHS } from './constants';
42-
import { DefaultLayout, WithoutHeaderLayout } from './layouts';
43+
import { DefaultLayout, DefaultPageTitle, WithoutHeaderLayout, WithHeaderLayout } from './layouts';
4344
import { AgentPolicyApp } from './sections/agent_policy';
4445
import { DataStreamApp } from './sections/data_stream';
4546
import { AgentsApp } from './sections/agents';
@@ -48,11 +49,18 @@ import { EnrollmentTokenListPage } from './sections/agents/enrollment_token_list
4849

4950
const FEEDBACK_URL = 'https://ela.st/fleet-feedback';
5051

51-
const ErrorLayout = ({ children }: { children: JSX.Element }) => (
52+
const ErrorLayout: FunctionComponent<{ isAddIntegrationsPath: boolean }> = ({
53+
isAddIntegrationsPath,
54+
children,
55+
}) => (
5256
<EuiErrorBoundary>
53-
<DefaultLayout>
54-
<WithoutHeaderLayout>{children}</WithoutHeaderLayout>
55-
</DefaultLayout>
57+
{isAddIntegrationsPath ? (
58+
<WithHeaderLayout leftColumn={<DefaultPageTitle />}>{children}</WithHeaderLayout>
59+
) : (
60+
<DefaultLayout>
61+
<WithoutHeaderLayout>{children}</WithoutHeaderLayout>
62+
</DefaultLayout>
63+
)}
5664
</EuiErrorBoundary>
5765
);
5866

@@ -71,6 +79,8 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
7179
const [isInitialized, setIsInitialized] = useState(false);
7280
const [initializationError, setInitializationError] = useState<Error | null>(null);
7381

82+
const isAddIntegrationsPath = !!useRouteMatch(FLEET_ROUTING_PATHS.add_integration_to_policy);
83+
7484
useEffect(() => {
7585
(async () => {
7686
setIsPermissionsLoading(false);
@@ -109,7 +119,7 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
109119

110120
if (isPermissionsLoading || permissionsError) {
111121
return (
112-
<ErrorLayout>
122+
<ErrorLayout isAddIntegrationsPath={isAddIntegrationsPath}>
113123
{isPermissionsLoading ? (
114124
<Loading />
115125
) : permissionsError === 'REQUEST_ERROR' ? (
@@ -168,7 +178,7 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
168178

169179
if (!isInitialized || initializationError) {
170180
return (
171-
<ErrorLayout>
181+
<ErrorLayout isAddIntegrationsPath={isAddIntegrationsPath}>
172182
{initializationError ? (
173183
<Error
174184
title={
@@ -314,9 +324,7 @@ export const AppRoutes = memo(
314324

315325
{/* TODO: Move this route to the Integrations app */}
316326
<Route path={FLEET_ROUTING_PATHS.add_integration_to_policy}>
317-
<DefaultLayout>
318-
<CreatePackagePolicyPage />
319-
</DefaultLayout>
327+
<CreatePackagePolicyPage />
320328
</Route>
321329

322330
<Redirect to={FLEET_ROUTING_PATHS.agents} />

‎x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx‎ renamed to ‎x-pack/plugins/fleet/public/applications/fleet/layouts/default/default.tsx‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
*/
77

88
import React from 'react';
9-
import { EuiText, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
109
import { FormattedMessage } from '@kbn/i18n/react';
1110

12-
import type { Section } from '../sections';
13-
import { useLink, useConfig } from '../hooks';
14-
import { WithHeaderLayout } from '../../../layouts';
11+
import type { Section } from '../../sections';
12+
import { useLink, useConfig } from '../../hooks';
13+
import { WithHeaderLayout } from '../../../../layouts';
14+
15+
import { DefaultPageTitle } from './default_page_title';
1516

1617
interface Props {
1718
section?: Section;
@@ -24,31 +25,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({ section, childre
2425

2526
return (
2627
<WithHeaderLayout
27-
leftColumn={
28-
<EuiFlexGroup direction="column" gutterSize="m">
29-
<EuiFlexItem>
30-
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
31-
<EuiFlexItem grow={false}>
32-
<EuiTitle size="l">
33-
<h1>
34-
<FormattedMessage id="xpack.fleet.overviewPageTitle" defaultMessage="Fleet" />
35-
</h1>
36-
</EuiTitle>
37-
</EuiFlexItem>
38-
</EuiFlexGroup>
39-
</EuiFlexItem>
40-
<EuiFlexItem>
41-
<EuiText color="subdued">
42-
<p>
43-
<FormattedMessage
44-
id="xpack.fleet.overviewPageSubtitle"
45-
defaultMessage="Centralized management for Elastic Agents"
46-
/>
47-
</p>
48-
</EuiText>
49-
</EuiFlexItem>
50-
</EuiFlexGroup>
51-
}
28+
leftColumn={<DefaultPageTitle />}
5229
tabs={[
5330
{
5431
name: (

‎x-pack/plugins/fleet/public/applications/fleet/layouts/default/default_page_title.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import type { FunctionComponent } from 'react';
9+
import React from 'react';
10+
11+
import { FormattedMessage } from '@kbn/i18n/react';
12+
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
13+
14+
export const DefaultPageTitle: FunctionComponent = () => {
15+
return (
16+
<EuiFlexGroup direction="column" gutterSize="m">
17+
<EuiFlexItem>
18+
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
19+
<EuiFlexItem grow={false}>
20+
<EuiTitle size="l">
21+
<h1>
22+
<FormattedMessage id="xpack.fleet.overviewPageTitle" defaultMessage="Fleet" />
23+
</h1>
24+
</EuiTitle>
25+
</EuiFlexItem>
26+
</EuiFlexGroup>
27+
</EuiFlexItem>
28+
<EuiFlexItem>
29+
<EuiText color="subdued">
30+
<p>
31+
<FormattedMessage
32+
id="xpack.fleet.overviewPageSubtitle"
33+
defaultMessage="Centralized management for Elastic Agents"
34+
/>
35+
</p>
36+
</EuiText>
37+
</EuiFlexItem>
38+
</EuiFlexGroup>
39+
);
40+
};

‎x-pack/plugins/fleet/public/applications/fleet/layouts/default/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
export { DefaultLayout } from './default';
9+
export { DefaultPageTitle } from './default_page_title';

‎x-pack/plugins/fleet/public/applications/fleet/layouts/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77

88
export * from '../../../layouts';
99

10-
export { DefaultLayout } from './default';
10+
export { DefaultLayout, DefaultPageTitle } from './default';

0 commit comments

Comments
 (0)