From 5af69edfbaf58d3874b043c1fc3674080a1b2430 Mon Sep 17 00:00:00 2001 From: Dmitry Shevchenko Date: Thu, 24 Jun 2021 19:17:09 +0200 Subject: [PATCH] Fix "Deleted rule" badge is not displayed if 'Rule Name' contains more than 55 words (#103164) --- .../__snapshots__/index.test.tsx.snap | 4 ++-- .../__snapshots__/title.test.tsx.snap | 16 +++++++------ .../common/components/header_page/index.tsx | 12 ++++++++-- .../common/components/header_page/title.tsx | 23 +++++++++++++++---- .../common/components/header_page/types.ts | 2 ++ .../detection_engine/rules/details/index.tsx | 22 +++++++++++------- .../network/pages/details/index.test.tsx | 2 +- 7 files changed, 57 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap index 9cb9f28612b15..d00bd7040c164 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap @@ -6,7 +6,7 @@ exports[`HeaderPage it renders 1`] = ` alignItems="center" bottomBorder={true} > - + - + diff --git a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap index ca02d0ac5cb2d..176902ae38d20 100644 --- a/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/header_page/__snapshots__/title.test.tsx.snap @@ -4,20 +4,22 @@ exports[`Title it renders 1`] = ` -

- - Test title - + + + Test title + + -

+ `; 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 index 1c87d70c0c7cb..75453f2d759fb 100644 --- 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,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 = ({ return ( <> - + {backOptions && ( = ({ {subtitle && } {subtitle2 && } {border && isLoading && } - + {children && ( 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 index 471d539ea03f4..a99132d5c7f62 100644 --- 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,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 = ({ draggableArguments, title, badgeOptions }) => ( -

+
{!draggableArguments ? ( - {title} + + {title} + ) : ( = ({ draggableArguments, title, badgeOptio tooltipPosition="bottom" /> ) : ( - + {badgeOptions.text} )} )} -

+ ); 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 index e95d0c8e1e69c..f099144eeb4be 100644 --- 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/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx index b4f1af41a0606..92679cb2662d7 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx +++ b/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 ? ( - - ) : ( - !isExistingRule && {i18n.DELETED_RULE} - )} + {rule?.name} {ruleLoading && } ), - [rule, ruleLoading, isExistingRule] + [rule, ruleLoading] + ); + const badgeOptions = useMemo( + () => + !ruleLoading && !isExistingRule + ? { + text: i18n.DELETED_RULE, + color: 'default', + } + : undefined, + [isExistingRule, ruleLoading] ); const subTitle = useMemo( () => @@ -595,6 +600,7 @@ const RuleDetailsPageComponent = () => { , ]} title={title} + badgeOptions={badgeOptions} > diff --git a/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx b/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx index a9a97f6bac652..d9d5ac9241f19 100644 --- a/x-pack/plugins/security_solution/public/network/pages/details/index.test.tsx +++ b/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'); });