[Synthetics] Add beta labelling (#149607)

Co-authored-by: jennypavlova <jennypavlova94@gmail.com>
Co-authored-by: Casper Hübertz <casper@formgeist.com>
Fixes https://github.com/elastic/kibana/issues/146041

x-pack/plugins/infra/public/plugin.ts

@@ -92,7 +92,7 @@ export class Plugin implements InfraClientPluginClass {
     const infraEntries = [
       { label: 'Inventory', app: 'metrics', path: '/inventory' },
       { label: 'Metrics Explorer', app: 'metrics', path: '/explorer' },
-      { label: 'Hosts', isBeta: true, app: 'metrics', path: '/hosts' },
+      { label: 'Hosts', isTechnicalPreview: true, app: 'metrics', path: '/hosts' },
     ];
     pluginsSetup.observability.navigation.registerSections(
       startDep$AndHostViewFlag$.pipe(

x-pack/plugins/observability/public/components/shared/page_template/nav_name_with_beta_badge.tsx

@@ -4,45 +4,44 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiBetaBadge } from '@elastic/eui';
-import type { IconType } from '@elastic/eui/src/components/icon/icon';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
-import styled from 'styled-components';
+import { i18n } from '@kbn/i18n';
+import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
 
 interface Props {
-  iconType: IconType;
-  label: string;
+  label?: string;
+  isTechnicalPreview?: boolean;
+  iconType?: IconType;
 }
 
-const LabelContainer = styled.span`
-  max-width: 72%;
-  float: left;
-  &:hover,
-  &:focus-within,
-  &:focus {
-    text-decoration: underline;
-  }
-`;
-
-const StyledBetaBadge = styled(EuiBetaBadge)`
-  margin-left: 5px;
-  margin-bottom: -6px;
-`;
-
-export function NavNameWithBetaBadge({ label, iconType }: Props) {
+export function NavNameWithBetaBadge({ label, iconType, isTechnicalPreview }: Props) {
   return (
-    <>
-      <LabelContainer className="eui-textTruncate">
-        <span>{label}</span>
-      </LabelContainer>
-      <StyledBetaBadge
-        label={i18n.translate('xpack.observability.navigation.experimentalBadgeLabel', {
-          defaultMessage: 'Technical preview',
-        })}
-        size="s"
-        iconType={iconType}
-      />
-    </>
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <span className="eui-textTruncate">
+          <span>{label}</span>
+        </span>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={{ height: 20 }}>
+        {isTechnicalPreview ? (
+          <EuiBetaBadge
+            color="hollow"
+            size="s"
+            label={i18n.translate('xpack.observability.navigation.experimentalBadgeLabel', {
+              defaultMessage: 'Technical preview',
+            })}
+            iconType={iconType}
+          />
+        ) : (
+          <EuiBetaBadge
+            color="hollow"
+            size="s"
+            label={i18n.translate('xpack.observability.navigation.betaBadge', {
+              defaultMessage: 'Beta',
+            })}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx

@@ -81,9 +81,9 @@ export function ObservabilityPageTemplate({
 
   const sideNavItems = useMemo<Array<EuiSideNavItemType<unknown>>>(
     () =>
-      sections.map(({ label, entries }, sectionIndex) => ({
+      sections.map(({ label, entries, isBetaFeature }, sectionIndex) => ({
         id: `${sectionIndex}`,
-        name: label,
+        name: isBetaFeature ? <NavNameWithBetaBadge label={label} /> : label,
         items: entries.map((entry, entryIndex) => {
           const href = getUrlForApp(entry.app, {
             path: entry.path,
@@ -102,10 +102,16 @@ export function ObservabilityPageTemplate({
           const navId = entry.label.toLowerCase().split(' ').join('_');
           return {
             id: `${sectionIndex}.${entryIndex}`,
-            name: entry.isNewFeature ? (
+            name: entry.isBetaFeature ? (
+              <NavNameWithBetaBadge label={entry.label} />
+            ) : entry.isNewFeature ? (
               <NavNameWithBadge label={entry.label} localStorageId={badgeLocalStorageId} />
-            ) : entry.isBeta ? (
-              <NavNameWithBetaBadge label={entry.label} iconType="beaker" />
+            ) : entry.isTechnicalPreview ? (
+              <NavNameWithBetaBadge
+                label={entry.label}
+                iconType="beaker"
+                isTechnicalPreview={true}
+              />
             ) : (
               entry.label
             ),

x-pack/plugins/observability/public/services/navigation_registry.ts

@@ -15,6 +15,8 @@ export interface NavigationSection {
   sortKey: number;
   // the entries to render inside the section
   entries: NavigationEntry[];
+  // shows beta badge besides the navigation label
+  isBetaFeature?: boolean;
 }
 
 export interface NavigationEntry {
@@ -32,8 +34,10 @@ export interface NavigationEntry {
   onClick?: (event: React.MouseEvent<HTMLElement | HTMLButtonElement, MouseEvent>) => void;
   // shows NEW badge besides the navigation label, which will automatically disappear when menu item is clicked.
   isNewFeature?: boolean;
-  // shows beta badge lab icon if the feature is still beta besides the navigation label
-  isBeta?: boolean;
+  // shows technical preview lab icon if the feature is still in technical preview besides the navigation label
+  isTechnicalPreview?: boolean;
+  // shows beta badge besides the navigation label
+  isBetaFeature?: boolean;
   // override default path matching logic to determine if nav entry is selected
   matchPath?: (path: string) => boolean;
 }

x-pack/plugins/synthetics/public/plugin.ts

@@ -144,8 +144,9 @@ export class UptimePlugin
         return await dataHelper.overviewData(params);
       },
     });
+    const isSyntheticsViewEnabled = core.uiSettings.get<boolean>(enableNewSyntheticsView);
 
-    registerUptimeRoutesWithNavigation(core, plugins);
+    registerUptimeRoutesWithNavigation(core, plugins, isSyntheticsViewEnabled);
 
     core.getStartServices().then(([coreStart, clientPluginsStart]) => {});
 
@@ -186,17 +187,17 @@ export class UptimePlugin
       },
     });
 
-    const isSyntheticsViewEnabled = core.uiSettings.get<boolean>(enableNewSyntheticsView);
-
     if (isSyntheticsViewEnabled) {
-      registerSyntheticsRoutesWithNavigation(core, plugins);
-
       // Register the Synthetics UI plugin
       core.application.register({
         id: 'synthetics',
         euiIconType: 'logoObservability',
         order: 8400,
-        title: PLUGIN.SYNTHETICS,
+        title:
+          PLUGIN.SYNTHETICS +
+          i18n.translate('xpack.synthetics.overview.headingBeta', {
+            defaultMessage: ' (beta)',
+          }),
         category: DEFAULT_APP_CATEGORIES.observability,
         keywords: appKeywords,
         deepLinks: [],
@@ -255,42 +256,10 @@ export class UptimePlugin
   public stop(): void {}
 }
 
-function registerSyntheticsRoutesWithNavigation(
-  core: CoreSetup<ClientPluginsStart, unknown>,
-  plugins: ClientPluginsSetup
-) {
-  plugins.observability.navigation.registerSections(
-    from(core.getStartServices()).pipe(
-      map(([coreStart]) => {
-        if (coreStart.application.capabilities.uptime.show) {
-          return [
-            {
-              label: 'Synthetics',
-              sortKey: 499,
-              entries: [
-                {
-                  label: i18n.translate('xpack.synthetics.overview.heading', {
-                    defaultMessage: 'Monitors',
-                  }),
-                  app: 'synthetics',
-                  path: OVERVIEW_ROUTE,
-                  matchFullPath: false,
-                  ignoreTrailingSlash: true,
-                },
-              ],
-            },
-          ];
-        }
-
-        return [];
-      })
-    )
-  );
-}
-
 function registerUptimeRoutesWithNavigation(
   core: CoreSetup<ClientPluginsStart, unknown>,
-  plugins: ClientPluginsSetup
+  plugins: ClientPluginsSetup,
+  isSyntheticsViewEnabled: boolean
 ) {
   plugins.observability.navigation.registerSections(
     from(core.getStartServices()).pipe(
@@ -302,8 +271,8 @@ function registerUptimeRoutesWithNavigation(
               sortKey: 500,
               entries: [
                 {
-                  label: i18n.translate('xpack.synthetics.overview.heading', {
-                    defaultMessage: 'Monitors',
+                  label: i18n.translate('xpack.synthetics.overview.uptimeHeading', {
+                    defaultMessage: 'Uptime Monitors',
                   }),
                   app: 'uptime',
                   path: '/',
@@ -318,6 +287,20 @@ function registerUptimeRoutesWithNavigation(
                   path: '/certificates',
                   matchFullPath: true,
                 },
+                ...(isSyntheticsViewEnabled
+                  ? [
+                      {
+                        label: i18n.translate('xpack.synthetics.overview.headingBetaSection', {
+                          defaultMessage: 'Synthetics',
+                        }),
+                        app: 'synthetics',
+                        path: OVERVIEW_ROUTE,
+                        matchFullPath: false,
+                        ignoreTrailingSlash: true,
+                        isBetaFeature: true,
+                      },
+                    ]
+                  : []),
               ],
             },
           ];