[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';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@

		export * from '../../../layouts';

		export { DefaultLayout } from './default';
		export { DefaultLayout, DefaultPageTitle } from './default';