From ae06c8cc7a1760a76c43b735fbe3e83944fc5b31 Mon Sep 17 00:00:00 2001 From: Kyle Pollich Date: Fri, 4 Jun 2021 11:49:25 -0400 Subject: [PATCH] Address design feedback --- .../fleet/public/applications/fleet/app.tsx | 2 +- .../fleet/hooks/use_breadcrumbs.tsx | 18 ++- .../applications/fleet/layouts/default.tsx | 112 +++++++++--------- .../public/applications/integrations/app.tsx | 14 +-- .../integrations/hooks/use_breadcrumbs.tsx | 4 +- .../sections/epm/screens/home/index.tsx | 6 +- .../fleet/public/layouts/with_header.tsx | 8 +- .../fleet/public/layouts/without_header.tsx | 10 +- 8 files changed, 94 insertions(+), 80 deletions(-) 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 } - + );