[ObsUX][Profiling, Infra] Add NEW badge to the Profiling tab (elastic…

…#174242)

Closes elastic#173156

## Summary

This PR adds a `NEW` badge to the profiling tab and changes the
profiling prompt badge color to pink

## Testing
The badges can be checked on the node details page and inside the host
details flyout:

![image](https://github.com/elastic/kibana/assets/14139027/30f4ca24-b460-4fe9-8c2c-372e435a1c64)

![image](https://github.com/elastic/kibana/assets/14139027/423232b2-fc2e-4718-a089-180157db22da)

(cherry picked from commit 1182ce6)

x-pack/plugins/infra/public/common/asset_details_config/asset_details_tabs.tsx

@@ -6,7 +6,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import React from 'react';
 import { ContentTabIds, type Tab } from '../../components/asset_details/types';
+import { NewBadge } from '../../components/new_badge';
 
 export const commonFlyoutTabs: Tab[] = [
   {
@@ -32,6 +34,7 @@ export const commonFlyoutTabs: Tab[] = [
     name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.profiling', {
       defaultMessage: 'Universal Profiling',
     }),
+    append: <NewBadge />,
   },
   {
     id: ContentTabIds.LOGS,

x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx

@@ -8,8 +8,8 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonEmpty } from '@elastic/eui';
-import { EuiBadge } from '@elastic/eui';
 import { EuiFlexGroup } from '@elastic/eui';
+import { NewBadge } from '../../../../new_badge';
 import { useProfilingIntegrationSetting } from '../../../../../hooks/use_profiling_integration_setting';
 import { useTabSwitcherContext } from '../../../hooks/use_tab_switcher';
 
@@ -28,11 +28,7 @@ export function CpuProfilingPrompt() {
       gutterSize="s"
       data-test-subj="infraAssetDetailsCPUProfilingPrompt"
     >
-      <EuiBadge color="success">
-        {i18n.translate('xpack.infra.cpuProfilingPrompt.newBadgeLabel', {
-          defaultMessage: 'NEW',
-        })}
-      </EuiBadge>
+      <NewBadge />
       <EuiFlexGroup alignItems="baseline" justifyContent="flexStart" gutterSize="xs">
         {i18n.translate('xpack.infra.cpuProfilingPrompt.p.viewCPUBreakdownUsingLabel', {
           defaultMessage: 'View CPU Breakdown using',

x-pack/plugins/infra/public/components/asset_details/types.ts

@@ -60,6 +60,7 @@ export type RenderMode = FlyoutProps | FullPageProps;
 export interface Tab {
   id: ContentTabIds;
   name: string;
+  append?: JSX.Element;
 }
 
 export type LinkOptions = 'alertRule' | 'nodeDetails' | 'apmServices';

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

@@ -0,0 +1,18 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export const NewBadge = () => (
+  <EuiBadge color="accent">
+    {i18n.translate('xpack.infra.newBadgeLabel', {
+      defaultMessage: 'NEW',
+    })}
+  </EuiBadge>
+);