feat(ui): make edit metric title hoverable and clickable, create plain text button for future usage

frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
+import cn from 'classnames';
 import { Icon } from 'UI';
+import stl from './widgetName.css'
 
 interface Props {
   name: string;
@@ -31,17 +33,17 @@ function WidgetName(props: Props) {
   useEffect(() => {
     setName(props.name)
   }, [props.name])
-  
+
   // const { name } = props;
+
   return (
     <div className="flex items-center">
       { editing ? (
         <input
           ref={ ref }
           name="name"
-          className="rounded fluid border-0 -mx-2 px-2 h-8"
+          className={cn('rounded fluid border-0', stl.input)}
           value={name}
-          // readOnly={!editing} 
           onChange={write}
           onBlur={onBlur}
           onFocus={() => setEditing(true)}
@@ -49,10 +51,9 @@ function WidgetName(props: Props) {
       ) : (
         <div className="text-2xl h-8 flex items-center border-transparent">{ name }</div>
       )}
-      
       { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div> }
     </div>
   );
 }
 
-export default WidgetName;
+export default WidgetName;

frontend/app/components/Dashboard/components/WidgetName/widgetName.css

@@ -0,0 +1,4 @@
+.input {
+    padding: 5px 9px;
+    height: 32px!important;
+}

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useStore } from 'App/mstore';
+import cn from 'classnames'
 import { Icon, BackLink, Loader } from 'UI';
 import WidgetForm from '../WidgetForm';
 import WidgetPreview from '../WidgetPreview';
@@ -7,6 +8,7 @@ import WidgetSessions from '../WidgetSessions';
 import { useObserver } from 'mobx-react-lite';
 import { withSiteId } from 'App/routes';
 import WidgetName from '../WidgetName';
+import stl from './widgetView.css';
 
 interface Props {
     history: any;
@@ -36,12 +38,17 @@ function WidgetView(props: Props) {
         }
     }
 
+    const openEdit = () => {
+        if (expanded) return;
+        setExpanded(true)
+    }
+
     return useObserver(() => (
         <Loader loading={loading}>
             <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">
+                    <div className={cn("p-4 flex justify-between items-center", { 'cursor-pointer': !expanded, [stl.hoverableTitle]: !expanded })} onClick={openEdit}>
                         <h1 className="mb-0 text-2xl">
                             <WidgetName
                                 name={widget.name}

frontend/app/components/Dashboard/components/WidgetView/widgetView.css

@@ -0,0 +1,14 @@
+.hoverableTitle {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    padding: 0 10px !important;
+
+    &:hover {
+      background-color: $active-blue !important;
+      box-shadow: 0 0 0 1px $active-blue-border!important;
+    }
+
+    &.hover:hover {
+      background-color: $teal !important;
+    }
+  }

frontend/app/components/ui/Button/Button.js

@@ -15,6 +15,7 @@ export default ({
   error = false,
   minWidth,
   disabled = false,
+  plainText = false,
   ...props
 }) => (
   <Button
@@ -33,6 +34,7 @@ export default ({
       styles[ success ? 'success' : '' ],
       styles[ error ? 'error' : '' ],
       styles[ marginRight ? 'margin-right' : '' ],
+      styles[ plainText ? 'plainText' : '' ],
     ) }
   />
 );

frontend/app/components/ui/Button/button.css

@@ -62,6 +62,22 @@
   }
 }
 
+.plainText {
+  background-color: transparent !important;
+  color: $gray-darkest !important;
+  box-shadow: none !important;
+  padding: 0 10px !important;
+
+  &:hover {
+    background-color: $active-blue !important;
+    color: $teal !important;
+  }
+
+  &.hover:hover {
+    background-color: $teal !important;
+  }
+}
+
 .margin-right {
   margin-right: 10px !important;
 }
@@ -81,4 +97,4 @@
   background-color: #FFF2F2 !important;
   color: #CC0000 !important;
   border: solid thin red !important;
-}
+}