From b3c08b77e917796ffb015714b837930f33361386 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 23 Jun 2025 15:39:05 -0400 Subject: [PATCH] [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. image ## 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. (cherry picked from commit 69a57a7f9f28a968e69cabba91afe3cd1585e7f4) --- .../rule_details/label_with_tooltip.test.tsx | 27 ++++++++++++++++++ .../src/rule_details/label_with_tooltip.tsx | 28 +++++++++++++++++++ .../src/rule_details/rule_dashboards.tsx | 14 ++++++++-- .../src/rule_details/rule_details.tsx | 28 ++++--------------- .../rule_form/src/translations.ts | 16 +++++++++++ 5 files changed, 89 insertions(+), 24 deletions(-) create mode 100644 src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.test.tsx create mode 100644 src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.tsx 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 new file mode 100644 index 0000000000000..458663bb5b123 --- /dev/null +++ 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( + + ); + 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 new file mode 100644 index 0000000000000..b9a5304fc6e60 --- /dev/null +++ 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 ( + + {labelContent} + + + + + ); +} 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 index 935ed8b2de843..53db810ffb043 100644 --- 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) => { + } 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 index 8d0267acdda46..046ef4fd34520 100644 --- 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 = () => { - {RULE_INVESTIGATION_GUIDE_LABEL} - - - {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.', - } - )} -

- } - /> - - + } 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 index 77c61702e4818..0fa65673377f4 100644 --- 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', {