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

## Summary Resolves #221426. Adds tooltip content for the Related Dashboards and Investigation Guide fields on the Details segment of the rule create/edit flow. <img width="1039" alt="image" src="https://github.com/user-attachments/assets/6f812ebc-7a4c-42d5-ae20-c557665a7f17" /> ## Testing this PR Hover over the info tips on the form row for the Investigation Guide and Related Dashboard fields. Ensure that they work and you can view the copy. ### Technical Writer Feedback The tooltips for these two fields are the main area we'd like additional feedback/refinement. If you have thoughts, please leave a review: - [Investigation guide](https://github.com/elastic/kibana/pull/224142/files#diff-f61636ed67a25004232d29347e88ca18b9ef0c8551dab5e192c64b524c6f077eR326) - [Related dashboards](https://github.com/elastic/kibana/pull/224142/files#diff-f61636ed67a25004232d29347e88ca18b9ef0c8551dab5e192c64b524c6f077eR117) For additional context: - Investigation guide: at the moment it is a basic text field that allows users to include links and other information related to their rule to help with diagnosing/managing alerts. - Related dashboards: the user may choose to associate existing dashboards with their rule. These dashboards are likewise then shown on alerts that are subsequently triggered by the rule.
2025-06-27 18:51:07 -04:00 · 2025-06-23 15:39:05 -04:00 · 2025-06-23 15:39:05 -04:00 · 69a57a7f9f
commit 69a57a7f9f
parent dd2e7cb5f2
5 changed files with 89 additions and 24 deletions
--- 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();
+  });
+});
--- 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>
+  );
+}
--- 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}
          >
--- 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={
--- 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',
  {