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

…174242) (#174880)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[ObsUX][Profiling, Infra] Add NEW badge to the Profiling tab
(#174242)](#174242)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"jennypavlova","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-01-04T16:09:09Z","message":"[ObsUX][Profiling,
Infra] Add NEW badge to the Profiling tab (#174242)\n\nCloses #173156
\r\n\r\n## Summary\r\n\r\nThis PR adds a `NEW` badge to the profiling
tab and changes the\r\nprofiling prompt badge color to pink\r\n\r\n##
Testing\r\nThe badges can be checked on the node details page and inside
the host\r\ndetails
flyout:\r\n\r\n![image](https://github.com/elastic/kibana/assets/14139027/30f4ca24-b460-4fe9-8c2c-372e435a1c64)\r\n\r\n![image](https://github.com/elastic/kibana/assets/14139027/423232b2-fc2e-4718-a089-180157db22da)","sha":"1182ce678c3b190aa5172f2b473db0d84ba12f5d","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v8.12.0","Team:obs-ux-infra_services","v8.13.0"],"number":174242,"url":"https://github.com/elastic/kibana/pull/174242","mergeCommit":{"message":"[ObsUX][Profiling,
Infra] Add NEW badge to the Profiling tab (#174242)\n\nCloses #173156
\r\n\r\n## Summary\r\n\r\nThis PR adds a `NEW` badge to the profiling
tab and changes the\r\nprofiling prompt badge color to pink\r\n\r\n##
Testing\r\nThe badges can be checked on the node details page and inside
the host\r\ndetails
flyout:\r\n\r\n![image](https://github.com/elastic/kibana/assets/14139027/30f4ca24-b460-4fe9-8c2c-372e435a1c64)\r\n\r\n![image](https://github.com/elastic/kibana/assets/14139027/423232b2-fc2e-4718-a089-180157db22da)","sha":"1182ce678c3b190aa5172f2b473db0d84ba12f5d"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/174242","number":174242,"mergeCommit":{"message":"[ObsUX][Profiling,
Infra] Add NEW badge to the Profiling tab (#174242)\n\nCloses #173156
\r\n\r\n## Summary\r\n\r\nThis PR adds a `NEW` badge to the profiling
tab and changes the\r\nprofiling prompt badge color to pink\r\n\r\n##
Testing\r\nThe badges can be checked on the node details page and inside
the host\r\ndetails
flyout:\r\n\r\n![image](https://github.com/elastic/kibana/assets/14139027/30f4ca24-b460-4fe9-8c2c-372e435a1c64)\r\n\r\n![image](https://github.com/elastic/kibana/assets/14139027/423232b2-fc2e-4718-a089-180157db22da)","sha":"1182ce678c3b190aa5172f2b473db0d84ba12f5d"}}]}]
BACKPORT-->

Co-authored-by: jennypavlova <[email protected]>

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>
+);