From 0d00cf0349fa8edd179bac80a95f00a70db963d5 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 12 May 2022 16:34:11 +0200
Subject: [PATCH] more search field fixes

---
 .../Filters/FilterModal/FilterModal.tsx       | 17 +++++---
 .../LiveFilterModal/LiveFilterModal.tsx       | 39 +++++++++++++++++--
 .../components/DefaultTimezone.tsx            | 13 +++++--
 3 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 04688de6b..a11695d5c 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -15,7 +15,7 @@ interface Props {
   searchQuery?: string,
 }
 function FilterModal(props: Props) {
-  const { 
+  const {
     filters,
     metaOptions,
     onFilterClick = () => null,
@@ -32,13 +32,20 @@ function FilterModal(props: Props) {
     _filter.value = [filter.value];
     onFilterClick(_filter);
   }
-  
+
+  const isResultEmpty = !filterSearchList || Object.keys(filterSearchList).length === 0
   return (
     <div className={stl.wrapper} style={{ width: '480px', maxHeight: '380px', overflowY: 'auto'}}>
+
       { showSearchList && (
         <Loader size="small" loading={fetchingFilterSearchList}>
           <div className="-mx-6 px-6">
-            { filterSearchList && Object.keys(filterSearchList).map((key, index) => {
+            {isResultEmpty && !fetchingFilterSearchList ? (
+              <div className="flex items-center">
+                <Icon className="color-gray-medium" name="binoculars" size="24" />
+                <div className="color-gray-medium font-medium px-3"> No Suggestions Found </div>
+              </div>
+            ) : Object.keys(filterSearchList).map((key, index) => {
               const filter = filterSearchList[key];
               const option = filtersMap[key];
               return option ? (
@@ -65,7 +72,7 @@ function FilterModal(props: Props) {
           </div>
         </Loader>
       )}
-      
+
       { !hasSearchQuery && (
         <div className="" style={{ columns: "auto 200px" }}>
           {filters && Object.keys(filters).map((key) => (
@@ -92,4 +99,4 @@ export default connect(state => ({
   filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
   metaOptions: state.getIn([ 'customFields', 'list' ]),
   fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
-}))(FilterModal);
\ No newline at end of file
+}))(FilterModal);
diff --git a/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx b/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
index c75d0f4ca..b00897add 100644
--- a/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
+++ b/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
@@ -15,7 +15,7 @@ interface Props {
   searchQuery?: string,
 }
 function LiveFilterModal(props: Props) {
-  const { 
+  const {
     filters,
     metaOptions,
     onFilterClick = () => null,
@@ -32,7 +32,9 @@ function LiveFilterModal(props: Props) {
     _filter.value = [filter.value];
     onFilterClick(_filter);
   }
-  
+
+  const isResultEmpty = !filterSearchList || Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).length === 0
+
   return (
     <div className={stl.wrapper} style={{ width: '490px', maxHeight: '400px', overflowY: 'auto'}}>
       { showSearchList && (
@@ -62,10 +64,39 @@ function LiveFilterModal(props: Props) {
                 </div>
               );
             })}
+            {isResultEmpty && !fetchingFilterSearchList ? (
+              <div className="flex items-center">
+                <Icon className="color-gray-medium" name="binoculars" size="24" />
+                <div className="color-gray-medium font-medium px-3"> No Suggestions Found </div>
+              </div>
+            ) : Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).map((key, index) => {
+              const filter = filterSearchList[key];
+              const option = filtersMap[key];
+              return (
+                <div
+                  key={index}
+                  className={cn('mb-3')}
+                >
+                  <div className="font-medium uppercase color-gray-medium text-sm mb-2">{option.label}</div>
+                  <div>
+                    {filter.map((f, i) => (
+                      <div
+                        key={i}
+                        className={cn(stl.filterSearchItem, "cursor-pointer px-3 py-1 text-sm flex items-center")}
+                        onClick={() => onFilterSearchClick({ type: key, value: f.value })}
+                      >
+                        <Icon className="mr-2" name={option.icon} size="16" />
+                        <div className="whitespace-nowrap text-ellipsis overflow-hidden">{f.value}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
           </div>
         </Loader>
       )}
-      
+
       { !hasSearchQuery && (
         <div className="">
           {filters && Object.keys(filters).map((key) =>  (
@@ -92,4 +123,4 @@ export default connect(state => ({
   filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
   metaOptions: state.getIn([ 'customFields', 'list' ]),
   fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
-}))(LiveFilterModal);
\ No newline at end of file
+}))(LiveFilterModal);
diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
index efb91fed9..8e6edee88 100644
--- a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
@@ -6,8 +6,15 @@ import { useObserver } from 'mobx-react-lite';
 
 const str = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
 const d = str && str[1] || 'UTC';
+
+const localMachineFormat = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
+const middlePoint = localMachineFormat && localMachineFormat[1].length - 2
+const readableLocalTimezone = localMachineFormat && middlePoint ?
+  `${localMachineFormat[1].substring(0, 3)} ${localMachineFormat[1].substring(3, middlePoint)}:${localMachineFormat[1].substring(middlePoint)}`
+    : null
+
 const timezoneOptions = [
-    { label: d, value: 'local' },
+    { label: readableLocalTimezone, value: 'local' },
     { label: 'UTC', value: 'UTC' },
 ]
 
@@ -38,9 +45,9 @@ function DefaultTimezone(props) {
                     }}>Update</Button>
                 </div>
             </div>
-            <div className="text-sm mt-3">This change will impact the timestamp on session card and player.</div>  
+            <div className="text-sm mt-3">This change will impact the timestamp on session card and player.</div>
         </>
     );
 }
 
-export default DefaultTimezone;
\ No newline at end of file
+export default DefaultTimezone;