Address design feedback

elastic · Jun 4, 2021 · ae06c8c · ae06c8c
1 parent da285a6
commit ae06c8c
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 80 deletions.
diff --git 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(() => {
         </DefaultLayout>
       </Route>
       <Route path={FLEET_ROUTING_PATHS.add_integration_to_policy}>
-        <DefaultLayout section="agent_policy">
+        <DefaultLayout showNav={false}>
           <CreatePackagePolicyPage />
         </DefaultLayout>
       </Route>

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
@@ -17,17 +17,25 @@ interface AdditionalBreadcrumbOptions {
   useIntegrationsBasePath: boolean;
 }
 
-const BASE_BREADCRUMB: ChromeBreadcrumb = {
+type Breadcrumb = ChromeBreadcrumb & Partial<AdditionalBreadcrumbOptions>;
+
+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<ChromeBreadcrumb & Partial<AdditionalBreadcrumbOptions>>;
+  [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
@@ -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<Props> = ({
+  showNav = true,
   showSettings = true,
   section,
   children,
@@ -76,68 +78,70 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
 
       <Container>
         <Wrapper>
-          <Nav>
-            <EuiFlexGroup gutterSize="l" alignItems="center">
-              <EuiFlexItem>
-                <EuiTabs display="condensed">
-                  <EuiTab isSelected={section === 'overview'} href={getHref('overview')}>
-                    <FormattedMessage
-                      id="xpack.fleet.appNavigation.overviewLinkText"
-                      defaultMessage="Overview"
-                    />
-                  </EuiTab>
-                  <EuiTab isSelected={section === 'agent_policy'} href={getHref('policies_list')}>
-                    <FormattedMessage
-                      id="xpack.fleet.appNavigation.policiesLinkText"
-                      defaultMessage="Policies"
-                    />
-                  </EuiTab>
-                  <EuiTab
-                    isSelected={section === 'fleet'}
-                    href={getHref('fleet')}
-                    disabled={!agents?.enabled}
-                  >
-                    <FormattedMessage
-                      id="xpack.fleet.appNavigation.agentsLinkText"
-                      defaultMessage="Agents"
-                    />
-                  </EuiTab>
-                  <EuiTab isSelected={section === 'data_stream'} href={getHref('data_streams')}>
-                    <FormattedMessage
-                      id="xpack.fleet.appNavigation.dataStreamsLinkText"
-                      defaultMessage="Data streams"
-                    />
-                  </EuiTab>
-                </EuiTabs>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiFlexGroup gutterSize="s" direction="row">
-                  <EuiFlexItem>
-                    <EuiButtonEmpty
-                      iconType="popout"
-                      href="https://ela.st/fleet-feedback"
-                      target="_blank"
+          {showNav ? (
+            <Nav>
+              <EuiFlexGroup gutterSize="l" alignItems="center">
+                <EuiFlexItem>
+                  <EuiTabs display="condensed">
+                    <EuiTab isSelected={section === 'overview'} href={getHref('overview')}>
+                      <FormattedMessage
+                        id="xpack.fleet.appNavigation.overviewLinkText"
+                        defaultMessage="Overview"
+                      />
+                    </EuiTab>
+                    <EuiTab isSelected={section === 'agent_policy'} href={getHref('policies_list')}>
+                      <FormattedMessage
+                        id="xpack.fleet.appNavigation.policiesLinkText"
+                        defaultMessage="Policies"
+                      />
+                    </EuiTab>
+                    <EuiTab
+                      isSelected={section === 'fleet'}
+                      href={getHref('fleet')}
+                      disabled={!agents?.enabled}
                     >
                       <FormattedMessage
-                        id="xpack.fleet.appNavigation.sendFeedbackButton"
-                        defaultMessage="Send feedback"
+                        id="xpack.fleet.appNavigation.agentsLinkText"
+                        defaultMessage="Agents"
+                      />
+                    </EuiTab>
+                    <EuiTab isSelected={section === 'data_stream'} href={getHref('data_streams')}>
+                      <FormattedMessage
+                        id="xpack.fleet.appNavigation.dataStreamsLinkText"
+                        defaultMessage="Data streams"
                       />
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                  {showSettings ? (
+                    </EuiTab>
+                  </EuiTabs>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiFlexGroup gutterSize="s" direction="row">
                     <EuiFlexItem>
-                      <EuiButtonEmpty iconType="gear" href={getModalHref('settings')}>
+                      <EuiButtonEmpty
+                        iconType="popout"
+                        href="https://ela.st/fleet-feedback"
+                        target="_blank"
+                      >
                         <FormattedMessage
-                          id="xpack.fleet.appNavigation.settingsButton"
-                          defaultMessage="Fleet settings"
+                          id="xpack.fleet.appNavigation.sendFeedbackButton"
+                          defaultMessage="Send feedback"
                         />
                       </EuiButtonEmpty>
                     </EuiFlexItem>
-                  ) : null}
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </Nav>
+                    {showSettings ? (
+                      <EuiFlexItem>
+                        <EuiButtonEmpty iconType="gear" href={getModalHref('settings')}>
+                          <FormattedMessage
+                            id="xpack.fleet.appNavigation.settingsButton"
+                            defaultMessage="Fleet settings"
+                          />
+                        </EuiButtonEmpty>
+                      </EuiFlexItem>
+                    ) : null}
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </Nav>
+          ) : null}
           {children}
         </Wrapper>
         <AlphaMessaging />

diff --git 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 (
-    <DefaultLayout>
-      <Switch>
-        <Route path={INTEGRATIONS_ROUTING_PATHS.integrations}>
-          <EPMApp />
-        </Route>
-        <Redirect to={INTEGRATIONS_ROUTING_PATHS.integrations_all} />
-      </Switch>
-    </DefaultLayout>
+    <Switch>
+      <Route path={INTEGRATIONS_ROUTING_PATHS.integrations}>
+        <EPMApp />
+      </Route>
+      <Redirect to={INTEGRATIONS_ROUTING_PATHS.integrations_all} />
+    </Switch>
   );
 });
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
@@ -34,15 +34,15 @@ const breadcrumbGetters: {
     BASE_BREADCRUMB,
     {
       text: i18n.translate('xpack.fleet.breadcrumbs.allIntegrationsPageTitle', {
-        defaultMessage: 'All',
+        defaultMessage: 'Browse',
       }),
     },
   ],
   integrations_installed: () => [
     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
@@ -14,15 +14,15 @@ 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';
 
 import { CategoryFacets } from './category_facets';
 
 export const EPMHomePage: React.FC = memo(() => {
   return (
-    <WithoutHeaderLayout>
+    <DefaultLayout>
       <Switch>
         <Route path={INTEGRATIONS_ROUTING_PATHS.integrations_installed}>
           <InstalledPackages />
@@ -31,7 +31,7 @@ export const EPMHomePage: React.FC = memo(() => {
           <AvailablePackages />
         </Route>
       </Switch>
-    </WithoutHeaderLayout>
+    </DefaultLayout>
   );
 });
 

diff --git 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<WithHeaderLayoutProps> = ({
   'data-test-subj': dataTestSubj,
   ...rest
 }) => (
-  <Fragment>
+  <Wrapper>
     <Header
       maxWidth={restrictHeaderWidth}
       data-test-subj={dataTestSubj ? `${dataTestSubj}_header` : undefined}
@@ -44,5 +44,5 @@ export const WithHeaderLayout: React.FC<WithHeaderLayoutProps> = ({
         </ContentWrapper>
       </EuiPageBody>
     </Page>
-  </Fragment>
+  </Wrapper>
 );
diff --git 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<Props> = ({ restrictWidth, children }) => (
-  <Fragment>
+  <Wrapper>
     <Page restrictWidth={restrictWidth || 1200}>
       <EuiPageBody>
         <ContentWrapper>
@@ -36,5 +40,5 @@ export const WithoutHeaderLayout: React.FC<Props> = ({ restrictWidth, children }
         </ContentWrapper>
       </EuiPageBody>
     </Page>
-  </Fragment>
+  </Wrapper>
 );