[7.x] [Uptime] Monitor Details - add Beta disclaimer to Uptime monitor details title (#96886)

x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx

@@ -7,11 +7,11 @@
 
 import React from 'react';
 import moment from 'moment';
+import { screen } from '@testing-library/react';
+import { render } from '../../lib/helper/rtl_helpers';
 import * as reactRouterDom from 'react-router-dom';
 import { Ping } from '../../../common/runtime_types';
 import { MonitorPageTitle } from './monitor_title';
-import { renderWithRouter } from '../../lib';
-import { mockReduxHooks } from '../../lib/helper/test_helpers';
 
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
@@ -48,6 +48,54 @@ describe('MonitorTitle component', () => {
     },
   };
 
+  const defaultTCPMonitorStatus: Ping = {
+    docId: 'few213kl',
+    timestamp: moment(new Date()).subtract(15, 'm').toString(),
+    monitor: {
+      duration: {
+        us: 1234567,
+      },
+      id: 'tcp',
+      status: 'up',
+      type: 'tcp',
+    },
+    url: {
+      full: 'https://www.elastic.co/',
+    },
+  };
+
+  const defaultICMPMonitorStatus: Ping = {
+    docId: 'few213kl',
+    timestamp: moment(new Date()).subtract(15, 'm').toString(),
+    monitor: {
+      duration: {
+        us: 1234567,
+      },
+      id: 'icmp',
+      status: 'up',
+      type: 'icmp',
+    },
+    url: {
+      full: 'https://www.elastic.co/',
+    },
+  };
+
+  const defaultBrowserMonitorStatus: Ping = {
+    docId: 'few213kl',
+    timestamp: moment(new Date()).subtract(15, 'm').toString(),
+    monitor: {
+      duration: {
+        us: 1234567,
+      },
+      id: 'browser',
+      status: 'up',
+      type: 'browser',
+    },
+    url: {
+      full: 'https://www.elastic.co/',
+    },
+  };
+
   const monitorStatusWithName: Ping = {
     ...defaultMonitorStatus,
     monitor: {
@@ -58,25 +106,70 @@ describe('MonitorTitle component', () => {
 
   beforeEach(() => {
     mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } });
-    mockReduxHooks(defaultMonitorStatus);
   });
 
   it('renders the monitor heading and EnableMonitorAlert toggle', () => {
-    mockReduxHooks(monitorStatusWithName);
-    const component = renderWithRouter(<MonitorPageTitle />);
-    expect(component.find('h1').text()).toBe(monitorName);
-    expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1);
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: monitorStatusWithName, loading: false } },
+    });
+    expect(screen.getByRole('heading', { level: 1, name: monitorName })).toBeInTheDocument();
+    expect(screen.getByTestId('uptimeDisplayDefineConnector')).toBeInTheDocument();
   });
 
   it('renders the user provided monitorId when the name is not present', () => {
     mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } });
-    const component = renderWithRouter(<MonitorPageTitle />);
-    expect(component.find('h1').text()).toBe(defaultMonitorId);
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: defaultMonitorStatus, loading: false } },
+    });
+    expect(screen.getByRole('heading', { level: 1, name: defaultMonitorId })).toBeInTheDocument();
   });
 
   it('renders the url when the monitorId is auto generated and the monitor name is not present', () => {
     mockReactRouterDomHooks({ useParamsResponse: { monitorId: autoGeneratedMonitorIdEncoded } });
-    const component = renderWithRouter(<MonitorPageTitle />);
-    expect(component.find('h1').text()).toBe(defaultMonitorStatus.url?.full);
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: defaultMonitorStatus, loading: false } },
+    });
+    expect(
+      screen.getByRole('heading', { level: 1, name: defaultMonitorStatus.url?.full })
+    ).toBeInTheDocument();
+  });
+
+  it('renders beta disclaimer for synthetics monitors', () => {
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: defaultBrowserMonitorStatus, loading: false } },
+    });
+    const betaLink = screen.getByRole('link', {
+      name: 'See more External link',
+    }) as HTMLAnchorElement;
+    expect(betaLink).toBeInTheDocument();
+    expect(betaLink.href).toBe('https://www.elastic.co/what-is/synthetic-monitoring');
+    expect(screen.getByText('Browser (BETA)')).toBeInTheDocument();
+  });
+
+  it('does not render beta disclaimer for http', () => {
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: defaultMonitorStatus, loading: false } },
+    });
+    expect(screen.getByText('HTTP ping')).toBeInTheDocument();
+    expect(screen.queryByText(/BETA/)).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument();
+  });
+
+  it('does not render beta disclaimer for tcp', () => {
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: defaultTCPMonitorStatus, loading: false } },
+    });
+    expect(screen.getByText('TCP ping')).toBeInTheDocument();
+    expect(screen.queryByText(/BETA/)).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument();
+  });
+
+  it('renders badge and does not render beta disclaimer for icmp', () => {
+    render(<MonitorPageTitle />, {
+      state: { monitorStatus: { status: defaultICMPMonitorStatus, loading: false } },
+    });
+    expect(screen.getByText('ICMP ping')).toBeInTheDocument();
+    expect(screen.queryByText(/BETA/)).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'See more External link' })).not.toBeInTheDocument();
   });
 });

x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useMonitorId } from '../../hooks';
@@ -38,22 +39,88 @@ export const MonitorPageTitle: React.FC = () => {
 
   const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor);
 
+  const type = selectedMonitor?.monitor?.type;
+  const isBrowser = type === 'browser';
+
   useBreadcrumbs([{ text: nameOrId }]);
 
+  const renderMonitorType = (monitorType: string) => {
+    switch (monitorType) {
+      case 'http':
+        return (
+          <FormattedMessage
+            id="xpack.uptime.monitorDetails.title.pingType.http"
+            defaultMessage="HTTP ping"
+          />
+        );
+      case 'tcp':
+        return (
+          <FormattedMessage
+            id="xpack.uptime.monitorDetails.title.pingType.tcp"
+            defaultMessage="TCP ping"
+          />
+        );
+      case 'icmp':
+        return (
+          <FormattedMessage
+            id="xpack.uptime.monitorDetails.title.pingType.icmp"
+            defaultMessage="ICMP ping"
+          />
+        );
+      case 'browser':
+        return (
+          <FormattedMessage
+            id="xpack.uptime.monitorDetails.title.pingType.browser"
+            defaultMessage="Browser"
+          />
+        );
+      default:
+        return '';
+    }
+  };
+
   return (
-    <EuiFlexGroup wrap={false} data-test-subj="monitorTitle">
-      <EuiFlexItem grow={false}>
-        <EuiTitle>
-          <h1 className="eui-textNoWrap">{nameOrId}</h1>
-        </EuiTitle>
-        <EuiSpacer size="xs" />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
-        <EnableMonitorAlert
-          monitorId={monitorId}
-          monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <>
+      <EuiFlexGroup wrap={false} data-test-subj="monitorTitle">
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h1 className="eui-textNoWrap">{nameOrId}</h1>
+          </EuiTitle>
+          <EuiSpacer size="xs" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+          <EnableMonitorAlert
+            monitorId={monitorId}
+            monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup wrap={false} gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={false}>
+          {type && (
+            <EuiBadge color="hollow">
+              {renderMonitorType(type)}{' '}
+              {isBrowser && (
+                <FormattedMessage
+                  id="xpack.uptime.monitorDetails.title.disclaimer.description"
+                  defaultMessage="(BETA)"
+                />
+              )}
+            </EuiBadge>
+          )}
+        </EuiFlexItem>
+        {isBrowser && (
+          <EuiFlexItem grow={false}>
+            <EuiLink href="https://www.elastic.co/what-is/synthetic-monitoring" external>
+              <FormattedMessage
+                id="xpack.uptime.monitorDetails.title.disclaimer.link"
+                defaultMessage="See more"
+              />
+            </EuiLink>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </>
   );
 };