[8.x] [ES|QL] Disable the filter actions for multivalue fields (elast…

…ic#193415) (elastic#193962) # Backport This will backport the following commits from `main` to `8.x`: - [[ES|QL] Disable the filter actions for multivalue fields (elastic#193415)](elastic#193415)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Stratoula Kalafateli <[email protected]>
kibanamachine · Sep 25, 2024 · c7b153c · c7b153c
1 parent 668f212
commit c7b153c
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 46 deletions.
diff --git a/packages/kbn-esql-utils/src/utils/append_to_query.test.ts b/packages/kbn-esql-utils/src/utils/append_to_query.test.ts
@@ -168,5 +168,11 @@ AND \`dest\`=="Crete"`
 and \`ip\`::string!="127.0.0.2/32"`
       );
     });
+
+    it('returns undefined for multivalue fields', () => {
+      expect(
+        appendWhereClauseToESQLQuery('from logstash-*', 'dest', ['meow'], '+', 'string')
+      ).toBeUndefined();
+    });
   });
 });
diff --git a/packages/kbn-esql-utils/src/utils/append_to_query.ts b/packages/kbn-esql-utils/src/utils/append_to_query.ts
@@ -21,7 +21,11 @@ export function appendWhereClauseToESQLQuery(
   value: unknown,
   operation: '+' | '-' | 'is_not_null' | 'is_null',
   fieldType?: string
-): string {
+): string | undefined {
+  // multivalues filtering is not supported yet
+  if (Array.isArray(value)) {
+    return undefined;
+  }
   let operator;
   switch (operation) {
     case 'is_not_null':

diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx
@@ -189,7 +189,13 @@ function buildEuiGridColumn({
     cellActions = columnCellActions;
   } else {
     cellActions = dataViewField
-      ? buildCellActions(dataViewField, toastNotifications, valueToStringConverter, onFilter)
+      ? buildCellActions(
+          dataViewField,
+          isPlainRecord,
+          toastNotifications,
+          valueToStringConverter,
+          onFilter
+        )
       : [];
 
     if (columnCellActions?.length && cellActionsHandling === 'append') {

diff --git a/packages/kbn-unified-data-table/src/components/default_cell_actions.test.tsx b/packages/kbn-unified-data-table/src/components/default_cell_actions.test.tsx
@@ -45,6 +45,7 @@ describe('Default cell actions ', function () {
   it('should not show cell actions for unfilterable fields', async () => {
     const cellActions = buildCellActions(
       { name: 'foo', filterable: false } as DataViewField,
+      false,
       servicesMock.toastNotifications,
       dataTableContextMock.valueToStringConverter
     );
@@ -61,6 +62,7 @@ describe('Default cell actions ', function () {
   it('should show filter actions for filterable fields', async () => {
     const cellActions = buildCellActions(
       { name: 'foo', filterable: true } as DataViewField,
+      false,
       servicesMock.toastNotifications,
       dataTableContextMock.valueToStringConverter,
       jest.fn()
@@ -71,6 +73,7 @@ describe('Default cell actions ', function () {
   it('should show Copy action for _source field', async () => {
     const cellActions = buildCellActions(
       { name: '_source', type: '_source', filterable: false } as DataViewField,
+      false,
       servicesMock.toastNotifications,
       dataTableContextMock.valueToStringConverter
     );
@@ -87,65 +90,97 @@ describe('Default cell actions ', function () {
     const component = mountWithIntl(
       <UnifiedDataTableContext.Provider value={dataTableContextMock}>
         <FilterInBtn
-          Component={(props: any) => <EuiButton {...props} />}
-          rowIndex={1}
-          colIndex={1}
-          columnId="extension"
-          isExpanded={false}
+          cellActionProps={{
+            Component: (props: any) => <EuiButton {...props} />,
+            rowIndex: 1,
+            colIndex: 1,
+            columnId: 'extension',
+            isExpanded: false,
+          }}
+          field={{ name: 'extension', filterable: true } as DataViewField}
+          isPlainRecord={false}
         />
       </UnifiedDataTableContext.Provider>
     );
     const button = findTestSubject(component, 'filterForButton');
     await button.simulate('click');
-    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith({}, 'jpg', '+');
+    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith(
+      { name: 'extension', filterable: true },
+      'jpg',
+      '+'
+    );
   });
   it('triggers filter function when FilterInBtn is clicked for a non-provided value', async () => {
     const component = mountWithIntl(
       <UnifiedDataTableContext.Provider value={dataTableContextMock}>
         <FilterInBtn
-          Component={(props: any) => <EuiButton {...props} />}
-          rowIndex={0}
-          colIndex={1}
-          columnId="extension"
-          isExpanded={false}
+          cellActionProps={{
+            Component: (props: any) => <EuiButton {...props} />,
+            rowIndex: 0,
+            colIndex: 1,
+            columnId: 'extension',
+            isExpanded: false,
+          }}
+          field={{ name: 'extension', filterable: true } as DataViewField}
+          isPlainRecord={false}
         />
       </UnifiedDataTableContext.Provider>
     );
     const button = findTestSubject(component, 'filterForButton');
     await button.simulate('click');
-    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith({}, undefined, '+');
+    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith(
+      { name: 'extension', filterable: true },
+      undefined,
+      '+'
+    );
   });
   it('triggers filter function when FilterInBtn is clicked for an empty string value', async () => {
     const component = mountWithIntl(
       <UnifiedDataTableContext.Provider value={dataTableContextMock}>
         <FilterInBtn
-          Component={(props: any) => <EuiButton {...props} />}
-          rowIndex={4}
-          colIndex={1}
-          columnId="message"
-          isExpanded={false}
+          cellActionProps={{
+            Component: (props: any) => <EuiButton {...props} />,
+            rowIndex: 4,
+            colIndex: 1,
+            columnId: 'message',
+            isExpanded: false,
+          }}
+          field={{ name: 'message', filterable: true } as DataViewField}
+          isPlainRecord={false}
         />
       </UnifiedDataTableContext.Provider>
     );
     const button = findTestSubject(component, 'filterForButton');
     await button.simulate('click');
-    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith({}, '', '+');
+    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith(
+      { name: 'message', filterable: true },
+      '',
+      '+'
+    );
   });
   it('triggers filter function when FilterOutBtn is clicked', async () => {
     const component = mountWithIntl(
       <UnifiedDataTableContext.Provider value={dataTableContextMock}>
         <FilterOutBtn
-          Component={(props: any) => <EuiButton {...props} />}
-          rowIndex={1}
-          colIndex={1}
-          columnId="extension"
-          isExpanded={false}
+          cellActionProps={{
+            Component: (props: any) => <EuiButton {...props} />,
+            rowIndex: 1,
+            colIndex: 1,
+            columnId: 'extension',
+            isExpanded: false,
+          }}
+          field={{ name: 'extension', filterable: true } as DataViewField}
+          isPlainRecord={false}
         />
       </UnifiedDataTableContext.Provider>
     );
     const button = findTestSubject(component, 'filterOutButton');
     await button.simulate('click');
-    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith({}, 'jpg', '-');
+    expect(dataTableContextMock.onFilter).toHaveBeenCalledWith(
+      { name: 'extension', filterable: true },
+      'jpg',
+      '-'
+    );
   });
   it('triggers clipboard copy when CopyBtn is clicked', async () => {
     const component = mountWithIntl(

diff --git a/packages/kbn-unified-data-table/src/components/default_cell_actions.tsx b/packages/kbn-unified-data-table/src/components/default_cell_actions.tsx
@@ -32,11 +32,25 @@ function onFilterCell(
   }
 }
 
-export const FilterInBtn = (
-  { Component, rowIndex, columnId }: EuiDataGridColumnCellActionProps,
-  field: DataViewField
-) => {
+const esqlMultivalueFilteringDisabled = i18n.translate(
+  'unifiedDataTable.grid.esqlMultivalueFilteringDisabled',
+  {
+    defaultMessage: 'Multivalue filtering is not supported in ES|QL',
+  }
+);
+
+export const FilterInBtn = ({
+  cellActionProps: { Component, rowIndex, columnId },
+  field,
+  isPlainRecord,
+}: {
+  cellActionProps: EuiDataGridColumnCellActionProps;
+  field: DataViewField;
+  isPlainRecord: boolean | undefined;
+}) => {
   const context = useContext(UnifiedDataTableContext);
+  const filteringDisabled =
+    isPlainRecord && Array.isArray(context.getRowByIndex(rowIndex)?.flattened[columnId]);
   const buttonTitle = i18n.translate('unifiedDataTable.grid.filterForAria', {
     defaultMessage: 'Filter for this {value}',
     values: { value: columnId },
@@ -49,7 +63,8 @@ export const FilterInBtn = (
       }}
       iconType="plusInCircle"
       aria-label={buttonTitle}
-      title={buttonTitle}
+      title={filteringDisabled ? esqlMultivalueFilteringDisabled : buttonTitle}
+      disabled={filteringDisabled}
       data-test-subj="filterForButton"
     >
       {i18n.translate('unifiedDataTable.grid.filterFor', {
@@ -59,11 +74,18 @@ export const FilterInBtn = (
   );
 };
 
-export const FilterOutBtn = (
-  { Component, rowIndex, columnId }: EuiDataGridColumnCellActionProps,
-  field: DataViewField
-) => {
+export const FilterOutBtn = ({
+  cellActionProps: { Component, rowIndex, columnId },
+  field,
+  isPlainRecord,
+}: {
+  cellActionProps: EuiDataGridColumnCellActionProps;
+  field: DataViewField;
+  isPlainRecord: boolean | undefined;
+}) => {
   const context = useContext(UnifiedDataTableContext);
+  const filteringDisabled =
+    isPlainRecord && Array.isArray(context.getRowByIndex(rowIndex)?.flattened[columnId]);
   const buttonTitle = i18n.translate('unifiedDataTable.grid.filterOutAria', {
     defaultMessage: 'Filter out this {value}',
     values: { value: columnId },
@@ -76,7 +98,8 @@ export const FilterOutBtn = (
       }}
       iconType="minusInCircle"
       aria-label={buttonTitle}
-      title={buttonTitle}
+      title={filteringDisabled ? esqlMultivalueFilteringDisabled : buttonTitle}
+      disabled={filteringDisabled}
       data-test-subj="filterOutButton"
     >
       {i18n.translate('unifiedDataTable.grid.filterOut', {
@@ -120,23 +143,26 @@ export function buildCopyValueButton(
 
 export function buildCellActions(
   field: DataViewField,
+  isPlainRecord: boolean | undefined,
   toastNotifications: ToastsStart,
   valueToStringConverter: ValueToStringConverter,
   onFilter?: DocViewFilterFn
 ) {
   return [
     ...(onFilter && field.filterable
       ? [
-          ({ Component, rowIndex, columnId }: EuiDataGridColumnCellActionProps) =>
-            FilterInBtn(
-              { Component, rowIndex, columnId } as EuiDataGridColumnCellActionProps,
-              field
-            ),
-          ({ Component, rowIndex, columnId }: EuiDataGridColumnCellActionProps) =>
-            FilterOutBtn(
-              { Component, rowIndex, columnId } as EuiDataGridColumnCellActionProps,
-              field
-            ),
+          (cellActionProps: EuiDataGridColumnCellActionProps) =>
+            FilterInBtn({
+              cellActionProps,
+              field,
+              isPlainRecord,
+            }),
+          (cellActionProps: EuiDataGridColumnCellActionProps) =>
+            FilterOutBtn({
+              cellActionProps,
+              field,
+              isPlainRecord,
+            }),
         ]
       : []),
     ({ Component, rowIndex, columnId }: EuiDataGridColumnCellActionProps) =>

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx
@@ -211,6 +211,9 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
         getOperator(fieldName, values, operation),
         fieldType
       );
+      if (!updatedQuery) {
+        return;
+      }
       data.query.queryString.setQuery({
         esql: updatedQuery,
       });