[Metric UI] Add helper text to of expressions when creating Threshold…

… Alerts (#89750) (#90169) * add helptext to of expressions * Make helptext optional as a prop for of expressions * Add help text to metric threshold alert form * Add test for helptext in of expression * Accept JSX elements as helptext in of expressions * Remove usage of useEuiI18n and use FormattedMessage component for translations * Follow writing guidelines and fix typo * Update translation keys * Update documentation link Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Feb 3, 2021 · 36b46a4 · 36b46a4
1 parent 0cfd955
commit 36b46a4
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 1 deletion.
diff --git a/...ra/public/alerting/metric_threshold/components/__snapshots__/expression_row.test.tsx.snap b/...ra/public/alerting/metric_threshold/components/__snapshots__/expression_row.test.tsx.snap
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.test.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.test.tsx
@@ -81,4 +81,21 @@ describe('ExpressionRow', () => {
       wrapper.html().match('<span class="euiExpression__value">0.5</span>') ?? [];
     expect(valueMatch).toBeTruthy();
   });
+
+  it('should render a helpText for the of expression', async () => {
+    const expression = {
+      metric: 'system.load.1',
+      comparator: Comparator.GT,
+      threshold: [0.5],
+      timeSize: 1,
+      timeUnit: 'm',
+      aggType: 'avg',
+    } as MetricExpression;
+
+    const { wrapper } = await setup(expression as MetricExpression);
+
+    const helpText = wrapper.find('[data-test-subj="ofExpression"]').prop('helpText');
+
+    expect(helpText).toMatchSnapshot();
+  });
 });
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx
@@ -5,7 +5,15 @@
  */
 import React, { useCallback, useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiSpacer, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiSpacer,
+  EuiText,
+  EuiLink,
+} from '@elastic/eui';
 import { IFieldType } from 'src/plugins/data/public';
 import { pctToDecimal, decimalToPct } from '../../../../common/utils/corrected_percent_convert';
 import {
@@ -154,6 +162,26 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
                   aggType={aggType}
                   errors={errors}
                   onChangeSelectedAggField={updateMetric}
+                  helpText={
+                    <FormattedMessage
+                      id="xpack.infra.metrics.alertFlyout.ofExpression.helpTextDetail"
+                      defaultMessage="Can't find a metric? {documentationLink}."
+                      values={{
+                        documentationLink: (
+                          <EuiLink
+                            href="https://www.elastic.co/guide/en/observability/current/configure-settings.html"
+                            target="BLANK"
+                          >
+                            <FormattedMessage
+                              id="xpack.infra.metrics.alertFlyout.ofExpression.popoverLinkLabel"
+                              defaultMessage="Learn how to add more data"
+                            />
+                          </EuiLink>
+                        ),
+                      }}
+                    />
+                  }
+                  data-test-subj="ofExpression"
                 />
               </StyledExpression>
             )}

diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.test.tsx
@@ -132,4 +132,22 @@ describe('of expression', () => {
       )
     ).toBeTruthy();
   });
+
+  it('renders a helptext when passed as a prop', () => {
+    const onChangeSelectedAggField = jest.fn();
+    const wrapper = shallow(
+      <OfExpression
+        aggType="count"
+        errors={{ aggField: [] }}
+        fields={[{ normalizedType: 'number', name: 'test', text: 'test text' }]}
+        aggField="test"
+        onChangeSelectedAggField={onChangeSelectedAggField}
+        helpText="Helptext test message"
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="availablefieldsOptionsFormRow"]').prop('helpText')).toBe(
+      'Helptext test message'
+    );
+  });
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx
@@ -44,6 +44,7 @@ interface OfExpressionProps {
     | 'rightUp'
     | 'rightDown';
   display?: 'fullWidth' | 'inline';
+  helpText?: string | JSX.Element;
 }
 
 export const OfExpression = ({
@@ -55,6 +56,7 @@ export const OfExpression = ({
   display = 'inline',
   customAggTypesOptions,
   popupPosition,
+  helpText,
 }: OfExpressionProps) => {
   const [aggFieldPopoverOpen, setAggFieldPopoverOpen] = useState(false);
   const firstFieldOption = {
@@ -119,6 +121,8 @@ export const OfExpression = ({
               fullWidth
               isInvalid={errors.aggField.length > 0 && aggField !== undefined}
               error={errors.aggField}
+              data-test-subj="availablefieldsOptionsFormRow"
+              helpText={helpText}
             >
               <EuiComboBox
                 fullWidth