From 2f41685561cb1437d0f50b73644ce932722f9be8 Mon Sep 17 00:00:00 2001
From: joaoguilherme2003 <joao.mendonca@encora.com>
Date: Tue, 31 Oct 2023 15:45:14 -0300
Subject: [PATCH] fix(orb-ui): Filter component bugs

---
 .../common/interfaces/orb/filter-option.ts    |  1 +
 .../list/agent.policy.list.component.ts       |  1 +
 .../fleet/agents/list/agent.list.component.ts |  4 ++-
 .../groups/list/agent.group.list.component.ts |  7 -----
 .../pages/sinks/list/sink.list.component.ts   |  2 ++
 .../components/filter/filter.component.html   |  6 ++--
 .../components/filter/filter.component.ts     | 29 +++++++------------
 7 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/ui/src/app/common/interfaces/orb/filter-option.ts b/ui/src/app/common/interfaces/orb/filter-option.ts
index b63410ebb..61ee0fa14 100644
--- a/ui/src/app/common/interfaces/orb/filter-option.ts
+++ b/ui/src/app/common/interfaces/orb/filter-option.ts
@@ -5,6 +5,7 @@ export enum FilterTypes {
   AutoComplete,
   Select, // allows select one option
   MultiSelect, // allows select multi options
+  MultiSelectAsync, // allows select multi options | async
   Checkbox, // on|off option
   Number, // number input
 }
diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts
index e89335145..b5900063d 100644
--- a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts
+++ b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.ts
@@ -156,6 +156,7 @@ export class AgentPolicyListComponent
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(AgentPolicyUsage).map((value) => value as string),
+        exact: true,
       },
     ];
 
diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
index 681f5768e..3b35a4699 100644
--- a/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
+++ b/ui/src/app/pages/fleet/agents/list/agent.list.component.ts
@@ -159,6 +159,7 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(AgentStates).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Policies',
@@ -166,12 +167,13 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(AgentPolicyAggStates).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Version',
         prop: 'version',
         filter: filterMultiSelect,
-        type: FilterTypes.MultiSelect,
+        type: FilterTypes.MultiSelectAsync,
         autoSuggestion: orb.getAgentsVersions(),
         exact: false,
       },
diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
index 8aea4fcdf..136721c4c 100644
--- a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
+++ b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts
@@ -139,13 +139,6 @@ export class AgentGroupListComponent
         filter: filterString,
         type: FilterTypes.Input,
       },
-      // {
-      //   name: 'Status',
-      //   prop: 'state',
-      //   filter: filterMultiSelect,
-      //   type: FilterTypes.MultiSelect,
-      //   options: Object.values(AgentStates).map((value) => value as string),
-      // },
     ];
 
     this.filteredGroups$ = this.filters.createFilteredList()(
diff --git a/ui/src/app/pages/sinks/list/sink.list.component.ts b/ui/src/app/pages/sinks/list/sink.list.component.ts
index 74b7edf44..389156948 100644
--- a/ui/src/app/pages/sinks/list/sink.list.component.ts
+++ b/ui/src/app/pages/sinks/list/sink.list.component.ts
@@ -131,6 +131,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(SinkStates).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Backend',
@@ -138,6 +139,7 @@ export class SinkListComponent implements AfterViewInit, AfterViewChecked, OnDes
         filter: filterMultiSelect,
         type: FilterTypes.MultiSelect,
         options: Object.values(SinkBackends).map((value) => value as string),
+        exact: true,
       },
       {
         name: 'Description',
diff --git a/ui/src/app/shared/components/filter/filter.component.html b/ui/src/app/shared/components/filter/filter.component.html
index 5689c977b..7092c8aed 100644
--- a/ui/src/app/shared/components/filter/filter.component.html
+++ b/ui/src/app/shared/components/filter/filter.component.html
@@ -40,7 +40,7 @@
   >
     <nb-icon icon="plus-outline"></nb-icon>
   </button>
-  <div class="filter-menu" *ngIf="filterType === 'selectSync' && showOptions">
+  <div class="filter-menu" *ngIf="optionsMenuType === 'multiselectsync' && showOptions">
     <div 
       *ngFor="let option of currentFilter?.options" 
       class="apply-filter-option"
@@ -53,7 +53,7 @@
       <span>{{ option | titlecase }}</span>
     </div>
   </div>
-  <div class="filter-menu" *ngIf="filterType === 'selectAsync' && showOptions">
+  <div class="filter-menu" *ngIf="optionsMenuType === 'multiselectasync' && showOptions">
     <div 
       *ngFor="let option of currentFilter?.autoSuggestion | async" 
       class="apply-filter-option"
@@ -66,7 +66,7 @@
       <span>{{ option | titlecase }}</span>
     </div>
   </div>
-  <div class="filter-menu" *ngIf="filterType === 'input' && showOptions">
+  <div class="filter-menu" *ngIf="optionsMenuType === 'input' && showOptions">
     <div 
       *ngFor="let option of currentFilter?.autoSuggestion | async" 
       class="apply-filter-option"
diff --git a/ui/src/app/shared/components/filter/filter.component.ts b/ui/src/app/shared/components/filter/filter.component.ts
index b213a078d..9123a4f29 100644
--- a/ui/src/app/shared/components/filter/filter.component.ts
+++ b/ui/src/app/shared/components/filter/filter.component.ts
@@ -30,13 +30,7 @@ export class FilterComponent implements OnInit {
 
   loadedSearchText: string;
 
-  filterType = '';
-
-  FiltersTypes = {
-    selectAsync: 'selectAsync',
-    selectSync: 'selectSync',
-    input: 'input',
-  };
+  optionsMenuType = '';
 
   showMenu = false;
 
@@ -147,18 +141,17 @@ export class FilterComponent implements OnInit {
     const icon = document.querySelector('.icon');
     icon.classList.toggle('flipped');
 
-    const filterName = this.currentFilter.filter.name;
-    if (filterName === 'filterMultiSelect') {
+    if (this.currentFilter.type === FilterTypes.MultiSelect) {
       this.selectedFilterParams = this.filter.getMultiAppliedParams(this.currentFilter.name);
-
-      if (this.currentFilter.autoSuggestion) {
-        this.filterType = this.FiltersTypes.selectAsync;
-      } else if (this.currentFilter.options) {
-        this.filterType = this.FiltersTypes.selectSync;
-      }
-    } else {
-      this.filterType = this.FiltersTypes.input;
+      this.optionsMenuType = 'multiselectsync';
+    }
+    else if (this.currentFilter.type === FilterTypes.MultiSelectAsync) {
+      this.selectedFilterParams = this.filter.getMultiAppliedParams(this.currentFilter.name);
+      this.optionsMenuType = 'multiselectasync';
     }
+    else {
+      this.optionsMenuType = 'input';
+    } 
   }
 
   handleClickMultiSelect(event: any, param: any) {
@@ -211,7 +204,7 @@ export class FilterComponent implements OnInit {
     }
   }
   onAddFilterButton(param: any) {
-    if (this.filterType === this.FiltersTypes.selectAsync) {
+    if (this.currentFilter.type === FilterTypes.MultiSelectAsync) {
       if (this.selectedFilterParams.length > 0) {
         this.filter.findAndRemove(this.selectedFilterParams, this.currentFilter.name);
         this.selectedFilterParams.push(param);