[Lens][Unified search] Auto expand comboboxes and popovers based on t…

…he content (#171573)

## Summary

Fixes partially two remaining tasks from
#168753
Fixes partially dataview issue from
#170398
It stretches to maximum approximate 60 characters if any of the labels
in the list is of this length. If the content doesn't need the container
to stretch, it doesn't do it.


<details>
 <summary> Field picker in Lens</summary>

minimum width:
<img width="445" alt="Screenshot 2023-11-21 at 15 56 03"
src="https://github.com/elastic/kibana/assets/4283304/2f0f8482-bd00-4ec2-bbde-cbc4f3198eed">

auto-expanded width: 
<img width="575" alt="Screenshot 2023-11-21 at 15 58 22"
src="https://github.com/elastic/kibana/assets/4283304/df7bab4d-0a08-4d49-8a91-9386eba15d93">
</details>


<details>
  <summary>Layer data view picker in Lens</summary>
<img width="376" alt="Screenshot 2023-11-21 at 16 01 17"
src="https://github.com/elastic/kibana/assets/4283304/b8a98d83-dabc-49bd-a3cc-fc3856de6d3e">
<img width="455" alt="Screenshot 2023-11-21 at 15 58 09"
src="https://github.com/elastic/kibana/assets/4283304/f2c5bde8-7a4a-485f-bf97-fc2179171e50">
<img width="615" alt="Screenshot 2023-11-21 at 15 56 27"
src="https://github.com/elastic/kibana/assets/4283304/0574fc6c-69a3-44e9-9d48-8d427c1c5dba">
</details>

<details> <summary>Data view picker in Unified Search</summary>
<img width="341" alt="Screenshot 2023-11-21 at 16 00 29"
src="https://github.com/elastic/kibana/assets/4283304/1c838ded-0dc5-4632-94e4-1d94586f667c">
<img width="441" alt="Screenshot 2023-11-21 at 15 58 04"
src="https://github.com/elastic/kibana/assets/4283304/87e4f1c0-7922-4b94-a114-f23ece544395">
<img width="561" alt="Screenshot 2023-11-21 at 15 56 20"
src="https://github.com/elastic/kibana/assets/4283304/3ea0f222-5241-4c5b-b00b-4311972754cc">
</details>

<details>
 <summary> Data view picker in dashboard Create control flyout</summary>
<img width="677" alt="Screenshot 2023-11-21 at 16 14 00"
src="https://github.com/elastic/kibana/assets/4283304/0455b6ed-555d-4cff-9e34-0de377be6e04">
<img width="682" alt="Screenshot 2023-11-21 at 15 54 56"
src="https://github.com/elastic/kibana/assets/4283304/2a67685c-379d-4c0b-bf56-dbf7c35b3bd4">
</details>

<details> 
<summary> Unified search data view select component (tested in
maps)</summary>
<img width="570" alt="Screenshot 2023-11-22 at 14 38 25"
src="https://github.com/elastic/kibana/assets/4283304/bb52ab22-626d-4556-b40c-c9bcc925f426">
</details>

<details>
<summary>Unified search field and value picker</summary>
Adds `panelMinWidth`, removes the custom flex width change behavior
<img width="1142" alt="Screenshot 2023-11-22 at 14 40 26"
src="https://github.com/elastic/kibana/assets/4283304/2450957f-38b7-4a73-b531-7acb29cb56bc">


https://github.com/elastic/kibana/assets/4283304/f4f33624-9287-403e-8472-81f705440f97

</details>

<details> 
<summary> Discover breakdown field</summary>

Removes the focus stretching and instead uses the panelMinWidth prop

<img width="419" alt="Screenshot 2023-11-21 at 16 46 50"
src="https://github.com/elastic/kibana/assets/4283304/e35125ad-8823-4bff-954b-8119a352829c">
<img width="619" alt="Screenshot 2023-11-21 at 16 48 20"
src="https://github.com/elastic/kibana/assets/4283304/89e63daf-a59e-43e1-a6ec-91d1b15b0fcd">


</details>

---------

Co-authored-by: kibanamachine <[email protected]>

.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');
+  });
+});