From d67d4cf3c393c5c7f5f634a1b6cb094951faf8b8 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 14 Sep 2022 12:25:25 +0200
Subject: [PATCH] fix(ui): fix button behavior

---
 .../DashboardView/DashboardView.tsx           | 15 +++++++++++---
 .../AddMetricContainer.tsx                    | 10 +++++++++-
 frontend/app/styles/general.css               | 20 ++++++++++++++-----
 tracker/tracker/src/main/index.ts             |  2 ++
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index cd6083e66..9989dbf55 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/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>
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx
index b33cccf76..1620dfca4 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx
+++ b/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
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index e5b7731b1..4877d1a32 100644
--- a/frontend/app/styles/general.css
+++ b/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 {
diff --git a/tracker/tracker/src/main/index.ts b/tracker/tracker/src/main/index.ts
index 0a5bc1357..287fa00e2 100644
--- a/tracker/tracker/src/main/index.ts
+++ b/tracker/tracker/src/main/index.ts
@@ -288,3 +288,5 @@ export default class API {
     }
   }
 }
+// @ts-ignore
+window.__OPENREPLAY_API__ = API