Fix remove filter icon visibility when pin and unpin agent (#6685)

* Fix hide remove filter icon

* Change disable remove filter behavior in fixed filters

* Remove vuln repository warning

* Update changelog

* Update CHANGELOG

---------

Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>

Author: Machi3mfl

CHANGELOG.md

@@ -21,7 +21,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Changed
 
-- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691)
+- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691)
 - Develop logic of a new index for the fim module [#6227](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6227)
 - Allow editing groups for an agent from Endpoints Summary [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250)
 - Change how the configuration is managed in the backend side [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337) [#6519](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6519) [#6573](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6573)

plugins/main/public/components/common/data-source/hooks/use-data-source.ts

@@ -132,24 +132,25 @@ export function useDataSource<
 
   useEffect(() => {
     if (dataSourceFilterManager && dataSource) {
-      const filteredPinnedAgent = dataSourceFilterManager
-        .getFilters()
-        .filter(
-          (filter: tFilter) =>
-            filter.meta.controlledBy !==
-            PinnedAgentManager.FILTER_CONTROLLED_PINNED_AGENT_KEY,
-        );
       if (pinnedAgentManager.isPinnedAgent()) {
         const pinnedAgent = PatternDataSourceFilterManager.getPinnedAgentFilter(
           dataSource.id,
         );
 
-        dataSourceFilterManager.setFilters([
-          ...filteredPinnedAgent,
-          ...pinnedAgent,
-        ]);
+        dataSourceFilterManager.addFilters([...pinnedAgent]);
       } else {
-        dataSourceFilterManager.setFilters([...filteredPinnedAgent]);
+        const pinnedAgentFilter = dataSourceFilterManager
+        .getFilters()
+        .filter(
+          (filter: tFilter) =>
+            filter.meta.controlledBy ===
+            PinnedAgentManager.FILTER_CONTROLLED_PINNED_AGENT_KEY,
+        );
+
+        if(pinnedAgentFilter.length){
+          dataSourceFilterManager.removeFilter(pinnedAgentFilter[0])
+        }
+
       }
     }
   }, [JSON.stringify(pinnedAgent)]);

plugins/main/public/components/common/data-source/pattern/pattern-data-source-filter-manager.ts

@@ -198,6 +198,14 @@ export class PatternDataSourceFilterManager
     );
   }
 
+  addFilters(filter: tFilter) {
+    this.filterManager.addFilters(filter);
+  }
+
+  removeAll() {
+    this.filterManager.setFilters([]);
+  }
+
   /**
    * Concatenate the filters to fetch the data from the data source
    * @returns
@@ -217,24 +225,16 @@ export class PatternDataSourceFilterManager
    * @returns
    */
   createFilter(field: string, value: string): tFilter {
-    return this.generateFilter(field, value, this.dataSource.id);
+    return this.generateFilter(field, value, this.dataSource.id) as tFilter;
   }
 
   /**
    * Search the the field and value received and remove the filter when exists
    * @param field
    * @param value
    */
-  removeFilter(field: string, value: string): void {
-    let filters = this.filterManager.getFilters();
-    const filterIndex = filters.findIndex(
-      f => f.meta?.key === field && f.meta?.value === value,
-    );
-    // only remove when exists the filter
-    if (filterIndex > -1) {
-      filters.splice(filterIndex, 1);
-      this.setFilters(filters);
-    }
+  removeFilter(filter: tFilter): void {
+    this.filterManager.removeFilter(filter);
   }
 
   /**

plugins/main/public/components/common/data-source/pattern/vulnerabilities/vulnerabilities-data-source-repository.ts

@@ -1,46 +1,45 @@
 import { PatternDataSourceRepository } from '../pattern-data-source-repository';
-import { tDataSource, tParsedIndexPattern } from '../../index'
-
+import { tDataSource, tParsedIndexPattern } from '../../index';
 
 export class VulnerabilitiesDataSourceRepository extends PatternDataSourceRepository {
-    constructor() {
-       super();
-    }
-    
-    async get(id: string) {
-        const dataSource = await super.get(id);
-        if (this.validate(dataSource)) {
-            return dataSource;
-        } else {
-            throw new Error('Vulnerabilities index pattern not found');
-        }
-    }
+  constructor() {
+    super();
+  }
 
-    async getAll() {
-        const indexs = await super.getAll();
-        return indexs.filter(this.validate);
-    }
-    
-    validate(dataSource): boolean {
-        // check if the dataSource has the id or the title have the vulnerabilities word
-        const fieldsToCheck = ['id', 'attributes.title'];
-        // must check in the object and the attributes
-        for (const field of fieldsToCheck) {
-            if (dataSource[field] && dataSource[field].toLowerCase().includes('vulnerabilities')) {
-                return true;
-            }
-        }
-        return false;
+  async get(id: string) {
+    const dataSource = await super.get(id);
+    if (this.validate(dataSource)) {
+      return dataSource;
+    } else {
+      throw new Error('Vulnerabilities index pattern not found');
     }
+  }
 
-    getDefault(){
-        console.warn('getDefault not implemented for vulnerabilities data source repository');
-        return Promise.resolve(null);
-    }
+  async getAll() {
+    const indexs = await super.getAll();
+    return indexs.filter(this.validate);
+  }
 
-    setDefault(dataSource: tParsedIndexPattern){
-        console.warn('setDefault not implemented for vulnerabilities data source repository');
-        return;
+  validate(dataSource): boolean {
+    // check if the dataSource has the id or the title have the vulnerabilities word
+    const fieldsToCheck = ['id', 'attributes.title'];
+    // must check in the object and the attributes
+    for (const field of fieldsToCheck) {
+      if (
+        dataSource[field] &&
+        dataSource[field].toLowerCase().includes('vulnerabilities')
+      ) {
+        return true;
+      }
     }
+    return false;
+  }
+
+  getDefault() {
+    return Promise.resolve(null);
+  }
 
-}
+  setDefault(dataSource: tParsedIndexPattern) {
+    return;
+  }
+}

plugins/main/public/components/common/data-source/types.ts

@@ -1,73 +1,81 @@
-import { Filter } from "../../../../../../src/plugins/data/common";
-import { FilterManager } from "../../../../../../src/plugins/data/public";
+import { Filter } from '../../../../../../src/plugins/data/common';
+import { FilterManager } from '../../../../../../src/plugins/data/public';
 
 export type tSearchParams = {
-    filters?: Filter[];
-    query?: any;
-    pagination?: {
-        pageIndex?: number;
-        pageSize?: number;
-    };
-    fields?: string[],
-    sorting?: {
-        columns: {
-            id: string;
-            direction: 'asc' | 'desc';
-        }[];
-    };
-    dateRange?: {
-        from: string;
-        to: string;
-    };
-    aggs?: any;
-}
+  filters?: Filter[];
+  query?: any;
+  pagination?: {
+    pageIndex?: number;
+    pageSize?: number;
+  };
+  fields?: string[];
+  sorting?: {
+    columns: {
+      id: string;
+      direction: 'asc' | 'desc';
+    }[];
+  };
+  dateRange?: {
+    from: string;
+    to: string;
+  };
+  aggs?: any;
+};
 
 export type tFilter = Filter;
 
 // create a new type using the FilterManager type but only the getFilters, setFilters, addFilters, getUpdates$
-export type tFilterManager = Pick<FilterManager, 'getFilters' | 'setFilters' | 'addFilters' | 'getUpdates$'>;
+export type tFilterManager = Pick<
+  FilterManager,
+  'getFilters' | 'setFilters' | 'addFilters' | 'getUpdates$' | 'removeFilter'
+>;
 
 export type tDataSource = {
-    id: string;
-    title: string;
-    select(): Promise<void>;
-    getFields(): any[];
-    getFixedFilters: () => tFilter[];
-    getFetchFilters: () => tFilter[];
-    fetch: (params: tSearchParams) => Promise<any>;
-    toJSON(): object;
-}
+  id: string;
+  title: string;
+  select(): Promise<void>;
+  getFields(): any[];
+  getFixedFilters: () => tFilter[];
+  getFetchFilters: () => tFilter[];
+  fetch: (params: tSearchParams) => Promise<any>;
+  toJSON(): object;
+};
 
 export interface IDataSourceFactoryConstructor<T extends tDataSource> {
-    new(id: T['id'], title: T['title']): T;
+  new (id: T['id'], title: T['title']): T;
 }
 
 export type tDataSourceFactory<T extends object, K extends tDataSource> = {
-    create: (DataSourceType: IDataSourceFactoryConstructor<K>, data: T) => Promise<K>;
-    createAll: (DataSourceType: IDataSourceFactoryConstructor<K>, data: T[]) => Promise<K[]>;
-}
+  create: (
+    DataSourceType: IDataSourceFactoryConstructor<K>,
+    data: T,
+  ) => Promise<K>;
+  createAll: (
+    DataSourceType: IDataSourceFactoryConstructor<K>,
+    data: T[],
+  ) => Promise<K[]>;
+};
 
 export type tDataSourceFilterManager = {
-    fetch: () => Promise<any>;
-    setFilters: (filters: tFilter[]) => void;
-    getFilters: () => tFilter[];
-    getFixedFilters: () => tFilter[];
-    getFetchFilters: () => tFilter[];
-}
+  fetch: () => Promise<any>;
+  setFilters: (filters: tFilter[]) => void;
+  getFilters: () => tFilter[];
+  getFixedFilters: () => tFilter[];
+  getFetchFilters: () => tFilter[];
+};
 
 export type tDataSourceRepository<T extends object> = {
-    get(id: string): Promise<T>;
-    getAll(): Promise<T[]>;
-    setDefault(dataSourceData: T): void;
-    getDefault(): Promise<T | null>;
-}
-
+  get(id: string): Promise<T>;
+  getAll(): Promise<T[]>;
+  setDefault(dataSourceData: T): void;
+  getDefault(): Promise<T | null>;
+};
 
 export type tDataSourceSelector<T extends tDataSource> = {
-    existsDataSource: (id: string) => Promise<boolean>;
-    getFirstValidDataSource: () => Promise<T>;
-    getAllDataSources: () => Promise<T[]>;
-    getDataSource: (id: string) => Promise<T>;
-    getSelectedDataSource: () => Promise<T>;
-    selectDataSource: (id: string) => Promise<void>;
-}
+  existsDataSource: (id: string) => Promise<boolean>;
+  getFirstValidDataSource: () => Promise<T>;
+  getAllDataSources: () => Promise<T[]>;
+  getDataSource: (id: string) => Promise<T>;
+  getSelectedDataSource: () => Promise<T>;
+  selectDataSource: (id: string) => Promise<void>;
+};

plugins/main/public/components/common/search-bar/search-bar-service.ts

@@ -133,10 +133,10 @@ export const search = async (
 };
 
 const getValueDisplayedOnFilter = (filter: tFilter) => {
-  return filter.query?.bool?.minimum_should_match === 1 ? 
-    `is one of ${filter.meta?.value}` :
-    filter.meta?.params?.query || filter.meta?.value;
-}
+  return filter.query?.bool?.minimum_should_match === 1
+    ? `is one of ${filter.meta?.value}`
+    : filter.meta?.params?.query || filter.meta?.value;
+};
 
 export const hideCloseButtonOnFixedFilters = (
   filters: tFilter[],
@@ -152,7 +152,7 @@ export const hideCloseButtonOnFixedFilters = (
           index,
           filter,
           field: filter.meta?.key,
-          value: getValueDisplayedOnFilter(filter)
+          value: getValueDisplayedOnFilter(filter),
         };
       }
     })
@@ -173,22 +173,24 @@ export const hideCloseButtonOnFixedFilters = (
         filter?.value === filterValue &&
         filter?.index === index,
     );
+    const removeButton = element.querySelector('.euiBadge__iconButton');
+    const badgeButton = element.querySelector(
+      '.euiBadge__content .euiBadge__childButton',
+    ) as HTMLElement;
     if (filter) {
-      // hide the remove button
-      const iconButton = element.querySelector(
-        '.euiBadge__iconButton',
-      ) as HTMLElement;
-      iconButton?.style?.setProperty('display', 'none');
-      // change the cursor to not-allowed
-      const badgeButton = element.querySelector(
-        '.euiBadge__content .euiBadge__childButton',
-      ) as HTMLElement;
-      badgeButton?.style?.setProperty('cursor', 'not-allowed');
-      // remove the popup on click to prevent the filter from being removed
-      element.addEventListener('click', event => {
-        event.preventDefault();
-        event.stopPropagation();
+      $(removeButton).addClass('hide-close-button');
+      $(removeButton).on('click', ev => {
+        ev.stopPropagation();
+      });
+      $(badgeButton).on('click', ev => {
+        ev.stopPropagation();
       });
+      $(badgeButton).css('cursor', 'not-allowed');
+    } else {
+      $(removeButton).removeClass('hide-close-button');
+      $(removeButton).off('click');
+      $(badgeButton).off('click');
+      $(badgeButton).css('cursor', 'pointer');
     }
   });
 };