[Infra UI] Add beta badge with tooltip to the header (#25113) (#25196)

In accordance with #25008, this adds a "Beta" badge with a corresponding tooltip to the header.

x-pack/plugins/infra/public/components/beta_badge_header_section.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiBetaBadge, EuiHeaderSection } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+interface BetaBadgeHeaderSectionProps {
+  tooltipContent?: React.ReactNode;
+}
+
+export const BetaBadgeHeaderSection: React.SFC<BetaBadgeHeaderSectionProps> = ({
+  tooltipContent = 'Please help us improve by reporting issues or bugs in the Kibana repo.',
+}) => (
+  <VerticallyCenteredHeaderSection side="right">
+    <EuiBetaBadge label="Beta" tooltipContent={tooltipContent} />
+  </VerticallyCenteredHeaderSection>
+);
+
+export const InfrastructureBetaBadgeHeaderSection = () => (
+  <BetaBadgeHeaderSection tooltipContent="The Infrastructure UI is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo." />
+);
+
+export const LogsBetaBadgeHeaderSection = () => (
+  <BetaBadgeHeaderSection tooltipContent="The Logs UI is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo." />
+);
+
+const VerticallyCenteredHeaderSection = styled(EuiHeaderSection)`
+  padding-left: ${props => props.theme.eui.euiSizeS};
+  padding-right: ${props => props.theme.eui.euiSizeS};
+  align-items: center;
+`;

x-pack/plugins/infra/public/components/header.tsx

@@ -15,6 +15,7 @@ import styled from 'styled-components';
 
 interface HeaderProps {
   breadcrumbs?: EuiBreadcrumbDefinition[];
+  appendSections?: React.ReactNode;
 }
 
 export class Header extends React.PureComponent<HeaderProps> {
@@ -26,13 +27,14 @@ export class Header extends React.PureComponent<HeaderProps> {
   ];
 
   public render() {
-    const { breadcrumbs = [] } = this.props;
+    const { breadcrumbs = [], appendSections = null } = this.props;
 
     return (
       <HeaderWrapper>
         <EuiHeaderSection>
           <EuiHeaderBreadcrumbs breadcrumbs={[...this.staticBreadcrumbs, ...breadcrumbs]} />
         </EuiHeaderSection>
+        {appendSections}
       </HeaderWrapper>
     );
   }

x-pack/plugins/infra/public/pages/home/index.tsx

@@ -13,6 +13,7 @@ import { EmptyPage } from '../../components/empty_page';
 import { Header } from '../../components/header';
 import { ColumnarPage } from '../../components/page';
 
+import { InfrastructureBetaBadgeHeaderSection } from '../../components/beta_badge_header_section';
 import { WithWaffleFilterUrlState } from '../../containers/waffle/with_waffle_filters';
 import { WithWaffleOptionsUrlState } from '../../containers/waffle/with_waffle_options';
 import { WithWaffleTimeUrlState } from '../../containers/waffle/with_waffle_time';
@@ -30,7 +31,7 @@ export class HomePage extends React.PureComponent {
                 <WithWaffleTimeUrlState />
                 <WithWaffleFilterUrlState />
                 <WithWaffleOptionsUrlState />
-                <Header />
+                <Header appendSections={<InfrastructureBetaBadgeHeaderSection />} />
                 <HomeToolbar />
                 <HomePageContent />
               </>

x-pack/plugins/infra/public/pages/logs/logs.tsx

@@ -13,6 +13,7 @@ import { EmptyPage } from '../../components/empty_page';
 import { Header } from '../../components/header';
 import { ColumnarPage } from '../../components/page';
 
+import { LogsBetaBadgeHeaderSection } from '../../components/beta_badge_header_section';
 import { WithLogFilterUrlState } from '../../containers/logs/with_log_filter';
 import { WithLogMinimapUrlState } from '../../containers/logs/with_log_minimap';
 import { WithLogPositionUrlState } from '../../containers/logs/with_log_position';
@@ -32,7 +33,10 @@ export class LogsPage extends React.Component {
                 <WithLogPositionUrlState />
                 <WithLogMinimapUrlState />
                 <WithLogTextviewUrlState />
-                <Header breadcrumbs={[{ text: 'Logs' }]} />
+                <Header
+                  appendSections={<LogsBetaBadgeHeaderSection />}
+                  breadcrumbs={[{ text: 'Logs' }]}
+                />
                 <LogsToolbar />
                 <LogsPageContent />
               </>

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -20,6 +20,7 @@ import {
 import styled, { withTheme } from 'styled-components';
 import { InfraNodeType, InfraTimerangeInput } from '../../../common/graphql/types';
 import { AutoSizer } from '../../components/auto_sizer';
+import { InfrastructureBetaBadgeHeaderSection } from '../../components/beta_badge_header_section';
 import { Header } from '../../components/header';
 import { Metrics } from '../../components/metrics';
 import { MetricsTimeControls } from '../../components/metrics/time_controls';
@@ -71,7 +72,10 @@ class MetricDetailPage extends React.PureComponent<Props> {
 
     return (
       <ColumnarPage>
-        <Header breadcrumbs={breadcrumbs} />
+        <Header
+          appendSections={<InfrastructureBetaBadgeHeaderSection />}
+          breadcrumbs={breadcrumbs}
+        />
         <WithMetricsTimeUrlState />
         <DetailPageContent>
           <WithOptions>

x-pack/plugins/infra/types/eui.d.ts

@@ -164,4 +164,13 @@ declare module '@elastic/eui' {
   };
 
   export const EuiDatePickerRange: React.SFC<EuiDatePickerRangeProps>;
+
+  export type EuiBetaBadgeProps = CommonProps & {
+    iconType?: IconType;
+    label: React.ReactNode;
+    title?: string;
+    tooltipContent?: React.ReactNode;
+    tooltipPosition?: EuiToolTipPosition;
+  };
+  export const EuiBetaBadge: React.SFC<EuiBetaBadgeProps>;
 }