[7.x] [Security_Solution][Resolver]Add beta badge to Resolver panel (#…

…71183) (#71561) * [Security_Solution][Resolver]Add beta badge to Resolver panel (#71183)
elastic · Jul 14, 2020 · aa555d5 · aa555d5
1 parent 2d3b157
commit aa555d5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/...ck/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx b/...ck/plugins/security_solution/public/resolver/view/panels/panel_content_related_detail.tsx
@@ -308,7 +308,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
 
   return (
     <>
-      <StyledBreadcrumbs truncate={false} breadcrumbs={crumbs} />
+      <StyledBreadcrumbs breadcrumbs={crumbs} />
       <EuiSpacer size="l" />
       <EuiText size="s">
         <BoldCode>

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { EuiBreadcrumbs, EuiBreadcrumb, EuiCode } from '@elastic/eui';
+import { EuiBreadcrumbs, EuiCode, EuiBetaBadge } from '@elastic/eui';
 import styled from 'styled-components';
 import React, { memo } from 'react';
 import { useResolverTheme } from '../assets';
@@ -19,6 +19,10 @@ export const BoldCode = styled(EuiCode)`
   }
 `;
 
+const BetaHeader = styled(`header`)`
+  margin-bottom: 1em;
+`;
+
 /**
  * The two query parameters we read/write on to control which view the table presents:
  */
@@ -40,26 +44,46 @@ const ThemedBreadcrumbs = styled(EuiBreadcrumbs)<{ background: string; text: str
   }
 `;
 
+const betaBadgeLabel = i18n.translate(
+  'xpack.securitySolution.enpdoint.resolver.panelutils.betaBadgeLabel',
+  {
+    defaultMessage: 'BETA',
+  }
+);
+
+/**
+ * A component to keep time representations in blocks so they don't wrap
+ * and look bad.
+ */
+export const StyledTime = memo(styled('time')`
+  display: inline-block;
+  text-align: start;
+`);
+
+type Breadcrumbs = Parameters<typeof EuiBreadcrumbs>[0]['breadcrumbs'];
 /**
  * Breadcrumb menu with adjustments per direction from UX team
  */
 export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({
   breadcrumbs,
-  truncate,
 }: {
-  breadcrumbs: EuiBreadcrumb[];
-  truncate?: boolean;
+  breadcrumbs: Breadcrumbs;
 }) {
   const {
     colorMap: { resolverBreadcrumbBackground, resolverEdgeText },
   } = useResolverTheme();
   return (
-    <ThemedBreadcrumbs
-      background={resolverBreadcrumbBackground}
-      text={resolverEdgeText}
-      breadcrumbs={breadcrumbs}
-      truncate={truncate}
-    />
+    <>
+      <BetaHeader>
+        <EuiBetaBadge label={betaBadgeLabel} />
+      </BetaHeader>
+      <ThemedBreadcrumbs
+        background={resolverBreadcrumbBackground}
+        text={resolverEdgeText}
+        breadcrumbs={breadcrumbs}
+        truncate={false}
+      />
+    </>
   );
 });