From 3df000bc6d96ed84e95456c1b29ae8526bad414e Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 9 Aug 2022 15:31:13 +0200
Subject: [PATCH] fix(ui) - filters source, fetch navigation tooltips

---
 .../Session_/TimeTable/TimeTable.tsx          | 20 +++++++++++++++++--
 .../shared/Filters/FilterItem/FilterItem.tsx  |  2 +-
 frontend/app/components/ui/Button/Button.tsx  |  8 ++++++--
 frontend/app/mstore/types/filterItem.ts       |  2 ++
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session_/TimeTable/TimeTable.tsx b/frontend/app/components/Session_/TimeTable/TimeTable.tsx
index 4a6f1140e..a2c7ef61c 100644
--- a/frontend/app/components/Session_/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/Session_/TimeTable/TimeTable.tsx
@@ -227,8 +227,24 @@ export default class TimeTable extends React.PureComponent<Props, State> {
             <div className={cn(className, 'relative')}>
                 {navigation && (
                     <div className={cn(autoscrollStl.navButtons, 'flex items-center')}>
-                        <Button variant="text-primary" icon="chevron-up" onClick={this.onPrevClick} />
-                        <Button variant="text-primary" icon="chevron-down" onClick={this.onNextClick} />
+                        <Button
+                            variant="text-primary"
+                            icon="chevron-up"
+                            tooltip={{
+                                title: 'Previous Error',
+                                delay: 0,
+                            }}
+                            onClick={this.onPrevClick}
+                        />
+                        <Button
+                            variant="text-primary"
+                            icon="chevron-down"
+                            tooltip={{
+                                title: 'Next Error',
+                                delay: 0,
+                            }}
+                            onClick={this.onNextClick}
+                        />
                         {/* <IconButton 
               size="small" 
               icon="chevron-up" 
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index c90428e96..4b27e4a93 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -33,7 +33,7 @@ function FilterItem(props: Props) {
     };
 
     const onSourceOperatorChange = (e: any, { name, value }: any) => {
-        props.onUpdate({ ...filter, sourceOperator: value.value });
+        props.onUpdate({ ...filter, sourceOperator: value });
     };
 
     const onUpdateSubFilter = (subFilter: any, subFilterIndex: any) => {
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index bc71be3a0..54e166b47 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { CircularLoader, Icon } from 'UI';
+import { CircularLoader, Icon, Popup } from 'UI';
 
 interface Props {
     className?: string;
@@ -11,6 +11,7 @@ interface Props {
     loading?: boolean;
     icon?: string;
     rounded?: boolean;
+    tooltip?: any;
     [x: string]: any;
 }
 export default (props: Props) => {
@@ -24,6 +25,7 @@ export default (props: Props) => {
         children,
         loading = false,
         rounded = false,
+        tooltip = null,
         ...rest
     } = props;
 
@@ -69,7 +71,7 @@ export default (props: Props) => {
         classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center'));
     }
 
-    return (
+    const render = () => (
         <button {...rest} type={type} className={cn(classes, className)}>
             {icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size="16" />}
             {loading && (
@@ -80,4 +82,6 @@ export default (props: Props) => {
             <div className={cn({ 'opacity-0': loading }, 'flex items-center')}>{children}</div>
         </button>
     );
+
+    return tooltip ? <Popup content={tooltip.title} {...tooltip}>{render()}</Popup> : render();
 };
diff --git a/frontend/app/mstore/types/filterItem.ts b/frontend/app/mstore/types/filterItem.ts
index 3bfa3bf08..5a2a8eb6b 100644
--- a/frontend/app/mstore/types/filterItem.ts
+++ b/frontend/app/mstore/types/filterItem.ts
@@ -31,6 +31,7 @@ export default class FilterItem {
             filters: observable,
             isActive: observable,
             sourceOperator: observable,
+            category: observable,
 
             merge: action,
         });
@@ -77,6 +78,7 @@ export default class FilterItem {
         this.isEvent = _filter.isEvent;
 
         (this.value = json.value.length === 0 || !json.value ? [''] : json.value), (this.operator = json.operator);
+        this.source = json.source;
         this.sourceOperator = json.sourceOperator;
 
         this.filters =