[BeatsCM] Use new EUI beta badge (#30061)

* [BeatsCM] Use ner EUI beta badge

* only use beta badge on overview page

* Update primary.tsx

* Update no_data.tsx

x-pack/plugins/beats_management/public/components/layouts/no_data.tsx

@@ -4,13 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent } from '@elastic/eui';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent } from '@elastic/eui';
-
 interface LayoutProps {
-  title: string;
+  title: string | React.ReactNode;
   actionSection?: React.ReactNode;
   modalClosePath?: string;
 }

x-pack/plugins/beats_management/public/components/layouts/primary.tsx

@@ -22,7 +22,7 @@ import { BreadcrumbConsumer } from '../navigation/breadcrumb';
 
 type RenderCallback = ((component: () => JSX.Element) => void);
 interface PrimaryLayoutProps {
-  title: string;
+  title: string | React.ReactNode;
   actionSection?: React.ReactNode;
   hideBreadcrumbs?: boolean;
 }

x-pack/plugins/beats_management/public/index.tsx

@@ -63,7 +63,7 @@ async function startApp(libs: FrontendLibs) {
     libs.framework.registerManagementUI({
       sectionId: 'beats',
       name: i18n.translate('xpack.beatsManagement.centralManagementLinkLabel', {
-        defaultMessage: 'Central Management (Beta)',
+        defaultMessage: 'Central Management',
       }),
       basePath: BASE_PATH,
     });

x-pack/plugins/beats_management/public/pages/overview/index.tsx

@@ -5,10 +5,14 @@
  */
 
 import {
+  EuiBetaBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiTab,
   // @ts-ignore types for EuiTab not currently available
   EuiTabs,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { Subscribe } from 'unstated';
@@ -45,7 +49,19 @@ class MainPageComponent extends React.PureComponent<AppPageProps, MainPagesState
   public render() {
     return (
       <PrimaryLayout
-        title="Beats"
+        title={
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>{'Beats'}</EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiBetaBadge
+                label={i18n.translate('xpack.beatsManagement.overview.betaBadgeText', {
+                  defaultMessage: 'Beta',
+                })}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
         hideBreadcrumbs={this.props.libs.framework.versionGreaterThen('6.7.0')}
       >
         {(renderAction: any) => (

x-pack/plugins/beats_management/public/pages/walkthrough/initial/index.tsx

@@ -3,7 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiButton } from '@elastic/eui';
+import { EuiBetaBadge, EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import { NoDataLayout } from '../../../components/layouts/no_data';
@@ -23,7 +24,18 @@ class InitialWalkthroughPageComponent extends Component<
     if (this.props.location.pathname === '/walkthrough/initial') {
       return (
         <NoDataLayout
-          title="Beats central management"
+          title={
+            <EuiFlexGroup alignItems="center" gutterSize="m">
+              <EuiFlexItem grow={false}>{'Beats central management '}</EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiBetaBadge
+                  label={i18n.translate('xpack.beatsManagement.walkthrough.initial.betaBadgeText', {
+                    defaultMessage: 'Beta',
+                  })}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          }
           actionSection={
             <ConnectedLink path="/walkthrough/initial/beat">
               <EuiButton color="primary" fill>

x-pack/plugins/beats_management/server/lib/tags.ts

@@ -30,7 +30,7 @@ export class CMTagsDomain {
 
   public async delete(user: FrameworkUser, tagIds: string[]) {
     const beats = await this.beatsAdabter.getAllWithTags(user, tagIds);
-    if (beats.length > 0) {
+    if (beats.filter(b => b.active).length > 0) {
       return false;
     }
     await this.configurationBlocksAdapter.deleteForTags(user, tagIds);