[Lens][Unified search] Auto expand comboboxes and popovers based on the content

.github/CODEOWNERS

@@ -55,6 +55,7 @@ packages/kbn-bazel-runner @elastic/kibana-operations
 examples/bfetch_explorer @elastic/appex-sharedux
 src/plugins/bfetch @elastic/appex-sharedux
 packages/kbn-calculate-auto @elastic/obs-ux-management-team
+packages/kbn-calculate-width-from-char-count @elastic/kibana-visualizations
 x-pack/plugins/canvas @elastic/kibana-presentation
 x-pack/test/cases_api_integration/common/plugins/cases @elastic/response-ops
 packages/kbn-cases-components @elastic/response-ops

package.json

@@ -167,6 +167,7 @@
     "@kbn/bfetch-explorer-plugin": "link:examples/bfetch_explorer",
     "@kbn/bfetch-plugin": "link:src/plugins/bfetch",
     "@kbn/calculate-auto": "link:packages/kbn-calculate-auto",
+    "@kbn/calculate-width-from-char-count": "link:packages/kbn-calculate-width-from-char-count",
     "@kbn/canvas-plugin": "link:x-pack/plugins/canvas",
     "@kbn/cases-api-integration-test-plugin": "link:x-pack/test/cases_api_integration/common/plugins/cases",
     "@kbn/cases-components": "link:packages/kbn-cases-components",

packages/kbn-calculate-width-from-char-count/.storybook/main.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = require('@kbn/storybook').defaultConfig;

packages/kbn-calculate-width-from-char-count/README.md

@@ -0,0 +1,3 @@
+# @kbn/calculate-width-from-char-count
+
+This package contains a function that calculates the approximate width of the component from a text length.

packages/kbn-calculate-width-from-char-count/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './src';

packages/kbn-calculate-width-from-char-count/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-calculate-width-from-char-count'],
+};

packages/kbn-calculate-width-from-char-count/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/calculate-width-from-char-count",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-calculate-width-from-char-count/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/calculate-width-from-char-count",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "sideEffects": false
+}

packages/kbn-calculate-width-from-char-count/src/calculate_width_from_char_count.test.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { calculateWidthFromCharCount, MAX_WIDTH } from './calculate_width_from_char_count';
+
+describe('calculateWidthFromCharCount', () => {
+  it('should return minimum width if char count is smaller than minWidth', () => {
+    expect(calculateWidthFromCharCount(10, { minWidth: 300 })).toBe(300);
+  });
+  it('should return calculated width', () => {
+    expect(calculateWidthFromCharCount(30)).toBe(30 * 7 + 116);
+  });
+  it('should return maximum width if char count is bigger than maxWidth', () => {
+    expect(calculateWidthFromCharCount(1000)).toBe(MAX_WIDTH);
+  });
+});

packages/kbn-calculate-width-from-char-count/src/calculate_width_from_char_count.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export interface LIMITS {
+  paddingsWidth: number;
+  minWidth?: number;
+  avCharWidth: number;
+  maxWidth: number;
+}
+
+export const MAX_WIDTH = 550;
+const PADDINGS_WIDTH = 116;
+const AVERAGE_CHAR_WIDTH = 7;
+
+const defaultPanelWidths: LIMITS = {
+  maxWidth: MAX_WIDTH,
+  avCharWidth: AVERAGE_CHAR_WIDTH,
+  paddingsWidth: PADDINGS_WIDTH,
+};
+
+export function calculateWidthFromCharCount(
+  labelLength: number,
+  overridesPanelWidths?: Partial<LIMITS>
+) {
+  const { maxWidth, avCharWidth, paddingsWidth, minWidth } = {
+    ...defaultPanelWidths,
+    ...overridesPanelWidths,
+  };
+  const widthForCharCount = paddingsWidth + labelLength * avCharWidth;
+
+  if (minWidth && widthForCharCount < minWidth) {
+    return minWidth;
+  }
+
+  return Math.min(widthForCharCount, maxWidth);
+}

packages/kbn-calculate-width-from-char-count/src/calculate_width_from_entries.test.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { calculateWidthFromEntries } from './calculate_width_from_entries';
+import { MAX_WIDTH } from './calculate_width_from_char_count';
+import faker from 'faker';
+
+const generateLabel = (length: number) => faker.random.alpha({ count: length });
+
+const generateObjectWithLabelOfLength = (length: number, propOverrides?: Record<string, any>) => ({
+  label: generateLabel(length),
+  ...propOverrides,
+});
+
+describe('calculateWidthFromEntries', () => {
+  it('calculates width for array of strings', () => {
+    const shortLabels = [10, 20].map(generateLabel);
+    expect(calculateWidthFromEntries(shortLabels)).toBe(256);
+
+    const mediumLabels = [50, 55, 10, 20].map(generateLabel);
+    expect(calculateWidthFromEntries(mediumLabels)).toBe(501);
+
+    const longLabels = [80, 90, 10].map(generateLabel);
+    expect(calculateWidthFromEntries(longLabels)).toBe(MAX_WIDTH);
+  });
+
+  it('calculates width for array of objects with keys', () => {
+    const shortLabels = [10, 20].map((v) => generateObjectWithLabelOfLength(v));
+    expect(calculateWidthFromEntries(shortLabels, ['label'])).toBe(256);
+
+    const mediumLabels = [50, 55, 10, 20].map((v) => generateObjectWithLabelOfLength(v));
+    expect(calculateWidthFromEntries(mediumLabels, ['label'])).toBe(501);
+
+    const longLabels = [80, 90, 10].map((v) => generateObjectWithLabelOfLength(v));
+    expect(calculateWidthFromEntries(longLabels, ['label'])).toBe(MAX_WIDTH);
+  });
+  it('calculates width for array of objects for fallback keys', () => {
+    const shortLabels = [10, 20].map((v) =>
+      generateObjectWithLabelOfLength(v, { label: undefined, name: generateLabel(v) })
+    );
+    expect(calculateWidthFromEntries(shortLabels, ['id', 'label', 'name'])).toBe(256);
+
+    const mediumLabels = [50, 55, 10, 20].map((v) =>
+      generateObjectWithLabelOfLength(v, { label: undefined, name: generateLabel(v) })
+    );
+    expect(calculateWidthFromEntries(mediumLabels, ['id', 'label', 'name'])).toBe(501);
+  });
+});

packages/kbn-calculate-width-from-char-count/src/calculate_width_from_entries.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { LIMITS, calculateWidthFromCharCount } from './calculate_width_from_char_count';
+
+type GenericObject<T = Record<string, any>> = T;
+
+const getMaxLabelLengthForObjects = (
+  entries: GenericObject[],
+  labelKeys: Array<keyof GenericObject>
+) =>
+  entries.reduce((acc, curr) => {
+    const labelKey = labelKeys.find((key) => curr[key]);
+    if (!labelKey) {
+      return acc;
+    }
+    const labelLength = curr[labelKey].length;
+    return acc > labelLength ? acc : labelLength;
+  }, 0);
+
+const getMaxLabelLengthForStrings = (arr: string[]) =>
+  arr.reduce((acc, curr) => (acc > curr.length ? acc : curr.length), 0);
+
+export function calculateWidthFromEntries(
+  entries: GenericObject[] | string[],
+  labelKeys?: Array<keyof GenericObject>,
+  overridesPanelWidths?: Partial<LIMITS>
+) {
+  const maxLabelLength = labelKeys
+    ? getMaxLabelLengthForObjects(entries as GenericObject[], labelKeys)
+    : getMaxLabelLengthForStrings(entries as string[]);
+
+  return calculateWidthFromCharCount(maxLabelLength, overridesPanelWidths);
+}

packages/kbn-calculate-width-from-char-count/src/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { calculateWidthFromCharCount } from './calculate_width_from_char_count';
+
+export { calculateWidthFromEntries } from './calculate_width_from_entries';

packages/kbn-calculate-width-from-char-count/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react",
+    ],
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "kbn_references": [],
+  "exclude": [
+    "target/**/*",
+  ]
+}

packages/kbn-visualization-ui-components/components/field_picker/field_picker.test.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { FieldPicker, FieldPickerProps } from './field_picker';
+import { render, screen } from '@testing-library/react';
+import faker from 'faker';
+import userEvent from '@testing-library/user-event';
+import { DataType, FieldOptionValue } from './types';
+
+const generateFieldWithLabelOfLength = (length: number) => ({
+  label: faker.random.alpha({ count: length }),
+  value: {
+    type: 'field' as const,
+    field: faker.random.alpha({ count: length }),
+    dataType: 'date' as DataType,
+    operationType: 'count',
+  },
+  exists: true,
+  compatible: 1,
+});
+
+const generateProps = (customField = generateFieldWithLabelOfLength(20)) =>
+  ({
+    selectedOptions: [
+      {
+        label: 'Category',
+        value: {
+          type: 'field' as const,
+          field: 'category.keyword',
+          dataType: 'keyword' as DataType,
+          operationType: 'count',
+        },
+      },
+    ],
+    options: [
+      {
+        label: 'nested options',
+        exists: true,
+        compatible: 1,
+        value: generateFieldWithLabelOfLength(20),
+        options: [
+          generateFieldWithLabelOfLength(20),
+          customField,
+          generateFieldWithLabelOfLength(20),
+        ],
+      },
+    ],
+    onChoose: jest.fn(),
+    fieldIsInvalid: false,
+  } as unknown as FieldPickerProps<FieldOptionValue>);
+
+describe('field picker', () => {
+  const renderFieldPicker = (customField = generateFieldWithLabelOfLength(20)) => {
+    const props = generateProps(customField);
+    const rtlRender = render(<FieldPicker {...props} />);
+    return {
+      openCombobox: () => userEvent.click(screen.getByLabelText(/open list of options/i)),
+      ...rtlRender,
+    };
+  };
+
+  it('should render minimum width dropdown list if all labels are short', async () => {
+    const { openCombobox } = renderFieldPicker();
+    openCombobox();
+    const popover = screen.getByRole('dialog');
+    expect(popover).toHaveStyle('inline-size: 256px');
+  });
+
+  it('should render calculated width dropdown list if the longest label is longer than min width', async () => {
+    const { openCombobox } = renderFieldPicker(generateFieldWithLabelOfLength(50));
+    openCombobox();
+
+    const popover = screen.getByRole('dialog');
+    expect(popover).toHaveStyle('inline-size: 466px');
+  });
+
+  it('should render maximum width dropdown list if the longest label is longer than max width', async () => {
+    const { openCombobox } = renderFieldPicker(generateFieldWithLabelOfLength(80));
+    openCombobox();
+    const popover = screen.getByRole('dialog');
+    expect(popover).toHaveStyle('inline-size: 550px');
+  });
+});