fix(ui): fix button behavior

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -19,6 +19,7 @@ import { Tooltip } from 'react-tippy';
 import Breadcrumb from 'Shared/Breadcrumb';
 import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
 import AddPredefinedMetric from '../DashboardWidgetGrid/AddPredefinedMetric';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 
 interface IProps {
     siteId: string;
@@ -33,6 +34,7 @@ function DashboardView(props: Props) {
     const { dashboardStore } = useStore();
     const { showModal } = useModal();
 
+    const [showTooltip, setShowTooltip] = React.useState(false);
     const [focusTitle, setFocusedInput] = React.useState(true);
     const [showEditModal, setShowEditModal] = React.useState(false);
 
@@ -138,7 +140,8 @@ function DashboardView(props: Props) {
                             className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
                             actionButton={
                                     /* @ts-ignore */
-                                    <Tooltip 
+                                    <Tooltip
+                                        open={showTooltip}
                                         interactive
                                         useContext
                                         // @ts-ignore
@@ -147,9 +150,15 @@ function DashboardView(props: Props) {
                                         hideDelay={200}
                                         duration={0}
                                         distance={20}
-                                        html={<div style={{ padding: 0 }}><AddMetricContainer isPopup siteId={siteId} /></div>}
+                                        html={
+                                            <div style={{ padding: 0 }}>
+                                                <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
+                                                    <AddMetricContainer onAction={() => setShowTooltip(false)} isPopup siteId={siteId} />
+                                                </OutsideClickDetectingDiv>
+                                            </div>
+                                        }
                                     >
-                                        <Button variant="primary" onClick={onAddPredefinedMetrics}>
+                                        <Button variant="primary" onClick={() => setShowTooltip(true)}>
                                             Add Metric
                                         </Button>
                                     </Tooltip>

frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx

@@ -47,11 +47,18 @@ function AddMetricButton({ iconName, title, description, onClick, isPremade, isP
     );
 }
 
-function AddMetricContainer({ siteId, isPopup }: any) {
+interface Props {
+    siteId: string
+    isPopup: boolean
+    onAction: () => void
+}
+
+function AddMetricContainer({ siteId, isPopup, onAction }: Props) {
     const { showModal } = useModal();
     const { dashboardStore } = useStore();
 
     const onAddCustomMetrics = () => {
+        onAction()
         dashboardStore.initDashboard(dashboardStore.selectedDashboard);
         showModal(
             <AddMetric
@@ -64,6 +71,7 @@ function AddMetricContainer({ siteId, isPopup }: any) {
     };
 
     const onAddPredefinedMetrics = () => {
+        onAction()
         dashboardStore.initDashboard(dashboardStore.selectedDashboard);
         showModal(
             <AddPredefinedMetric

frontend/app/styles/general.css

@@ -36,7 +36,7 @@
   scrollbar-width: thin;
   &::-webkit-scrollbar {
     width: 4px;
-  } 
+  }
 }
 
 .grecaptcha-badge{
@@ -190,7 +190,7 @@
   /* font-family: 'FontAwesome'; */
   top: 10px;
   left: 0;
-  
+
   content: "\201C";
   font-size: 140px;
   color: rgba(0,0,0,0.1);
@@ -201,7 +201,7 @@
   /* font-family: 'FontAwesome'; */
   bottom: 10px;
   right: 0;
-  
+
   content: "\201E";
   font-size: 140px;
   color: rgba(0,0,0,0.1);
@@ -226,7 +226,7 @@
 .blink-border {
   /* border: 1px #ff0000 solid; */
   border-color: #CC0000;
-  
+
   animation: blink 1s;
   animation-iteration-count: 3;
 }
@@ -282,8 +282,18 @@ p {
   padding: 0!important;
   transition: none!important;
 }
-.tippy-notransition {
+
+.tippy-tooltip[data-theme~='nopadding'] > .enter {
+  background-color: transparent!important;
+}
+
+.tippy-notransition, .tippy-notransition > * {
   transition: none!important;
+  background-color: transparent!important;
+  will-change: unset!important;
+}
+.tippy-notransition > *[x-circle] {
+  display: none
 }
 
 @media print {

tracker/tracker/src/main/index.ts

@@ -288,3 +288,5 @@ export default class API {
     }
   }
 }
+// @ts-ignore
+window.__OPENREPLAY_API__ = API