Merge branch 'master' into integrations/update_links_and_permissions

elastic · Oct 18, 2021 · f56b0e8 · f56b0e8
2 parents 9b052f0 + 83739b0
commit f56b0e8
Show file tree

Hide file tree

Showing 205 changed files with 3,086 additions and 8,916 deletions.
diff --git a/src/plugins/inspector/public/views/requests/components/request_selector.tsx b/src/plugins/inspector/public/views/requests/components/request_selector.tsx
@@ -13,142 +13,82 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiBadge,
-  EuiButtonEmpty,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
-  EuiPopover,
-  EuiTextColor,
   EuiToolTip,
 } from '@elastic/eui';
 
 import { RequestStatus } from '../../../../common/adapters';
 import { Request } from '../../../../common/adapters/request/types';
 
-interface RequestSelectorState {
-  isPopoverOpen: boolean;
-}
-
 interface RequestSelectorProps {
   requests: Request[];
   selectedRequest: Request;
-  onRequestChanged: Function;
+  onRequestChanged: (request: Request) => void;
 }
 
-export class RequestSelector extends Component<RequestSelectorProps, RequestSelectorState> {
+export class RequestSelector extends Component<RequestSelectorProps> {
   static propTypes = {
     requests: PropTypes.array.isRequired,
     selectedRequest: PropTypes.object.isRequired,
     onRequestChanged: PropTypes.func,
   };
 
-  state = {
-    isPopoverOpen: false,
-  };
+  handleSelected = (selectedOptions: Array<EuiComboBoxOptionOption<string>>) => {
+    const selectedOption = this.props.requests.find(
+      (request) => request.id === selectedOptions[0].value
+    );
 
-  togglePopover = () => {
-    this.setState((prevState: RequestSelectorState) => ({
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
+    if (selectedOption) {
+      this.props.onRequestChanged(selectedOption);
+    }
   };
 
-  closePopover = () => {
-    this.setState({
-      isPopoverOpen: false,
+  renderRequestCombobox() {
+    const options = this.props.requests.map((item) => {
+      const hasFailed = item.status === RequestStatus.ERROR;
+      const testLabel = item.name.replace(/\s+/, '_');
+
+      return {
+        'data-test-subj': `inspectorRequestChooser${testLabel}`,
+        label: hasFailed
+          ? `${item.name} ${i18n.translate('inspector.requests.failedLabel', {
+              defaultMessage: ' (failed)',
+            })}`
+          : item.name,
+        value: item.id,
+      };
     });
-  };
-
-  renderRequestDropdownItem = (request: Request, index: number) => {
-    const hasFailed = request.status === RequestStatus.ERROR;
-    const inProgress = request.status === RequestStatus.PENDING;
 
     return (
-      <EuiContextMenuItem
-        key={index}
-        icon={request === this.props.selectedRequest ? 'check' : 'empty'}
-        onClick={() => {
-          this.props.onRequestChanged(request);
-          this.closePopover();
-        }}
-        toolTipContent={request.description}
-        toolTipPosition="left"
-        data-test-subj={`inspectorRequestChooser${request.name}`}
-      >
-        <EuiTextColor color={hasFailed ? 'danger' : 'default'}>
-          {request.name}
-
-          {hasFailed && (
-            <FormattedMessage id="inspector.requests.failedLabel" defaultMessage=" (failed)" />
-          )}
-
-          {inProgress && (
-            <EuiLoadingSpinner
-              size="s"
-              aria-label={i18n.translate('inspector.requests.requestInProgressAriaLabel', {
-                defaultMessage: 'Request in progress',
-              })}
-              className="insRequestSelector__menuSpinner"
-            />
-          )}
-        </EuiTextColor>
-      </EuiContextMenuItem>
-    );
-  };
-
-  renderRequestDropdown() {
-    const button = (
-      <EuiButtonEmpty
-        iconType="arrowDown"
-        iconSide="right"
-        size="s"
-        onClick={this.togglePopover}
+      <EuiComboBox
         data-test-subj="inspectorRequestChooser"
-      >
-        {this.props.selectedRequest.name}
-      </EuiButtonEmpty>
-    );
-
-    return (
-      <EuiPopover
+        fullWidth={true}
         id="inspectorRequestChooser"
-        button={button}
-        isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover}
-        panelPaddingSize="none"
-        anchorPosition="downLeft"
-        repositionOnScroll
-      >
-        <EuiContextMenuPanel
-          items={this.props.requests.map(this.renderRequestDropdownItem)}
-          data-test-subj="inspectorRequestChooserMenuPanel"
-        />
-      </EuiPopover>
+        isClearable={false}
+        onChange={this.handleSelected}
+        options={options}
+        prepend="Request"
+        selectedOptions={[
+          {
+            label: this.props.selectedRequest.name,
+            value: this.props.selectedRequest.id,
+          },
+        ]}
+        singleSelection={{ asPlainText: true }}
+      />
     );
   }
 
   render() {
     const { selectedRequest, requests } = this.props;
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="xs">
-        <EuiFlexItem grow={false}>
-          <strong>
-            <FormattedMessage id="inspector.requests.requestLabel" defaultMessage="Request:" />
-          </strong>
-        </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          {requests.length <= 1 && (
-            <div
-              className="insRequestSelector__singleRequest"
-              data-test-subj="inspectorRequestName"
-            >
-              {selectedRequest.name}
-            </div>
-          )}
-          {requests.length > 1 && this.renderRequestDropdown()}
-        </EuiFlexItem>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={true}>{requests.length && this.renderRequestCombobox()}</EuiFlexItem>
         <EuiFlexItem grow={false}>
           {selectedRequest.status !== RequestStatus.PENDING && (
             <EuiToolTip

diff --git a/src/plugins/vis_types/table/common/types.ts b/src/plugins/vis_types/table/common/types.ts
@@ -24,5 +24,6 @@ export interface TableVisParams {
   showTotal: boolean;
   totalFunc: AggTypes;
   percentageCol: string;
+  autoFitRowToContent?: boolean;
   row?: boolean;
 }
diff --git a/src/plugins/vis_types/table/public/__snapshots__/table_vis_fn.test.ts.snap b/src/plugins/vis_types/table/public/__snapshots__/table_vis_fn.test.ts.snap
diff --git a/src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap b/src/plugins/vis_types/table/public/components/__snapshots__/table_vis_basic.test.tsx.snap
diff --git a/src/plugins/vis_types/table/public/components/table_vis_basic.test.tsx b/src/plugins/vis_types/table/public/components/table_vis_basic.test.tsx
@@ -67,6 +67,7 @@ describe('TableVisBasic', () => {
   });
 
   it('should sort rows by column and pass the sorted rows for consumers', () => {
+    (createTableVisCell as jest.Mock).mockClear();
     const uiStateProps = {
       ...props.uiStateProps,
       sort: {
@@ -96,7 +97,7 @@ describe('TableVisBasic', () => {
         visConfig={{ ...props.visConfig, showToolbar: true }}
       />
     );
-    expect(createTableVisCell).toHaveBeenCalledWith(sortedRows, table.formattedColumns);
+    expect(createTableVisCell).toHaveBeenCalledWith(sortedRows, table.formattedColumns, undefined);
     expect(createGridColumns).toHaveBeenCalledWith(
       table.columns,
       sortedRows,

diff --git a/src/plugins/vis_types/table/public/components/table_vis_basic.tsx b/src/plugins/vis_types/table/public/components/table_vis_basic.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { EuiDataGrid, EuiDataGridProps, EuiDataGridSorting, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { orderBy } from 'lodash';
@@ -47,8 +47,16 @@ export const TableVisBasic = memo(
 
     // renderCellValue is a component which renders a cell based on column and row indexes
     const renderCellValue = useMemo(
-      () => createTableVisCell(sortedRows, formattedColumns),
-      [formattedColumns, sortedRows]
+      () => createTableVisCell(sortedRows, formattedColumns, visConfig.autoFitRowToContent),
+      [formattedColumns, sortedRows, visConfig.autoFitRowToContent]
+    );
+
+    const rowHeightsOptions = useMemo(
+      () =>
+        visConfig.autoFitRowToContent
+          ? ({ defaultHeight: 'auto' } as unknown as EuiDataGridProps['rowHeightsOptions'])
+          : undefined,
+      [visConfig.autoFitRowToContent]
     );
 
     // Columns config
@@ -103,6 +111,26 @@ export const TableVisBasic = memo(
       [columns, setColumnsWidth]
     );
 
+    const firstRender = useRef(true);
+    const [dataGridUpdateCounter, setDataGridUpdateCounter] = useState(0);
+
+    // key was added as temporary solution to force re-render if we change autoFitRowToContent or we get new data
+    // cause we have problem with correct updating height cache in EUI datagrid when we use auto-height
+    // will be removed as soon as fix problem on EUI side
+    useEffect(() => {
+      // skip first render
+      if (firstRender.current) {
+        firstRender.current = false;
+        return;
+      }
+      // skip if auto height was turned off
+      if (!visConfig.autoFitRowToContent) {
+        return;
+      }
+      // update counter to remount grid from scratch
+      setDataGridUpdateCounter((counter) => counter + 1);
+    }, [visConfig.autoFitRowToContent, table, sort, pagination, columnsWidth]);
+
     return (
       <>
         {title && (
@@ -111,12 +139,14 @@ export const TableVisBasic = memo(
           </EuiTitle>
         )}
         <EuiDataGrid
+          key={String(dataGridUpdateCounter)}
           aria-label={dataGridAriaLabel}
           columns={gridColumns}
           gridStyle={{
             border: 'horizontal',
             header: 'underline',
           }}
+          rowHeightsOptions={rowHeightsOptions}
           rowCount={rows.length}
           columnVisibility={{
             visibleColumns: columns.map(({ id }) => id),

diff --git a/src/plugins/vis_types/table/public/components/table_vis_cell.tsx b/src/plugins/vis_types/table/public/components/table_vis_cell.tsx
@@ -13,7 +13,7 @@ import { DatatableRow } from 'src/plugins/expressions';
 import { FormattedColumns } from '../types';
 
 export const createTableVisCell =
-  (rows: DatatableRow[], formattedColumns: FormattedColumns) =>
+  (rows: DatatableRow[], formattedColumns: FormattedColumns, autoFitRowToContent?: boolean) =>
   ({ rowIndex, columnId }: EuiDataGridCellValueElementProps) => {
     const rowValue = rows[rowIndex][columnId];
     const column = formattedColumns[columnId];
@@ -28,7 +28,7 @@ export const createTableVisCell =
          */
         dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
         data-test-subj="tbvChartCellContent"
-        className="tbvChartCellContent"
+        className={autoFitRowToContent ? '' : 'tbvChartCellContent'}
       />
     );
 

diff --git a/src/plugins/vis_types/table/public/components/table_vis_options.tsx b/src/plugins/vis_types/table/public/components/table_vis_options.tsx
@@ -93,6 +93,16 @@ function TableOptions({
         data-test-subj="showMetricsAtAllLevels"
       />
 
+      <SwitchOption
+        label={i18n.translate('visTypeTable.params.autoFitRow', {
+          defaultMessage: 'Auto fit rows to content',
+        })}
+        paramName="autoFitRowToContent"
+        value={stateParams.autoFitRowToContent}
+        setValue={setValue}
+        data-test-subj="autoFitRowToContent"
+      />
+
       <SwitchOption
         label={i18n.translate('visTypeTable.params.showPartialRowsLabel', {
           defaultMessage: 'Show partial rows',

diff --git a/src/plugins/vis_types/table/public/table_vis_fn.test.ts b/src/plugins/vis_types/table/public/table_vis_fn.test.ts
@@ -36,6 +36,7 @@ describe('interpreter/functions#table', () => {
     splitColumn: undefined,
     splitRow: undefined,
     showMetricsAtAllLevels: false,
+    autoFitRowToContent: false,
     sort: {
       columnIndex: null,
       direction: null,

diff --git a/src/plugins/vis_types/table/public/table_vis_fn.ts b/src/plugins/vis_types/table/public/table_vis_fn.ts
@@ -118,6 +118,11 @@ export const createTableVisFn = (): TableExpressionFunctionDefinition => ({
         defaultMessage: 'Specifies calculating function for the total row. Possible options are: ',
       }),
     },
+    autoFitRowToContent: {
+      types: ['boolean'],
+      help: '',
+      default: false,
+    },
   },
   fn(input, args, handlers) {
     const convertedData = tableVisResponseHandler(input, args);

diff --git a/src/plugins/vis_types/table/public/table_vis_type.ts b/src/plugins/vis_types/table/public/table_vis_type.ts
@@ -35,6 +35,7 @@ export const tableVisTypeDefinition: VisTypeDefinition<TableVisParams> = {
       showToolbar: false,
       totalFunc: 'sum',
       percentageCol: '',
+      autoFitRowToContent: false,
     },
   },
   editorConfig: {

diff --git a/src/plugins/vis_types/table/public/to_ast.ts b/src/plugins/vis_types/table/public/to_ast.ts
@@ -64,6 +64,7 @@ export const toExpressionAst: VisToExpressionAst<TableVisParams> = (vis, params)
     showMetricsAtAllLevels: vis.params.showMetricsAtAllLevels,
     showToolbar: vis.params.showToolbar,
     showTotal: vis.params.showTotal,
+    autoFitRowToContent: vis.params.autoFitRowToContent,
     totalFunc: vis.params.totalFunc,
     title: vis.title,
     metrics: metrics.map(prepareDimension),

diff --git a/src/plugins/visualizations/public/mocks.ts b/src/plugins/visualizations/public/mocks.ts
@@ -33,9 +33,6 @@ const createStartContract = (): VisualizationsStart => ({
   getAliases: jest.fn(),
   getByGroup: jest.fn(),
   unRegisterAlias: jest.fn(),
-  savedVisualizationsLoader: {
-    get: jest.fn(),
-  } as any,
   getSavedVisualization: jest.fn(),
   saveVisualization: jest.fn(),
   findListItems: jest.fn(),