From 34a5481f03153e0f198f3b7883caef9bf837ffbd Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 16 Aug 2022 15:27:26 +0200
Subject: [PATCH] fix(ui): fix empty funnel sessions messages

---
 .../components/Funnels/FunnelIssues/FunnelIssues.tsx       | 6 +++---
 .../Funnels/FunnelIssuesList/FunnelIssuesList.tsx          | 6 +++---
 .../Dashboard/components/WidgetPreview/WidgetPreview.tsx   | 2 +-
 frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx | 6 +++++-
 frontend/app/svg/ca-no-issues.svg                          | 7 +++++++
 5 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 frontend/app/svg/ca-no-issues.svg

diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
index 8471b51da..826e9a133 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx
@@ -53,8 +53,8 @@ function FunnelIssues() {
     }, [stages.length, drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage]);
 
     return useObserver(() => (
-        <div className="my-8">
-            <div className="flex justify-between">
+        <div className="my-8 bg-white rounded p-4 border">
+            <div className="flex">
                 <h1 className="font-medium text-2xl">Most significant issues <span className="font-normal">identified in this funnel</span></h1>
             </div>
             <div className="my-6 flex justify-between items-start">
@@ -70,4 +70,4 @@ function FunnelIssues() {
     ));
 }
 
-export default FunnelIssues;
\ No newline at end of file
+export default FunnelIssues;
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
index e0908c6f4..3894f4671 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
@@ -45,8 +45,8 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
             show={!loading && filteredIssues.length === 0}
             title={
                 <div className="flex flex-col items-center justify-center">
-                    <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-                    <div className="mt-6 text-2xl">No issues found</div>
+                    <AnimatedSVG name={ICONS.NO_ISSUES} size="170" />
+                    <div className="mt-3 text-xl">No issues found</div>
                 </div>
             }
         >
@@ -59,4 +59,4 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
     ))
 }
 
-export default withRouter(FunnelIssuesList) as React.FunctionComponent<RouteComponentProps<Props>>;
\ No newline at end of file
+export default withRouter(FunnelIssuesList) as React.FunctionComponent<RouteComponentProps<Props>>;
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
index 98bb11a1b..f0e3b037a 100644
--- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -42,7 +42,7 @@ function WidgetPreview(props: Props) {
 
     return useObserver(() => (
         <>
-        <div className={cn(className, 'bg-white rounded')}>
+        <div className={cn(className, 'bg-white rounded border')}>
             <div className="flex items-center justify-between px-4 pt-2">
                 <h2 className="text-2xl">
                     {props.name}
diff --git a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
index 114cba1e9..c1d8b1799 100644
--- a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
+++ b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
@@ -10,6 +10,7 @@ import NoBookmarks from '../../../svg/ca-no-bookmarked-session.svg';
 import NoLiveSessions from '../../../svg/ca-no-live-sessions.svg';
 import NoSessions from '../../../svg/ca-no-sessions.svg';
 import NoSessionsInVault from '../../../svg/ca-no-sessions-in-vault.svg';
+import NoIssues from '../../../svg/ca-no-issues.svg';
 
 export enum ICONS {
     DASHBOARD_ICON = 'dashboard-icn',
@@ -22,7 +23,8 @@ export enum ICONS {
     NO_BOOKMARKS = 'ca-no-bookmarked-session',
     NO_LIVE_SESSIONS = 'ca-no-live-sessions',
     NO_SESSIONS = 'ca-no-sessions',
-    NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault'
+    NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault',
+    NO_ISSUES = 'ca-no-issues',
 }
 
 interface Props {
@@ -55,6 +57,8 @@ function AnimatedSVG(props: Props) {
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoSessions} />;
             case ICONS.NO_SESSIONS_IN_VAULT:
                 return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoSessionsInVault} />;
+            case ICONS.NO_ISSUES:
+                return <object style={{ width: size + 'px' }} type="image/svg+xml" data={NoIssues} />;
             default:
                 return null;
         }
diff --git a/frontend/app/svg/ca-no-issues.svg b/frontend/app/svg/ca-no-issues.svg
new file mode 100644
index 000000000..5be1cbd22
--- /dev/null
+++ b/frontend/app/svg/ca-no-issues.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 250 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="250" height="100" rx="13.1579" fill="#3EAAAF" fill-opacity="0.08"/>
+<rect opacity="0.6" x="86.8421" y="28.579" width="138.158" height="14.4737" rx="6.57895" fill="#3EAAAF" fill-opacity="0.5"/>
+<rect opacity="0.3" x="86.8421" y="55.579" width="38.1579" height="14.4737" rx="6.57895" fill="#3EAAAF" fill-opacity="0.5"/>
+<rect opacity="0.3" x="129.842" y="55.579" width="18.1579" height="14.4737" rx="6.57895" fill="#3EAAAF" fill-opacity="0.5"/>
+<path d="M73 50C73 57.1608 70.1554 64.0284 65.0919 69.0919C60.0284 74.1554 53.1608 77 46 77C38.8392 77 31.9716 74.1554 26.9081 69.0919C21.8446 64.0284 19 57.1608 19 50C19 42.8392 21.8446 35.9716 26.9081 30.9081C31.9716 25.8446 38.8392 23 46 23C53.1608 23 60.0284 25.8446 65.0919 30.9081C70.1554 35.9716 73 42.8392 73 50ZM46 36.5C45.5734 36.5002 45.1516 36.5898 44.7618 36.763C44.3719 36.9362 44.0227 37.1891 43.7365 37.5055C43.4504 37.8218 43.2337 38.1946 43.1004 38.5998C42.967 39.005 42.9201 39.4337 42.9625 39.8581L44.1437 51.6943C44.1834 52.1592 44.3962 52.5924 44.7399 52.908C45.0837 53.2237 45.5333 53.3988 46 53.3988C46.4667 53.3988 46.9163 53.2237 47.2601 52.908C47.6038 52.5924 47.8166 52.1592 47.8563 51.6943L49.0375 39.8581C49.0799 39.4337 49.033 39.005 48.8996 38.5998C48.7663 38.1946 48.5496 37.8218 48.2635 37.5055C47.9773 37.1891 47.6281 36.9362 47.2382 36.763C46.8484 36.5898 46.4266 36.5002 46 36.5ZM46.0068 56.75C45.1116 56.75 44.2532 57.1056 43.6203 57.7385C42.9873 58.3715 42.6318 59.2299 42.6318 60.125C42.6318 61.0201 42.9873 61.8785 43.6203 62.5115C44.2532 63.1444 45.1116 63.5 46.0068 63.5C46.9019 63.5 47.7603 63.1444 48.3932 62.5115C49.0262 61.8785 49.3818 61.0201 49.3818 60.125C49.3818 59.2299 49.0262 58.3715 48.3932 57.7385C47.7603 57.1056 46.9019 56.75 46.0068 56.75Z" fill="#3EAAAF" fill-opacity="0.5"/>
+</svg>