Security nav beta badges (#138145)

x-pack/plugins/security_solution/public/common/components/navigation/nav_item_beta_badge.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 React from 'react';
+import { css } from '@emotion/react';
+import { EuiBetaBadge, useEuiTheme } from '@elastic/eui';
+import { BETA } from '../../translations';
+
+export const NavItemBetaBadge = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiBetaBadge
+      label={BETA}
+      size="s"
+      css={css`
+        margin-left: ${euiTheme.size.s};
+        color: ${euiTheme.colors.text};
+      `}
+    />
+  );
+};

x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.styles.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiBetaBadge, EuiPanel } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 import styled from 'styled-components';
 
 export const EuiPanelStyled = styled(EuiPanel)<{ $bottomOffset?: string }>`
@@ -23,20 +23,14 @@ export const EuiPanelStyled = styled(EuiPanel)<{ $bottomOffset?: string }>`
       bottom: ${$bottomOffset};
       box-shadow:
         // left
-        -${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS} -${theme.eui.euiSizeS} rgb(0 0 0 / 15%), 
+        -${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS} -${theme.eui.euiSizeS} rgb(0 0 0 / 15%),
         // right
-        ${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS} -${theme.eui.euiSizeS} rgb(0 0 0 / 15%), 
+        ${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS} -${theme.eui.euiSizeS} rgb(0 0 0 / 15%),
         // bottom inset to match timeline bar top shadow
-        inset 0 -${theme.eui.euiSizeXS} ${theme.eui.euiSizeXS} -${theme.eui.euiSizeXS} rgb(0 0 0 / 6%); 
+        inset 0 -${theme.eui.euiSizeXS} ${theme.eui.euiSizeXS} -${theme.eui.euiSizeXS} rgb(0 0 0 / 6%);
       `}
 `;
 
-// Remove explicit typing after eui update https://github.com/elastic/eui/pull/6086
-export const EuiBetaBadgeStyled: typeof EuiBetaBadge = styled(EuiBetaBadge)`
-  margin-left: ${({ theme }) => theme.eui.euiSizeS};
-  color: ${(props) => props.theme.eui.euiTextColor};
-`;
-
 export const FlexLink = styled.a`
   display: flex;
   align-items: center;

x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx

@@ -23,10 +23,10 @@ import {
   useIsWithinBreakpoints,
 } from '@elastic/eui';
 import classNames from 'classnames';
-import { EuiBetaBadgeStyled, EuiPanelStyled, FlexLink } from './solution_grouped_nav_panel.styles';
+import { EuiPanelStyled, FlexLink } from './solution_grouped_nav_panel.styles';
 import type { DefaultSideNavItem } from './types';
 import type { LinkCategories } from '../../../links/types';
-import { BETA } from '../../../translations';
+import { NavItemBetaBadge } from '../nav_item_beta_badge';
 
 export interface SolutionNavPanelProps {
   onClose: () => void;
@@ -170,7 +170,7 @@ const SolutionNavPanelItems: React.FC<SolutionNavPanelItemsProps> = ({ items, on
             }}
           >
             {label}
-            {isBeta && <EuiBetaBadgeStyled label={BETA} size="s" />}
+            {isBeta && <NavItemBetaBadge />}
           </FlexLink>
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription>{description}</EuiDescriptionListDescription>

x-pack/plugins/security_solution/public/landing_pages/components/landing_links_icons.tsx

@@ -8,6 +8,7 @@ import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTitle } fr
 import React from 'react';
 import styled from 'styled-components';
 
+import { NavItemBetaBadge } from '../../common/components/navigation/nav_item_beta_badge';
 import {
   SecuritySolutionLinkAnchor,
   withSecuritySolutionLink,
@@ -35,7 +36,7 @@ const StyledEuiTitle = styled(EuiTitle)`
 
 export const LandingLinksIcons: React.FC<LandingLinksImagesProps> = ({ items }) => (
   <EuiFlexGrid columns={3} gutterSize="xl">
-    {items.map(({ title, description, id, icon }) => (
+    {items.map(({ title, description, id, icon, isBeta }) => (
       <EuiFlexItem key={id} data-test-subj="LandingItem">
         <EuiFlexGroup
           direction="column"
@@ -50,9 +51,18 @@ export const LandingLinksIcons: React.FC<LandingLinksImagesProps> = ({ items })
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <StyledEuiTitle size="xxs">
-              <SecuritySolutionLinkAnchor deepLinkId={id}>
-                <h2>{title}</h2>
-              </SecuritySolutionLinkAnchor>
+              <EuiFlexGroup gutterSize="none">
+                <EuiFlexItem grow={false}>
+                  <SecuritySolutionLinkAnchor deepLinkId={id}>
+                    <h2>{title}</h2>
+                  </SecuritySolutionLinkAnchor>
+                </EuiFlexItem>
+                {isBeta && (
+                  <EuiFlexItem grow={false}>
+                    <NavItemBetaBadge />
+                  </EuiFlexItem>
+                )}
+              </EuiFlexGroup>
             </StyledEuiTitle>
           </EuiFlexItem>
           <Description>

x-pack/plugins/security_solution/public/landing_pages/components/landing_links_images.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 import {
-  EuiBetaBadge,
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,8 +16,8 @@ import {
 import React from 'react';
 import styled from 'styled-components';
 import { withSecuritySolutionLink } from '../../common/components/links';
+import { NavItemBetaBadge } from '../../common/components/navigation/nav_item_beta_badge';
 import type { NavLinkItem } from '../../common/components/navigation/types';
-import { BETA } from '../../common/translations';
 
 interface LandingImagesProps {
   items: NavLinkItem[];
@@ -54,13 +53,6 @@ const TitleText = styled.h2`
   display: inline;
 `;
 
-// Remove explicit typing after eui update https://github.com/elastic/eui/pull/6086
-const BetaBadge: typeof EuiBetaBadge = styled(EuiBetaBadge)`
-  vertical-align: text-top;
-  margin-left: ${({ theme }) => theme.eui.euiSizeS};
-  color: ${(props) => props.theme.eui.euiTextColor};
-`;
-
 const SecuritySolutionLink = withSecuritySolutionLink(Link);
 
 export const LandingLinksImages: React.FC<LandingImagesProps> = ({ items }) => (
@@ -86,7 +78,7 @@ export const LandingLinksImages: React.FC<LandingImagesProps> = ({ items }) => (
                 <PrimaryEuiTitle size="s">
                   <FlexTitle>
                     <TitleText>{title}</TitleText>
-                    {isBeta && <BetaBadge label={BETA} size="s" />}
+                    {isBeta && <NavItemBetaBadge />}
                   </FlexTitle>
                 </PrimaryEuiTitle>
                 <LandingLinksDescripton size="s" color="text">
@@ -142,10 +134,10 @@ export const LandingImageCards: React.FC<LandingImagesProps> = React.memo(({ ite
           }
           title={
             <PrimaryEuiTitle size="xs">
-              <div>
+              <FlexTitle>
                 <TitleText>{title}</TitleText>
-                {isBeta && <BetaBadge label={BETA} size="s" />}
-              </div>
+                {isBeta && <NavItemBetaBadge />}
+              </FlexTitle>
             </PrimaryEuiTitle>
           }
           description={<LandingCardDescription>{description}</LandingCardDescription>}