From 5c7f6c17382a377e7b885c715c0a873c4d0e30d2 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 16 May 2022 17:50:51 +0200
Subject: [PATCH] fix(ui): fix messages for empty dashboad

---
 frontend/app/components/Alerts/AlertForm.js   | 18 ++++-----
 frontend/app/components/Alerts/Alerts.js      | 12 ++++--
 .../app/components/Dashboard/Dashboard.js     | 37 ++++++++++---------
 .../app/components/Dashboard/NewDashboard.tsx | 18 ++++++---
 4 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/frontend/app/components/Alerts/AlertForm.js b/frontend/app/components/Alerts/AlertForm.js
index d3258d578..40c139624 100644
--- a/frontend/app/components/Alerts/AlertForm.js
+++ b/frontend/app/components/Alerts/AlertForm.js
@@ -37,7 +37,7 @@ const Section = ({ index, title, description, content }) => (
         { description && <div className="text-sm color-gray-medium">{description}</div>}
       </div>
     </div>
-    
+
     <div className="ml-10">
       {content}
     </div>
@@ -122,7 +122,7 @@ const AlertForm = props => {
                   <Dropdown
                     className="w-4/6"
                     placeholder="change"
-                    selection                    
+                    selection
                     options={ changeOptions }
                     name="change"
                     value={ instance.change }
@@ -145,7 +145,7 @@ const AlertForm = props => {
                   onChange={ writeQueryOption }
                 />
               </div>
-              
+
               <div className="flex items-center my-3">
                 <label className="w-2/6 flex-shrink-0 font-normal">{'is'}</label>
                 <div className="w-4/6 flex items-center">
@@ -172,7 +172,7 @@ const AlertForm = props => {
                   )}
                   { !unit && (
                       <Input
-                      className="pl-4"                      
+                      className="pl-4"
                       name="right"
                       value={ instance.query.right }
                       onChange={ writeQuery }
@@ -242,7 +242,7 @@ const AlertForm = props => {
                   name="webhook"
                   type="checkbox"
                   checked={ instance.webhook }
-                  onClick={ onChangeOption }                  
+                  onClick={ onChangeOption }
                   label="Webhook"
                 />
               </div>
@@ -266,7 +266,7 @@ const AlertForm = props => {
                 <div className="flex items-start my-4">
                   <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
                   <div className="w-4/6">
-                    <DropdownChips 
+                    <DropdownChips
                       textFiled
                       validate={validateEmail}
                       selected={instance.emailInput}
@@ -277,7 +277,7 @@ const AlertForm = props => {
                 </div>
               )}
 
-              
+
               {instance.webhook && (
                 <div className="flex items-start my-4">
                   <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
@@ -294,8 +294,8 @@ const AlertForm = props => {
           }
         />
       </div>
-    
-      
+
+
       <div className="flex items-center justify-between absolute bottom-0 left-0 right-0 p-6 border-t z-10 bg-white">
         <div className="flex items-center">
           <Button
diff --git a/frontend/app/components/Alerts/Alerts.js b/frontend/app/components/Alerts/Alerts.js
index afe161aee..f69a699ea 100644
--- a/frontend/app/components/Alerts/Alerts.js
+++ b/frontend/app/components/Alerts/Alerts.js
@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react'
-import AlertsList from './AlertsList'
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import AlertsList from './AlertsList';
 import { SlideModal, IconButton } from 'UI';
 import { init, edit, save, remove } from 'Duck/alerts';
 import { fetchList as fetchWebhooks } from 'Duck/webhook';
@@ -24,7 +25,10 @@ const Alerts = props => {
     const wasUpdating = instance.exists();
     props.save(instance).then(() => {
       if (!wasUpdating) {
+        toast.success('New alert saved')
         toggleForm(null, false);
+      } else {
+        toast.success('Alert updated')
       }
     })
   }
@@ -54,10 +58,10 @@ const Alerts = props => {
         title={
           <div className="flex items-center">
             <span className="mr-3">{ 'Alerts' }</span>
-            <IconButton 
+            <IconButton
               circle
               size="small"
-              icon="plus" 
+              icon="plus"
               outline
               id="add-button"
               onClick={ () => toggleForm({}, true) }
diff --git a/frontend/app/components/Dashboard/Dashboard.js b/frontend/app/components/Dashboard/Dashboard.js
index 9d84a8779..f5002788a 100644
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@@ -9,7 +9,7 @@ import { WIDGET_KEYS, WIDGET_LIST } from 'Types/dashboard';
 import CustomMetricsModal from 'Shared/CustomMetrics/CustomMetricsModal';
 import SessionListModal from 'Shared/CustomMetrics/SessionListModal';
 
-import { 
+import {
   MissingResources,
   SlowestResources,
   DomBuildingTime,
@@ -34,7 +34,7 @@ import {
   SpeedIndexLocation,
   SessionsPerBrowser,
   CallsErrors5xx,
-  CallsErrors4xx  
+  CallsErrors4xx
 } from './Widgets';
 
 import SideMenuSection from './SideMenu/SideMenuSection';
@@ -66,7 +66,7 @@ const menuList = [
     icon: "sliders",
     label: getStatusLabel(CUSTOM_METRICS),
     active: status === CUSTOM_METRICS,
-  },  
+  },
   {
     key: ERRORS_N_CRASHES,
     section: 'metrics',
@@ -103,7 +103,7 @@ function getStatusLabel(status) {
       return "Errors";
     case RESOURCES:
       return "Resources";
-    default: 
+    default:
 			return "";
 	}
 }
@@ -136,12 +136,12 @@ export default class Dashboard extends React.PureComponent {
     menuList.forEach(item => {
       this.list[item.key] = React.createRef();
     });
-    props.fetchMetadataOptions();  
+    props.fetchMetadataOptions();
   }
-  
+
   state = {
     rangeName: this.props.period.rangeName,
-    startDate: null, 
+    startDate: null,
     endDate: null,
     pageSection: 'metrics',
   };
@@ -151,8 +151,8 @@ export default class Dashboard extends React.PureComponent {
   }
 
   componentDidMount() {
-    const { history, location } = this.props;        
-    // TODO check the hash navigato it    
+    const { history, location } = this.props;
+    // TODO check the hash navigato it
   }
 
   onMenuItemClick = ({section, key}) => {
@@ -190,7 +190,7 @@ export default class Dashboard extends React.PureComponent {
     const noWidgets = WIDGET_KEYS
       .filter(key => dashboardAppearance[ key ])
       .length === 0;
-    
+
     return (
       <div className="page-margin container-90">
         <div className="side-menu">
@@ -198,19 +198,20 @@ export default class Dashboard extends React.PureComponent {
 						title="Metrics"
 						onItemClick={this.onMenuItemClick}
 						items={menuList}
+            activeSection={this.state.pageSection}
 					/>
         </div>
         <div className="side-menu-margined">
           <div>
-            <div className={ cn(styles.header, "flex items-center w-full") }>            
+            <div className={ cn(styles.header, "flex items-center w-full") }>
               <MetricsFilters />
-              
+
               { activeWidget && <SessionListModal activeWidget={activeWidget} /> }
             </div>
             <div className="">
               <NoContent
                 show={ noWidgets }
-                title="You haven't added any insights widgets!"
+                title="You haven't added any insights metrics!"
                 subtext="Add new to keep track of Processed Sessions, Application Activity, Errors and lot more."
                 animatedIcon="empty-state"
               >
@@ -226,7 +227,7 @@ export default class Dashboard extends React.PureComponent {
                   </div>
                 </WidgetSection>
 
-                <WidgetSection 
+                <WidgetSection
                   title="Custom Metrics"
                   type={CUSTOM_METRICS}
                   className="mb-4"
@@ -255,7 +256,7 @@ export default class Dashboard extends React.PureComponent {
                     { dashboardAppearance.resourcesByParty && <WidgetHolder Component={ErrorsByOrigin} /> }
                     { dashboardAppearance.domainsErrors_4xx && <WidgetHolder Component={CallsErrors4xx} /> }
                     { dashboardAppearance.domainsErrors_5xx && <WidgetHolder Component={CallsErrors5xx} /> }
-                    { dashboardAppearance.callsErrors && 
+                    { dashboardAppearance.callsErrors &&
                       <div className="col-span-2"><WidgetHolder fullWidth Component={CallWithErrors} /></div>
                     }
                   </div>
@@ -267,7 +268,7 @@ export default class Dashboard extends React.PureComponent {
                     { dashboardAppearance.crashes && <WidgetHolder Component={Crashes} /> }
                     { dashboardAppearance.pagesResponseTime && <WidgetHolder Component={ResponseTime} /> }
                     { dashboardAppearance.impactedSessionsBySlowPages && <WidgetHolder Component={SessionsImpactedBySlowRequests} /> }
-                    { dashboardAppearance.pagesResponseTimeDistribution && 
+                    { dashboardAppearance.pagesResponseTimeDistribution &&
                       <div className="col-span-2"><WidgetHolder fullWidth Component={ResponseTimeDistribution} /></div>
                     }
                     { dashboardAppearance.pagesDomBuildtime && <WidgetHolder Component={DomBuildingTime} /> }
@@ -287,7 +288,7 @@ export default class Dashboard extends React.PureComponent {
                     { dashboardAppearance.resourcesLoadingTime && <WidgetHolder Component={ResourceLoadingTime} /> }
                     { dashboardAppearance.resourceTypeVsResponseEnd && <WidgetHolder Component={ResourceLoadedVsResponseEnd} /> }
                     { dashboardAppearance.missingResources && <WidgetHolder Component={MissingResources} /> }
-                    { dashboardAppearance.slowestResources && 
+                    { dashboardAppearance.slowestResources &&
                       <div className="col-span-2"><WidgetHolder fullWidth Component={SlowestResources} /></div>
                     }
                   </div>
@@ -301,4 +302,4 @@ export default class Dashboard extends React.PureComponent {
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Dashboard/NewDashboard.tsx b/frontend/app/components/Dashboard/NewDashboard.tsx
index 9e4168cfc..ae00c2034 100644
--- a/frontend/app/components/Dashboard/NewDashboard.tsx
+++ b/frontend/app/components/Dashboard/NewDashboard.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react';
 import { useObserver } from "mobx-react-lite";
 import { useStore } from 'App/mstore';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 import DashboardSideMenu from './components/DashboardSideMenu';
 import { Loader } from 'UI';
 import DashboardRouter from './components/DashboardRouter';
 import cn from 'classnames';
 
-function NewDashboard(props) {
+function NewDashboard(props: RouteComponentProps<{}>) {
     const { history, match: { params: { siteId, dashboardId, metricId } } } = props;
     const { dashboardStore } = useStore();
     const loading = useObserver(() => dashboardStore.isLoading);
+    const dashboardsNumber = useObserver(() => dashboardStore.dashboards.length);
     const isMetricDetails = history.location.pathname.includes('/metrics/') || history.location.pathname.includes('/metric/');
 
     useEffect(() => {
@@ -20,14 +21,19 @@ function NewDashboard(props) {
             }
         });
     }, [siteId]);
-    
+
     return useObserver(() => (
         <Loader loading={loading}>
              <div className="page-margin container-90">
-                <div className={cn("side-menu", { 'hidden' : isMetricDetails })}>
+                <div className={cn("side-menu", { 'hidden' : isMetricDetails || dashboardsNumber === 0 })}>
                     <DashboardSideMenu siteId={siteId} />
                 </div>
-                <div className={cn({ "side-menu-margined" : !isMetricDetails, "container-70" : isMetricDetails })}>
+                <div
+                    className={cn({
+                        "side-menu-margined" : !isMetricDetails || dashboardsNumber !== 0,
+                        "container-70" : isMetricDetails || dashboardsNumber === 0
+                    })}
+                >
                     <DashboardRouter siteId={siteId} />
                 </div>
             </div>
@@ -35,4 +41,4 @@ function NewDashboard(props) {
     ));
 }
 
-export default withRouter(NewDashboard);
\ No newline at end of file
+export default withRouter(NewDashboard);