diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
index e165d742eda015..1398e121c68700 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -259,7 +259,7 @@ export const AppRoutes = memo(() => {
-
+
diff --git a/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx b/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx
index 051a1da1f5491a..0f7afd6d9f2c00 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx
@@ -17,17 +17,25 @@ interface AdditionalBreadcrumbOptions {
useIntegrationsBasePath: boolean;
}
-const BASE_BREADCRUMB: ChromeBreadcrumb = {
+type Breadcrumb = ChromeBreadcrumb & Partial;
+
+const BASE_BREADCRUMB: Breadcrumb = {
href: pagePathGetters.overview()[1],
text: i18n.translate('xpack.fleet.breadcrumbs.appTitle', {
defaultMessage: 'Fleet',
}),
};
+const INTEGRATIONS_BASE_BREADCRUMB: Breadcrumb = {
+ href: pagePathGetters.integrations()[1],
+ text: i18n.translate('xpack.integrations.breadcrumbs.appTitle', {
+ defaultMessage: 'Integrations',
+ }),
+ useIntegrationsBasePath: true,
+};
+
const breadcrumbGetters: {
- [key in Page]?: (
- values: DynamicPagePathValues
- ) => Array>;
+ [key in Page]?: (values: DynamicPagePathValues) => Breadcrumb[];
} = {
base: () => [BASE_BREADCRUMB],
overview: () => [
@@ -84,7 +92,7 @@ const breadcrumbGetters: {
},
],
add_integration_to_policy: ({ pkgTitle, pkgkey }) => [
- BASE_BREADCRUMB,
+ INTEGRATIONS_BASE_BREADCRUMB,
{
href: pagePathGetters.integration_details_overview({ pkgkey })[1],
text: pkgTitle,
diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
index 185e1216c7989f..49836e9ed4ca68 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
@@ -22,6 +22,7 @@ import { AlphaMessaging, SettingFlyout } from '../components';
import { useLink, useConfig, useUrlModal } from '../hooks';
interface Props {
+ showNav?: boolean;
showSettings?: boolean;
section?: Section;
children?: React.ReactNode;
@@ -54,6 +55,7 @@ const Nav = styled.nav`
`;
export const DefaultLayout: React.FunctionComponent = ({
+ showNav = true,
showSettings = true,
section,
children,
@@ -76,68 +78,70 @@ export const DefaultLayout: React.FunctionComponent = ({
-
+ {showSettings ? (
+
+
+
+
+
+ ) : null}
+
+
+
+
+ ) : null}
{children}
diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
index 45f766038678c3..dab369f330f456 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -220,13 +220,11 @@ export const IntegrationsAppContext: React.FC<{
export const AppRoutes = memo(() => {
return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
});
diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx
index ea8d31e8160daf..5c1745be0c9e48 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx
@@ -34,7 +34,7 @@ const breadcrumbGetters: {
BASE_BREADCRUMB,
{
text: i18n.translate('xpack.fleet.breadcrumbs.allIntegrationsPageTitle', {
- defaultMessage: 'All',
+ defaultMessage: 'Browse',
}),
},
],
@@ -42,7 +42,7 @@ const breadcrumbGetters: {
BASE_BREADCRUMB,
{
text: i18n.translate('xpack.fleet.breadcrumbs.installedIntegrationsPageTitle', {
- defaultMessage: 'Installed',
+ defaultMessage: 'Manage',
}),
},
],
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
index d23cff75e62fca..6c635d5d0c9c00 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
@@ -14,7 +14,7 @@ import { installationStatuses } from '../../../../../../../common/constants';
import { INTEGRATIONS_ROUTING_PATHS } from '../../../../constants';
import { useGetCategories, useGetPackages, useBreadcrumbs } from '../../../../hooks';
import { doesPackageHaveIntegrations } from '../../../../services';
-import { WithoutHeaderLayout } from '../../../../layouts';
+import { DefaultLayout } from '../../../../layouts';
import type { CategorySummaryItem, PackageList } from '../../../../types';
import { PackageListGrid } from '../../components/package_list_grid';
@@ -22,7 +22,7 @@ import { CategoryFacets } from './category_facets';
export const EPMHomePage: React.FC = memo(() => {
return (
-
+
@@ -31,7 +31,7 @@ export const EPMHomePage: React.FC = memo(() => {
-
+
);
});
diff --git a/x-pack/plugins/fleet/public/layouts/with_header.tsx b/x-pack/plugins/fleet/public/layouts/with_header.tsx
index bb561ab82acaa6..71f9b598c64288 100644
--- a/x-pack/plugins/fleet/public/layouts/with_header.tsx
+++ b/x-pack/plugins/fleet/public/layouts/with_header.tsx
@@ -5,13 +5,13 @@
* 2.0.
*/
-import React, { Fragment } from 'react';
+import React from 'react';
import { EuiPageBody, EuiSpacer } from '@elastic/eui';
import type { HeaderProps } from '../components';
import { Header } from '../components';
-import { Page, ContentWrapper } from './without_header';
+import { Page, ContentWrapper, Wrapper } from './without_header';
export interface WithHeaderLayoutProps extends HeaderProps {
restrictWidth?: number;
@@ -27,7 +27,7 @@ export const WithHeaderLayout: React.FC = ({
'data-test-subj': dataTestSubj,
...rest
}) => (
-
+
+
);
diff --git a/x-pack/plugins/fleet/public/layouts/without_header.tsx b/x-pack/plugins/fleet/public/layouts/without_header.tsx
index 0ee1637e301341..220ee592d7d07a 100644
--- a/x-pack/plugins/fleet/public/layouts/without_header.tsx
+++ b/x-pack/plugins/fleet/public/layouts/without_header.tsx
@@ -5,10 +5,14 @@
* 2.0.
*/
-import React, { Fragment } from 'react';
+import React from 'react';
import styled from 'styled-components';
import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
+export const Wrapper = styled.div`
+ background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
+`;
+
export const Page = styled(EuiPage)`
background: ${(props) => props.theme.eui.euiColorEmptyShade};
width: 100%;
@@ -27,7 +31,7 @@ interface Props {
}
export const WithoutHeaderLayout: React.FC = ({ restrictWidth, children }) => (
-
+
@@ -36,5 +40,5 @@ export const WithoutHeaderLayout: React.FC = ({ restrictWidth, children }
-
+
);