From c82efbeb6b879bc526053b6a95e6d11e64de90da Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 19 May 2022 13:06:53 +0200
Subject: [PATCH] fix(ui): bug fixes for dashboard

---
 .../Filters/FilterModal/FilterModal.tsx       | 34 +++++++++---------
 .../SavedSearchModal/SavedSearchModal.tsx     | 35 ++++++++++---------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index eb175f888..b59aae664 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -7,16 +7,26 @@ import { filtersMap } from 'Types/filter/newFilter';
 
 export const getMatchingEntries = (searchQuery: string, filters: Record<string, any>) => {
   const matchingCategories: string[] = [];
-  const matchingFilters: [] = []
-  Object.keys(filters).forEach(name => {
-    if (name.includes(searchQuery)) matchingCategories.push(name);
-    const filtersQuery: [] = filters[name]
-      .filter(filterOption => filterOption.label.includes(searchQuery))
+  const matchingFilters: Record<string, any> = {};
+  if (searchQuery.length === 0) return {
+    matchingCategories: Object.keys(filters),
+    matchingFilters: filters,
+  };
 
-    matchingFilters.push(...filtersQuery)
+  Object.keys(filters).forEach(name => {
+    if (name.toLocaleLowerCase().includes(searchQuery)) {
+      matchingCategories.push(name);
+      matchingFilters[name] = filters[name];
+    } else {
+        const filtersQuery = filters[name]
+        .filter(filterOption => filterOption.label.toLocaleLowerCase().includes(searchQuery))
+
+        matchingFilters[name] = filtersQuery
+        filtersQuery.length > 0 && matchingCategories.push(name);
+      }
   })
 
-  return { matchingCategories, matchingFilters }
+  return { matchingCategories, matchingFilters };
 }
 
 interface Props {
@@ -60,20 +70,12 @@ function FilterModal(props: Props) {
               <div className="mb-6" key={key}>
                 <div className="uppercase font-medium mb-1 color-gray-medium tracking-widest text-sm">{key}</div>
                 <div>
-                  {filters[key].map((filter: any) => {
-                    if (hasSearchQuery) {
-                      const matchingFilters = filters[key].filter(filter => filter.label.includes(searchQuery));
-                      const hasMatchingSubstring = matchingFilters.length > 0 || key.includes(searchQuery);
-
-                      if (hasSearchQuery && !hasMatchingSubstring) return null;
-                    }
-                    return (
+                  {matchingFilters[key].map((filter: any) => (
                       <div key={filter.label} className={cn(stl.optionItem, "flex items-center py-2 cursor-pointer -mx-2 px-2")} onClick={() => onFilterClick({ ...filter, value: [''] })}>
                         <Icon name={filter.icon} size="16"/>
                         <span className="ml-2">{filter.label}</span>
                       </div>
                     )
-                  }
                   )}
                 </div>
               </div>
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
index 6d0454dae..2052b904c 100644
--- a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
@@ -16,19 +16,21 @@ import stl from './savedSearchModal.css'
 interface ITooltipIcon {
     title: string;
     name: string;
-    onClick: (item: any, e: MouseEvent<HTMLButtonElement>) => void;
+    onClick: (e: MouseEvent<HTMLDivElement>) => void;
 }
 function TooltipIcon(props: ITooltipIcon) {
     return (
-        // @ts-ignore - problem with react-tippy types TODO: remove after fix
-        <Tooltip
-            delay={250}
-            title={props.title}
-            hideOnClick={true}
-            position="bottom"
-        >
-            <Icon size="24" name={props.name} color="main" onClick={props.onClick} />
-        </Tooltip>
+        <div onClick={(e) => props.onClick(e)} >
+            {/* @ts-ignore - problem with react-tippy types TODO: remove after fix */}
+            <Tooltip
+                delay={250}
+                title={props.title}
+                hideOnClick={true}
+                position="bottom"
+            >
+                <Icon size="24" name={props.name} color="main" />
+            </Tooltip>
+        </div>
     )
 }
 
@@ -43,11 +45,12 @@ function SavedSearchModal(props: Props) {
     const [showModal, setshowModal] = useState(false)
     const [filterQuery, setFilterQuery] = useState('')
 
-    const onClick = (item: SavedSearch) => {
+    const onClick = (item: SavedSearch, e) => {
+        e.stopPropagation();
         props.applySavedSearch(item);
         hideModal();
     }
-    const onDelete = async (item: SavedSearch, e: MouseEvent<HTMLButtonElement>) => {
+    const onDelete = async (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         const confirmation = await confirm({
             header: 'Confirm',
@@ -58,7 +61,7 @@ function SavedSearchModal(props: Props) {
             props.remove(item.searchId)
         }
     }
-    const onEdit = (item: SavedSearch, e: MouseEvent<HTMLButtonElement>) => {
+    const onEdit = (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         props.editSavedSearch(item);
         setTimeout(() => setshowModal(true), 0);
@@ -83,7 +86,7 @@ function SavedSearchModal(props: Props) {
                 </div>
             )}
             {shownItems.map(item => (
-                <div key={item.key} className={cn('px-6 py-4 cursor-pointer flex items-start', stl.rowItem)} onClick={() => onClick(item)}>
+                <div key={item.key} className={cn('px-6 py-4 cursor-pointer flex items-start', stl.rowItem)} onClick={(e) => onClick(item, e)}>
                     <Icon name="search" color="gray-medium" size="24" />
                     <div className="ml-4">
                         <div className="text-xl">{item.name} </div>
@@ -96,10 +99,10 @@ function SavedSearchModal(props: Props) {
                     </div>
                     <div className="flex items-center ml-auto self-center">
                         <div className={stl.iconCircle}>
-                            <TooltipIcon name="pencil" onClick={onEdit} title="Rename" />
+                            <TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
                         </div>
                         <div className={stl.iconCircle}>
-                            <TooltipIcon name="trash" onClick={onEdit} title="Delete" />
+                            <TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
                         </div>
                     </div>
                 </div>