From 42fec5c19fa6ec16f53b54328f2fda76331d4fa7 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 20 Sep 2022 15:32:55 +0200
Subject: [PATCH] change(ui): hide vitals when there is none added

---
 .../DashboardWidgetGrid.tsx                   | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index 0fc945bec..035ba6524 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -32,11 +32,6 @@ function DashboardWidgetGrid(props: Props) {
 
     const smallWidgetsLen = smallWidgets.length
 
-    // legacy
-    // smallWidgets.forEach((i, index) => {
-
-    // })
-
     return useObserver(() => (
         // @ts-ignore
         <Loader loading={loading}>
@@ -48,25 +43,29 @@ function DashboardWidgetGrid(props: Props) {
                     <div className="w-4/5 m-auto mt-4"><AddMetricContainer siteId={siteId} /></div>
                 }
             >
-                <div className="font-semibold text-xl py-4 flex items-center gap-2">
-                    <Icon name="grid-horizontal" size={26} />
-                    Web Vitals
-                </div>
-                <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
-                    {smallWidgets && smallWidgets.map((item: any, index: any) => (
-                        <React.Fragment key={item.widgetId}>
-                        <WidgetWrapper
-                            index={index}
-                            widget={item}
-                            moveListItem={(dragIndex: any, hoverIndex: any) => dashboard.swapWidgetPosition(dragIndex, hoverIndex)}
-                            dashboardId={dashboardId}
-                            siteId={siteId}
-                            isWidget={true}
-                            grid="vitals"
-                        />
-                        </React.Fragment>
-                    ))}
-                </div>
+                {smallWidgets.length && (
+                    <>
+                        <div className="font-semibold text-xl py-4 flex items-center gap-2">
+                            <Icon name="grid-horizontal" size={26} />
+                            Web Vitals
+                        </div>
+                        <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
+                            {smallWidgets && smallWidgets.map((item: any, index: any) => (
+                                <React.Fragment key={item.widgetId}>
+                                <WidgetWrapper
+                                    index={index}
+                                    widget={item}
+                                    moveListItem={(dragIndex: any, hoverIndex: any) => dashboard.swapWidgetPosition(dragIndex, hoverIndex)}
+                                    dashboardId={dashboardId}
+                                    siteId={siteId}
+                                    isWidget={true}
+                                    grid="vitals"
+                                />
+                                </React.Fragment>
+                            ))}
+                        </div>
+                    </>
+                )}
 
                 <div className="font-semibold text-xl py-4 flex items-center gap-2">
                     <Icon name="grid-horizontal" size={26} />