fix(ui): fix text on widget updates, remove back link on metrics page and add brdcmbs

frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { useStore } from 'App/mstore';
+import { Icon, Loader, Link } from 'UI';
 import WidgetForm from '../WidgetForm';
 import WidgetPreview from '../WidgetPreview';
 import WidgetSessions from '../WidgetSessions';
-import { Icon, BackLink, Loader } from 'UI';
 import { useObserver } from 'mobx-react-lite';
 import { withSiteId } from 'App/routes';
 import WidgetName from '../WidgetName';
+
 interface Props {
     history: any;
     match: any
@@ -29,7 +30,7 @@ function WidgetView(props: Props) {
 
     const onBackHandler = () => {
         if (dashboardId) {
-            props.history.push(withSiteId(`/dashboard/${dashboardId}`, siteId));    
+            props.history.push(withSiteId(`/dashboard/${dashboardId}`, siteId));
         } else {
             props.history.push(withSiteId(`/metrics`, siteId));
         }
@@ -37,8 +38,17 @@ function WidgetView(props: Props) {
 
     return useObserver(() => (
         <Loader loading={loading}>
+            <div className="mb-2 flex items-center">
+                <Icon name="chevron-left" size="12" />
+                <div className="ml-2 text-xl">
+                    <Link className="mx-1 color-gray-dark" to={withSiteId("/dashboard", siteId)}>Dashboards</Link>
+                    /
+                    <Link className="mx-1 color-primary" to={withSiteId("/metrics", siteId)}>Metrics</Link>
+                    /
+                    <span className="mx-1 disabled">{widget.name}</span>
+                </div>
+            </div>
             <div className="relative pb-10">
-                <BackLink onClick={onBackHandler} vertical className="absolute" style={{ left: '-50px', top: '0px' }} />
                 <div className="bg-white rounded border">
                     <div className="p-4 flex justify-between items-center">
                         <h1 className="mb-0 text-2xl">
@@ -69,4 +79,4 @@ function WidgetView(props: Props) {
     ));
 }
 
-export default WidgetView;
+export default WidgetView;

frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx

@@ -111,7 +111,7 @@ function WidgetWrapper(props: Props) {
                                         disabled: widget.metricType === 'predefined',
                                     },
                                     {
-                                        text: 'Remove from view',
+                                        text: 'Hide',
                                         onClick: onDelete
                                     },
                                 ]}

frontend/app/mstore/dashboardStore.ts

@@ -4,7 +4,7 @@ import Widget, { IWidget } from "./types/widget";
 import { dashboardService, metricService } from "App/services";
 import { toast } from 'react-toastify';
 import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
-import { getChartFormatter } from 'Types/dashboard/helper'; 
+import { getChartFormatter } from 'Types/dashboard/helper';
 import Filter, { IFilter } from "./types/filter";
 
 export interface IDashboardSotre {
@@ -24,7 +24,7 @@ export interface IDashboardSotre {
     metricsPage: number
     metricsPageSize: number
     metricsSearch: string
-    
+
     isLoading: boolean
     isSaving: boolean
     isDeleting: boolean
@@ -37,7 +37,7 @@ export interface IDashboardSotre {
     toggleAllSelectedWidgets: (isSelected: boolean) => void
     removeSelectedWidgetByCategory(category: string): void
     toggleWidgetSelection(widget: IWidget): void
-    
+
     initDashboard(dashboard?: IDashboard): void
     updateKey(key: string, value: any): void
     resetCurrentWidget(): void
@@ -82,12 +82,12 @@ export default class DashboardStore implements IDashboardSotre {
     drillDownFilter: Filter = new Filter()
     startTimestamp: number = 0
     endTimestamp: number = 0
-    
+
     // Metrics
     metricsPage: number = 1
     metricsPageSize: number = 10
     metricsSearch: string = ''
-    
+
     // Loading states
     isLoading: boolean = true
     isSaving: boolean = false
@@ -109,7 +109,7 @@ export default class DashboardStore implements IDashboardSotre {
             getDashboardByIndex: action,
             getDashboardCount: action,
             selectDashboardById: action,
-            selectDefaultDashboard: action, 
+            selectDefaultDashboard: action,
             toJson: action,
             fromJson: action,
             setSiteId: action,
@@ -213,9 +213,9 @@ export default class DashboardStore implements IDashboardSotre {
     save(dashboard: IDashboard): Promise<any> {
         this.isSaving = true
         const isCreating = !dashboard.dashboardId
-        
+
         dashboard.metrics = this.selectedWidgets.map(w => w.metricId)
-        
+
         return new Promise((resolve, reject) => {
             dashboardService.saveDashboard(dashboard).then(_dashboard => {
                 runInAction(() => {
@@ -381,7 +381,7 @@ export default class DashboardStore implements IDashboardSotre {
     deleteDashboardWidget(dashboardId: string, widgetId: string) {
         this.isDeleting = true
         return dashboardService.deleteWidget(dashboardId, widgetId).then(() => {
-            toast.success('Widget deleted successfully')
+            toast.success('Dashboard updated successfully')
             runInAction(() => {
                 this.selectedDashboard?.removeWidget(widgetId)
             })
@@ -420,7 +420,7 @@ export default class DashboardStore implements IDashboardSotre {
             // this.isSaving = false
         })
     }
-    
+
     setPeriod(period: any) {
         this.period = Period({ start: period.startDate, end: period.endDate, rangeName: period.rangeValue })
     }
@@ -463,7 +463,7 @@ export default class DashboardStore implements IDashboardSotre {
                                     return unique;
                                 }, []) : []
                         }
-                        
+
                         metric.setData(_data)
                         resolve(_data);
                     }
@@ -472,4 +472,4 @@ export default class DashboardStore implements IDashboardSotre {
                 })
         })
     }
-}
+}

frontend/app/mstore/types/dashboard.ts

@@ -44,7 +44,7 @@ export default class Dashboard implements IDashboard {
     isPinned: boolean = false
     currentWidget: IWidget = new Widget()
     config: any = {}
-    
+
     constructor() {
         makeAutoObservable(this, {
             name: observable,
@@ -158,7 +158,7 @@ export default class Dashboard implements IDashboard {
                 dashboardService.saveWidget(this.dashboardId, widgetA),
                 dashboardService.saveWidget(this.dashboardId, widgetB)
             ]).then(() => {
-                toast.success("Widget position updated")
+                toast.success("Dashboard updated successfully")
                 resolve()
             }).catch(() => {
                 toast.error("Error updating widget position")