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

## Summary Fix #152522 This PR replaces the inline quick function documentation icon and popover (screenshot 1) with simple tooltips for every function (screenshot 2). <img width="670" alt="Screenshot 2025-03-31 at 8 15 17 PM" src="https://github.com/user-attachments/assets/f98d065b-a82b-4807-9375-79994dab9117" /> <img width="635" alt="Screenshot 2025-03-31 at 8 14 12 PM" src="https://github.com/user-attachments/assets/a3788318-27b5-4435-abf8-157dc9efd1df" /> If a function is disabled then the tooltip should show the disabled-reason and not the documentation: ![Kapture 2025-03-31 at 20 21 05](https://github.com/user-attachments/assets/5a25fc1c-2017-427d-b3fc-5b7906d9c62b) ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2025-04-02 15:22:47 +03:00 · 2025-04-02 15:22:47 +03:00 · 40e02f1745
commit 40e02f1745
parent 7e46d2e756
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
@ -25084,8 +25084,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",
@ -25171,8 +25169,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
@ -25062,8 +25062,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": "関数ヘルプ",
@ -25149,8 +25147,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
@ -25111,8 +25111,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": "函数帮助",
@ -25198,8 +25196,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