From d8678ded034e0f3965bd5207c709993eabaf834c Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Thu, 14 Jan 2021 13:39:05 -0800
Subject: [PATCH] [Fleet] Prevent long names from breaking agent details page
 (#88383)

* Fix long policy name breaking agent details page

* Fix long agent host name breaking agent details page
---
 .../agent_details/agent_details_overview.tsx  | 26 +++++++++++--------
 .../components/agent_details/index.tsx        | 14 +++++++---
 .../agents/agent_details_page/index.tsx       |  2 +-
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
index 81195bdeaa9e..b62c5b0ca874 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { memo } from 'react';
+import styled from 'styled-components';
 import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
@@ -22,6 +23,11 @@ import { isAgentUpgradeable } from '../../../../../services';
 import { AgentPolicyPackageBadges } from '../../../components/agent_policy_package_badges';
 import { LinkAndRevision } from '../../../../../components';
 
+// Allows child text to be truncated
+const FlexItemWithMinWidth = styled(EuiFlexItem)`
+  min-width: 0px;
+`;
+
 export const AgentDetailsOverviewSection: React.FunctionComponent<{
   agent: Agent;
   agentPolicy?: AgentPolicy;
@@ -30,7 +36,7 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
   const kibanaVersion = useKibanaVersion();
   return (
     <EuiPanel>
-      <EuiDescriptionList>
+      <EuiDescriptionList compressed>
         {[
           {
             title: i18n.translate('xpack.fleet.agentDetails.hostIdLabel', {
@@ -161,16 +167,14 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
           },
         ].map(({ title, description }) => {
           return (
-            <EuiDescriptionList compressed>
-              <EuiFlexGroup>
-                <EuiFlexItem grow={3}>
-                  <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
-                </EuiFlexItem>
-                <EuiFlexItem grow={7}>
-                  <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiDescriptionList>
+            <EuiFlexGroup>
+              <FlexItemWithMinWidth grow={3}>
+                <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+              </FlexItemWithMinWidth>
+              <FlexItemWithMinWidth grow={7}>
+                <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>
+              </FlexItemWithMinWidth>
+            </EuiFlexGroup>
           );
         })}
       </EuiDescriptionList>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
index 0b83fb4cc64e..0dc16e75ff13 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/index.tsx
@@ -4,12 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { memo } from 'react';
+import styled from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Agent, AgentPolicy } from '../../../../../types';
 import { AgentDetailsOverviewSection } from './agent_details_overview';
 import { AgentDetailsIntegrationsSection } from './agent_details_integrations';
 
+// Allows child text to be truncated
+const FlexItemWithMinWidth = styled(EuiFlexItem)`
+  min-width: 0px;
+`;
+
 export const AgentDetailsContent: React.FunctionComponent<{
   agent: Agent;
   agentPolicy?: AgentPolicy;
@@ -17,7 +23,7 @@ export const AgentDetailsContent: React.FunctionComponent<{
   return (
     <>
       <EuiFlexGroup alignItems="flexStart">
-        <EuiFlexItem>
+        <FlexItemWithMinWidth>
           <EuiTitle size="s">
             <h3>
               <FormattedMessage
@@ -28,8 +34,8 @@ export const AgentDetailsContent: React.FunctionComponent<{
           </EuiTitle>
           <EuiSpacer size="s" />
           <AgentDetailsOverviewSection agent={agent} agentPolicy={agentPolicy} />
-        </EuiFlexItem>
-        <EuiFlexItem>
+        </FlexItemWithMinWidth>
+        <FlexItemWithMinWidth>
           <EuiTitle size="s">
             <h3>
               <FormattedMessage
@@ -40,7 +46,7 @@ export const AgentDetailsContent: React.FunctionComponent<{
           </EuiTitle>
           <EuiSpacer size="s" />
           <AgentDetailsIntegrationsSection agent={agent} agentPolicy={agentPolicy} />
-        </EuiFlexItem>
+        </FlexItemWithMinWidth>
       </EuiFlexGroup>
     </>
   );
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
index 34893dccd93a..f3e9125aae9f 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
@@ -90,7 +90,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiText>
+          <EuiText className="eui-textBreakWord">
             <h1>
               {isLoading && isInitialRequest ? (
                 <Loading />