[7.x] [Lens] Add datasource fields group help text (#85544) (#85988)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss

@@ -10,6 +10,10 @@
   margin-bottom: $euiSizeS;
 }
 
+.lnsInnerIndexPatternDataPanel__titleTooltip {
+  margin-right: $euiSizeXS;
+}
+
 .lnsInnerIndexPatternDataPanel__fieldItems {
   // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
   padding: $euiSizeXS;
@@ -34,3 +38,5 @@
     margin-right: $euiSizeS;
   }
 }
+
+

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx

@@ -335,7 +335,10 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
           : i18n.translate('xpack.lens.indexPattern.availableFieldsLabel', {
               defaultMessage: 'Available fields',
             }),
-
+        helpText: i18n.translate('xpack.lens.indexPattern.allFieldsLabelHelp', {
+          defaultMessage:
+            'Available fields have data in the first 500 documents that match your filters. To view all fields, expand Empty fields. Some field types cannot be visualized in Lens, including full text and geographic fields.',
+        }),
         isAffectedByGlobalFilter: !!filters.length,
         isAffectedByTimeFilter: true,
         hideDetails: fieldInfoUnavailable,
@@ -357,6 +360,10 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
         defaultNoFieldsMessage: i18n.translate('xpack.lens.indexPatterns.noEmptyDataLabel', {
           defaultMessage: `There are no empty fields.`,
         }),
+        helpText: i18n.translate('xpack.lens.indexPattern.emptyFieldsLabelHelp', {
+          defaultMessage:
+            'Empty fields did not contain any values in the first 500 documents based on your filters.',
+        }),
       },
       MetaFields: {
         fields: groupedFields.metaFields,

x-pack/plugins/lens/public/indexpattern_datasource/field_list.tsx

@@ -22,6 +22,7 @@ export type FieldGroups = Record<
     showInAccordion: boolean;
     isInitiallyOpen: boolean;
     title: string;
+    helpText?: string;
     isAffectedByGlobalFilter: boolean;
     isAffectedByTimeFilter: boolean;
     hideDetails?: boolean;
@@ -150,6 +151,7 @@ export function FieldList({
                 key={key}
                 id={`lnsIndexPattern${key}`}
                 label={fieldGroup.title}
+                helpTooltip={fieldGroup.helpText}
                 exists={exists}
                 hideDetails={fieldGroup.hideDetails}
                 hasLoaded={!!hasSyncedExistingFields}

x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx

@@ -15,6 +15,7 @@ import {
   EuiLoadingSpinner,
   EuiIconTip,
 } from '@elastic/eui';
+import classNames from 'classnames';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { IndexPatternField } from './types';
 import { FieldItem } from './field_item';
@@ -39,6 +40,7 @@ export interface FieldsAccordionProps {
   onToggle: (open: boolean) => void;
   id: string;
   label: string;
+  helpTooltip?: string;
   hasLoaded: boolean;
   fieldsCount: number;
   isFiltered: boolean;
@@ -55,6 +57,7 @@ export const InnerFieldsAccordion = function InnerFieldsAccordion({
   onToggle,
   id,
   label,
+  helpTooltip,
   hasLoaded,
   fieldsCount,
   isFiltered,
@@ -78,6 +81,11 @@ export const InnerFieldsAccordion = function InnerFieldsAccordion({
     [fieldProps, exists, hideDetails]
   );
 
+  const titleClassname = classNames({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    lnsInnerIndexPatternDataPanel__titleTooltip: !!helpTooltip,
+  });
+
   return (
     <EuiAccordion
       initialIsOpen={initialIsOpen}
@@ -86,7 +94,20 @@ export const InnerFieldsAccordion = function InnerFieldsAccordion({
       id={id}
       buttonContent={
         <EuiText size="xs">
-          <strong>{label}</strong>
+          <strong className={titleClassname}>{label}</strong>
+          {!!helpTooltip && (
+            <EuiIconTip
+              aria-label={helpTooltip}
+              type="questionInCircle"
+              color="subdued"
+              size="s"
+              position="right"
+              content={helpTooltip}
+              iconProps={{
+                className: 'eui-alignTop',
+              }}
+            />
+          )}
         </EuiText>
       }
       extraAction={