From 2461adf0f51cf0d58426c250a8ef9201469c007a Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 26 Aug 2022 12:02:38 +0200
Subject: [PATCH] change(ui): move popup guide button to shared

---
 .../shared/GuidePopup/GuidePopup.tsx          | 37 +++++++++++++++++++
 .../app/components/shared/GuidePopup/index.ts |  1 +
 .../shared/XRayButton/XRayButton.tsx          | 32 +++-------------
 .../shared/XRayButton/xrayButton.module.css   |  2 +-
 4 files changed, 45 insertions(+), 27 deletions(-)
 create mode 100644 frontend/app/components/shared/GuidePopup/GuidePopup.tsx
 create mode 100644 frontend/app/components/shared/GuidePopup/index.ts

diff --git a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
new file mode 100644
index 000000000..4f6e4907c
--- /dev/null
+++ b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Tooltip } from 'react-tippy';
+
+export const FEATURE_KEYS = {
+  XRAY: 'featureViewed'
+}
+
+interface IProps {
+  children: React.ReactNode
+  title: React.ReactNode
+  description: React.ReactNode
+  key?: keyof typeof FEATURE_KEYS
+}
+
+export default function GuidePopup({ children, title, description }: IProps) {
+  return (
+    // @ts-ignore
+    <Tooltip
+      html={
+        <div>
+          <div className="font-bold">
+            {title}
+          </div>
+          <div className="color-gray-medium">
+            {description}
+          </div>
+        </div>
+      }
+      distance={30}
+      theme={'light'}
+      open={true}
+      arrow={true}
+    >
+      {children}
+    </Tooltip>
+  );
+}
diff --git a/frontend/app/components/shared/GuidePopup/index.ts b/frontend/app/components/shared/GuidePopup/index.ts
new file mode 100644
index 000000000..e2b0a7819
--- /dev/null
+++ b/frontend/app/components/shared/GuidePopup/index.ts
@@ -0,0 +1 @@
+export { default, FEATURE_KEYS } from './GuidePopup'
diff --git a/frontend/app/components/shared/XRayButton/XRayButton.tsx b/frontend/app/components/shared/XRayButton/XRayButton.tsx
index b50a5ecb2..4c27014f8 100644
--- a/frontend/app/components/shared/XRayButton/XRayButton.tsx
+++ b/frontend/app/components/shared/XRayButton/XRayButton.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import stl from './xrayButton.module.css';
 import cn from 'classnames';
 import { Popup } from 'UI';
-import { Tooltip } from 'react-tippy';
+import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
 import { Controls as Player } from 'Player';
 
 interface Props {
@@ -11,7 +11,7 @@ interface Props {
 }
 function XRayButton(props: Props) {
   const { isActive } = props;
-  const [showGuide, setShowGuide] = useState(!localStorage.getItem('featureViewed'));
+  const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.XRAY));
   useEffect(() => {
     if (!showGuide) {
       return;
@@ -38,7 +38,10 @@ function XRayButton(props: Props) {
       )}
       <div className="relative">
         {showGuide ? (
-          <GuidePopup>
+          <GuidePopup
+            title={<>Introducing <span className={stl.text}>X-Ray</span></>}
+            description={"Get a quick overview on the issues in this session."}
+          >
             <button
               className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
               onClick={onClick}
@@ -74,26 +77,3 @@ function XRayButton(props: Props) {
 }
 
 export default XRayButton;
-
-function GuidePopup({ children }: any) {
-  return (
-    <Tooltip
-      html={
-        <div>
-          <div className="font-bold">
-            Introducing <span className={stl.text}>X-Ray</span>
-          </div>
-          <div className="color-gray-medium">
-            Get a quick overview on the issues in this session.
-          </div>
-        </div>
-      }
-      distance={30}
-      theme={'light'}
-      open={true}
-      arrow={true}
-    >
-      {children}
-    </Tooltip>
-  );
-}
diff --git a/frontend/app/components/shared/XRayButton/xrayButton.module.css b/frontend/app/components/shared/XRayButton/xrayButton.module.css
index 3fa52dc1f..c94b9c2f1 100644
--- a/frontend/app/components/shared/XRayButton/xrayButton.module.css
+++ b/frontend/app/components/shared/XRayButton/xrayButton.module.css
@@ -24,4 +24,4 @@
     background: linear-gradient(90deg, rgba(57, 78, 255, 0.87) 0%, rgba(62, 170, 175, 0.87) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-}
+  }