From cf178c686cfcbbea0742b19e409d9186ca79ce66 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 16 Jun 2025 16:42:16 -0400 Subject: [PATCH 1/5] Add text content to translations file. --- .../response-ops/rule_form/src/translations.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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 b3eb526a973e5..48097b9f43b1d 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: + 'Choose dashboards to link to this rule. Alerts created by this rule will include links to these dashboards.', + } +); + 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', { From a9d70607e5beacf5ffb56c1bdb3c8080fea65d25 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 16 Jun 2025 16:42:58 -0400 Subject: [PATCH 2/5] Add `LabelWithTooltip` component. --- .../rule_details/label_with_tooltip.test.tsx | 27 ++++++++++++++++++ .../src/rule_details/label_with_tooltip.tsx | 28 +++++++++++++++++++ 2 files changed, 55 insertions(+) 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} + + + + + ); +} From 5afc1b8279990a30431e4b4ac1894b1ec2af2836 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 16 Jun 2025 16:44:15 -0400 Subject: [PATCH 3/5] Refactor form row labels for dashboard/investigation guide. --- .../src/rule_details/rule_dashboards.tsx | 14 ++++++++-- .../src/rule_details/rule_details.tsx | 28 ++++--------------- 2 files changed, 18 insertions(+), 24 deletions(-) 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={ From 4225510330fabfef3cdd5b0c4c4032203b2c87fb Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 18 Jun 2025 17:08:24 -0400 Subject: [PATCH 4/5] Update dashboard tooltip content. --- .../packages/shared/response-ops/rule_form/src/translations.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 48097b9f43b1d..bc62be66c66db 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 @@ -113,8 +113,7 @@ 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: - 'Choose dashboards to link to this rule. Alerts created by this rule will include links to these dashboards.', + defaultMessage: `Dashboards let you visualize and analyze alerts created by this rule. When alerts are created, you can quickly access your selected dashboards from the alerts' details page.`, } ); From 60c707b6a44be64fa343331ef8fd7fd3bee0cf48 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 23 Jun 2025 13:32:57 -0400 Subject: [PATCH 5/5] Modify copy based on PR feedback. --- .../packages/shared/response-ops/rule_form/src/translations.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 bc62be66c66db..8e484b83aa2fc 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 @@ -113,7 +113,8 @@ 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: `Dashboards let you visualize and analyze alerts created by this rule. When alerts are created, you can quickly access your selected dashboards from the alerts' details page.`, + defaultMessage: + 'Visualize data from various sources to investigate alerts generated by this rule. Alerts will include links to the dashboards you choose.', } );