feat(ui) - filters issues live vs offline

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -5,11 +5,10 @@ import { List } from 'immutable';
 import { useObserver } from 'mobx-react-lite';
 
 interface Props {
-  // filters: any[]; // event/filter
   filter?: any; // event/filter
-  onUpdateFilter: (filterIndex, filter) => void;
-  onRemoveFilter: (filterIndex) => void;
-  onChangeEventsOrder: (e, { name, value }) => void;
+  onUpdateFilter: (filterIndex: any, filter: any) => void;
+  onRemoveFilter: (filterIndex: any) => void;
+  onChangeEventsOrder: (e: any, { name, value }: any) => void;
   hideEventsOrder?: boolean;
   observeChanges?: () => void;
   saveRequestPayloads?: boolean;
@@ -23,7 +22,7 @@ function FilterList(props: Props) {
 
   useEffect(observeChanges, [filters]);
 
-  const onRemoveFilter = (filterIndex) => {
+  const onRemoveFilter = (filterIndex: any) => {
     props.onRemoveFilter(filterIndex);
   }
 

frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx

@@ -11,12 +11,12 @@ interface Props {
   filter?: any; // event/filter
   filterList: any;
   filterListLive: any;
-  onFilterClick: (filter) => void;
+  onFilterClick: (filter: any) => void;
   children?: any;
   isLive?: boolean;
 }
 function FilterSelection(props: Props) {
-  const { filter, onFilterClick, children, isLive = true } = props;
+  const { filter, onFilterClick, children } = props;
   const [showModal, setShowModal] = useState(false);
 
   return (

frontend/app/components/shared/Select/Select.tsx

@@ -98,6 +98,12 @@ export default function({ name = '', onChange, right = false, plain = false, opt
       
           return { ...provided, opacity, transition };
         },
+        input: (provided: any) => ({
+            ...provided,
+            '& input:focus': {
+              border: 'none !important',
+            }
+        }),
         noOptionsMessage: (provided: any) => ({
             ...provided,
             whiteSpace: 'nowrap !important',

frontend/app/components/shared/SessionSearch/SessionSearch.tsx

@@ -15,15 +15,15 @@ interface Props {
 }
 function SessionSearch(props: Props) {
   const { appliedFilter, saveRequestPayloads = false } = props;
-  const hasEvents = appliedFilter.filters.filter(i => i.isEvent).size > 0;
-  const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).size > 0;
+  const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
+  const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
 
-  const onAddFilter = (filter) => {
+  const onAddFilter = (filter: any) => {
     props.addFilter(filter);
   }
 
-  const onUpdateFilter = (filterIndex, filter) => {
-    const newFilters = appliedFilter.filters.map((_filter, i) => {
+  const onUpdateFilter = (filterIndex: any, filter: any) => {
+    const newFilters = appliedFilter.filters.map((_filter: any, i: any) => {
       if (i === filterIndex) {
         return filter;
       } else {
@@ -37,8 +37,8 @@ function SessionSearch(props: Props) {
     });
   }
 
-  const onRemoveFilter = (filterIndex) => {
-    const newFilters = appliedFilter.filters.filter((_filter, i) => {
+  const onRemoveFilter = (filterIndex: any) => {
+    const newFilters = appliedFilter.filters.filter((_filter: any, i: any) => {
       return i !== filterIndex;
     });
 
@@ -47,7 +47,7 @@ function SessionSearch(props: Props) {
     });
   }
 
-  const onChangeEventsOrder = (e, { name, value }) => {
+  const onChangeEventsOrder = (e: any, { value }: any) => {
     props.edit({
       eventsOrder: value,
     });
@@ -90,7 +90,7 @@ function SessionSearch(props: Props) {
   ) : <></>;
 }
 
-export default connect(state => ({
+export default connect((state: any) => ({
   saveRequestPayloads: state.getIn(['site', 'active', 'saveRequestPayloads']),
   appliedFilter: state.getIn([ 'search', 'instance' ]),
 }), { edit, addFilter })(SessionSearch);

frontend/app/duck/liveSearch.js

@@ -28,7 +28,7 @@ const initialState = Map({
 function reducer(state = initialState, action = {}) {
 	switch (action.type) {
     case APPLY:
-      return state.mergeIn(['instance'], action.filter).set('currentPage', 1);
+      return state.mergeIn(['instance'], action.filter);
     case EDIT:
       return state.mergeIn(['instance'], action.instance).set('currentPage', 1);
     case UPDATE_CURRENT_PAGE:

frontend/app/types/filter/newFilter.js

@@ -59,7 +59,8 @@ export const filtersMap = filters.reduce((acc, filter) => {
     return acc;
 }, {});
 
-export const liveFiltersMap = filters.reduce((acc, filter) => {
+export const liveFiltersMap = {}
+filters.forEach(filter => {
   if (
     filter.category !== FilterCategory.INTERACTIONS &&
     filter.category !== FilterCategory.JAVASCRIPT &&
@@ -67,15 +68,15 @@ export const liveFiltersMap = filters.reduce((acc, filter) => {
     filter.key !== FilterKey.DURATION &&
     filter.key !== FilterKey.REFERRER
   ) {
-    acc[filter.key] = filter;
-    acc[filter.key].operator = 'contains';
-    acc[filter.key].operatorDisabled = true;
+    liveFiltersMap[filter.key] = {...filter};
+    liveFiltersMap[filter.key].operator = 'contains';
+    liveFiltersMap[filter.key].operatorDisabled = true;
     if (filter.key === FilterKey.PLATFORM) {
-      acc[filter.key].operator = 'is';
+      liveFiltersMap[filter.key].operator = 'is';
     }
   }
-  return acc
-}, {});
+})
+
 
 export const filterLabelMap = filters.reduce((acc, filter) => {
   acc[filter.key] = filter.label