From 210eee68f5cff5ce27067ee3fe978f74216fc571 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 24 Jan 2023 14:07:46 +0100
Subject: [PATCH] fix(ui) - cards drilldown fitler and no content message

---
 .../ClickMapCard/ClickMapCard.tsx             | 12 ++++-
 .../InsightsCard/InsightsCard.tsx             | 47 ++++++++++---------
 .../Funnels/FunnelWidget/FunnelWidget.tsx     | 11 ++++-
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index f113eac96..48ec42156 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -5,6 +5,7 @@ import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer'
 import { connect } from 'react-redux'
 import { setCustomSession } from 'App/duck/sessions'
 import { fetchInsights } from 'Duck/sessions';
+import { NoContent, Icon } from 'App/components/ui'
 
 function ClickMapCard({
     setCustomSession,
@@ -38,7 +39,16 @@ function ClickMapCard({
 
     if (!metricStore.instance.data.domURL || insights.size === 0) {
         return (
-            <div className="py-2">No Data for selected period or URL.</div>
+            <NoContent
+                style={{ minHeight: 220 }}
+                title={
+                    <div className="flex items-center">
+                        <Icon name="info-circle" className="mr-2" size="18" />
+                        No data for selected period or URL.
+                    </div>
+                }
+                show={true}
+            />
         )
     }
     if (!visitedEvents || !visitedEvents.length) {
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
index aa3a09dad..e3028ee96 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
@@ -1,10 +1,10 @@
-import { NoContent } from 'UI';
+import { NoContent, Icon } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import InsightItem from './InsightItem';
-import { NO_METRIC_DATA } from 'App/constants/messages';
 import { InishtIssue } from 'App/mstore/types/widget';
+import FilterItem from 'App/mstore/types/filterItem';
 import { FilterKey, IssueCategory, IssueType } from 'App/types/filter/filterType';
 import { filtersMap } from 'Types/filter/newFilter';
 
@@ -29,41 +29,42 @@ function InsightsCard({ data }: any) {
         filter.value = [item.name];
         break;
       case IssueCategory.NETWORK:
-        filter = { ...filtersMap[FilterKey.FETCH_URL] };
-        filter.filters = [
-          { ...filtersMap[FilterKey.FETCH_URL], value: [item.name] },
-          { ...filtersMap[FilterKey.FETCH_DURATION], value: [item.oldValue] },
-        ];
+        filter = { ...filtersMap[FilterKey.FETCH] };
         filter.value = [];
+        filter.filters.forEach((f: any) => {
+          f.value = [];
+          if (f.key === FilterKey.FETCH_URL) {
+            f.value = [item.name];
+          }
+
+          if (f.key === FilterKey.FETCH_DURATION) {
+            f.operator = '>=';
+            f.value = [item.oldValue];
+          }
+        });
         break;
       case IssueCategory.ERRORS:
         filter = { ...filtersMap[FilterKey.ERROR] };
+        filter.value = [item.name];
         break;
     }
 
-    filter.type = filter.key;
-    delete filter.key;
-    delete filter.operatorOptions;
-    delete filter.sourceOperatorOptions;
-    delete filter.placeholder;
-    delete filter.sourcePlaceholder;
-    delete filter.sourceType;
-    delete filter.sourceUnit;
-    delete filter.category;
-    delete filter.icon;
-    delete filter.label;
-    delete filter.options;
-
+    filter = new FilterItem(filter);
     drillDownFilter.merge({
-      filters: [filter],
+      filters: [filter.toJson()],
     });
   };
 
   return (
     <NoContent
+      style={{ minHeight: 220 }}
+      title={
+        <div className="flex items-center">
+          <Icon name="info-circle" className="mr-2" size="18" />
+          No data for selected period.
+        </div>
+      }
       show={data.issues && data.issues.length === 0}
-      title={NO_METRIC_DATA}
-      style={{ padding: '100px 0' }}
     >
       <div className="overflow-y-auto" style={{ maxHeight: '240px' }}>
         {data.issues &&
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 7090bb36e..146b90159 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -30,7 +30,16 @@ function FunnelWidget(props: Props) {
     }, []);
 
     return useObserver(() => (
-        <NoContent show={!stages || stages.length === 0} title="No recordings found">
+        <NoContent
+            style={{ minHeight: 220 }}
+            title={
+                <div className="flex items-center">
+                    <Icon name="info-circle" className="mr-2" size="18" />
+                    No data for selected period.
+                </div>
+            }
+            show={!stages || stages.length === 0}
+        >
             <div className="w-full">
                 { !isWidget && (
                     stages.map((filter: any, index: any) => (