From 7d3103071e9362f75151cb7ae1656bdf8ab4cbda Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 4 Feb 2022 14:37:01 +0100
Subject: [PATCH] feat(ui) - filters - fixes

---
 .../shared/DateRangeDropdown/DateRangeDropdown.js          | 5 +++--
 .../components/shared/Filters/FilterList/FilterList.tsx    | 2 ++
 .../components/shared/Filters/FilterValue/FilterValue.tsx  | 7 ++++++-
 frontend/app/duck/search.js                                | 4 ++--
 frontend/app/types/filter/newFilter.js                     | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js b/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js
index f29d47745..05a42658f 100644
--- a/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js
+++ b/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js
@@ -88,7 +88,7 @@ export default class DateRangeDropdown extends React.PureComponent {
               <Icon name="chevron-down" color="gray-dark" size="14" className={styles.dropdownIcon} />
             </div> : null
           }
-          selection={!button}
+          // selection={!button}
           name="sessionDateRange"
           direction={ direction }
           className={ button ? "" : "customDropdown" }
@@ -97,8 +97,9 @@ export default class DateRangeDropdown extends React.PureComponent {
           icon={ null }
         >
           <Dropdown.Menu>
-            { options.map(props => 
+            { options.map((props, i) => 
               <Dropdown.Item 
+                key={i}
                 {...props}
                 onClick={this.onItemClick}
                 active={props.value === value }
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index c500b0569..981917042 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -56,6 +56,7 @@ function FilterList(props: Props) {
           </div>
           {filters.map((filter, filterIndex) => filter.isEvent ? (
             <FilterItem
+              key={filterIndex}
               filterIndex={rowIndex++}
               filter={filter}
               onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
@@ -72,6 +73,7 @@ function FilterList(props: Props) {
           <div className="mb-2 text-sm color-gray-medium mr-auto">FILTERS</div>
           {filters.map((filter, filterIndex) => !filter.isEvent ? (
             <FilterItem
+              key={filterIndex}
               isFilter={true}
               filterIndex={filterIndex}
               filter={filter}
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 8be5d257a..e0f2c74db 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -14,7 +14,11 @@ function FilterValue(props: Props) {
 
   const onAddValue = () => {
     const newValues = filter.value.concat("")
-    props.onUpdate({ ...filter, value: newValues })
+    try {
+      props.onUpdate({ ...filter.toData(), value: newValues })
+    } catch (e) {
+      props.onUpdate({ ...filter, value: newValues })
+    }
   }
 
   const onRemoveValue = (valueIndex) => {
@@ -69,6 +73,7 @@ function FilterValue(props: Props) {
       case FilterType.MULTIPLE_DROPDOWN:
         return (
           <FilterValueDropdown
+            search={true}
             multiple={true}
             value={value}
             filter={filter}
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
index 28b2d99f8..05ec59db2 100644
--- a/frontend/app/duck/search.js
+++ b/frontend/app/duck/search.js
@@ -103,7 +103,6 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat
   dispatch(actionCreator(...args));
   const filter = getState().getIn([ 'search', 'instance']).toData();
   filter.filters = filter.filters.map(filterMap);
-  filter.isNew = true  // TODO remove this line
 
   return isRoute(ERRORS_ROUTE, window.location.pathname)
     ? dispatch(fetchErrorsList(filter))
@@ -124,7 +123,8 @@ export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
 }));
 
 export const applySavedSearch = (filter) => (dispatch, getState) => {
-  dispatch(edit(filter ? filter.filter : new Filter({ filters: []})));
+  console.log('applySavedSearch', filter);
+  dispatch(edit({ filters: filter ? filter.filter.filters : [] }));
   return dispatch({
     type: APPLY_SAVED_SEARCH,
     filter,
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 81d14e516..e5193a393 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -40,7 +40,7 @@ export const filtersMap = {
   [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'RevId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/rev-id' },
   [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/referrer' },
   [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/duration' },
-  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'User Country', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/country', options: countryOptions },
+  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'User Country', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/country', options: countryOptions },
   [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' },
   [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User Id', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },
   [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },