From 1cde82e27ac085dfe1614b8537d057a8f45b28bb Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sat, 5 Feb 2022 11:08:05 +0100
Subject: [PATCH] fix(ui) - metadata query

---
 .../FilterAutoComplete/FilterAutoComplete.css      |  2 +-
 .../FilterAutoComplete/FilterAutoComplete.tsx      |  4 +++-
 .../shared/Filters/FilterModal/FilterModal.css     |  1 +
 .../shared/Filters/FilterModal/FilterModal.tsx     |  1 +
 .../shared/Filters/FilterValue/FilterValue.tsx     | 14 ++++++++++++--
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
index 2d6041eac..bb9f17313 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
@@ -47,7 +47,7 @@
 .menu {
   border-radius: 0 0 3px 3px;
   border: solid thin $gray-light !important;
-  /* box-shadow: 0 2px 10px 0 $gray-light; */
+  box-shadow: 0 2px 2px 0 $gray-light;
   /* padding: 20px; */
   background-color: white;
   max-height: 350px;
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index 16be3add8..d68b0587b 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -22,6 +22,7 @@ interface Props {
   placeholder?: string;
   onSelect: (e, item) => void;
   value: any;
+  icon?: string;
 }
 
 function FilterAutoComplete(props: Props) {
@@ -36,6 +37,7 @@ function FilterAutoComplete(props: Props) {
       params = {},
       headerText = '',
       value = '',
+      icon = null,
   } = props;
   const [showModal, setShowModal] = useState(true)
   const [loading, setLoading] = useState(false)
@@ -136,7 +138,7 @@ function FilterAutoComplete(props: Props) {
                   className={ cn(stl.filterItem) }
                   id="filter-item" onClick={ (e) => onItemClick(e, item) }
                 >
-                  { item.icon && <Icon name={ item.icon } size="16" marginRight="8" /> }
+                  { icon && <Icon name={ icon } size="16" marginRight="8" /> }
                   <span className={ stl.label }>{ item.value }</span>
                 </div>             
               ))
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.css b/frontend/app/components/shared/Filters/FilterModal/FilterModal.css
index cb4611d4f..463a7a2a9 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.css
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.css
@@ -4,6 +4,7 @@
   padding: 20px;
   overflow: hidden;
   overflow-y: auto;
+  box-shadow: 0 2px 2px 0 $gray-light;
 }
 .optionItem {
   white-space: nowrap;
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index edb75a5cf..85b98525c 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -45,6 +45,7 @@ function FilterModal(props: Props) {
     _filter.value = [filter.value];
     onFilterClick(_filter);
   }
+  
   return (
     <div className={stl.wrapper} style={{ width: '490px', maxHeight: '400px', overflowY: 'auto'}}>
       { showSearchList && (
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 705d561df..fb2a8e39c 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import FilterAutoComplete from '../FilterAutoComplete';
-import { FilterType } from 'Types/filter/filterType';
+import { FilterKey, FilterCategory, FilterType } from 'Types/filter/filterType';
 import FilterValueDropdown from '../FilterValueDropdown';
 import FilterDuration from '../FilterDuration';
 
@@ -55,6 +55,15 @@ function FilterValue(props: Props) {
     }
   }
 
+  const getParms = (key) => {
+    switch (filter.category) {
+      case FilterCategory.METADATA:
+        return { type: FilterKey.METADATA, key: key };
+      default:
+        return { type: filter.key };
+    }
+  }
+
   const renderValueFiled = (value, valueIndex) => {
     const showCloseButton = filter.value.length > 1;
     const showOrButton = valueIndex === filter.value.length - 1;
@@ -115,10 +124,11 @@ function FilterValue(props: Props) {
             onRemoveValue={() => onRemoveValue(valueIndex)}
             method={'GET'}
             endpoint='/events/search'
-            params={{ type: filter.key  }}
+            params={getParms(filter.key)}
             headerText={''}
             // placeholder={''}
             onSelect={(e, item) => onChange(e, item, valueIndex)}
+            icon={filter.icon}
           />
         )
     }