Add filter by value to document details fields (#7081)

* Refactor filter button actions in DocViewer

* Add Doc Viewer styles and import to Doc Viewer component

* Refactor cell filter actions to use 'field' instead of 'columnId'

* Refactor filtering logic in DocViewer component

* Add onFilterHandler to DocViewer component

* Add onFilter handler to various components

* Refactor RequirementFlyout component for readability

* Add filter functionality to inventory vulnerabilities dashboard

* Remove unused code related to doc viewer in WazuhDataGrid

* Add setFilters function to FileDetails and RequirementFlyout

* Refactor doc-viewer styles for button display

* Add filter state management to data grid and drilldown panels

* Fix Prettier issue

* Add filter by value to document details fields

* Update defaultColumns to defaultTableColumns in WazuhDataGrid

* Add filter functionality for document viewer

* Swap the order of arguments in filter action test

* Rename button icons to EuiButtonIcon component

* Update component import paths and class names

* Update doc-viewer styles for wzDocViewer classes

* Refactor adding filters to handle array values efficiently

* Add onClose callback to onFilter function in DocViewer

* Refactor DocumentViewTableAndJson component props

* Refactor technique row details component props type

* Add setFilters function to TechniqueRowDetails component

* Refactor closeFlyoutHandler in DashboardTH component

* Add closeFlyoutHandler function for flyout onClose event

* Fix Prettier issue

* fix: add guard clause for undefined value in filter cell actions

* feat: add FilterStateStore enum and update state management in PatternDataSourceFilterManager to use it

* fix: update onFilter function to accept more specific FILTER_OPERATOR types and value types in DocViewer component

* feat: add isNullish utility function and update exports in util index for better nullish checks

* fix: refactor onFilterCellActions to use isNullish for improved handling of FILTER_OPERATOR and value inputs in data grid service

* fix: refactor onFilterCellActions import path for improved structure and maintainability in data-grid and doc-viewer components

* fix: update onFilterCellActions to accept number type in values for enhanced filtering capabilities in data grid component

* test: add unit tests for onFilterCellActions to verify filtering with number values in data grid component

* test: simplify onFilterCellActions tests by removing unused filters array for clearer unit tests in data grid component

* test: enhance onFilterCellActions tests by clarifying filter addition with improved descriptions for number and string values in data grid

* test: refactor buildFilter usage in onFilterCellActions tests for improved clarity on filter creation in data grid component

* test: improve onFilterCellActions tests with clearer descriptions for filters and added date filter cases in data grid component

* test: add tests for single filter actions with string values and 'is'/'is not' operators in onFilterCellActions for data grid

* test: add tests for multiple filters with 'is' and 'is not' operators for rule.groups in onFilterCellActions for data grid

* test: add test for onFilterCellActions with undefined value to ensure appropriate filter behavior in data grid component

* test: update filter negate logic and add test for 'is not' operator with undefined value in onFilterCellActions for data grid

* Fix Prettier issue

* test: refactor filter creation logic in onFilterCellActions tests for improved clarity and consistency in data grid component

* test: unify key usage in filter tests in onFilterCellActions for clearer and more maintainable assertions in data grid component

* test: add filter logic tests for boolean values in onFilterCellActions for better coverage in data grid component

* test: update filter tests in onFilterCellActions to clarify handling of boolean values in data grid component

* test: improve clarity in filter cell action tests by specifying value types in data grid component assertions

* test: refine value type definition in onFilterCellActions to enhance clarity for boolean and numeric filters in data grid component

* Refactor drilldown components to simplify destructuring of props, removing unused variables for cleaner code

* Remove unused `filters` and `setFilters` props from OfficePanel for cleaner code and improved readability

* Fix typos in export button label across data grid components

---------

Co-authored-by: Federico Rodriguez <[email protected]>

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added an "Agents management" menu and moved the sections: "Endpoint Groups" and "Endpoint Summary" which changed its name to "Summary".[#7112](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7112)
 - Added ability to filter from File Integrity Monitoring registry inventory [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)
 - Added new field columns and ability to select the visible fields in the File Integrity Monitoring Files and Registry tables [#7119](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7119)
+- Added filter by value to document details fields [#7081](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7081)
 
 ### Changed
 

plugins/main/common/constants.ts

@@ -530,3 +530,8 @@ export const OSD_URL_STATE_STORAGE_ID = 'state:storeInSessionStorage';
 
 export const APP_STATE_URL_KEY = '_a';
 export const GLOBAL_STATE_URL_KEY = '_g';
+
+export enum FilterStateStore {
+  APP_STATE = 'appState',
+  GLOBAL_STATE = 'globalState',
+}

plugins/main/public/components/agents/fim/inventory/fileDetail.tsx

@@ -52,6 +52,7 @@ import { RedirectAppLinks } from '../../../../../../../src/plugins/opensearch_da
 import TechniqueRowDetails from '../../../overview/mitre/framework/components/techniques/components/flyout-technique/technique-row-details';
 import { DATA_SOURCE_FILTER_CONTROLLED_CLUSTER_MANAGER } from '../../../../../common/constants';
 import NavigationService from '../../../../react-services/navigation-service';
+import { setFilters } from '../../../common/search-bar/set-filters';
 
 export class FileDetails extends Component {
   props!: {
@@ -586,6 +587,8 @@ export class FileDetails extends Component {
 
           this.discoverFilterManager.addFilters(newFilter);
         }}
+        filters={[]}
+        setFilters={setFilters(this.discoverFilterManager)}
       />
     );
   }

plugins/main/public/components/common/data-grid/cell-filter-actions.test.tsx

@@ -61,7 +61,7 @@ describe('cell-filter-actions', () => {
       fireEvent.click(component);
 
       expect(onFilter).toHaveBeenCalledTimes(1);
-      expect(onFilter).toHaveBeenCalledWith(TEST_COLUMN_ID, TEST_VALUE, 'is');
+      expect(onFilter).toHaveBeenCalledWith(TEST_COLUMN_ID, 'is', TEST_VALUE);
     });
   });
 
@@ -102,8 +102,8 @@ describe('cell-filter-actions', () => {
       expect(onFilter).toHaveBeenCalledTimes(1);
       expect(onFilter).toHaveBeenCalledWith(
         TEST_COLUMN_ID,
-        TEST_VALUE,
         'is not',
+        TEST_VALUE,
       );
     });
   });

plugins/main/public/components/common/data-grid/cell-filter-actions.tsx

@@ -15,30 +15,30 @@ export const filterIsAction = (
   rows: any[],
   pageSize: number,
   onFilter: (
-    columndId: string,
-    value: any,
+    field: string,
     operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
+    value?: any,
   ) => void,
 ) => {
   return ({
     rowIndex,
-    columnId,
+    columnId: field,
     Component,
   }: EuiDataGridColumnCellActionProps) => {
     const filterForValueText = i18n.translate('discover.filterForValue', {
       defaultMessage: 'Filter for value',
     });
     const filterForValueLabel = i18n.translate('discover.filterForValueLabel', {
       defaultMessage: 'Filter for value: {value}',
-      values: { value: columnId },
+      values: { value: field },
     });
 
     const handleClick = () => {
       const row = rows[rowIndex % pageSize];
       const flattened = indexPattern.flattenHit(row);
 
       if (flattened) {
-        onFilter(columnId, flattened[columnId], FILTER_OPERATOR.IS);
+        onFilter(field, FILTER_OPERATOR.IS, flattened[field]);
       }
     };
 
@@ -61,26 +61,30 @@ export const filterIsNotAction =
     rows: any[],
     pageSize: number,
     onFilter: (
-      columndId: string,
-      value: any,
+      field: string,
       operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
+      value?: any,
     ) => void,
   ) =>
-  ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+  ({
+    rowIndex,
+    columnId: field,
+    Component,
+  }: EuiDataGridColumnCellActionProps) => {
     const filterOutValueText = i18n.translate('discover.filterOutValue', {
       defaultMessage: 'Filter out value',
     });
     const filterOutValueLabel = i18n.translate('discover.filterOutValueLabel', {
       defaultMessage: 'Filter out value: {value}',
-      values: { value: columnId },
+      values: { value: field },
     });
 
     const handleClick = () => {
       const row = rows[rowIndex % pageSize];
       const flattened = indexPattern.flattenHit(row);
 
       if (flattened) {
-        onFilter(columnId, flattened[columnId], FILTER_OPERATOR.IS_NOT);
+        onFilter(field, FILTER_OPERATOR.IS_NOT, flattened[field]);
       }
     };
 
@@ -103,9 +107,9 @@ export function cellFilterActions(
   rows: any[],
   pageSize: number,
   onFilter: (
-    columndId: string,
-    value: any,
+    field: string,
     operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
+    value: any,
   ) => void,
 ) {
   if (!field.filterable) return;

plugins/main/public/components/common/data-grid/data-grid-service.ts

@@ -10,10 +10,7 @@ import {
 export const MAX_ENTRIES_PER_QUERY = 10000;
 import { tDataGridColumn } from './use-data-grid';
 import { cellFilterActions } from './cell-filter-actions';
-import {
-  FILTER_OPERATOR,
-  PatternDataSourceFilterManager,
-} from '../data-source/pattern/pattern-data-source-filter-manager';
+import { onFilterCellActions } from './filter-cell-actions';
 
 type ParseData<T> =
   | {
@@ -192,26 +189,6 @@ export const exportSearchToCSV = async (
   }
 };
 
-const onFilterCellActions = (
-  indexPatternId: string,
-  filters: Filter[],
-  setFilters: (filters: Filter[]) => void,
-) => {
-  return (
-    columndId: string,
-    value: any,
-    operation: FILTER_OPERATOR.IS | FILTER_OPERATOR.IS_NOT,
-  ) => {
-    const newFilter = PatternDataSourceFilterManager.createFilter(
-      operation,
-      columndId,
-      value,
-      indexPatternId,
-    );
-    setFilters([...filters, newFilter]);
-  };
-};
-
 const mapToDataGridColumn = (
   field: IFieldType,
   indexPattern: IndexPattern,