[8.19] [Lens] Keep the datatable filters always visible (#245252)

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/columns.test.tsx

@@ -53,26 +53,24 @@ const callCreateGridColumns = (
     table: CreateGridColumnsParams[1];
     handleFilterClick: CreateGridColumnsParams[2];
     handleTransposedColumnClick: CreateGridColumnsParams[3];
-    isReadOnly: CreateGridColumnsParams[4];
-    columnConfig: CreateGridColumnsParams[5];
-    visibleColumns: CreateGridColumnsParams[6];
-    formatFactory: CreateGridColumnsParams[7];
-    onColumnResize: CreateGridColumnsParams[8];
-    onColumnHide: CreateGridColumnsParams[9];
-    alignments: CreateGridColumnsParams[10];
-    headerRowHeight: CreateGridColumnsParams[11];
-    headerRowLines: CreateGridColumnsParams[12];
-    columnCellValueActions: CreateGridColumnsParams[13];
-    closeCellPopover: CreateGridColumnsParams[14];
-    columnFilterable: CreateGridColumnsParams[15];
+    columnConfig: CreateGridColumnsParams[4];
+    visibleColumns: CreateGridColumnsParams[5];
+    formatFactory: CreateGridColumnsParams[6];
+    onColumnResize: CreateGridColumnsParams[7];
+    onColumnHide: CreateGridColumnsParams[8];
+    alignments: CreateGridColumnsParams[9];
+    headerRowHeight: CreateGridColumnsParams[10];
+    headerRowLines: CreateGridColumnsParams[11];
+    columnCellValueActions: CreateGridColumnsParams[12];
+    closeCellPopover: CreateGridColumnsParams[13];
+    columnFilterable: CreateGridColumnsParams[14];
   }> = {}
 ) =>
   createGridColumns(
     params.bucketColumns ?? [],
     params.table ?? table,
     params.handleFilterClick,
     params.handleTransposedColumnClick,
-    params.isReadOnly ?? false,
     params.columnConfig ?? { columns: [], sortingColumnId: undefined, sortingDirection: 'none' },
     params.visibleColumns ?? visibleColumns,
     params.formatFactory ?? (((x: unknown) => ({ convert: () => x })) as unknown as FormatFactory),

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/columns.tsx

@@ -46,7 +46,6 @@ export const createGridColumns = (
         negate?: boolean
       ) => void)
     | undefined,
-  isReadOnly: boolean,
   columnConfig: DatatableColumnConfig,
   visibleColumns: string[],
   formatFactory: FormatFactory,
@@ -241,32 +240,31 @@ export const createGridColumns = (
         });
       }
 
-      if (!isReadOnly) {
-        if (isTransposed && columnArgs?.bucketValues && handleTransposedColumnClick) {
-          const bucketValues = columnArgs?.bucketValues;
-          additionalActions.push({
-            color: 'text',
-            size: 'xs',
-            onClick: () => handleTransposedColumnClick(bucketValues, false),
-            iconType: 'plusInCircle',
-            label: i18n.translate('xpack.lens.table.columnFilter.filterForValueText', {
-              defaultMessage: 'Filter for',
-            }),
-            'data-test-subj': 'lensDatatableHide',
-          });
+      if (isTransposed && columnArgs?.bucketValues && handleTransposedColumnClick) {
+        const bucketValues = columnArgs?.bucketValues;
+        additionalActions.push({
+          color: 'text',
+          size: 'xs',
+          onClick: () => handleTransposedColumnClick(bucketValues, false),
+          iconType: 'plusInCircle',
+          label: i18n.translate('xpack.lens.table.columnFilter.filterForValueText', {
+            defaultMessage: 'Filter for',
+          }),
+          'data-test-subj': 'lensDatatableHide',
+        });
 
-          additionalActions.push({
-            color: 'text',
-            size: 'xs',
-            onClick: () => handleTransposedColumnClick(bucketValues, true),
-            iconType: 'minusInCircle',
-            label: i18n.translate('xpack.lens.table.columnFilter.filterOutValueText', {
-              defaultMessage: 'Filter out',
-            }),
-            'data-test-subj': 'lensDatatableHide',
-          });
-        }
+        additionalActions.push({
+          color: 'text',
+          size: 'xs',
+          onClick: () => handleTransposedColumnClick(bucketValues, true),
+          iconType: 'minusInCircle',
+          label: i18n.translate('xpack.lens.table.columnFilter.filterOutValueText', {
+            defaultMessage: 'Filter out',
+          }),
+          'data-test-subj': 'lensDatatableHide',
+        });
       }
+
       const currentAlignment = alignments && alignments.get(field);
       const hasMultipleRows = [RowHeightMode.auto, RowHeightMode.custom, undefined].includes(
         headerRowHeight

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.test.tsx

@@ -135,7 +135,6 @@ describe('DatatableComponent', () => {
       }),
       paletteService: chartPluginMock.createPaletteRegistry(),
       theme: setUpMockTheme,
-      renderMode: 'edit' as const,
       interactive: true,
       syncColors: false,
       renderComplete,
@@ -183,8 +182,8 @@ describe('DatatableComponent', () => {
     });
   });
 
-  test('it should render hide, reset, and sort actions on header even when it is in read only mode', async () => {
-    renderDatatableComponent({ renderMode: 'view' });
+  test('it should render hide, reset, and sort actions on header', async () => {
+    renderDatatableComponent();
     await userEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-a'));
     const actionPopover = screen.getByRole('dialog');
     const actions = within(actionPopover)

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx

@@ -154,7 +154,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
 
   const hasAtLeastOneRowClickAction = props.rowHasRowClickTriggerActions?.some((x) => x);
 
-  const { getType, dispatchEvent, renderMode, formatFactory, syncColors } = props;
+  const { getType, dispatchEvent, formatFactory, syncColors } = props;
 
   const formatters: Record<string, IFieldFormat> = useMemo(
     () =>
@@ -254,8 +254,6 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
     [columnConfig]
   );
 
-  const isReadOnlySorted = renderMode !== 'edit';
-
   const onColumnResize = useMemo(
     () => createGridResizeHandler(columnConfig, setColumnConfig, onEditAction),
     [onEditAction, setColumnConfig, columnConfig]
@@ -304,7 +302,6 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
         firstLocalTable,
         handleFilterClick,
         handleTransposedColumnClick,
-        isReadOnlySorted,
         columnConfig,
         visibleColumns,
         formatFactory,
@@ -322,7 +319,6 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
       firstLocalTable,
       handleFilterClick,
       handleTransposedColumnClick,
-      isReadOnlySorted,
       columnConfig,
       visibleColumns,
       formatFactory,

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/types.ts

@@ -8,7 +8,7 @@
 import { CoreSetup } from '@kbn/core/public';
 import type { PaletteRegistry } from '@kbn/coloring';
 import type { IAggType } from '@kbn/data-plugin/public';
-import type { Datatable, DatatableColumnMeta, RenderMode } from '@kbn/expressions-plugin/common';
+import type { Datatable, DatatableColumnMeta } from '@kbn/expressions-plugin/common';
 import type {
   ILensInterpreterRenderHandlers,
   LensCellValueAction,
@@ -50,7 +50,6 @@ export type DatatableRenderProps = DatatableProps & {
   formatFactory: FormatFactory;
   dispatchEvent: ILensInterpreterRenderHandlers['event'];
   getType: (meta?: DatatableColumnMeta) => IAggType | undefined;
-  renderMode: RenderMode;
   paletteService: PaletteRegistry;
   theme: CoreSetup['theme'];
   interactive: boolean;

x-pack/platform/plugins/shared/lens/public/visualizations/datatable/expression.tsx

@@ -180,7 +180,6 @@ export const getDatatableRenderer = (dependencies: {
           {...config}
           formatFactory={dependencies.formatFactory}
           dispatchEvent={handlers.event}
-          renderMode={handlers.getRenderMode()}
           paletteService={dependencies.paletteService}
           getType={getType}
           rowHasRowClickTriggerActions={rowHasRowClickTriggerActions}