Fix "Deleted rule" badge is not displayed if 'Rule Name' contains mor…

…e than 55 words
elastic · Jun 23, 2021 · 03d0b3b · 03d0b3b
1 parent 52d5b9d
commit 03d0b3b
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 14 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/index.tsx
@@ -55,6 +55,11 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
+const HeaderSection = styled(EuiPageHeaderSection)`
+  max-width: 100%;
+`;
+HeaderSection.displayName = 'HeaderSection';
+
 interface BackOptions {
   href: LinkIconProps['href'];
   text: LinkIconProps['children'];
@@ -105,7 +110,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   return (
     <>
       <EuiPageHeader alignItems="center" bottomBorder={border}>
-        <EuiPageHeaderSection>
+        <HeaderSection>
           {backOptions && (
             <LinkBack>
               <LinkIcon
@@ -132,7 +137,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">

diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx b/x-pack/plugins/security_solution/public/common/components/header_page/title.tsx
@@ -24,6 +24,21 @@ const Badge = (styled(EuiBadge)`
 ` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
+const Header = styled.h1`
+  display: flex;
+  align-items: center;
+`;
+Header.displayName = 'Header';
+
+/**
+ * Without this, the TruncatableText would have min-width: auto,
+ * i.e., it could overflow its parent container.
+ */
+const TitleWrapper = styled.span`
+  min-width: 0;
+`;
+TitleWrapper.displayName = 'TitleWrapper';
+
 interface Props {
   badgeOptions?: BadgeOptions;
   title: TitleProp;
@@ -32,9 +47,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 +70,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>
 );
 

diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/types.ts b/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'];
 }
diff --git a/...lugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx b/...lugins/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}>