[8.19] [Rule Details] Update tooltip copy for Investigation Guide/Related Dashboards (elastic#224142) (elastic#224952)

kibanamachine · justinkambic · web-flow · commit 4dcda7c786f4 · 2025-06-23T22:27:44.000+01:00
# Backport This will backport the following commits from `main` to `8.19`: - [[Rule Details] Update tooltip copy for Investigation Guide/Related Dashboards (elastic#224142)](elastic#224142)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Justin Kambic <jk@elastic.co>
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.test.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { LabelWithTooltip } from './label_with_tooltip';
+
+describe('LabelWithTooltip', () => {
+  it('renders label and tooltip content', async () => {
+    const { getByText } = render(
+      <LabelWithTooltip labelContent="Label" tooltipContent="Tooltip" />
+    );
+    const infoElement = getByText('Info');
+
+    fireEvent.mouseOver(infoElement);
+    await waitFor(() => {
+      expect(getByText('Tooltip')).toBeInTheDocument();
+    });
+    expect(getByText('Label')).toBeInTheDocument();
+  });
+});
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.tsx
@@ -0,0 +1,28 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
+
+export function LabelWithTooltip({
+  labelContent,
+  tooltipContent,
+}: {
+  labelContent: string;
+  tooltipContent: string;
+}) {
+  return (
+    <EuiFlexGroup gutterSize="xs" alignItems="center">
+      <EuiFlexItem grow={false}>{labelContent}</EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiIconTip type="questionInCircle" content={tooltipContent} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_dashboards.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_dashboards.tsx
@@ -21,7 +21,12 @@ import type { ContentManagementPublicStart } from '@kbn/content-management-plugi
 import { OptionalFieldLabel } from '../optional_field_label';
 import { dashboardServiceProvider, type DashboardItem } from '../common/services/dashboard_service';
 import { useRuleFormState, useRuleFormDispatch } from '../hooks';
-import { ALERT_LINK_DASHBOARDS_TITLE, ALERT_LINK_DASHBOARDS_PLACEHOLDER } from '../translations';
+import {
+  ALERT_LINK_DASHBOARDS_TITLE,
+  ALERT_LINK_DASHBOARDS_PLACEHOLDER,
+  ALERT_LINK_DASHBOARDS_LABEL_TOOLTIP_CONTENT,
+} from '../translations';
+import { LabelWithTooltip } from './label_with_tooltip';
 
 export interface Props {
   contentManagement: ContentManagementPublicStart;
@@ -167,7 +172,12 @@ export const RuleDashboards = ({ contentManagement }: Props) => {
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiFormRow
-            label={ALERT_LINK_DASHBOARDS_TITLE}
+            label={
+              <LabelWithTooltip
+                labelContent={ALERT_LINK_DASHBOARDS_TITLE}
+                tooltipContent={ALERT_LINK_DASHBOARDS_LABEL_TOOLTIP_CONTENT}
+              />
+            }
             fullWidth
             labelAppend={OptionalFieldLabel}
           >
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx
@@ -16,12 +16,10 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiIconTip,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
 import {
   RULE_INVESTIGATION_GUIDE_LABEL,
+  RULE_INVESTIGATION_GUIDE_LABEL_TOOLTIP_CONTENT,
   RULE_NAME_INPUT_TITLE,
   RULE_TAG_INPUT_TITLE,
   RULE_TAG_PLACEHOLDER,
@@ -31,6 +29,7 @@ import { OptionalFieldLabel } from '../optional_field_label';
 import { InvestigationGuideEditor } from './rule_investigation_guide_editor';
 import { RuleDashboards } from './rule_dashboards';
 import { MAX_ARTIFACTS_INVESTIGATION_GUIDE_LENGTH } from '../constants';
+import { LabelWithTooltip } from './label_with_tooltip';
 
 export const RULE_DETAIL_MIN_ROW_WIDTH = 600;
 
@@ -143,25 +142,10 @@ export const RuleDetails = () => {
       <EuiFormRow
         fullWidth
         label={
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiFlexItem grow={false}>{RULE_INVESTIGATION_GUIDE_LABEL}</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiIconTip
-                type="questionInCircle"
-                content={
-                  <p>
-                    {i18n.translate(
-                      'responseOpsRuleForm.ruleDetails.investigationGuideFormRow.toolTip.content',
-                      {
-                        defaultMessage:
-                          'These details will be included in a new tab on the alert details page for every alert triggered by this rule.',
-                      }
-                    )}
-                  </p>
-                }
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <LabelWithTooltip
+            labelContent={RULE_INVESTIGATION_GUIDE_LABEL}
+            tooltipContent={RULE_INVESTIGATION_GUIDE_LABEL_TOOLTIP_CONTENT}
+          />
         }
         labelAppend={OptionalFieldLabel}
         isInvalid={
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/translations.ts b/src/platform/packages/shared/response-ops/rule_form/src/translations.ts
@@ -110,6 +110,14 @@ export const ALERT_LINK_DASHBOARDS_TITLE = i18n.translate(
   }
 );
 
+export const ALERT_LINK_DASHBOARDS_LABEL_TOOLTIP_CONTENT = i18n.translate(
+  'responseOpsRuleForm.ruleForm.ruleDefinition.alertLinkDashboards.label.tooltipContent',
+  {
+    defaultMessage:
+      'Visualize data from various sources to investigate alerts generated by this rule. Alerts will include links to the dashboards you choose.',
+  }
+);
+
 export const ALERT_LINK_DASHBOARDS_PLACEHOLDER = i18n.translate(
   'responseOpsRuleForm.ruleForm.ruleDefinition.alertLinkDashboardsTitle',
   {
@@ -311,6 +319,14 @@ export const RULE_INVESTIGATION_GUIDE_LABEL = i18n.translate(
   }
 );
 
+export const RULE_INVESTIGATION_GUIDE_LABEL_TOOLTIP_CONTENT = i18n.translate(
+  'responseOpsRuleForm.ruleDetails.investigationGuideFormRow.toolTip.content',
+  {
+    defaultMessage:
+      'These details will be included in a new tab on the alert details page for every alert triggered by this rule.',
+  }
+);
+
 export const RULE_NAME_ARIA_LABEL_TEXT = i18n.translate(
   'responseOpsRuleForm.ruleForm.rulePage.ruleNameAriaLabelText',
   {
