[ML] Add tooltip help text for Transform filter query control (#108720)

* [ML] Add tooltip help text * [ML] Remove unused import * [ML] Update tooltip content to be clearer Co-authored-by: Lisa Cawley <[email protected]> Co-authored-by: Lisa Cawley <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Aug 19, 2021 · 4d0623e · 4d0623e
1 parent 48ce73d
commit 4d0623e
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/.../create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx b/.../create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useContext, useMemo } from 'react';
-import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import { EuiFormRow, EuiIcon, EuiSelect, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 import { CreateTransformWizardContext } from '../../../../wizard/wizard';
@@ -72,10 +72,22 @@ export const FilterAggForm: PivotAggsConfigFilter['AggFormComponent'] = ({
     <>
       <EuiFormRow
         label={
-          <FormattedMessage
-            id="xpack.transform.agg.popoverForm.filerAggLabel"
-            defaultMessage="Filter query"
-          />
+          <>
+            <FormattedMessage
+              id="xpack.transform.agg.popoverForm.filerAggLabel"
+              defaultMessage="Filter query"
+            />
+            <EuiToolTip
+              content={
+                <FormattedMessage
+                  id="xpack.transform.agg.popoverForm.filerQueryAdvancedSuggestionTooltip"
+                  defaultMessage="To add other filter query aggregations, edit the JSON config."
+                />
+              }
+            >
+              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+            </EuiToolTip>
+          </>
         }
       >
         <EuiSelect