[8.x] [Unified Field List] Fix issue where Unified Field List field p…

…opover gets cut off (elastic#195147) (elastic#195512) # Backport This will backport the following commits from `main` to `8.x`: - [[Unified Field List] Fix issue where Unified Field List field popover gets cut off (elastic#195147)](elastic#195147)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Davis McPhee <[email protected]>
kibanamachine · Oct 8, 2024 · 31e9a3b · 31e9a3b
1 parent 30a25c8
commit 31e9a3b
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 117 deletions.
diff --git a/packages/kbn-unified-field-list/src/components/field_popover/field_popover.tsx b/packages/kbn-unified-field-list/src/components/field_popover/field_popover.tsx
@@ -8,23 +8,33 @@
  */
 
 import React from 'react';
-import { EuiPopover, EuiPopoverProps, EuiPopoverTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiPopoverProps,
+  EuiPopoverTitle,
+} from '@elastic/eui';
 import './field_popover.scss';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 export interface FieldPopoverProps extends EuiPopoverProps {
   renderHeader?: () => React.ReactNode;
   renderContent?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
 }
 
 export const FieldPopover: React.FC<FieldPopoverProps> = ({
   isOpen,
   closePopover,
   renderHeader,
   renderContent,
+  renderFooter,
   ...otherPopoverProps
 }) => {
-  let header = null;
-  let content = null;
+  let header: React.ReactNode | null = null;
+  let content: React.ReactNode | null = null;
+  let footer: React.ReactNode | null = null;
 
   if (isOpen) {
     try {
@@ -40,6 +50,13 @@ export const FieldPopover: React.FC<FieldPopoverProps> = ({
       // eslint-disable-next-line no-console
       console.error(error);
     }
+
+    try {
+      footer = renderFooter?.() || null;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
   }
 
   return (
@@ -54,10 +71,27 @@ export const FieldPopover: React.FC<FieldPopoverProps> = ({
       {...otherPopoverProps}
     >
       {isOpen && (
-        <>
-          {content && header ? <EuiPopoverTitle>{header}</EuiPopoverTitle> : header}
-          {content}
-        </>
+        <EuiFlexGroup gutterSize="none" direction="column" css={{ maxHeight: '90vh' }}>
+          {Boolean(header) && (
+            <EuiFlexItem grow={false}>
+              {content ? <EuiPopoverTitle>{header}</EuiPopoverTitle> : header}
+            </EuiFlexItem>
+          )}
+          {content ? (
+            <EuiFlexItem
+              className="eui-yScrollWithShadows"
+              css={{
+                padding: euiThemeVars.euiSize,
+                margin: `-${euiThemeVars.euiSize}`,
+              }}
+            >
+              {content}
+            </EuiFlexItem>
+          ) : (
+            content
+          )}
+          {Boolean(footer) && <EuiFlexItem grow={false}>{footer}</EuiFlexItem>}
+        </EuiFlexGroup>
       )}
     </EuiPopover>
   );

diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
@@ -309,22 +309,39 @@ function UnifiedFieldListItemComponent({
             />
           </>
         )}
-
-        {searchMode === 'documents' && !!services.uiActions && (
-          <FieldPopoverFooter
-            field={field}
-            dataView={dataView}
-            multiFields={rawMultiFields}
-            trackUiMetric={trackUiMetric}
-            contextualFields={workspaceSelectedFieldNames}
-            originatingApp={stateService.creationOptions.originatingApp}
-            uiActions={services.uiActions}
-          />
-        )}
       </>
     );
   };
 
+  const renderFooter = useMemo(() => {
+    const uiActions = services.uiActions;
+
+    if (searchMode !== 'documents' || !uiActions) {
+      return;
+    }
+
+    return () => (
+      <FieldPopoverFooter
+        field={field}
+        dataView={dataView}
+        multiFields={rawMultiFields}
+        trackUiMetric={trackUiMetric}
+        contextualFields={workspaceSelectedFieldNames}
+        originatingApp={stateService.creationOptions.originatingApp}
+        uiActions={uiActions}
+      />
+    );
+  }, [
+    dataView,
+    field,
+    rawMultiFields,
+    searchMode,
+    services.uiActions,
+    stateService.creationOptions.originatingApp,
+    trackUiMetric,
+    workspaceSelectedFieldNames,
+  ]);
+
   const value = useMemo(
     () => ({
       id: field.name,
@@ -393,6 +410,7 @@ function UnifiedFieldListItemComponent({
           ? renderPopover
           : undefined
       }
+      renderFooter={renderFooter}
     />
   );
 }

diff --git a/packages/kbn-unified-field-list/tsconfig.json b/packages/kbn-unified-field-list/tsconfig.json
@@ -34,7 +34,8 @@
     "@kbn/visualization-utils",
     "@kbn/esql-utils",
     "@kbn/search-types",
-    "@kbn/fields-metadata-plugin"
+    "@kbn/fields-metadata-plugin",
+    "@kbn/ui-theme"
   ],
   "exclude": ["target/**/*"]
 }