diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
index c4cc4d92f5d95c..8be6232733defc 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -5,12 +5,13 @@
* 2.0.
*/
+import type { FunctionComponent } from 'react';
import React, { memo, useEffect, useState } from 'react';
import type { AppMountParameters } from 'kibana/public';
import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel, EuiPortal } from '@elastic/eui';
import type { History } from 'history';
import { createHashHistory } from 'history';
-import { Router, Redirect, Route, Switch } from 'react-router-dom';
+import { Router, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
@@ -39,7 +40,7 @@ import { Error, Loading, SettingFlyout, FleetSetupLoading } from './components';
import type { UIExtensionsStorage } from './types';
import { FLEET_ROUTING_PATHS } from './constants';
-import { DefaultLayout, WithoutHeaderLayout } from './layouts';
+import { DefaultLayout, DefaultPageTitle, WithoutHeaderLayout, WithHeaderLayout } from './layouts';
import { AgentPolicyApp } from './sections/agent_policy';
import { DataStreamApp } from './sections/data_stream';
import { AgentsApp } from './sections/agents';
@@ -48,11 +49,18 @@ import { EnrollmentTokenListPage } from './sections/agents/enrollment_token_list
const FEEDBACK_URL = 'https://ela.st/fleet-feedback';
-const ErrorLayout = ({ children }: { children: JSX.Element }) => (
+const ErrorLayout: FunctionComponent<{ isAddIntegrationsPath: boolean }> = ({
+ isAddIntegrationsPath,
+ children,
+}) => (
-
- {children}
-
+ {isAddIntegrationsPath ? (
+ }>{children}
+ ) : (
+
+ {children}
+
+ )}
);
@@ -71,6 +79,8 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
const [isInitialized, setIsInitialized] = useState(false);
const [initializationError, setInitializationError] = useState(null);
+ const isAddIntegrationsPath = !!useRouteMatch(FLEET_ROUTING_PATHS.add_integration_to_policy);
+
useEffect(() => {
(async () => {
setIsPermissionsLoading(false);
@@ -109,7 +119,7 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
if (isPermissionsLoading || permissionsError) {
return (
-
+
{isPermissionsLoading ? (
) : permissionsError === 'REQUEST_ERROR' ? (
@@ -168,7 +178,7 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
if (!isInitialized || initializationError) {
return (
-
+
{initializationError ? (
-
-
-
+
diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/fleet/layouts/default/default.tsx
similarity index 65%
rename from x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
rename to x-pack/plugins/fleet/public/applications/fleet/layouts/default/default.tsx
index f312ff374d792c..c6ef212b3995eb 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/default/default.tsx
@@ -6,12 +6,13 @@
*/
import React from 'react';
-import { EuiText, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
-import type { Section } from '../sections';
-import { useLink, useConfig } from '../hooks';
-import { WithHeaderLayout } from '../../../layouts';
+import type { Section } from '../../sections';
+import { useLink, useConfig } from '../../hooks';
+import { WithHeaderLayout } from '../../../../layouts';
+
+import { DefaultPageTitle } from './default_page_title';
interface Props {
section?: Section;
@@ -24,31 +25,7 @@ export const DefaultLayout: React.FunctionComponent = ({ section, childre
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
+ leftColumn={}
tabs={[
{
name: (
diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/default/default_page_title.tsx b/x-pack/plugins/fleet/public/applications/fleet/layouts/default/default_page_title.tsx
new file mode 100644
index 00000000000000..e525a059b78372
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/default/default_page_title.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 type { FunctionComponent } from 'react';
+import React from 'react';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
+
+export const DefaultPageTitle: FunctionComponent = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/default/index.ts b/x-pack/plugins/fleet/public/applications/fleet/layouts/default/index.ts
new file mode 100644
index 00000000000000..9b0d3ee06138f1
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/default/index.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { DefaultLayout } from './default';
+export { DefaultPageTitle } from './default_page_title';
diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/layouts/index.tsx
index 71cb8d3aeeb369..0c07f1ffecb792 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/layouts/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/index.tsx
@@ -7,4 +7,4 @@
export * from '../../../layouts';
-export { DefaultLayout } from './default';
+export { DefaultLayout, DefaultPageTitle } from './default';