[7.x] Fix "Deleted rule" badge is not displayed if 'Rule Name' contains more than 55 words (#103164)

x-pack/plugins/security_solution/public/common/components/header_page/index.tsx

@@ -55,6 +55,14 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
+const HeaderSection = styled(EuiPageHeaderSection)`
+  // Without  min-width: 0, as a flex child, it wouldn't shrink properly
+  // and could overflow its parent.
+  min-width: 0;
+  max-width: 100%;
+`;
+HeaderSection.displayName = 'HeaderSection';
+
 interface BackOptions {
   href: LinkIconProps['href'];
   text: LinkIconProps['children'];
@@ -105,7 +113,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   return (
     <>
       <EuiPageHeader alignItems="center" bottomBorder={border}>
-        <EuiPageHeaderSection>
+        <HeaderSection>
           {backOptions && (
             <LinkBack>
               <LinkIcon
@@ -132,7 +140,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
           {subtitle && <Subtitle data-test-subj="header-page-subtitle" items={subtitle} />}
           {subtitle2 && <Subtitle data-test-subj="header-page-subtitle-2" items={subtitle2} />}
           {border && isLoading && <EuiProgress size="xs" color="accent" />}
-        </EuiPageHeaderSection>
+        </HeaderSection>
 
         {children && (
           <EuiPageHeaderSection data-test-subj="header-page-supplements">

x-pack/plugins/security_solution/public/common/components/header_page/title.tsx

@@ -24,6 +24,19 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
+const Header = styled.h1`
+  display: flex;
+  align-items: center;
+`;
+Header.displayName = 'Header';
+
+const TitleWrapper = styled.span`
+  // Without  min-width: 0, as a flex child, it wouldn't shrink properly
+  // and could overflow its parent.
+  min-width: 0;
+`;
+TitleWrapper.displayName = 'TitleWrapper';
+
 interface Props {
   badgeOptions?: BadgeOptions;
   title: TitleProp;
@@ -32,9 +45,11 @@ interface Props {
 
 const TitleComponent: React.FC<Props> = ({ draggableArguments, title, badgeOptions }) => (
   <EuiTitle size="l">
-    <h1 data-test-subj="header-page-title">
+    <Header data-test-subj="header-page-title">
       {!draggableArguments ? (
-        <TruncatableText tooltipContent={title}>{title}</TruncatableText>
+        <TitleWrapper>
+          <TruncatableText tooltipContent={title}>{title}</TruncatableText>
+        </TitleWrapper>
       ) : (
         <DefaultDraggable
           data-test-subj="header-page-draggable"
@@ -53,13 +68,13 @@ const TitleComponent: React.FC<Props> = ({ draggableArguments, title, badgeOptio
               tooltipPosition="bottom"
             />
           ) : (
-            <Badge color="hollow" title="">
+            <Badge color={badgeOptions.color || 'hollow'} title="">
               {badgeOptions.text}
             </Badge>
           )}
         </>
       )}
-    </h1>
+    </Header>
   </EuiTitle>
 );
 

x-pack/plugins/security_solution/public/common/components/header_page/types.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiBadgeProps } from '@elastic/eui';
 import type React from 'react';
 export type TitleProp = string | React.ReactNode;
 
@@ -17,4 +18,5 @@ export interface BadgeOptions {
   beta?: boolean;
   text: string;
   tooltip?: string;
+  color?: EuiBadgeProps['color'];
 }

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx

@@ -18,7 +18,6 @@ import {
   EuiTabs,
   EuiToolTip,
   EuiWindowEvent,
-  EuiBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { noop } from 'lodash/fp';
@@ -115,6 +114,7 @@ import { NeedAdminForUpdateRulesCallOut } from '../../../../components/callouts/
 import { getRuleStatusText } from '../../../../../../common/detection_engine/utils';
 import { MissingPrivilegesCallOut } from '../../../../components/callouts/missing_privileges_callout';
 import { useRuleWithFallback } from '../../../../containers/detection_engine/rules/use_rule_with_fallback';
+import { BadgeOptions } from '../../../../../common/components/header_page/types';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -253,15 +253,20 @@ const RuleDetailsPageComponent = () => {
   const title = useMemo(
     () => (
       <>
-        {rule?.name}{' '}
-        {ruleLoading ? (
-          <EuiLoadingSpinner size="m" />
-        ) : (
-          !isExistingRule && <EuiBadge>{i18n.DELETED_RULE}</EuiBadge>
-        )}
+        {rule?.name} {ruleLoading && <EuiLoadingSpinner size="m" />}
       </>
     ),
-    [rule, ruleLoading, isExistingRule]
+    [rule, ruleLoading]
+  );
+  const badgeOptions = useMemo<BadgeOptions | undefined>(
+    () =>
+      !ruleLoading && !isExistingRule
+        ? {
+            text: i18n.DELETED_RULE,
+            color: 'default',
+          }
+        : undefined,
+    [isExistingRule, ruleLoading]
   );
   const subTitle = useMemo(
     () =>
@@ -595,6 +600,7 @@ const RuleDetailsPageComponent = () => {
                   </>,
                 ]}
                 title={title}
+                badgeOptions={badgeOptions}
               >
                 <EuiFlexGroup alignItems="center">
                   <EuiFlexItem grow={false}>

x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx

@@ -149,7 +149,7 @@ describe('Network Details', () => {
     );
     expect(
       wrapper
-        .find('[data-test-subj="network-details-headline"] [data-test-subj="header-page-title"]')
+        .find('[data-test-subj="network-details-headline"] h1[data-test-subj="header-page-title"]')
         .text()
     ).toEqual('fe80::24ce:f7ff:fede:a571');
   });