[Fleet] Fix double policy header layout (#103076) (#103262)

* 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 <[email protected]> Co-authored-by: Jean-Louis Leysens <[email protected]>
elastic · Jun 24, 2021 · 1bbe1e4 · 1bbe1e4
1 parent ad3037c
commit 1bbe1e4
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 41 deletions.
diff --git 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,
+}) => (
  <EuiErrorBoundary>
- <DefaultLayout>
- <WithoutHeaderLayout>{children}</WithoutHeaderLayout>
- </DefaultLayout>
+ {isAddIntegrationsPath ? (
+ <WithHeaderLayout leftColumn={<DefaultPageTitle />}>{children}</WithHeaderLayout>
+ ) : (
+ <DefaultLayout>
+ <WithoutHeaderLayout>{children}</WithoutHeaderLayout>
+ </DefaultLayout>
+ )}
  </EuiErrorBoundary>
 );
 
@@ -71,6 +79,8 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
  const [isInitialized, setIsInitialized] = useState(false);
  const [initializationError, setInitializationError] = useState<Error | null>(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 (
- <ErrorLayout>
+ <ErrorLayout isAddIntegrationsPath={isAddIntegrationsPath}>
  {isPermissionsLoading ? (
  <Loading />
  ) : permissionsError === 'REQUEST_ERROR' ? (
@@ -168,7 +178,7 @@ export const WithPermissionsAndSetup: React.FC = memo(({ children }) => {
 
  if (!isInitialized || initializationError) {
  return (
- <ErrorLayout>
+ <ErrorLayout isAddIntegrationsPath={isAddIntegrationsPath}>
  {initializationError ? (
  <Error
  title={
@@ -314,9 +324,7 @@ export const AppRoutes = memo(
 
  {/* TODO: Move this route to the Integrations app */}
  <Route path={FLEET_ROUTING_PATHS.add_integration_to_policy}>
- <DefaultLayout>
- <CreatePackagePolicyPage />
- </DefaultLayout>
+ <CreatePackagePolicyPage />
  </Route>
 
  <Redirect to={FLEET_ROUTING_PATHS.agents} />

diff --git a/...ic/applications/fleet/layouts/default.tsx → ...cations/fleet/layouts/default/default.tsx b/...ic/applications/fleet/layouts/default.tsx → ...cations/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<Props> = ({ section, childre
 
  return (
  <WithHeaderLayout
- leftColumn={
- <EuiFlexGroup direction="column" gutterSize="m">
- <EuiFlexItem>
- <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
- <EuiFlexItem grow={false}>
- <EuiTitle size="l">
- <h1>
- <FormattedMessage id="xpack.fleet.overviewPageTitle" defaultMessage="Fleet" />
- </h1>
- </EuiTitle>
- </EuiFlexItem>
- </EuiFlexGroup>
- </EuiFlexItem>
- <EuiFlexItem>
- <EuiText color="subdued">
- <p>
- <FormattedMessage
- id="xpack.fleet.overviewPageSubtitle"
- defaultMessage="Centralized management for Elastic Agents"
- />
- </p>
- </EuiText>
- </EuiFlexItem>
- </EuiFlexGroup>
- }
+ leftColumn={<DefaultPageTitle />}
  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
@@ -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 (
+ <EuiFlexGroup direction="column" gutterSize="m">
+ <EuiFlexItem>
+ <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+ <EuiFlexItem grow={false}>
+ <EuiTitle size="l">
+ <h1>
+ <FormattedMessage id="xpack.fleet.overviewPageTitle" defaultMessage="Fleet" />
+ </h1>
+ </EuiTitle>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiFlexItem>
+ <EuiFlexItem>
+ <EuiText color="subdued">
+ <p>
+ <FormattedMessage
+ id="xpack.fleet.overviewPageSubtitle"
+ defaultMessage="Centralized management for Elastic Agents"
+ />
+ </p>
+ </EuiText>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+};
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
@@ -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
@@ -7,4 +7,4 @@
 
 export * from '../../../layouts';
 
-export { DefaultLayout } from './default';
+export { DefaultLayout, DefaultPageTitle } from './default';