Add different data-test-subj for different alert details pages based …

…on rule type id (#163709) Closes #163682 ## 📝 Summary Add different data-test-subj for different alert details pages based on rule type id, this will help us in tracking these pages more easily. ![image](https://github.com/elastic/kibana/assets/12370520/86a080f8-7a1c-4352-abab-9dcd93c93176) ![image](https://github.com/elastic/kibana/assets/12370520/195358ef-e01d-42b6-b5ab-abdb55447604)
elastic · Aug 14, 2023 · cb3d22a · cb3d22a
1 parent 7cb6e29
commit cb3d22a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alert_details/alert_details.test.tsx b/x-pack/plugins/observability/public/pages/alert_details/alert_details.test.tsx
@@ -139,7 +139,7 @@ describe('Alert details', () => {
 
     expect(alertDetails.queryByTestId('alertDetails')).toBeTruthy();
     expect(alertDetails.queryByTestId('alertDetailsError')).toBeFalsy();
-    expect(alertDetails.queryByTestId('page-title-container')).toBeTruthy();
+    expect(alertDetails.queryByTestId('alertDetailsPageTitle')).toBeTruthy();
     expect(alertDetails.queryByTestId('alert-summary-container')).toBeTruthy();
   });
 

diff --git a/x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx b/x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx
@@ -123,7 +123,9 @@ export function AlertDetails() {
   return (
     <ObservabilityPageTemplate
       pageHeader={{
-        pageTitle: <PageTitle alert={alert} />,
+        pageTitle: (
+          <PageTitle alert={alert} dataTestSubj={rule?.ruleTypeId || 'alertDetailsPageTitle'} />
+        ),
         rightSideItems: [
           <CasesContext
             owner={[observabilityFeatureId]}

diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/page_title.test.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.test.tsx
@@ -15,6 +15,7 @@ import { alert } from '../mock/alert';
 describe('Page Title', () => {
   const defaultProps = {
     alert,
+    dataTestSubj: 'ruleTypeId',
   };
 
   const renderComp = (props: PageTitleProps) => {
@@ -28,7 +29,7 @@ describe('Page Title', () => {
   it('should display Log threshold title', () => {
     const { getByTestId } = renderComp(defaultProps);
 
-    expect(getByTestId('page-title-container').textContent).toContain('Log threshold breached');
+    expect(getByTestId('ruleTypeId').textContent).toContain('Log threshold breached');
   });
 
   it('should display Anomaly title', () => {
@@ -40,11 +41,12 @@ describe('Page Title', () => {
           [ALERT_RULE_CATEGORY]: 'Anomaly',
         },
       },
+      dataTestSubj: defaultProps.dataTestSubj,
     };
 
     const { getByTestId } = renderComp(props);
 
-    expect(getByTestId('page-title-container').textContent).toContain('Anomaly detected');
+    expect(getByTestId('ruleTypeId').textContent).toContain('Anomaly detected');
   });
 
   it('should display Inventory title', () => {
@@ -56,13 +58,12 @@ describe('Page Title', () => {
           [ALERT_RULE_CATEGORY]: 'Inventory',
         },
       },
+      dataTestSubj: defaultProps.dataTestSubj,
     };
 
     const { getByTestId } = renderComp(props);
 
-    expect(getByTestId('page-title-container').textContent).toContain(
-      'Inventory threshold breached'
-    );
+    expect(getByTestId('ruleTypeId').textContent).toContain('Inventory threshold breached');
   });
 
   it('should display an active badge when active is true', async () => {
@@ -71,7 +72,7 @@ describe('Page Title', () => {
   });
 
   it('should display an inactive badge when active is false', async () => {
-    const updatedProps = { alert };
+    const updatedProps = { alert, dataTestSubj: defaultProps.dataTestSubj };
     updatedProps.alert.active = false;
 
     const { getByText } = renderComp({ ...updatedProps });

diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/page_title.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/page_title.tsx
@@ -39,6 +39,7 @@ import {
 
 export interface PageTitleProps {
   alert: TopAlert | null;
+  dataTestSubj: string;
 }
 
 export function pageTitleContent(ruleCategory: string) {
@@ -51,7 +52,7 @@ export function pageTitleContent(ruleCategory: string) {
   });
 }
 
-export function PageTitle({ alert }: PageTitleProps) {
+export function PageTitle({ alert, dataTestSubj }: PageTitleProps) {
   const { euiTheme } = useEuiTheme();
 
   if (!alert) return <EuiLoadingSpinner />;
@@ -62,7 +63,7 @@ export function PageTitle({ alert }: PageTitleProps) {
     alert.fields[ALERT_RULE_TYPE_ID] === METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID;
 
   return (
-    <div data-test-subj="page-title-container">
+    <div data-test-subj={dataTestSubj}>
       <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
         {pageTitleContent(alert.fields[ALERT_RULE_CATEGORY])}
         {showExperimentalBadge && <ExperimentalBadge />}