[Unified Field List] Fix issue where Unified Field List field popover gets cut off

packages/kbn-unified-field-list/src/components/field_popover/field_popover.tsx

@@ -8,23 +8,32 @@
  */
 
 import React from 'react';
-import { EuiPopover, EuiPopoverProps, EuiPopoverTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiPopoverProps,
+  EuiPopoverTitle,
+} from '@elastic/eui';
 import './field_popover.scss';
 
 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 +49,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 +70,15 @@ 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 css={{ overflowY: 'auto' }}>{content}</EuiFlexItem> : content}
+          {Boolean(footer) && <EuiFlexItem grow={false}>{footer}</EuiFlexItem>}
+        </EuiFlexGroup>
       )}
     </EuiPopover>
   );

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}
     />
   );
 }

x-pack/plugins/lens/public/datasources/common/field_item.tsx

@@ -74,6 +74,8 @@ export type FieldItemProps = FieldItemIndexPatternFieldProps | FieldItemDatatabl
 
 export function InnerFieldItem(props: FieldItemProps) {
   const {
+    query,
+    filters,
     field,
     indexPattern,
     highlight,
@@ -193,6 +195,56 @@ export function InnerFieldItem(props: FieldItemProps) {
     onAddFieldToWorkspace,
   };
 
+  const renderFooter = useMemo(() => {
+    if (hideDetails || !indexPattern) {
+      return;
+    }
+
+    if (dataViewField.type === 'geo_point' || dataViewField.type === 'geo_shape') {
+      return () => (
+        <FieldPopoverFooter
+          field={dataViewField}
+          dataView={{ ...indexPattern, toSpec: () => indexPattern.spec } as unknown as DataView}
+          originatingApp={APP_ID}
+          uiActions={services.uiActions}
+          buttonProps={{
+            'data-test-subj': `lensVisualize-GeoField-${dataViewField.name}`,
+          }}
+        />
+      );
+    }
+
+    return function ExplorerInDiscover() {
+      const exploreInDiscover = useMemo(
+        () =>
+          getExploreInDiscover({
+            query,
+            filters,
+            indexPattern,
+            dataViewField,
+            services,
+          }),
+        []
+      );
+
+      return exploreInDiscover ? (
+        <EuiPopoverFooter>
+          <EuiButton
+            fullWidth
+            size="s"
+            href={exploreInDiscover}
+            target="_blank"
+            data-test-subj={`lnsFieldListPanel-exploreInDiscover-${dataViewField.name}`}
+          >
+            {i18n.translate('xpack.lens.indexPattern.fieldExploreInDiscover', {
+              defaultMessage: 'Explore in Discover',
+            })}
+          </EuiButton>
+        </EuiPopoverFooter>
+      ) : null;
+    };
+  }, [dataViewField, filters, hideDetails, indexPattern, query, services]);
+
   return (
     <li>
       <FieldPopover
@@ -248,6 +300,7 @@ export function InnerFieldItem(props: FieldItemProps) {
               )
             : undefined
         }
+        renderFooter={renderFooter}
       />
     </li>
   );
@@ -264,108 +317,86 @@ function FieldItemPopoverContents(
   const { query, filters, indexPattern, dataViewField, dateRange, onAddFilter } = props;
   const services = useKibana<LensAppServices>().services;
 
-  const exploreInDiscover = useMemo(() => {
-    if (!indexPattern) {
-      return null;
-    }
-    const meta = {
-      id: indexPattern.id,
-      columns: [dataViewField.name],
-      filters: {
-        enabled: {
-          lucene: [],
-          kuery: [],
-        },
-        disabled: {
-          lucene: [],
-          kuery: [],
-        },
-      },
-    };
-    const { filters: newFilters, query: newQuery } = combineQueryAndFilters(
-      query,
-      filters,
-      meta,
-      [indexPattern],
-      getEsQueryConfig(services.uiSettings)
-    );
-    const discoverLocator = services.share?.url.locators.get('DISCOVER_APP_LOCATOR');
-    if (!discoverLocator || !services.application.capabilities.discover.show) {
-      return;
-    }
-    return discoverLocator.getRedirectUrl({
-      dataViewSpec: indexPattern?.spec,
-      timeRange: services.data.query.timefilter.timefilter.getTime(),
-      filters: newFilters,
-      query: newQuery,
-      columns: meta.columns,
-    });
-  }, [dataViewField.name, filters, indexPattern, query, services]);
-
   if (!indexPattern) {
     return null;
   }
 
   return (
-    <>
-      <FieldStats
-        services={services}
-        query={query}
-        filters={filters}
-        fromDate={dateRange.fromDate}
-        toDate={dateRange.toDate}
-        dataViewOrDataViewId={indexPattern.id} // TODO: Refactor to pass a variable with DataView type instead of IndexPattern
-        onAddFilter={onAddFilter}
-        field={dataViewField}
-        data-test-subj="lnsFieldListPanel"
-        overrideMissingContent={(params) => {
-          if (params.reason === 'no-data') {
-            // TODO: should we replace this with a default message "Analysis is not available for this field?"
-            return (
-              <EuiText size="s" data-test-subj="lnsFieldListPanel-missingFieldStats">
-                {i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
-                  defaultMessage:
-                    'Lens is unable to create visualizations with this field because it does not contain data. To create a visualization, drag and drop a different field.',
-                })}
-              </EuiText>
-            );
-          }
-          if (params.reason === 'unsupported') {
-            return (
-              <EuiText data-test-subj="lnsFieldListPanel-missingFieldStats">
-                {params.element}
-              </EuiText>
-            );
-          }
-          return params.element;
-        }}
-      />
+    <FieldStats
+      services={services}
+      query={query}
+      filters={filters}
+      fromDate={dateRange.fromDate}
+      toDate={dateRange.toDate}
+      dataViewOrDataViewId={indexPattern.id} // TODO: Refactor to pass a variable with DataView type instead of IndexPattern
+      onAddFilter={onAddFilter}
+      field={dataViewField}
+      data-test-subj="lnsFieldListPanel"
+      overrideMissingContent={(params) => {
+        if (params.reason === 'no-data') {
+          // TODO: should we replace this with a default message "Analysis is not available for this field?"
+          return (
+            <EuiText size="s" data-test-subj="lnsFieldListPanel-missingFieldStats">
+              {i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
+                defaultMessage:
+                  'Lens is unable to create visualizations with this field because it does not contain data. To create a visualization, drag and drop a different field.',
+              })}
+            </EuiText>
+          );
+        }
+        if (params.reason === 'unsupported') {
+          return (
+            <EuiText data-test-subj="lnsFieldListPanel-missingFieldStats">{params.element}</EuiText>
+          );
+        }
+        return params.element;
+      }}
+    />
+  );
+}
 
-      {dataViewField.type === 'geo_point' || dataViewField.type === 'geo_shape' ? (
-        <FieldPopoverFooter
-          field={dataViewField}
-          dataView={{ ...indexPattern, toSpec: () => indexPattern.spec } as unknown as DataView}
-          originatingApp={APP_ID}
-          uiActions={services.uiActions}
-          buttonProps={{
-            'data-test-subj': `lensVisualize-GeoField-${dataViewField.name}`,
-          }}
-        />
-      ) : exploreInDiscover ? (
-        <EuiPopoverFooter>
-          <EuiButton
-            fullWidth
-            size="s"
-            href={exploreInDiscover}
-            target="_blank"
-            data-test-subj={`lnsFieldListPanel-exploreInDiscover-${dataViewField.name}`}
-          >
-            {i18n.translate('xpack.lens.indexPattern.fieldExploreInDiscover', {
-              defaultMessage: 'Explore in Discover',
-            })}
-          </EuiButton>
-        </EuiPopoverFooter>
-      ) : null}
-    </>
+function getExploreInDiscover({
+  query,
+  filters,
+  indexPattern,
+  dataViewField,
+  services,
+}: Pick<FieldItemProps, 'query'> & {
+  filters: NonNullable<FieldItemProps['filters']>;
+  indexPattern: NonNullable<FieldItemProps['indexPattern']>;
+  dataViewField: DataViewField;
+  services: LensAppServices;
+}) {
+  const meta = {
+    id: indexPattern.id,
+    columns: [dataViewField.name],
+    filters: {
+      enabled: {
+        lucene: [],
+        kuery: [],
+      },
+      disabled: {
+        lucene: [],
+        kuery: [],
+      },
+    },
+  };
+  const { filters: newFilters, query: newQuery } = combineQueryAndFilters(
+    query,
+    filters,
+    meta,
+    [indexPattern],
+    getEsQueryConfig(services.uiSettings)
   );
+  const discoverLocator = services.share?.url.locators.get('DISCOVER_APP_LOCATOR');
+  if (!discoverLocator || !services.application.capabilities.discover.show) {
+    return;
+  }
+  return discoverLocator.getRedirectUrl({
+    dataViewSpec: indexPattern?.spec,
+    timeRange: services.data.query.timefilter.timefilter.getTime(),
+    filters: newFilters,
+    query: newQuery,
+    columns: meta.columns,
+  });
 }