[8.x] [Lens] Replace the inline quick function documentation icon and popover with tooltips (#216204) (#216812)

# Backport This will backport the following commits from `main` to `8.x`: - [[Lens] Replace the inline quick function documentation icon and popover with tooltips (#216204)](https://github.com/elastic/kibana/pull/216204)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Andreana Malama <72010092+andrimal@users.noreply.github.com> Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2025-04-02 18:15:31 +02:00 · 2025-04-02 18:15:31 +02:00 · 3d43f2886b
commit 3d43f2886b
parent 3dd2138d0f
4 changed files with 13 additions and 98 deletions
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@ -27572,8 +27572,6 @@
    "xpack.lens.indexPattern.formulaWarningText": "Pour écraser votre formule, sélectionnez une fonction rapide",
    "xpack.lens.indexPattern.formulaWithTooManyArguments": "L'opération {operation} a trop d'arguments",
    "xpack.lens.indexPattern.functionsLabel": "Fonctions",
-    "xpack.lens.indexPattern.functionTable.descriptionHeader": "Description",
-    "xpack.lens.indexPattern.functionTable.functionHeader": "Fonction",
    "xpack.lens.indexPattern.groupByDropdown": "Regrouper par",
    "xpack.lens.indexPattern.helpIncompatibleFieldDotLabel": "Cette fonction n'est pas compatible avec le champ actuellement sélectionné",
    "xpack.lens.indexPattern.helpLabel": "Aide sur les fonctions",
@ -27659,8 +27657,6 @@
    "xpack.lens.indexPattern.precisionErrorWarning.filters": "Filtres",
    "xpack.lens.indexPattern.precisionErrorWarning.link": "En savoir plus.",
    "xpack.lens.indexPattern.precisionErrorWarning.topValues": "Valeurs les plus élevées",
-    "xpack.lens.indexPattern.quickFunctions.popoverTitle": "Fonctions rapides",
-    "xpack.lens.indexPattern.quickFunctions.tableTitle": "Description des fonctions",
    "xpack.lens.indexPattern.quickFunctionsLabel": "Fonction rapide",
    "xpack.lens.indexPattern.randomSampling.disabledMessage": "Afin de sélectionner un pourcentage d'échantillonnage réduit, vous devez supprimer toutes les fonctions maximales ou minimales appliquées sur ce calque.",
    "xpack.lens.indexPattern.randomSampling.help": "Des pourcentages d'échantillonnage inférieurs augmentent les performances, mais diminuent la précision. Les pourcentages d'échantillonnage inférieurs sont les mieux adaptés aux grands ensembles de données. {link}",
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@ -27546,8 +27546,6 @@
    "xpack.lens.indexPattern.formulaWarningText": "式を上書きするには、クイック関数を選択します",
    "xpack.lens.indexPattern.formulaWithTooManyArguments": "演算{operation}の引数が多すぎます",
    "xpack.lens.indexPattern.functionsLabel": "関数",
-    "xpack.lens.indexPattern.functionTable.descriptionHeader": "説明",
-    "xpack.lens.indexPattern.functionTable.functionHeader": "関数",
    "xpack.lens.indexPattern.groupByDropdown": "グループ分けの条件",
    "xpack.lens.indexPattern.helpIncompatibleFieldDotLabel": "この関数は現在選択されているフィールドと互換性がありません。",
    "xpack.lens.indexPattern.helpLabel": "関数ヘルプ",
@ -27633,8 +27631,6 @@
    "xpack.lens.indexPattern.precisionErrorWarning.filters": "フィルター",
    "xpack.lens.indexPattern.precisionErrorWarning.link": "詳細情報",
    "xpack.lens.indexPattern.precisionErrorWarning.topValues": "上位の値",
-    "xpack.lens.indexPattern.quickFunctions.popoverTitle": "クイック機能",
-    "xpack.lens.indexPattern.quickFunctions.tableTitle": "機能の説明",
    "xpack.lens.indexPattern.quickFunctionsLabel": "クイック機能",
    "xpack.lens.indexPattern.randomSampling.disabledMessage": "低いサンプリングの割合を選択するには、このレイヤーに適用されている最大値または最小値の関数を削除する必要があります。",
    "xpack.lens.indexPattern.randomSampling.help": "サンプリング割合が低いほど、パフォーマンスが上がりますが、正解率は低くなります。大きいデータセットではサンプリング割合が低い方が最適です。{link}",
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@ -27604,8 +27604,6 @@
    "xpack.lens.indexPattern.formulaWarningText": "要覆盖公式，请选择快速函数",
    "xpack.lens.indexPattern.formulaWithTooManyArguments": "运算 {operation} 的参数过多",
    "xpack.lens.indexPattern.functionsLabel": "函数",
-    "xpack.lens.indexPattern.functionTable.descriptionHeader": "描述",
-    "xpack.lens.indexPattern.functionTable.functionHeader": "函数",
    "xpack.lens.indexPattern.groupByDropdown": "分组依据",
    "xpack.lens.indexPattern.helpIncompatibleFieldDotLabel": "此函数不兼容当前选定的字段",
    "xpack.lens.indexPattern.helpLabel": "函数帮助",
@ -27691,8 +27689,6 @@
    "xpack.lens.indexPattern.precisionErrorWarning.filters": "筛选",
    "xpack.lens.indexPattern.precisionErrorWarning.link": "了解详情。",
    "xpack.lens.indexPattern.precisionErrorWarning.topValues": "排名最前值",
-    "xpack.lens.indexPattern.quickFunctions.popoverTitle": "快选函数",
-    "xpack.lens.indexPattern.quickFunctions.tableTitle": "函数的描述",
    "xpack.lens.indexPattern.quickFunctionsLabel": "快速函数",
    "xpack.lens.indexPattern.randomSampling.disabledMessage": "要选择减小的采样百分比，必须移除在此图层上应用的任何最大值或最小值函数。",
    "xpack.lens.indexPattern.randomSampling.help": "较低采样百分比会提高性能，但会降低准确性。较低采样百分比最适合大型数据集。{link}",
--- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx
@ -19,11 +19,6 @@ import {
  useEuiTheme,
  EuiFlexGroup,
  EuiFlexItem,
-  EuiPopover,
-  EuiPopoverTitle,
-  EuiPanel,
-  EuiBasicTable,
-  EuiButtonIcon,
  type UseEuiTheme,
 } from '@elastic/eui';
 import ReactDOM from 'react-dom';
@ -126,7 +121,6 @@ export function DimensionEditor(props: DimensionEditorProps) {
    selectedColumn && operationDefinitionMap[selectedColumn.operationType];

  const [temporaryState, setTemporaryState] = useState<TemporaryState>('none');
-  const [isHelpOpen, setIsHelpOpen] = useState(false);

  // If a layer has sampling disabled, assume the toast has already fired in the past
  const [hasRandomSamplingToastFired, setSamplingToastAsFired] = useState(
@ -137,9 +131,6 @@ export function DimensionEditor(props: DimensionEditorProps) {

  const [hasOtherBucketToastFired, setHasOtherBucketToastFired] = useState(false);

-  const onHelpClick = () => setIsHelpOpen((prevIsHelpOpen) => !prevIsHelpOpen);
-  const closeHelp = () => setIsHelpOpen(false);
-
  const temporaryQuickFunction = Boolean(temporaryState === quickFunctionsName);
  const temporaryStaticValue = Boolean(temporaryState === staticValueOperationName);

@ -421,6 +412,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
      compatibleWithSampling:
        getSamplingValue(state.layers[layerId]) === 1 ||
        (definition.getUnsupportedSettings?.()?.sampling ?? true),
+      documentation: definition.quickFunctionDocumentation,
    };
  });

@ -434,7 +426,13 @@ export function DimensionEditor(props: DimensionEditorProps) {
    (selectedColumn?.operationType != null && isQuickFunction(selectedColumn?.operationType));

  const sideNavItems: EuiListGroupItemProps[] = operationsWithCompatibility.map(
-    ({ operationType, compatibleWithCurrentField, disabledStatus, compatibleWithSampling }) => {
+    ({
+      operationType,
+      compatibleWithCurrentField,
+      disabledStatus,
+      compatibleWithSampling,
+      documentation,
+    }) => {
      const isActive = Boolean(
        incompleteOperation === operationType ||
          (!incompleteOperation && selectedColumn && selectedColumn.operationType === operationType)
@ -582,6 +580,11 @@ export function DimensionEditor(props: DimensionEditorProps) {
              }),
            }
          : undefined,
+        showToolTip: !disabledStatus,
+        toolTipProps: {
+          position: 'left',
+        },
+        toolTipText: documentation,
        onClick() {
          if (
            ['none', 'fullReference', 'managedReference'].includes(
@ -723,43 +726,6 @@ export function DimensionEditor(props: DimensionEditorProps) {
    ...services,
  };

-  const helpButton = (
-    <EuiButtonIcon
-      onClick={onHelpClick}
-      iconType="documentation"
-      aria-label={i18n.translate('xpack.lens.indexPattern.quickFunctions.tableTitle', {
-        defaultMessage: 'Description of functions',
-      })}
-    />
-  );
-
-  const columnsSidebar = [
-    {
-      field: 'function',
-      name: i18n.translate('xpack.lens.indexPattern.functionTable.functionHeader', {
-        defaultMessage: 'Function',
-      }),
-      width: '150px',
-    },
-    {
-      field: 'description',
-      name: i18n.translate('xpack.lens.indexPattern.functionTable.descriptionHeader', {
-        defaultMessage: 'Description',
-      }),
-    },
-  ];
-
-  const items = sideNavItems
-    .filter((item) => operationDefinitionMap[item.id!].quickFunctionDocumentation)
-    .map((item) => {
-      const operationDefinition = operationDefinitionMap[item.id!]!;
-      return {
-        id: item.id!,
-        function: operationDefinition.displayName,
-        description: operationDefinition.quickFunctionDocumentation!,
-      };
-    });
-
  const quickFunctions = (
    <>
      <EuiFormRow
@ -770,45 +736,6 @@ export function DimensionEditor(props: DimensionEditorProps) {
                defaultMessage: 'Functions',
              })}
            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiPopover
-                anchorPosition="rightUp"
-                button={helpButton}
-                isOpen={isHelpOpen}
-                display="inlineBlock"
-                panelPaddingSize="none"
-                closePopover={closeHelp}
-                initialFocus="#functionsHelpBasicTableId"
-              >
-                <EuiPopoverTitle paddingSize="s">
-                  {i18n.translate('xpack.lens.indexPattern.quickFunctions.popoverTitle', {
-                    defaultMessage: 'Quick functions',
-                  })}
-                </EuiPopoverTitle>
-                <EuiPanel
-                  className="eui-yScroll"
-                  style={{ maxHeight: '40vh' }}
-                  color="transparent"
-                  paddingSize="s"
-                >
-                  <EuiBasicTable
-                    id="functionsHelpBasicTableId"
-                    style={{ width: 350 }}
-                    tableCaption={i18n.translate(
-                      'xpack.lens.indexPattern.quickFunctions.tableTitle',
-                      {
-                        defaultMessage: 'Description of functions',
-                      }
-                    )}
-                    items={items}
-                    compressed={true}
-                    rowHeader="firstName"
-                    columns={columnsSidebar}
-                    responsiveBreakpoint={false}
-                  />
-                </EuiPanel>
-              </EuiPopover>
-            </EuiFlexItem>
          </EuiFlexGroup>
        }
        fullWidth