feat(ui): add hovers to metric widgets for dashboard and template comps

frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx

@@ -80,7 +80,7 @@ function DashboardMetricSelection(props) {
             </div>
             <div className="grid grid-cols-12 gap-4">
                 <div className="col-span-3">
-                    <div className="grid grid-cols-1 gap-4" style={{ maxHeight: "calc(100vh - 165px)", overflowY: 'auto' }}>
+                    <div className="grid grid-cols-1 gap-4 py-1" style={{ maxHeight: "calc(100vh - 165px)", overflowY: 'auto' }}>
                         {activeCategory && widgetCategories.map((category, index) =>
                             <WidgetCategoryItem
                                 key={category.name}
@@ -94,7 +94,7 @@ function DashboardMetricSelection(props) {
                 </div>
                 <div className="col-span-9">
                     <div
-                        className="grid grid-cols-4 gap-4 -mx-4 px-4 pb-40 items-start"
+                        className="grid grid-cols-4 gap-4 -mx-4 px-4 pb-40 items-start py-1"
                         style={{ maxHeight: "calc(100vh - 165px)", overflowY: 'auto' }}
                     >
                         {activeCategory && activeCategory.widgets.map((widget: any) => (

frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx

@@ -15,7 +15,7 @@ import DashboardView from '../DashboardView';
 import MetricsView from '../MetricsView';
 import WidgetView from '../WidgetView';
 
-function DashboardViewSelected({ siteId, dashboardId}) {
+function DashboardViewSelected({ siteId, dashboardId }) {
     return (
         <DashboardView siteId={siteId} dashboardId={dashboardId} />
     )

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

@@ -1,9 +1,13 @@
-//@ts-nocheck
 import React from 'react';
+import cn from 'classnames';
+import stl from './widgetWrapper.css';
 
-function TemplateOverlay() {
+interface IProps {
+    isTemplate?: boolean;
+}
+function TemplateOverlay(props: IProps) {
     return (
-            <div className="absolute inset-0 cursor-pointer z-10" />
+        <div className={cn('absolute cursor-pointer z-10', stl.overlay, { [stl.overlayDashboard]: !props.isTemplate } )} />
     );
 }
 

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

@@ -13,6 +13,7 @@ import TemplateOverlay from './TemplateOverlay';
 import WidgetIcon from './WidgetIcon';
 import AlertButton from './AlertButton';
 import { Tooltip } from 'react-tippy';
+import stl from './widgetWrapper.css';
 
 interface Props {
     className?: string;
@@ -59,13 +60,6 @@ function WidgetWrapper(props: Props) {
 
     const onDelete = async () => {
         dashboardStore.deleteDashboardWidget(dashboard?.dashboardId, widget.widgetId);
-        // if (await confirm({
-        //   header: 'Confirm',
-        //   confirmButton: 'Yes, delete',
-        //   confirmation: `Are you sure you want to permanently delete the widget from this dashboard?`
-        // })) {
-        //     dashboardStore.deleteDashboardWidget(dashboardId!, widget.widgetId);
-        // }
     }
 
     const onChartClick = () => {
@@ -77,13 +71,19 @@ function WidgetWrapper(props: Props) {
     const ref: any = useRef(null)
     const dragDropRef: any = dragRef(dropRef(ref))
 
+    const addOverlay = isTemplate || !isPredefined
+
+    console.log(widget, isTemplate, addOverlay)
+
     return useObserver(() => (
             <div
                 className={
                     cn(
                         "relative rounded bg-white border",
                         'col-span-' + widget.config.col,
-                        { "cursor-pointer" : isTemplate }
+                        stl.hoverableWidget,
+                        { [stl.hoverGray]: !isTemplate },
+                        { [stl.hoverBlue]: isTemplate }
                     )
                 }
                 style={{
@@ -95,19 +95,20 @@ function WidgetWrapper(props: Props) {
                 onClick={props.onClick ? props.onClick : () => {}}
                 id={`widget-${widget.widgetId}`}
             >
+                <div className={cn(stl.drillDownMessage, 'disabled text-gray')}> {isPredefined ? 'Cannot drill down system provided metrics' : 'Click to drill down'} </div>
                 {/* @ts-ignore */}
                 <Tooltip
-                    title="Click to select"
+                    // title="Click to select"
                     hideOnClick={true}
-                    position="top"
+                    position="bottom"
                     delay={300}
                     followCursor
                     disabled={!isTemplate}
                     boundary="viewport"
                     flip={["top"]}
-                    transitionFlip={false}
+                    html={<span>Click to select</span>}
                 >
-                    {isTemplate && <TemplateOverlay />}
+                    {addOverlay && <TemplateOverlay isTemplate={isTemplate} />}
                     <div
                         className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate })}
                     >

frontend/app/components/Dashboard/components/WidgetWrapper/widgetWrapper.css

@@ -0,0 +1,39 @@
+.hoverableWidget {
+    transition: all 0.2s;
+}
+
+.hoverGray {
+    &:hover {
+        box-shadow: 0 0 0 1px #999;
+
+        & .drillDownMessage {
+            display: unset;
+        }
+    }
+}
+
+.hoverBlue {
+    &:hover {
+        box-shadow: 0 0 0 1px $main;
+    }
+}
+
+.drillDownMessage {
+    display: none;
+    position: absolute;
+    top: 35px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+}
+
+.overlay {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.overlayDashboard {
+    top: 20%!important;
+}