From 00d01f22737719305b063512f8b0554d2883564e Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 16 Aug 2022 14:17:02 +0200
Subject: [PATCH] fix(ui): fix empty metric messages

---
 .../CustomMetricTable/CustomMetricTable.tsx            |  4 ++--
 .../CustomMetricTableErrors.tsx                        |  2 +-
 .../CustomMetricTableSessions.tsx                      | 10 ++++++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
index 59673fd4f..41520394d 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Table } from '../../common';
 import { List } from 'immutable';
 import { filtersMap } from 'Types/filter/newFilter';
-import { NoContent } from 'UI';
+import { NoContent, Icon } from 'UI';
 import { tableColumnName } from 'App/constants/filterOptions';
 import { numberWithCommas } from 'App/utils';
 
@@ -50,7 +50,7 @@ function CustomMetricTable(props: Props) {
     }
     return (
         <div className="" style={{ height: 240 }}>
-           <NoContent show={data.values && data.values.length === 0} size="small" title="No recordings found">
+           <NoContent show={data.values && data.values.length === 0} size="small" title={<div className="flex items-center"><Icon name="info-circle" className="mr-2" size="18" /> No data for the selected time period</div>}>
                 <Table
                     small
                     cols={ getColumns(metric) }
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
index 1add0810c..83cd55b35 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
@@ -44,7 +44,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
 
     return (
         <NoContent
-        title={<div className="flex items-center"><Icon name="info-circle" size={18} className="mr-2" />No errors found in the selected time range</div>}
+        title={<div className="flex items-center"><Icon name="info-circle" size={18} className="mr-2" />No data for the selected time period</div>}
         show={!data.errors || data.errors.length === 0}
         size="small"
         >
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index c5aa85e0f..ffb489b11 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import SessionItem from "Shared/SessionItem";
 import { Pagination, NoContent } from "UI";
 import { useStore } from "App/mstore";
-import { overPastString } from "App/dateRange";
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 interface Props {
     metric: any;
@@ -26,7 +26,13 @@ function CustomMetricTableSessions(props: Props) {
                 data.sessions.length === 0
             }
             size="small"
-            title={`No sessions found ${overPastString(period)}`}
+            title={
+                <div className="flex items-center justify-center flex-col">
+                    <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
+                    <div className="mt-2" />
+                    <div className="text-center text-gray-600">No relevant sessions found for the selected time period.</div>
+                </div>
+            } 
         >
             <div className="pb-4">
                 {data.sessions &&