From 55edc0b592daa07c5421e238e5b80040d2e2362f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 9 Nov 2022 09:59:09 +0100
Subject: [PATCH 01/21] change(ui) - floating ui

---
 .../Alerts/Notifications/Notifications.tsx    |   6 +-
 .../SessionSettingButton.tsx                  |   6 +-
 .../shared/SharePopup/SharePopup.js           | 139 ++++++++----------
 .../app/components/ui/ItemMenu/ItemMenu.tsx   | 123 ++++++++--------
 .../ui/ItemMenu/itemMenu.module.css           |   6 +-
 .../app/components/ui/Popover/Popover.tsx     |  84 +++++++++++
 frontend/app/components/ui/Popover/index.ts   |   1 +
 .../components/ui/Tooltip/FloatingTooltip.tsx | 109 ++++++++++++++
 .../app/components/ui/Tooltip/Tooltip.tsx     |  62 ++------
 .../app/components/ui/Tooltip/Tooltip.tsx_    |  47 ++++++
 frontend/app/components/ui/index.js           |   3 +-
 frontend/app/styles/general.css               |  13 ++
 frontend/package.json                         |   2 +
 13 files changed, 401 insertions(+), 200 deletions(-)
 create mode 100644 frontend/app/components/ui/Popover/Popover.tsx
 create mode 100644 frontend/app/components/ui/Popover/index.ts
 create mode 100644 frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
 create mode 100644 frontend/app/components/ui/Tooltip/Tooltip.tsx_

diff --git a/frontend/app/components/Alerts/Notifications/Notifications.tsx b/frontend/app/components/Alerts/Notifications/Notifications.tsx
index b5421fd29..be3684bd4 100644
--- a/frontend/app/components/Alerts/Notifications/Notifications.tsx
+++ b/frontend/app/components/Alerts/Notifications/Notifications.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import stl from './notifications.module.css';
 import { connect } from 'react-redux';
-import { Icon, Popup } from 'UI';
+import { Icon, Popup, Tooltip } from 'UI';
 import { fetchList, setViewed, clearAll } from 'Duck/notifications';
 import { setLastRead } from 'Duck/announcements';
 import { useModal } from 'App/components/Modal';
@@ -29,7 +29,7 @@ function Notifications(props: Props) {
   }, []);
 
   return useObserver(() => (
-    <Popup content={`Alerts`}>
+    <Tooltip tooltip={`Alerts`}>
       <div
         className={stl.button}
         onClick={() => showModal(<AlertTriggersModal />, { right: true })}
@@ -39,7 +39,7 @@ function Notifications(props: Props) {
         </div>
         <Icon name="bell" size="18" color="gray-dark" />
       </div>
-    </Popup>
+    </Tooltip>
   ));
 }
 
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
index 6dde016a3..8f080cbaf 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
@@ -1,8 +1,8 @@
 import { useModal } from 'App/components/Modal';
 import React from 'react';
 import SessionSettings from 'Shared/SessionSettings';
-import { Button } from 'UI';
-import { Tooltip } from 'react-tippy';
+import { Button, Tooltip } from 'UI';
+// import { Tooltip } from 'react-tippy';
 
 function SessionSettingButton(props: any) {
     const { showModal } = useModal();
@@ -14,7 +14,7 @@ function SessionSettingButton(props: any) {
     return (
         <div className="cursor-pointer ml-4" onClick={handleClick}>
             {/* @ts-ignore */}
-            <Tooltip title="Session Settings" unmountHTMLWhenHide>
+            <Tooltip tooltip="Session Settings">
                 <Button icon="sliders" variant="text" />
             </Tooltip>
         </div>
diff --git a/frontend/app/components/shared/SharePopup/SharePopup.js b/frontend/app/components/shared/SharePopup/SharePopup.js
index cf5bb89db..9fef76843 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@@ -1,21 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { connectPlayer } from 'Player';
 import withRequest from 'HOCs/withRequest';
-import { Icon, Button } from 'UI';
+import { Icon, Button, Popover } from 'UI';
 import styles from './sharePopup.module.css';
 import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
 import SessionCopyLink from './SessionCopyLink';
 import Select from 'Shared/Select';
-import { Tooltip } from 'react-tippy';
 import cn from 'classnames';
-import { fetchList, init } from 'Duck/integrations/slack';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import { fetchList } from 'Duck/integrations/slack';
 
-// @connectPlayer((state) => ({
-//   time: state.time,
-// }))
 @connect(
   (state) => ({
     channels: state.getIn(['slack', 'list']),
@@ -75,84 +69,67 @@ export default class SharePopup extends React.PureComponent {
     const options = channels
       .map(({ webhookId, name }) => ({ value: webhookId, label: name }))
       .toJS();
-    return (
-      <OutsideClickDetectingDiv
-        className={cn('relative flex items-center')}
-        onClickOutside={() => {
-          this.setState({ isOpen: false });
-        }}
-      >
-        <Tooltip
-          open={isOpen}
-          theme="light"
-          interactive
-          position="bottom"
-          unmountHTMLWhenHide
-          useContext
-          arrow
-          trigger="click"
-          shown={this.handleOpen}
-          className="h-full w-full p-3"
-        // beforeHidden={this.handleClose}
-          html={
-            <div className={styles.wrapper}>
-              <div className={styles.header}>
-                <div className={cn(styles.title, 'text-lg')}>Share this session link to Slack</div>
-              </div>
-              {options.length === 0 ? (
-                <>
-                  <div className={styles.body}>
-                    <IntegrateSlackButton />
-                  </div>
-                  {showCopyLink && (
-                    <div className={styles.footer}>
-                      <SessionCopyLink />
-                    </div>
-                  )}
-                </>
-              ) : (
-                <div>
-                  <div className={styles.body}>
-                    <textarea
-                      name="message"
-                      id="message"
-                      cols="30"
-                      rows="4"
-                      resize="none"
-                      onChange={this.editMessage}
-                      value={comment}
-                      placeholder="Add Message (Optional)"
-                      className="p-4"
-                    />
 
-                    <div className="flex items-center justify-between">
-                      <Select
-                        options={options}
-                        defaultValue={channelId}
-                        onChange={this.changeChannel}
-                        className="mr-4"
-                      />
-                      <div>
-                        <Button onClick={this.share} variant="primary">
-                          <div className="flex items-center">
-                            <Icon name="integrations/slack-bw" size="18" marginRight="10" />
-                            {loading ? 'Sending...' : 'Send'}
-                          </div>
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
+    return (
+      <Popover
+        render={() => (
+          <div className={styles.wrapper}>
+            <div className={styles.header}>
+              <div className={cn(styles.title, 'text-lg')}>Share this session link to Slack</div>
+            </div>
+            {options.length === 0 ? (
+              <>
+                <div className={styles.body}>
+                  <IntegrateSlackButton />
+                </div>
+                {showCopyLink && (
                   <div className={styles.footer}>
                     <SessionCopyLink />
                   </div>
+                )}
+              </>
+            ) : (
+              <div>
+                <div className={styles.body}>
+                  <textarea
+                    name="message"
+                    id="message"
+                    cols="30"
+                    rows="4"
+                    resize="none"
+                    onChange={this.editMessage}
+                    value={comment}
+                    placeholder="Add Message (Optional)"
+                    className="p-4"
+                  />
+
+                  <div className="flex items-center justify-between">
+                    <Select
+                      options={options}
+                      defaultValue={channelId}
+                      onChange={this.changeChannel}
+                      className="mr-4"
+                    />
+                    <div>
+                      <Button onClick={this.share} variant="primary">
+                        <div className="flex items-center">
+                          <Icon name="integrations/slack-bw" size="18" marginRight="10" />
+                          {loading ? 'Sending...' : 'Send'}
+                        </div>
+                      </Button>
+                    </div>
+                  </div>
                 </div>
-              )}
-            </div>
-          }
-        >
-          <div onClick={this.onClickHandler}>{trigger}</div>
-        </Tooltip>
-      </OutsideClickDetectingDiv>
+                <div className={styles.footer}>
+                  <SessionCopyLink />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      >
+        <div className="p-3 w-full">{trigger}</div>
+      </Popover>
     );
   }
 }
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
index cb8888d9d..3cad92520 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, Popover } from 'UI';
 import styles from './itemMenu.module.css';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import cn from 'classnames';
 
 interface Item {
@@ -58,71 +57,69 @@ export default class ItemMenu extends React.PureComponent<Props> {
     const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
 
     return (
-      <div className={styles.wrapper}>
-        <OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
+      <Popover
+        render={() => (
           <div
-            onClick={this.toggleMenu}
-            className={cn(
-              'flex items-center cursor-pointer select-none hover rounded-full',
-              !this.props.flat ? parentStyles : '',
-              { 'bg-gray-light': !this.props.flat && displayed && label }
-            )}
+            className={cn(styles.menu, { [styles.menuDim]: !bold })}
+            // style={{
+            //   top: this.props.flat ? 24 : undefined,
+            // }}
+            // data-displayed={displayed}
           >
-            {label && (
-              <span
-                className={cn(
-                  'mr-1',
-                  bold ? 'font-medium color-gray-darkest' : 'color-gray-medium'
-                )}
-              >
-                {label}
-              </span>
-            )}
-            {this.props.flat ? null : (
-              <div
-                ref={(ref) => {
-                  this.menuBtnRef = ref;
-                }}
-                className={cn('rounded-full flex items-center justify-center', {
-                  'bg-gray-light': displayed,
-                  'w-10 h-10': !label,
-                })}
-                role="button"
-              >
-                <Icon name="ellipsis-v" size="16" />
-              </div>
-            )}
-          </div>
-        </OutsideClickDetectingDiv>
-        <div
-          className={cn(styles.menu, { [styles.menuDim]: !bold })}
-          style={{
-            top: this.props.flat ? 24 : undefined,
-          }}
-          data-displayed={displayed}
-        >
-          {items
-            .filter(({ hidden }) => !hidden)
-            .map(({ onClick, text, icon, disabled = false }) => (
-              <div
-                key={text}
-                onClick={!disabled ? this.onClick(onClick) : () => {}}
-                className={disabled ? 'cursor-not-allowed' : ''}
-                role="menuitem"
-              >
-                <div className={cn(styles.menuItem, 'text-neutral-700', { disabled: disabled })}>
-                  {icon && (
-                    <div className={styles.iconWrapper}>
-                      {/* @ts-ignore */}
-                      <Icon name={icon} size="13" color="gray-dark" />
-                    </div>
-                  )}
-                  <div>{text}</div>
+            {items
+              .filter(({ hidden }) => !hidden)
+              .map(({ onClick, text, icon, disabled = false }) => (
+                <div
+                  key={text}
+                  onClick={!disabled ? this.onClick(onClick) : () => {}}
+                  className={disabled ? 'cursor-not-allowed' : ''}
+                  role="menuitem"
+                >
+                  <div className={cn(styles.menuItem, 'text-neutral-700', { disabled: disabled })}>
+                    {icon && (
+                      <div className={styles.iconWrapper}>
+                        {/* @ts-ignore */}
+                        <Icon name={icon} size="13" color="gray-dark" />
+                      </div>
+                    )}
+                    <div>{text}</div>
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+          </div>
+        )}
+      >
+        <div
+          // onClick={this.toggleMenu}
+          className={cn(
+            'flex items-center cursor-pointer select-none hover rounded-full',
+            !this.props.flat ? parentStyles : '',
+            { 'bg-gray-light': !this.props.flat && displayed && label }
+          )}
+        >
+          {label && (
+            <span
+              className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}
+            >
+              {label}
+            </span>
+          )}
+          {this.props.flat ? null : (
+            <div
+              ref={(ref) => {
+                this.menuBtnRef = ref;
+              }}
+              className={cn('rounded-full flex items-center justify-center', {
+                'bg-gray-light': displayed,
+                'w-10 h-10': !label,
+              })}
+              role="button"
+            >
+              <Icon name="ellipsis-v" size="16" />
+            </div>
+          )}
         </div>
-      </div>
+      </Popover>
     );
   }
 }
diff --git a/frontend/app/components/ui/ItemMenu/itemMenu.module.css b/frontend/app/components/ui/ItemMenu/itemMenu.module.css
index 477ef7ffb..7583e9975 100644
--- a/frontend/app/components/ui/ItemMenu/itemMenu.module.css
+++ b/frontend/app/components/ui/ItemMenu/itemMenu.module.css
@@ -40,9 +40,9 @@
 
   white-space: nowrap;
   z-index: 20;
-  position: absolute;
-  right: 0px;
-  top: 37px;
+  /* position: absolute; */
+  /* right: 0px; */
+  /* top: 37px; */
   min-width: 150px;
   background-color: $white;
   border-radius: 3px;
diff --git a/frontend/app/components/ui/Popover/Popover.tsx b/frontend/app/components/ui/Popover/Popover.tsx
new file mode 100644
index 000000000..749d88587
--- /dev/null
+++ b/frontend/app/components/ui/Popover/Popover.tsx
@@ -0,0 +1,84 @@
+import React, { cloneElement, useMemo, useState } from 'react';
+import {
+  Placement,
+  offset,
+  flip,
+  shift,
+  autoUpdate,
+  useFloating,
+  useInteractions,
+  useRole,
+  useDismiss,
+  useId,
+  useClick,
+  FloatingFocusManager,
+} from '@floating-ui/react-dom-interactions';
+import { mergeRefs } from 'react-merge-refs';
+
+interface Props {
+  render: (data: { close: () => void; labelId: string; descriptionId: string }) => React.ReactNode;
+  placement?: Placement;
+  children: JSX.Element;
+}
+
+const Popover = ({ children, render, placement }: Props) => {
+  const [open, setOpen] = useState(false);
+
+  const { x, y, reference, floating, strategy, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset(5), flip(), shift()],
+    placement,
+    whileElementsMounted: autoUpdate,
+  });
+
+  const id = useId();
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(context),
+    useRole(context),
+    useDismiss(context),
+  ]);
+
+  // Preserve the consumer's ref
+  const ref = useMemo(() => mergeRefs([reference, (children as any).ref]), [reference, children]);
+
+  return (
+    <>
+      {cloneElement(children, getReferenceProps({ ref, ...children.props }))}
+      {open && (
+        <FloatingFocusManager
+          context={context}
+          modal={false}
+          order={['reference', 'content']}
+          returnFocus={false}
+        >
+          <div
+            ref={floating}
+            className="rounded border shadow"
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+            }}
+            aria-labelledby={labelId}
+            aria-describedby={descriptionId}
+            {...getFloatingProps()}
+          >
+            {render({
+              labelId,
+              descriptionId,
+              close: () => {
+                setOpen(false);
+              },
+            })}
+          </div>
+        </FloatingFocusManager>
+      )}
+    </>
+  );
+};
+
+export default Popover;
diff --git a/frontend/app/components/ui/Popover/index.ts b/frontend/app/components/ui/Popover/index.ts
new file mode 100644
index 000000000..44c04deaf
--- /dev/null
+++ b/frontend/app/components/ui/Popover/index.ts
@@ -0,0 +1 @@
+export { default } from './Popover';
diff --git a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
new file mode 100644
index 000000000..334e924b8
--- /dev/null
+++ b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingPortal,
+} from '@floating-ui/react-dom-interactions';
+import type { Placement } from '@floating-ui/react-dom-interactions';
+
+export function useTooltipState({
+  initialOpen = false,
+  placement = 'top',
+}: {
+  initialOpen?: boolean;
+  placement?: Placement;
+} = {}) {
+  const [open, setOpen] = React.useState(initialOpen);
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip(), shift()],
+  });
+
+  const context = data.context;
+
+  const hover = useHover(context, { move: false, restMs: 500 });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+    }),
+    [open, setOpen, interactions, data]
+  );
+}
+
+type TooltipState = ReturnType<typeof useTooltipState>;
+
+export const TooltipAnchor = React.forwardRef<
+  HTMLElement,
+  React.HTMLProps<HTMLElement> & {
+    state: TooltipState;
+    asChild?: boolean;
+  }
+>(function TooltipAnchor({ children, state, asChild = false, ...props }, propRef) {
+  const childrenRef = (children as any).ref;
+  const ref = React.useMemo(
+    () => mergeRefs([state.reference, propRef, childrenRef]),
+    [state.reference, propRef, childrenRef]
+  );
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children,
+      state.getReferenceProps({ ref, ...props, ...children.props })
+    );
+  }
+
+  return (
+    <button ref={ref} {...state.getReferenceProps(props)}>
+      {children}
+    </button>
+  );
+});
+
+export const FloatingTooltip = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLProps<HTMLDivElement> & { state: TooltipState }
+>(function Tooltip({ state, ...props }, propRef) {
+  const ref = React.useMemo(() => mergeRefs([state.floating, propRef]), [state.floating, propRef]);
+
+  return (
+    <FloatingPortal>
+      {state.open && (
+        <div
+          ref={ref}
+          style={{
+            position: state.strategy,
+            top: state.y ?? 0,
+            left: state.x ?? 0,
+            visibility: state.x == null ? 'hidden' : 'visible',
+            transition: 'opacity 1s',
+            ...props.style,
+          }}
+          {...state.getFloatingProps(props)}
+        />
+      )}
+    </FloatingPortal>
+  );
+});
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.tsx b/frontend/app/components/ui/Tooltip/Tooltip.tsx
index 6a14ce3f7..e10015754 100644
--- a/frontend/app/components/ui/Tooltip/Tooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/Tooltip.tsx
@@ -1,51 +1,21 @@
 import React from 'react';
-import { Popup } from 'UI';
+import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
 
 interface Props {
-  timeout: number
-  position: string
-  tooltip: string
-  trigger: React.ReactNode
+  // position: string;
+  tooltip: string;
+  children: any;
+}
+function Tooltip(props: Props) {
+  const state = useTooltipState();
+  return (
+    <>
+      <TooltipAnchor state={state}>{props.children}</TooltipAnchor>
+      <FloatingTooltip state={state} className="bg-gray-darkest color-white rounded py-1 px-2 animate-fade">
+        {props.tooltip}
+      </FloatingTooltip>
+    </>
+  );
 }
 
-export default class Tooltip extends React.PureComponent<Props> {
-  static defaultProps = {
-    timeout: 500,
-  }
-  state = {
-    open: false,
-  }
-  mouseOver = false
-  onMouseEnter = () => {
-    this.mouseOver = true;
-    setTimeout(() => {
-      if (this.mouseOver) this.setState({ open: true });
-    }, this.props.timeout)
-  }
-  onMouseLeave = () => {
-    this.mouseOver = false;
-    this.setState({
-      open: false,
-    });
-  }
-
-  render() {
-    const { trigger, tooltip, position } = this.props;
-    const { open } = this.state;
-    return (
-      <Popup
-        open={open}
-        content={tooltip}
-        disabled={!tooltip}
-        position={position}
-      >
-        <span //TODO: no wrap component around
-            onMouseEnter={ this.onMouseEnter }
-            onMouseLeave={ this.onMouseLeave }
-        >
-            { trigger }
-        </span>
-      </Popup>
-    );
-  }
-}
\ No newline at end of file
+export default Tooltip;
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.tsx_ b/frontend/app/components/ui/Tooltip/Tooltip.tsx_
new file mode 100644
index 000000000..04bd3424c
--- /dev/null
+++ b/frontend/app/components/ui/Tooltip/Tooltip.tsx_
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Popup } from 'UI';
+import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
+
+interface Props {
+  timeout: number;
+  position: string;
+  tooltip: string;
+  trigger: React.ReactNode;
+}
+
+export default class Tooltip extends React.PureComponent<Props> {
+  static defaultProps = {
+    timeout: 500,
+  };
+  state = {
+    open: false,
+  };
+  mouseOver = false;
+  onMouseEnter = () => {
+    this.mouseOver = true;
+    setTimeout(() => {
+      if (this.mouseOver) this.setState({ open: true });
+    }, this.props.timeout);
+  };
+  onMouseLeave = () => {
+    this.mouseOver = false;
+    this.setState({
+      open: false,
+    });
+  };
+
+  render() {
+    const { trigger, tooltip, position } = this.props;
+    const { open } = this.state;
+    return (
+      <Popup open={open} content={tooltip} disabled={!tooltip} position={position}>
+        <span //TODO: no wrap component around
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+        >
+          {trigger}
+        </span>
+      </Popup>
+    );
+  }
+}
diff --git a/frontend/app/components/ui/index.js b/frontend/app/components/ui/index.js
index 9000531a6..5c8c7813c 100644
--- a/frontend/app/components/ui/index.js
+++ b/frontend/app/components/ui/index.js
@@ -56,4 +56,5 @@ export { default as Toggler } from './Toggler';
 export { default as Input } from './Input';
 export { default as Form } from './Form';
 export { default as Modal } from './Modal';
-export { default as Message } from './Message';
\ No newline at end of file
+export { default as Message } from './Message';
+export { default as Popover } from './Popover';
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 8ddb1f741..84f327edd 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -334,4 +334,17 @@ p {
     #ccc 2px,
     #ccc 4px
   );
+}
+
+.animate-fade {
+  animation: fade 0.1s cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+@keyframes fade {
+  100% {
+    opacity: 1;
+  }
+  0% {
+    opacity: 0;
+  }
 }
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 8c41d5409..af78fbdaf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "postinstall": "yarn gen:icons && yarn gen:colors"
   },
   "dependencies": {
+    "@floating-ui/react-dom-interactions": "^0.10.3",
     "@sentry/browser": "^5.21.1",
     "@svg-maps/world": "^1.0.1",
     "@svgr/webpack": "^6.2.1",
@@ -51,6 +52,7 @@
     "react-highlight": "^0.14.0",
     "react-json-view": "^1.21.3",
     "react-lazyload": "^3.2.0",
+    "react-merge-refs": "^2.0.1",
     "react-redux": "^5.1.2",
     "react-router": "^5.3.3",
     "react-router-dom": "^5.3.3",

From 5effb0d1a66de6e85592462a16c37a1330b2d52b Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 14 Nov 2022 15:05:16 +0100
Subject: [PATCH 02/21] change(ui) - tooltip replacement

---
 .../Alerts/Notifications/Notifications.tsx    |   4 +-
 .../AssistActions/AssistActions.tsx           |   3 +-
 .../DashboardView/DashboardView.tsx           |  32 +++---
 .../MetricListItem/MetricListItem.tsx         |   7 +-
 .../components/WidgetName/WidgetName.tsx      |   5 +-
 .../Funnels/FunnelWidget/FunnelBar.tsx        |   3 +-
 .../components/Session_/Autoplay/Autoplay.js  | 102 +++++++++---------
 .../BugReport/components/ReportTitle.tsx      |   4 +-
 .../Session_/BugReport/components/Session.tsx |   3 +-
 .../components/StepsComponents/EventStep.tsx  |   5 +-
 .../components/StepsComponents/StepRadius.tsx |   4 +-
 .../Session_/EventsBlock/UserCard/UserCard.js |  20 ++--
 .../app/components/Session_/Issues/Issues.js  |  47 ++++----
 .../Session_/Player/Controls/Controls.js      |   7 +-
 .../Controls/components/PlayerControls.tsx    |  64 +++++------
 .../Player/Overlay/ElementsMarker/Marker.tsx  |  27 ++---
 .../SessionInfoItem/SessionInfoItem.tsx       |   2 +-
 .../components/Session_/Storage/Storage.js    |   3 +-
 frontend/app/components/Session_/Subheader.js |  12 +--
 frontend/app/components/hocs/withCopy.tsx     |   4 +-
 .../components/shared/CopyText/CopyText.tsx   |  11 +-
 .../shared/GuidePopup/GuidePopup.tsx          |  10 +-
 .../SavedSearchModal/SavedSearchModal.tsx     |   7 +-
 .../shared/SessionItem/SessionItem.tsx        |   3 +-
 .../SessionSettingButton.tsx                  |   4 +-
 .../shared/XRayButton/XRayButton.tsx          |   6 +-
 .../app/components/ui/Popover/Popover.tsx     |   2 +
 .../components/ui/Tooltip/FloatingTooltip.tsx |  14 ++-
 .../app/components/ui/Tooltip/Tooltip.tsx     |  20 +++-
 frontend/app/constants/zindex.ts              |  13 +--
 30 files changed, 216 insertions(+), 232 deletions(-)

diff --git a/frontend/app/components/Alerts/Notifications/Notifications.tsx b/frontend/app/components/Alerts/Notifications/Notifications.tsx
index be3684bd4..05bcea06b 100644
--- a/frontend/app/components/Alerts/Notifications/Notifications.tsx
+++ b/frontend/app/components/Alerts/Notifications/Notifications.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import stl from './notifications.module.css';
 import { connect } from 'react-redux';
-import { Icon, Popup, Tooltip } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { fetchList, setViewed, clearAll } from 'Duck/notifications';
 import { setLastRead } from 'Duck/announcements';
 import { useModal } from 'App/components/Modal';
@@ -29,7 +29,7 @@ function Notifications(props: Props) {
   }, []);
 
   return useObserver(() => (
-    <Tooltip tooltip={`Alerts`}>
+    <Tooltip title={`Alerts`}>
       <div
         className={stl.button}
         onClick={() => showModal(<AlertTriggersModal />, { right: true })}
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index 85c2f6ad3..0bd7e878c 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Popup, Button } from 'UI';
+import { Popup, Button, Tooltip } from 'UI';
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { toggleChatWindow } from 'Duck/sessions';
@@ -19,7 +19,6 @@ import {
 } from 'Player/MessageDistributor/managers/AssistManager';
 import RequestLocalStream from 'Player/MessageDistributor/managers/LocalStream';
 import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream';
-import { Tooltip } from 'react-tippy';
 import { toast } from 'react-toastify';
 import { confirm } from 'UI';
 import stl from './AassistActions.module.css';
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index a61b06a5e..e610d040c 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
-import { Button, PageTitle, Loader } from 'UI';
+import { Button, PageTitle, Loader, Tooltip, Popover } from 'UI';
 import { withSiteId } from 'App/routes';
 import withModal from 'App/components/Modal/withModal';
 import DashboardWidgetGrid from '../DashboardWidgetGrid';
@@ -15,7 +15,6 @@ import withPageTitle from 'HOCs/withPageTitle';
 import withReport from 'App/components/hocs/withReport';
 import DashboardOptions from '../DashboardOptions';
 import SelectDateRange from 'Shared/SelectDateRange';
-import { Tooltip } from 'react-tippy';
 import Breadcrumb from 'Shared/Breadcrumb';
 import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
@@ -126,24 +125,25 @@ function DashboardView(props: Props) {
             <PageTitle
               title={
                 // @ts-ignore
-                <Tooltip delay={100} arrow title="Double click to rename">
+                <Tooltip title="Double click to rename">
                   {dashboard?.name}
                 </Tooltip>
               }
               onDoubleClick={() => onEdit(true)}
               className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
               actionButton={
-                <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
-                  <Tooltip
-                    open={showTooltip}
-                    interactive
-                    useContext
+                // <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
+                  <Popover
+                    // open={showTooltip}
+                    // interactive
+                    // useContext
                     // @ts-ignore
-                    theme="nopadding"
-                    hideDelay={0}
-                    duration={0}
-                    distance={20}
-                    html={
+                    // theme="nopadding"
+                    // hideDelay={0}
+                    // duration={0}
+                    // distance={20}
+                    placement="left"
+                    render={() => showTooltip && (
                       <div style={{ padding: 0 }}>
                         <AddMetricContainer
                           onAction={() => setShowTooltip(false)}
@@ -151,13 +151,13 @@ function DashboardView(props: Props) {
                           siteId={siteId}
                         />
                       </div>
-                    }
+                    )}
                   >
                     <Button variant="primary" onClick={() => setShowTooltip(true)}>
                       Add Metric
                     </Button>
-                  </Tooltip>
-                </OutsideClickDetectingDiv>
+                  </Popover>
+                // </OutsideClickDetectingDiv>
               }
             />
           </div>
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 9862739d8..38b30af7b 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Icon, Link } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { checkForRecent } from 'App/date';
-import { Tooltip } from 'react-tippy'
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
 
@@ -24,9 +23,7 @@ function MetricTypeIcon({ type }: any) {
 
     return (
         <Tooltip
-            html={<div className="capitalize">{type}</div>}
-            position="top"
-            arrow
+            title={<div className="capitalize">{type}</div>}
         >
             <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
                 <Icon name={getIcon()} size="16" color="tealx" />
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
index 998aaece8..3f352165a 100644
--- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import cn from 'classnames';
-import { Tooltip } from 'react-tippy';
 
 interface Props {
   name: string;
@@ -65,7 +64,7 @@ function WidgetName(props: Props) {
         />
       ) : (
         // @ts-ignore
-        <Tooltip delay={100} arrow title="Double click to rename" disabled={!canEdit}>
+        <Tooltip title="Double click to rename" disabled={!canEdit}>
           <div 
             onDoubleClick={() => setEditing(true)} 
             className={
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index a09e48777..5702df66d 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import FunnelStepText from './FunnelStepText';
-import { Icon, Popup } from 'UI';
-import { Tooltip } from 'react-tippy';
+import { Icon, Tooltip } from 'UI';
 
 interface Props {
   filter: any;
diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index 8ce20e11c..a171c1fc4 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -1,77 +1,83 @@
-import React, { useEffect } from 'react'
-import { connect } from 'react-redux'
-import { setAutoplayValues } from 'Duck/sessions'
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { setAutoplayValues } from 'Duck/sessions';
 import { session as sessionRoute } from 'App/routes';
-import { Link, Icon, Toggler } from 'UI';
+import { Link, Icon, Toggler, Tooltip } from 'UI';
 import { connectPlayer } from 'Player/store';
 import { Controls as PlayerControls } from 'Player';
-import { Tooltip } from 'react-tippy';
 import cn from 'classnames';
 
 function Autoplay(props) {
-  const { previousId, nextId, autoplay, disabled } = props
+  const { previousId, nextId, autoplay, disabled } = props;
 
   useEffect(() => {
-    props.setAutoplayValues()
-  }, [])
+    props.setAutoplayValues();
+  }, []);
 
   return (
     <div className="flex items-center">
-      <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2">
-        <Toggler
-          name="sessionsLive"
-          onChange={ props.toggleAutoplay }
-          checked={ autoplay }
-        />
+      <div
+        onClick={props.toggleAutoplay}
+        className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
+      >
+        <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
         <span className="ml-2">Auto-Play</span>
       </div>
 
       <Tooltip
-        delay={0}
-        arrow
-        animation="fade"
-        position="bottom center"
-        title="Play Previous Session"
+        placement="bottom"
+        title={<div className="whitespace-nowrap">Play Previous Session</div>}
         disabled={!previousId}
-        className={cn(
-          "p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
-          previousId && 'cursor-pointer',
-          !disabled && nextId&& 'hover:bg-bg-blue'
-        )}
       >
-        <Link to={ sessionRoute(previousId) } disabled={!previousId}>
-          <Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
+        <Link to={sessionRoute(previousId)} disabled={!previousId}>
+          <div
+            className={cn(
+              'p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium',
+              previousId && 'cursor-pointer',
+              !disabled && nextId && 'hover:bg-bg-blue'
+            )}
+          >
+            <Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
+          </div>
         </Link>
       </Tooltip>
 
       <Tooltip
-        delay={0}
-        arrow
-        animation="fade"
-        position="bottom center"
-        title="Play Next Session"
+        placement="bottom"
+        title={<div className="whitespace-nowrap">Play Next Session</div>}
         disabled={!nextId}
-        className={cn(
-          "p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium",
-          nextId && 'cursor-pointer',
-          !disabled && nextId && 'hover:bg-bg-blue',
-        )}
       >
-        <Link to={ sessionRoute(nextId) } disabled={!nextId} >
-          <Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
+        <Link to={sessionRoute(nextId)} disabled={!nextId}>
+          <div
+            className={cn(
+              'p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium',
+              nextId && 'cursor-pointer',
+              !disabled && nextId && 'hover:bg-bg-blue'
+            )}
+          >
+            <Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
+          </div>
         </Link>
       </Tooltip>
     </div>
-  )
+  );
 }
 
-const connectAutoplay = connect(state => ({
-  previousId: state.getIn([ 'sessions', 'previousId' ]),
-  nextId: state.getIn([ 'sessions', 'nextId' ]),
-}), { setAutoplayValues })
+const connectAutoplay = connect(
+  (state) => ({
+    previousId: state.getIn(['sessions', 'previousId']),
+    nextId: state.getIn(['sessions', 'nextId']),
+  }),
+  { setAutoplayValues }
+);
 
-export default connectAutoplay(connectPlayer(state => ({
-  autoplay: state.autoplay,
-}), {
-  toggleAutoplay: PlayerControls.toggleAutoplay
-})(Autoplay))
+export default connectAutoplay(
+  connectPlayer(
+    (state) => ({
+      autoplay: state.autoplay,
+    }),
+    {
+      toggleAutoplay: PlayerControls.toggleAutoplay,
+    }
+  )(Autoplay)
+);
diff --git a/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx b/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx
index 36d9c9877..6e00d397a 100644
--- a/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx
+++ b/frontend/app/components/Session_/BugReport/components/ReportTitle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import cn from 'classnames';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 function ReportTitle() {
   const { bugReportStore } = useStore();
@@ -45,7 +45,7 @@ function ReportTitle() {
         />
       ) : (
         // @ts-ignore
-        <Tooltip delay={100} arrow title="Double click to rename">
+        <Tooltip title="Double click to rename">
           <div
             onDoubleClick={toggleEdit}
             className={cn(
diff --git a/frontend/app/components/Session_/BugReport/components/Session.tsx b/frontend/app/components/Session_/BugReport/components/Session.tsx
index cfa35d91d..11dfffbfb 100644
--- a/frontend/app/components/Session_/BugReport/components/Session.tsx
+++ b/frontend/app/components/Session_/BugReport/components/Session.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import SectionTitle from './SectionTitle';
-import { Icon } from 'UI'
-import { Tooltip } from 'react-tippy'
+import { Icon, Tooltip } from 'UI'
 
 export default function Session({ user, sessionUrl }: { user: string, sessionUrl: string }) {
 
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
index 65bccd397..fb0dc5b98 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, ItemMenu } from 'UI';
+import { Icon, ItemMenu, Tooltip } from 'UI';
 import { observer } from 'mobx-react-lite';
 import { Step as IStep } from '../../types';
 const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'Visited' };
@@ -7,7 +7,6 @@ import { useStore } from 'App/mstore';
 import cn from 'classnames';
 import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems';
 import { durationFromMs } from 'App/date';
-import { Tooltip } from 'react-tippy';
 
 const SUBSTEP = {
   network: NetworkComp,
@@ -80,7 +79,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
                 />
               </Tooltip>
               {/* @ts-ignore */}
-              <Tooltip title="Delete Step">
+              <Tooltip title="Delete Step" className="whitespace-nowrap">
                 <div onClick={() => bugReportStore.removeStep(step)}>
                   <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
                 </div>
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
index 85940e7c9..543d2c803 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy'
+import { Tooltip } from 'UI'
 
 interface Props {
   pickRadius: number;
@@ -11,7 +11,7 @@ function StepRadius({ pickRadius, setRadius }: Props) {
     <div className="w-full flex items-center gap-4">
       <div className="border-b border-dotted border-gray-medium cursor-help">
         {/* @ts-ignore */}
-        <Tooltip html={<span>Closest step to the selected timestamp &plusmn; {pickRadius}.</span>}>
+        <Tooltip title={<span>Closest step to the selected timestamp &plusmn; {pickRadius}.</span>}>
         <span>&plusmn; {pickRadius}</span>
         </Tooltip>
       </div>
diff --git a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
index 61684db5d..3d3f2b550 100644
--- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
@@ -5,11 +5,10 @@ import { countries } from 'App/constants';
 import { useStore } from 'App/mstore';
 import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames';
 import { formatTimeOrDate } from 'App/date';
-import { Avatar, TextEllipsis, CountryFlag, Icon } from 'UI';
+import { Avatar, TextEllipsis, CountryFlag, Icon, Tooltip } from 'UI';
 import cn from 'classnames';
 import { withRequest } from 'HOCs';
 import SessionInfoItem from '../../SessionInfoItem';
-import { Tooltip } from 'react-tippy';
 import { useModal } from 'App/components/Modal';
 import UserSessionsModal from 'Shared/UserSessionsModal';
 
@@ -77,12 +76,13 @@ function UserCard({ className, request, session, width, height, similarSessions,
                         </span>
                         <span className="mx-1 font-bold text-xl">&#183;</span>
                         <Tooltip
-                            theme="light"
+                            // theme="light"
                             delay={0}
-                            hideOnClick="persistent"
-                            arrow
-                            interactive
-                            html={
+                            // hideOnClick="persistent"
+                            // arrow
+                            // interactive
+                            className="!bg-white shadow border !color-gray-dark"
+                            title={
                                 <div className="text-left">
                                     <SessionInfoItem
                                         comp={<CountryFlag country={userCountry} />}
@@ -100,9 +100,9 @@ function UserCard({ className, request, session, width, height, similarSessions,
                                     {revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
                                 </div>
                             }
-                            position="bottom center"
-                            hoverable
-                            disabled={false}
+                            position="bottom"
+                            // hoverable
+                            // disabled={false}
                             on="hover"
                         >
                             <span className="color-teal cursor-pointer">More</span>
diff --git a/frontend/app/components/Session_/Issues/Issues.js b/frontend/app/components/Session_/Issues/Issues.js
index 469666083..a7a0c6528 100644
--- a/frontend/app/components/Session_/Issues/Issues.js
+++ b/frontend/app/components/Session_/Issues/Issues.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Popup, Button, Icon } from 'UI';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import { Icon, Popover } from 'UI';
 import IssuesModal from './IssuesModal';
 import { fetchProjects, fetchMeta } from 'Duck/assignments';
 import stl from './issues.module.css';
-import { Tooltip } from 'react-tippy';
 
 @connect(
   (state) => ({
@@ -71,32 +69,25 @@ class Issues extends React.Component {
     return (
       <div className="relative h-full w-full p-3">
         <div className={stl.buttonWrapper}>
-          <OutsideClickDetectingDiv onClickOutside={this.closeModal}>
-            <Tooltip
-              open={this.state.showModal}
-              position="bottom"
-              interactive
-              trigger="click"
-              unmountHTMLWhenHide
-              useContext
-              theme="light"
-              arrow
-              html={
-                <div>
-                  <IssuesModal
-                    provider={provider}
-                    sessionId={sessionId}
-                    closeHandler={this.closeModal}
-                  />
-                </div>
-              }
+          <Popover
+            render={({ close }) => (
+              <div>
+                <IssuesModal
+                  provider={provider}
+                  sessionId={sessionId}
+                  closeHandler={close}
+                />
+              </div>
+            )}
+          >
+            <div
+              className="flex items-center"
+              disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
             >
-              <div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
-                    <Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
-                    <span className="ml-2">Create Issue</span>
-                </div>
-            </Tooltip>
-          </OutsideClickDetectingDiv>
+              <Icon name={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} size="16" />
+              <span className="ml-2">Create Issue</span>
+            </div>
+          </Popover>
         </div>
       </div>
     );
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index 3d5f096dc..c01f05008 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -10,7 +10,7 @@ import {
 import LiveTag from 'Shared/LiveTag';
 import { jumpToLive } from 'Player';
 
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { toggleInspectorMode } from 'Player';
 import {
   fullscreenOn,
@@ -33,7 +33,6 @@ import ControlButton from './ControlButton';
 import PlayerControls from './components/PlayerControls';
 
 import styles from './controls.module.css';
-import { Tooltip } from 'react-tippy';
 import XRayButton from 'Shared/XRayButton';
 
 const SKIP_INTERVALS = {
@@ -227,11 +226,7 @@ export default class Controls extends React.Component {
 
     return (
       <Tooltip
-        delay={0}
-        position="top"
         title={label}
-        interactive
-        hideOnClick="persistent"
         className="mr-4"
       >
         <div
diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
index 326fa14ad..b28cd1990 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy';
-import { Icon } from 'UI';
+import { Icon, Tooltip, Popover } from 'UI';
 import cn from 'classnames';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import { ReduxTime } from '../Time';
@@ -49,7 +48,7 @@ function PlayerControls(props: Props) {
   const speedRef = React.useRef(null);
   const arrowBackRef = React.useRef(null);
   const arrowForwardRef = React.useRef(null);
-  const skipRef = React.useRef<HTMLDivElement>()
+  const skipRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
     const handleKeyboard = (e: KeyboardEvent) => {
@@ -77,11 +76,12 @@ function PlayerControls(props: Props) {
     setShowTooltip(!showTooltip);
   };
   const handleClickOutside = () => {
-    setShowTooltip(false)
-  }
+    setShowTooltip(false);
+  };
   return (
     <div className="flex items-center">
       {playButton}
+      <div className="mx-1" />
       {!live && (
         <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
           {/* @ts-ignore */}
@@ -94,7 +94,7 @@ function PlayerControls(props: Props) {
 
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
         {/* @ts-ignore */}
-        <Tooltip title="Rewind 10s" delay={0} position="top">
+        <Tooltip title="Rewind 10s" position="top">
           <button
             ref={arrowBackRef}
             className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
@@ -109,17 +109,17 @@ function PlayerControls(props: Props) {
           </button>
         </Tooltip>
         <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
-        <OutsideClickDetectingDiv onClickOutside={handleClickOutside}>
-          <Tooltip
-            open={showTooltip}
-            interactive
-            // @ts-ignore
-            theme="nopadding"
-            animation="none"
-            duration={0}
-            className="cursor-pointer select-none"
-            distance={20}
-            html={
+          <OutsideClickDetectingDiv onClickOutside={handleClickOutside}>
+            <Popover
+              // open={showTooltip}
+              // interactive
+              // @ts-ignore
+              theme="nopadding"
+              animation="none"
+              duration={0}
+              className="cursor-pointer select-none"
+              distance={20}
+              render={() => (
                 <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
                   <div className="font-semibold py-2 px-4 w-full text-left">
                     Jump <span className="text-disabled-text">(Secs)</span>
@@ -141,19 +141,19 @@ function PlayerControls(props: Props) {
                     </div>
                   ))}
                 </div>
-            }
-          >
-            <div onClick={toggleTooltip} ref={skipRef}>
-              {/* @ts-ignore */}
-              <Tooltip disabled={showTooltip} title="Set default skip duration">
-                {currentInterval}s
-              </Tooltip>
-            </div>
-          </Tooltip>
+              )}
+            >
+              <div onClick={toggleTooltip} ref={skipRef}>
+                {/* @ts-ignore */}
+                <Tooltip disabled={showTooltip} title="Set default skip duration">
+                  {currentInterval}s
+                </Tooltip>
+              </div>
+            </Popover>
           </OutsideClickDetectingDiv>
         </div>
         {/* @ts-ignore */}
-        <Tooltip title="Forward 10s" delay={0} position="top">
+        <Tooltip title="Forward 10s" position="top">
           <button
             ref={arrowForwardRef}
             className="h-full hover:border-active-blue-border focus:border focus:border-blue  border-borderColor-transparent"
@@ -173,7 +173,7 @@ function PlayerControls(props: Props) {
         <div className="flex items-center">
           <div className="mx-2" />
           {/* @ts-ignore */}
-          <Tooltip title="Control play back speed (↑↓)" delay={0} position="top">
+          <Tooltip title="Control play back speed (↑↓)" placement="top">
             <button
               ref={speedRef}
               className={cn(styles.speedButton, 'focus:border focus:border-blue')}
@@ -185,10 +185,10 @@ function PlayerControls(props: Props) {
           </Tooltip>
           <div className="mx-2" />
           <button
-            className={cn(
-              styles.skipIntervalButton,
-              { [styles.withCheckIcon]: skip, [styles.active]: skip },
-            )}
+            className={cn(styles.skipIntervalButton, {
+              [styles.withCheckIcon]: skip,
+              [styles.active]: skip,
+            })}
             onClick={toggleSkip}
             data-disabled={disabled}
           >
diff --git a/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx b/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx
index cc8f3fd1f..8a868f90a 100644
--- a/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx
@@ -1,10 +1,9 @@
-//@ts-nocheck
 import React from 'react';
 import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen';
 import cn from 'classnames';
 import stl from './Marker.module.css';
 import { activeTarget } from 'Player';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 interface Props {
   target: MarkedTarget;
@@ -17,23 +16,17 @@ export default function Marker({ target, active }: Props) {
     left: `${target.boundingRect.left}px`,
     width: `${target.boundingRect.width}px`,
     height: `${target.boundingRect.height}px`,
-  }
+  };
   return (
-    <div className={cn(stl.marker, { [stl.active]: active })} style={style} onClick={() => activeTarget(target.index)}>
+    <div
+      className={cn(stl.marker, { [stl.active]: active })}
+      style={style}
+      onClick={() => activeTarget(target.index)}
+    >
       <div className={stl.index}>{target.index + 1}</div>
-      {/* @ts-expect-error Tooltip doesn't have children property */}
-      <Tooltip
-        open={active}
-        arrow
-        sticky
-        distance={15}
-        html={(
-          <div>{target.count} Clicks</div>
-        )}
-        trigger="mouseenter"
-      >
+      <Tooltip open={active} delay={0} title={<div>{target.count} Clicks</div>}>
         <div className="absolute inset-0"></div>
       </Tooltip>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx b/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
index e4e481067..b29730215 100644
--- a/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
+++ b/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
@@ -12,7 +12,7 @@ interface Props {
 export default function SessionInfoItem(props: Props) {
     const { label, icon, value, comp, isLast = false } = props
     return (
-        <div className={cn("flex items-center w-full py-2", {'border-b' : !isLast})}>
+        <div className={cn("flex items-center w-full py-2 color-gray-dark", {'border-b' : !isLast})}>
             <div className="px-2 capitalize" style={{ width: '30px' }}>
                 { icon && <Icon name={icon} size="16" /> }
                 { comp && comp }
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js
index f159ab8ce..ea8e7f538 100644
--- a/frontend/app/components/Session_/Storage/Storage.js
+++ b/frontend/app/components/Session_/Storage/Storage.js
@@ -8,7 +8,7 @@ import {
   selectStorageListNow,
   selectStorageList,
 } from 'Player/store';
-import { JSONTree, NoContent } from 'UI';
+import { JSONTree, NoContent, Tooltip } from 'UI';
 import { formatMs } from 'App/date';
 import { diff } from 'deep-diff';
 import { jump } from 'Player';
@@ -17,7 +17,6 @@ import BottomBlock from '../BottomBlock/index';
 import DiffRow from './DiffRow';
 import cn from 'classnames';
 import stl from './storage.module.css';
-import { Tooltip } from 'react-tippy'
 
 // const STATE = 'STATE';
 // const DIFF = 'DIFF';
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 395ef88fd..839bd94d9 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import Autoplay from './Autoplay';
 import Bookmark from 'Shared/Bookmark';
 import SharePopup from '../shared/SharePopup/SharePopup';
 import copy from 'copy-to-clipboard';
-import { Tooltip } from 'react-tippy';
 import Issues from './Issues/Issues';
 import NotePopup from './components/NotePopup';
 import { connectPlayer, pause } from 'Player';
@@ -46,14 +45,7 @@ function SubHeader(props) {
           }}
         >
           <Icon size="20" name="event/link" className="mr-1" />
-          <Tooltip
-            delay={0}
-            arrow
-            animation="fade"
-            hideOnClick={false}
-            position="bottom center"
-            title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}
-          >
+          <Tooltip title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}>
             {location}
           </Tooltip>
         </div>
diff --git a/frontend/app/components/hocs/withCopy.tsx b/frontend/app/components/hocs/withCopy.tsx
index 2b3a9d541..702ddae54 100644
--- a/frontend/app/components/hocs/withCopy.tsx
+++ b/frontend/app/components/hocs/withCopy.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import copy from 'copy-to-clipboard';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 const withCopy = (WrappedComponent: React.ComponentType) => {
     const ComponentWithCopy = (props: any) => {
@@ -15,7 +15,7 @@ const withCopy = (WrappedComponent: React.ComponentType) => {
         };
         return (
             <div onClick={() => copyToClipboard(value)} className="w-fit">
-                <Tooltip delay={0} arrow animation="fade" hideOnClick={false} title={copied ? tooltip : 'Click to copy'}>
+                <Tooltip title={copied ? tooltip : 'Click to copy'}>
                     <WrappedComponent {...props} copyToClipboard={copyToClipboard} />
                 </Tooltip>
             </div>
diff --git a/frontend/app/components/shared/CopyText/CopyText.tsx b/frontend/app/components/shared/CopyText/CopyText.tsx
index 6d505b58b..635865d0d 100644
--- a/frontend/app/components/shared/CopyText/CopyText.tsx
+++ b/frontend/app/components/shared/CopyText/CopyText.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 import copy from 'copy-to-clipboard';
 
 interface Props {
@@ -17,14 +17,7 @@ function CopyText(props: Props) {
     setTimeout(() => setIsCopied(false), 5000);
   };
   return (
-    // @ts-ignore
-    <Tooltip
-      delay={0}
-      arrow
-      animation="fade"
-      hideOnClick={false}
-      title={isCopied ? afterLabel : label}
-    >
+    <Tooltip delay={0} title={isCopied ? afterLabel : label}>
       <span onClick={onClick}>{children}</span>
     </Tooltip>
   );
diff --git a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
index 4f6e4907c..014c4321d 100644
--- a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
+++ b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 export const FEATURE_KEYS = {
   XRAY: 'featureViewed'
@@ -16,7 +16,7 @@ export default function GuidePopup({ children, title, description }: IProps) {
   return (
     // @ts-ignore
     <Tooltip
-      html={
+      title={
         <div>
           <div className="font-bold">
             {title}
@@ -26,10 +26,10 @@ export default function GuidePopup({ children, title, description }: IProps) {
           </div>
         </div>
       }
-      distance={30}
-      theme={'light'}
+      // distance={30}
+      // theme={'light'}
       open={true}
-      arrow={true}
+      // arrow={true}
     >
       {children}
     </Tooltip>
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
index ac67f4158..02fdd236e 100644
--- a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
@@ -2,7 +2,7 @@ import React, { MouseEvent, useState } from 'react';
 import cn from 'classnames';
 import { Icon, Input } from 'UI';
 import { List } from 'immutable';
-import { confirm, Popup } from 'UI';
+import { confirm, Tooltip } from 'UI';
 import { applySavedSearch, remove, editSavedSearch } from 'Duck/search';
 import { connect } from 'react-redux';
 import { useModal } from 'App/components/Modal';
@@ -18,9 +18,10 @@ interface ITooltipIcon {
 function TooltipIcon(props: ITooltipIcon) {
     return (
         <div onClick={(e) => props.onClick(e)}>
-            <Popup content={props.title} hideOnClick={true}>
+            <Tooltip title={props.title}>
+                {/* @ts-ignore */}
                 <Icon size="16" name={props.name} color="main" />
-            </Popup>
+            </Tooltip>
         </div>
     );
 }
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 9acdc3a7c..84da34839 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { CountryFlag, Avatar, TextEllipsis, Label, Icon } from 'UI';
+import { CountryFlag, Avatar, TextEllipsis, Label, Icon, Tooltip } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { durationFormatted, formatTimeOrDate } from 'App/date';
@@ -12,7 +12,6 @@ import PlayLink from './PlayLink';
 import ErrorBars from './ErrorBars';
 import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes';
 import { capitalize } from 'App/utils';
-import { Tooltip } from 'react-tippy';
 
 const ASSIST_ROUTE = assistRoute();
 const ASSIST_LIVE_SESSION = liveSession();
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
index 8f080cbaf..428b8f153 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
@@ -2,7 +2,6 @@ import { useModal } from 'App/components/Modal';
 import React from 'react';
 import SessionSettings from 'Shared/SessionSettings';
 import { Button, Tooltip } from 'UI';
-// import { Tooltip } from 'react-tippy';
 
 function SessionSettingButton(props: any) {
     const { showModal } = useModal();
@@ -13,8 +12,7 @@ function SessionSettingButton(props: any) {
 
     return (
         <div className="cursor-pointer ml-4" onClick={handleClick}>
-            {/* @ts-ignore */}
-            <Tooltip tooltip="Session Settings">
+            <Tooltip title="Session Settings">
                 <Button icon="sliders" variant="text" />
             </Tooltip>
         </div>
diff --git a/frontend/app/components/shared/XRayButton/XRayButton.tsx b/frontend/app/components/shared/XRayButton/XRayButton.tsx
index 87aee92e0..6a2a73dd7 100644
--- a/frontend/app/components/shared/XRayButton/XRayButton.tsx
+++ b/frontend/app/components/shared/XRayButton/XRayButton.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import stl from './xrayButton.module.css';
 import cn from 'classnames';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
 import { Controls as Player } from 'Player';
 import { INDEXES } from 'App/constants/zindex';
@@ -63,14 +63,14 @@ function XRayButton(props: Props) {
             ></div>
           </GuidePopup>
         ) : (
-          <Popup content="Get a quick overview on the issues in this session." disabled={isActive}>
+          <Tooltip title="Get a quick overview on the issues in this session." disabled={isActive}>
             <button
               className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
               onClick={onClick}
             >
               <span className="z-1">X-RAY</span>
             </button>
-          </Popup>
+          </Tooltip>
         )}
       </div>
     </>
diff --git a/frontend/app/components/ui/Popover/Popover.tsx b/frontend/app/components/ui/Popover/Popover.tsx
index 749d88587..9f64af9f6 100644
--- a/frontend/app/components/ui/Popover/Popover.tsx
+++ b/frontend/app/components/ui/Popover/Popover.tsx
@@ -14,6 +14,7 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react-dom-interactions';
 import { mergeRefs } from 'react-merge-refs';
+import { INDEXES } from 'App/constants/zindex';
 
 interface Props {
   render: (data: { close: () => void; labelId: string; descriptionId: string }) => React.ReactNode;
@@ -62,6 +63,7 @@ const Popover = ({ children, render, placement }: Props) => {
               position: strategy,
               top: y ?? 0,
               left: x ?? 0,
+              zIndex: INDEXES.TOOLTIP
             }}
             aria-labelledby={labelId}
             aria-describedby={descriptionId}
diff --git a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
index 334e924b8..6713d487b 100644
--- a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
@@ -14,16 +14,27 @@ import {
   FloatingPortal,
 } from '@floating-ui/react-dom-interactions';
 import type { Placement } from '@floating-ui/react-dom-interactions';
+import { INDEXES } from 'App/constants/zindex';
 
 export function useTooltipState({
+  disabled = false,
   initialOpen = false,
   placement = 'top',
+  delay,
 }: {
+  disabled?: boolean;
   initialOpen?: boolean;
   placement?: Placement;
+  delay?: number;
 } = {}) {
   const [open, setOpen] = React.useState(initialOpen);
 
+  React.useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+    }
+  }, [disabled]);
+
   const data = useFloating({
     placement,
     open,
@@ -34,7 +45,7 @@ export function useTooltipState({
 
   const context = data.context;
 
-  const hover = useHover(context, { move: false, restMs: 500 });
+  const hover = useHover(context, { move: false, restMs: delay, enabled: !disabled });
   const focus = useFocus(context);
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: 'tooltip' });
@@ -99,6 +110,7 @@ export const FloatingTooltip = React.forwardRef<
             left: state.x ?? 0,
             visibility: state.x == null ? 'hidden' : 'visible',
             transition: 'opacity 1s',
+            zIndex: INDEXES.TOOLTIP,
             ...props.style,
           }}
           {...state.getFloatingProps(props)}
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.tsx b/frontend/app/components/ui/Tooltip/Tooltip.tsx
index e10015754..777f52d9a 100644
--- a/frontend/app/components/ui/Tooltip/Tooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/Tooltip.tsx
@@ -1,18 +1,28 @@
 import React from 'react';
 import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
+import type { Placement } from '@floating-ui/react-dom-interactions';
+import cn from 'classnames';
 
 interface Props {
-  // position: string;
-  tooltip: string;
+  title?: any;
   children: any;
+  disabled?: boolean;
+  open?: boolean;
+  placement?: Placement;
+  className?: string;
+  delay?: number;
 }
 function Tooltip(props: Props) {
-  const state = useTooltipState();
+  const { title, disabled = false, open = false, placement, className = '', delay = 500 } = props;
+  const state = useTooltipState({ disabled: disabled, placement, delay });
   return (
     <>
       <TooltipAnchor state={state}>{props.children}</TooltipAnchor>
-      <FloatingTooltip state={state} className="bg-gray-darkest color-white rounded py-1 px-2 animate-fade">
-        {props.tooltip}
+      <FloatingTooltip
+        state={state}
+        className={cn('bg-gray-darkest color-white rounded py-1 px-2 animate-fade', className)}
+      >
+        {title}
       </FloatingTooltip>
     </>
   );
diff --git a/frontend/app/constants/zindex.ts b/frontend/app/constants/zindex.ts
index f5026ea85..f70b77d56 100644
--- a/frontend/app/constants/zindex.ts
+++ b/frontend/app/constants/zindex.ts
@@ -2,11 +2,12 @@ export const INDEXES = {
   PLAYER_REQUEST_WINDOW: 10,
   BUG_REPORT_PICKER: 19,
   BUG_REPORT: 20,
-  POPUP_GUIDE_BG: 99998,
-  POPUP_GUIDE_BTN: 99999,
-}
+  POPUP_GUIDE_BG: 99997,
+  POPUP_GUIDE_BTN: 99998,
+  TOOLTIP: 99999,
+};
 
 export const getHighest = () => {
-  const allIndexes = Object.values(INDEXES)
-  return allIndexes[allIndexes.length - 1] + 1
-}
+  const allIndexes = Object.values(INDEXES);
+  return allIndexes[allIndexes.length - 1] + 1;
+};

From 815c1c35a846b688b50be1ca9ab7bc6288f006df Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 14 Nov 2022 15:33:37 +0100
Subject: [PATCH 03/21] change(ui) - tooltip replacement

---
 frontend/app/components/Session_/Autoplay/Autoplay.js      | 2 +-
 frontend/app/components/Session_/Subheader.js              | 2 +-
 frontend/app/components/shared/SessionItem/SessionItem.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index a171c1fc4..4791b70b5 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -21,7 +21,7 @@ function Autoplay(props) {
         className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
       >
         <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
-        <span className="ml-2">Auto-Play</span>
+        <span className="ml-2 whitespace-nowrap">Auto-Play</span>
       </div>
 
       <Tooltip
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 223f0412b..a1ee8e48d 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Tooltip } from 'UI';
+import { Icon, Tooltip, Button } from 'UI';
 import Autoplay from './Autoplay';
 import Bookmark from 'Shared/Bookmark';
 import SharePopup from '../shared/SharePopup/SharePopup';
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 84da34839..0288461fa 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -131,8 +131,8 @@ function SessionItem(props: RouteComponentProps & Props) {
                     )}
                     <div style={{ width: compact ? '40%' : '20%' }} className="px-2 flex flex-col justify-between">
                         <div>
-                            {/* @ts-ignore */}
                             <Tooltip
+                                delay={0}
                                 title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
                                 className="w-fit !block"
                             >

From f890015e553d2d1af8da520a0aa51b912230c4ad Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 14 Nov 2022 15:38:36 +0100
Subject: [PATCH 04/21] change(ui) - tooltip replacement

---
 .../components/Announcements/Announcements.js |   6 +-
 .../Client/Integrations/IntegrationItem.tsx   |  13 +-
 .../Client/Integrations/Integrations.js_      | 633 ------------------
 3 files changed, 7 insertions(+), 645 deletions(-)
 delete mode 100644 frontend/app/components/Client/Integrations/Integrations.js_

diff --git a/frontend/app/components/Announcements/Announcements.js b/frontend/app/components/Announcements/Announcements.js
index b17e44982..55306e643 100644
--- a/frontend/app/components/Announcements/Announcements.js
+++ b/frontend/app/components/Announcements/Announcements.js
@@ -2,7 +2,7 @@ import React from 'react';
 import stl from './announcements.module.css';
 import ListItem from './ListItem';
 import { connect } from 'react-redux';
-import { SlideModal, Icon, NoContent, Popup } from 'UI';
+import { SlideModal, Icon, NoContent, Tooltip } from 'UI';
 import { fetchList, setLastRead } from 'Duck/announcements';
 import withToggle from 'Components/hocs/withToggle';
 import { withRouter } from 'react-router-dom';
@@ -45,14 +45,14 @@ class Announcements extends React.Component {
 
     return (
       <div>
-        <Popup content={ `Announcements` } >
+        <Tooltip content={ `Announcements` } >
           <div className={ stl.button } onClick={ this.toggleModal } data-active={ visible }>
             <div className={ stl.counter } data-hidden={ unReadNotificationsCount === 0 }>
               { unReadNotificationsCount }
             </div>
             <Icon name="bullhorn" size="18" />
           </div>
-        </Popup>
+        </Tooltip>
         
         <SlideModal
           title="Announcements"
diff --git a/frontend/app/components/Client/Integrations/IntegrationItem.tsx b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
index ec730e7c1..d04ac3b7e 100644
--- a/frontend/app/components/Client/Integrations/IntegrationItem.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import stl from './integrationItem.module.css';
 import { connect } from 'react-redux';
 
@@ -17,9 +17,9 @@ const IntegrationItem = (props: Props) => {
         <div className={cn(stl.wrapper, 'mb-4', { [stl.integrated]: integrated })} onClick={(e) => props.onClick(e)}>
             {integrated && (
                 <div className="m-2 absolute right-0 top-0 h-4 w-4 rounded-full bg-teal flex items-center justify-center">
-                    <Popup content="Integrated" delay={0}>
+                    <Tooltip title="Integrated" delay={0}>
                         <Icon name="check" size="14" color="white" />
-                    </Popup>
+                    </Tooltip>
                 </div>
             )}
             {integration.icon.length ? <img className="h-12 w-12" src={'/assets/' + integration.icon + '.svg'} alt="integration" /> : (
@@ -33,9 +33,4 @@ const IntegrationItem = (props: Props) => {
     );
 };
 
-export default connect((state: any, props: Props) => {
-    const list = state.getIn([props.integration.slug, 'list']) || [];
-    return {
-        // integrated: props.integration.slug === 'issues' ? !!(list.first() && list.first().token) : list.size > 0,
-    };
-})(IntegrationItem);
+export default IntegrationItem;
diff --git a/frontend/app/components/Client/Integrations/Integrations.js_ b/frontend/app/components/Client/Integrations/Integrations.js_
deleted file mode 100644
index b4a421980..000000000
--- a/frontend/app/components/Client/Integrations/Integrations.js_
+++ /dev/null
@@ -1,633 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import withPageTitle from "HOCs/withPageTitle";
-import { Loader, IconButton, SlideModal } from "UI";
-import { fetchList as fetchListSlack } from "Duck/integrations/slack";
-import { remove as removeIntegrationConfig } from "Duck/integrations/actions";
-import { fetchList, init } from "Duck/integrations/actions";
-import cn from "classnames";
-
-import IntegrationItem from "./IntegrationItem";
-import SentryForm from "./SentryForm";
-import GithubForm from "./GithubForm";
-import SlackForm from "./SlackForm";
-import DatadogForm from "./DatadogForm";
-import StackdriverForm from "./StackdriverForm";
-import RollbarForm from "./RollbarForm";
-import NewrelicForm from "./NewrelicForm";
-import BugsnagForm from "./BugsnagForm";
-import CloudwatchForm from "./CloudwatchForm";
-import ElasticsearchForm from "./ElasticsearchForm";
-import SumoLogicForm from "./SumoLogicForm";
-import JiraForm from "./JiraForm";
-import styles from "./integrations.module.css";
-import ReduxDoc from "./ReduxDoc";
-import VueDoc from "./VueDoc";
-import GraphQLDoc from "./GraphQLDoc";
-import NgRxDoc from "./NgRxDoc/NgRxDoc";
-import SlackAddForm from "./SlackAddForm";
-import FetchDoc from "./FetchDoc";
-import MobxDoc from "./MobxDoc";
-import ProfilerDoc from "./ProfilerDoc";
-import AssistDoc from "./AssistDoc";
-import AxiosDoc from "./AxiosDoc/AxiosDoc";
-
-const NONE = -1;
-const SENTRY = 0;
-const DATADOG = 1;
-const STACKDRIVER = 2;
-const ROLLBAR = 3;
-const NEWRELIC = 4;
-const BUGSNAG = 5;
-const CLOUDWATCH = 6;
-const ELASTICSEARCH = 7;
-const SUMOLOGIC = 8;
-const JIRA = 9;
-const GITHUB = 10;
-const REDUX = 11;
-const VUE = 12;
-const GRAPHQL = 13;
-const NGRX = 14;
-const SLACK = 15;
-const FETCH = 16;
-const MOBX = 17;
-const PROFILER = 18;
-const ASSIST = 19;
-const AXIOS = 20;
-
-const TITLE = {
-    [SENTRY]: "Sentry",
-    [SLACK]: "Slack",
-    [DATADOG]: "Datadog",
-    [STACKDRIVER]: "Stackdriver",
-    [ROLLBAR]: "Rollbar",
-    [NEWRELIC]: "New Relic",
-    [BUGSNAG]: "Bugsnag",
-    [CLOUDWATCH]: "CloudWatch",
-    [ELASTICSEARCH]: "Elastic Search",
-    [SUMOLOGIC]: "Sumo Logic",
-    [JIRA]: "Jira",
-    [GITHUB]: "Github",
-    [REDUX]: "Redux",
-    [VUE]: "VueX",
-    [GRAPHQL]: "GraphQL",
-    [NGRX]: "NgRx",
-    [FETCH]: "Fetch",
-    [MOBX]: "MobX",
-    [PROFILER]: "Profiler",
-    [ASSIST]: "Assist",
-    [AXIOS]: "Axios",
-};
-
-const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST];
-
-const integrations = [
-    "sentry",
-    "datadog",
-    "stackdriver",
-    "rollbar",
-    "newrelic",
-    "bugsnag",
-    "cloudwatch",
-    "elasticsearch",
-    "sumologic",
-    "issues",
-];
-
-@connect(
-    (state) => {
-        const props = {};
-        integrations.forEach((name) => {
-            props[`${name}Integrated`] =
-                name === "issues"
-                    ? !!(
-                          state.getIn([name, "list"]).first() &&
-                          state.getIn([name, "list"]).first().token
-                      )
-                    : state.getIn([name, "list"]).size > 0;
-            props.loading =
-                props.loading || state.getIn([name, "fetchRequest", "loading"]);
-        });
-        const site = state.getIn(["site", "instance"]);
-        return {
-            ...props,
-            issues: state.getIn(["issues", "list"]).first() || {},
-            slackChannelListExists: state.getIn(["slack", "list"]).size > 0,
-            tenantId: state.getIn(["user", "account", "tenantId"]),
-            jwt: state.get("jwt"),
-            projectKey: site ? site.projectKey : "",
-        };
-    },
-    {
-        fetchList,
-        init,
-        fetchListSlack,
-        removeIntegrationConfig,
-    }
-)
-@withPageTitle("Integrations - OpenReplay Preferences")
-export default class Integrations extends React.PureComponent {
-    state = {
-        modalContent: NONE,
-        showDetailContent: false,
-    };
-
-    componentWillMount() {
-        integrations.forEach((name) => this.props.fetchList(name));
-        this.props.fetchListSlack();
-    }
-
-    onClickIntegrationItem = (e, url) => {
-        e.preventDefault();
-        window.open(url);
-    };
-
-    closeModal = () =>
-        this.setState({ modalContent: NONE, showDetailContent: false });
-
-    onOauthClick = (source) => {
-        if (source === GITHUB) {
-            const githubUrl = `https://auth.openreplay.com/oauth/login?provider=github&back_url=${document.location.href}`;
-            const options = {
-                method: "GET",
-                credentials: "include",
-                headers: new Headers({
-                    Authorization: "Bearer " + this.props.jwt.toString(),
-                }),
-            };
-            fetch(githubUrl, options).then((resp) =>
-                resp.text().then((txt) => window.open(txt, "_self"))
-            );
-        }
-    };
-
-    renderDetailContent() {
-        switch (this.state.modalContent) {
-            case SLACK:
-                return (
-                    <SlackAddForm
-                        onClose={() =>
-                            this.setState({ showDetailContent: false })
-                        }
-                    />
-                );
-        }
-    }
-
-    renderModalContent() {
-        const { projectKey } = this.props;
-
-        switch (this.state.modalContent) {
-            case SENTRY:
-                return <SentryForm onClose={this.closeModal} />;
-            case GITHUB:
-                return <GithubForm onClose={this.closeModal} />;
-            case SLACK:
-                return (
-                    <SlackForm
-                        onClose={this.closeModal}
-                        onEdit={() =>
-                            this.setState({ showDetailContent: true })
-                        }
-                    />
-                );
-            case DATADOG:
-                return <DatadogForm onClose={this.closeModal} />;
-            case STACKDRIVER:
-                return <StackdriverForm onClose={this.closeModal} />;
-            case ROLLBAR:
-                return <RollbarForm onClose={this.closeModal} />;
-            case NEWRELIC:
-                return <NewrelicForm onClose={this.closeModal} />;
-            case BUGSNAG:
-                return <BugsnagForm onClose={this.closeModal} />;
-            case CLOUDWATCH:
-                return <CloudwatchForm onClose={this.closeModal} />;
-            case ELASTICSEARCH:
-                return <ElasticsearchForm onClose={this.closeModal} />;
-            case SUMOLOGIC:
-                return <SumoLogicForm onClose={this.closeModal} />;
-            case JIRA:
-                return <JiraForm onClose={this.closeModal} />;
-            case REDUX:
-                return (
-                    <ReduxDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case VUE:
-                return (
-                    <VueDoc onClose={this.closeModal} projectKey={projectKey} />
-                );
-            case GRAPHQL:
-                return (
-                    <GraphQLDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case NGRX:
-                return (
-                    <NgRxDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case FETCH:
-                return (
-                    <FetchDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case MOBX:
-                return (
-                    <MobxDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case PROFILER:
-                return (
-                    <ProfilerDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case ASSIST:
-                return (
-                    <AssistDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            case AXIOS:
-                return (
-                    <AxiosDoc
-                        onClose={this.closeModal}
-                        projectKey={projectKey}
-                    />
-                );
-            default:
-                return null;
-        }
-    }
-
-    deleteHandler = (name) => {
-        this.props.removeIntegrationConfig(name, null).then(
-            function () {
-                this.props.fetchList(name);
-            }.bind(this)
-        );
-    };
-
-    showIntegrationConfig = (type) => {
-        this.setState({ modalContent: type });
-    };
-
-    render() {
-        const {
-            loading,
-            sentryIntegrated,
-            stackdriverIntegrated,
-            datadogIntegrated,
-            rollbarIntegrated,
-            newrelicIntegrated,
-            bugsnagIntegrated,
-            cloudwatchIntegrated,
-            elasticsearchIntegrated,
-            sumologicIntegrated,
-            hideHeader = false,
-            plugins = false,
-            jiraIntegrated,
-            issuesIntegrated,
-            tenantId,
-            slackChannelListExists,
-            issues,
-        } = this.props;
-        const { modalContent, showDetailContent } = this.state;
-        return (
-            <div className={styles.wrapper}>
-                <SlideModal
-                    title={
-                        <div className="flex items-center">
-                            <div className="mr-4">{TITLE[modalContent]}</div>
-                            {modalContent === SLACK && (
-                                <IconButton
-                                    circle
-                                    icon="plus"
-                                    outline
-                                    small="small"
-                                    onClick={() =>
-                                        this.setState({
-                                            showDetailContent: true,
-                                        })
-                                    }
-                                />
-                            )}
-                        </div>
-                    }
-                    isDisplayed={modalContent !== NONE}
-                    onClose={this.closeModal}
-                    size={
-                        DOCS.includes(this.state.modalContent)
-                            ? "middle"
-                            : "small"
-                    }
-                    content={this.renderModalContent()}
-                    detailContent={
-                        showDetailContent && this.renderDetailContent()
-                    }
-                />
-
-                {!hideHeader && (
-                    <div className={styles.tabHeader}>
-                        <h3 className={cn(styles.tabTitle, "text-2xl")}>
-                            {"Integrations"}
-                        </h3>
-                        <p className={styles.subText}>
-                            Power your workflow with your favourite tools.
-                        </p>
-                        <div className={styles.divider} />
-                    </div>
-                )}
-
-                {plugins && (
-                    <div className="">
-                        <div className="mb-4">
-                            Use plugins to better debug your application's
-                            store, monitor queries and track performance issues.
-                        </div>
-                        <div className="flex flex-wrap">
-                            <IntegrationItem
-                                title="Redux"
-                                icon="integrations/redux"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() =>
-                                    this.showIntegrationConfig(REDUX)
-                                }
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="VueX"
-                                icon="integrations/vuejs"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() => this.showIntegrationConfig(VUE)}
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="GraphQL"
-                                icon="integrations/graphql"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() =>
-                                    this.showIntegrationConfig(GRAPHQL)
-                                }
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="NgRx"
-                                icon="integrations/ngrx"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() => this.showIntegrationConfig(NGRX)}
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="MobX"
-                                icon="integrations/mobx"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() => this.showIntegrationConfig(MOBX)}
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="Fetch"
-                                icon="integrations/openreplay"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() =>
-                                    this.showIntegrationConfig(FETCH)
-                                }
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="Profiler"
-                                icon="integrations/openreplay"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/integrations/sentry"
-                                onClick={() =>
-                                    this.showIntegrationConfig(PROFILER)
-                                }
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="Axios"
-                                icon="integrations/openreplay"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/plugins/axios"
-                                onClick={() =>
-                                    this.showIntegrationConfig(AXIOS)
-                                }
-                                // integrated={ sentryIntegrated }
-                            />
-                            <IntegrationItem
-                                title="Assist"
-                                icon="integrations/assist"
-                                url={null}
-                                dockLink="https://docs.openreplay.com/installation/assist"
-                                onClick={() =>
-                                    this.showIntegrationConfig(ASSIST)
-                                }
-                                // integrated={ sentryIntegrated }
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {!plugins && (
-                    <Loader loading={loading}>
-                        <div className={styles.content}>
-                            <div className="">
-                                <div className="mb-4">
-                                    How are you monitoring errors and crash
-                                    reporting?
-                                </div>
-                                <div className="flex flex-wrap">
-                                    {(!issues.token ||
-                                        issues.provider !== "github") && (
-                                        <IntegrationItem
-                                            title="Jira"
-                                            description="Jira is a proprietary issue tracking product developed by Atlassian that allows bug tracking and agile project management."
-                                            icon="integrations/jira"
-                                            url={null}
-                                            dockLink="https://docs.openreplay.com/integrations/jira"
-                                            onClick={() =>
-                                                this.showIntegrationConfig(JIRA)
-                                            }
-                                            integrated={issuesIntegrated}
-                                        />
-                                    )}
-                                    {(!issues.token ||
-                                        issues.provider !== "jira") && (
-                                        <IntegrationItem
-                                            title="Github"
-                                            description="Easily share issues on GitHub directly from any session replay."
-                                            icon="integrations/github"
-                                            url={`https://auth.openreplay.com/oauth/login?provider=github&back_url=${
-                                                window.env.ORIGIN ||
-                                                window.location.origin
-                                            }`}
-                                            onClick={() =>
-                                                this.showIntegrationConfig(
-                                                    GITHUB
-                                                )
-                                            }
-                                            integrated={issuesIntegrated}
-                                            deleteHandler={
-                                                issuesIntegrated
-                                                    ? () =>
-                                                          this.deleteHandler(
-                                                              "issues"
-                                                          )
-                                                    : null
-                                            }
-                                        />
-                                    )}
-
-                                    <IntegrationItem
-                                        title="Slack"
-                                        description="Error tracking that helps developers monitor and fix crashes in real time."
-                                        icon="integrations/slack"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/sentry"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(SLACK)
-                                        }
-                                        integrated={sentryIntegrated}
-                                    />
-                                    <IntegrationItem
-                                        title="Sentry"
-                                        description="Error tracking that helps developers monitor and fix crashes in real time."
-                                        icon="integrations/sentry"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/sentry"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(SENTRY)
-                                        }
-                                        integrated={sentryIntegrated}
-                                    />
-
-                                    <IntegrationItem
-                                        title="Bugsnag"
-                                        description="Bugsnag is an error-monitoring tool that allows your developers to identify, prioritize and replicate bugs in a time-efficient and enjoyable manner."
-                                        icon="integrations/bugsnag"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/bugsnag"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(BUGSNAG)
-                                        }
-                                        integrated={bugsnagIntegrated}
-                                    />
-
-                                    <IntegrationItem
-                                        title="Rollbar"
-                                        description="Rollbar provides real-time error tracking & debugging tools for developers."
-                                        icon="integrations/rollbar"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/rollbar"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(ROLLBAR)
-                                        }
-                                        integrated={rollbarIntegrated}
-                                    />
-
-                                    <IntegrationItem
-                                        title="Elastic Search"
-                                        description="Elasticsearch is a distributed, RESTful search and analytics engine capable of addressing a growing number of use cases."
-                                        icon="integrations/elasticsearch"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/elastic"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(
-                                                ELASTICSEARCH
-                                            )
-                                        }
-                                        integrated={elasticsearchIntegrated}
-                                    />
-
-                                    <IntegrationItem
-                                        title="Datadog"
-                                        description="Monitoring service for cloud-scale applications, providing monitoring of servers, databases, tools, and services."
-                                        icon="integrations/datadog"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/datadog"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(DATADOG)
-                                        }
-                                        integrated={datadogIntegrated}
-                                    />
-                                    <IntegrationItem
-                                        title="Sumo Logic"
-                                        description="Sumo Logic to collaborate, develop, operate, and secure their applications at cloud scale."
-                                        icon="integrations/sumologic"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/sumo"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(
-                                                SUMOLOGIC
-                                            )
-                                        }
-                                        integrated={sumologicIntegrated}
-                                    />
-                                    <IntegrationItem
-                                        title="Stackdriver"
-                                        description="Monitoring and management for services, containers, applications, and infrastructure."
-                                        icon="integrations/stackdriver"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/stackdriver"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(
-                                                STACKDRIVER
-                                            )
-                                        }
-                                        integrated={stackdriverIntegrated}
-                                    />
-
-                                    <IntegrationItem
-                                        title="CloudWatch"
-                                        description="Amazon CloudWatch is a monitoring and management service that provides data and actionable insights for AWS, hybrid, and on-premises applications and infrastructure resources."
-                                        icon="integrations/cloudwatch"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/cloudwatch"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(
-                                                CLOUDWATCH
-                                            )
-                                        }
-                                        integrated={cloudwatchIntegrated}
-                                    />
-
-                                    <IntegrationItem
-                                        title="New Relic"
-                                        description="New Relic's application monitoring gives you detailed performance metrics for every aspect of your environment."
-                                        icon="integrations/newrelic"
-                                        url={null}
-                                        dockLink="https://docs.openreplay.com/integrations/newrelic"
-                                        onClick={() =>
-                                            this.showIntegrationConfig(NEWRELIC)
-                                        }
-                                        integrated={newrelicIntegrated}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </Loader>
-                )}
-            </div>
-        );
-    }
-}

From e9eaa511730bf0bb4034583053aa0ee847f7414e Mon Sep 17 00:00:00 2001
From: Taha Yassine Kraiem <tahayk2@gmail.com>
Date: Mon, 14 Nov 2022 17:14:24 +0100
Subject: [PATCH 05/21] chore(build): changed script

---
 ee/api/.gitignore | 2 +-
 ee/api/clean.sh   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/api/.gitignore b/ee/api/.gitignore
index 4860784c3..ee23eb7ff 100644
--- a/ee/api/.gitignore
+++ b/ee/api/.gitignore
@@ -248,7 +248,7 @@ Pipfile
 /routers/core.py
 /routers/crons/core_crons.py
 /db_changes.sql
-/Dockerfile.bundle
+/Dockerfile_bundle
 /entrypoint.bundle.sh
 /chalicelib/core/heatmaps.py
 /schemas.py
diff --git a/ee/api/clean.sh b/ee/api/clean.sh
index 083e72cde..314321b83 100755
--- a/ee/api/clean.sh
+++ b/ee/api/clean.sh
@@ -70,7 +70,7 @@ rm -rf ./routers/base.py
 rm -rf ./routers/core.py
 rm -rf ./routers/crons/core_crons.py
 rm -rf ./db_changes.sql
-rm -rf ./Dockerfile.bundle
+rm -rf ./Dockerfile_bundle
 rm -rf ./entrypoint.bundle.sh
 rm -rf ./chalicelib/core/heatmaps.py
 rm -rf ./schemas.py

From c73cb9e60a2a759f9a0a4429eab66ee52ef6e529 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 14 Nov 2022 18:14:13 +0100
Subject: [PATCH 06/21] change(ui) - popup replacement

---
 .../AssistActions/AssistActions.tsx           |   8 +-
 .../BugFinder/SessionList/Tooltip.js          |  40 ---
 .../BugFinder/SessionsMenu/SessionsMenu.js    |   9 +-
 .../Client/ManageUsers/ManageUsers.js         | 273 ---------------
 .../components/Client/ManageUsers/UserItem.js |  49 ---
 .../components/Client/ManageUsers/index.js    |   1 -
 .../Client/ManageUsers/manageUsers.module.css |  42 ---
 .../Client/ManageUsers/userItem.module.css    |  47 ---
 .../app/components/Client/Roles/Roles.tsx     |   6 +-
 .../AddProjectButton/AddProjectButton.tsx     |  35 +-
 .../components/Client/Sites/ProjectKey.tsx    |   4 +-
 frontend/app/components/Client/Sites/Sites.js |   6 +-
 .../AddUserButton/AddUserButton.tsx           |  31 +-
 .../components/UserListItem/UserListItem.tsx  | 144 +++++---
 .../Widgets/BusiestTimeOfTheDay/ImageInfo.js  |  32 +-
 .../CustomMetricWidget/CustomMetricWidget.tsx | 155 ++++----
 .../Widgets/Performance/Performance.js        |  11 +-
 .../SlowestResources/ImageInfo.js             |  24 +-
 .../Widgets/SlowestImages/ImageInfo.js        |  31 +-
 .../Widgets/SlowestResources/ImageInfo.js     |  24 +-
 .../FunnelIssueGraph/FunnelIssueGraph.tsx     |  91 ++---
 .../components/WidgetForm/WidgetForm.tsx      |   8 +-
 .../components/WidgetWrapper/WidgetIcon.tsx   |  27 +-
 .../WidgetWrapper/WidgetWrapper.tsx           | 285 +++++++--------
 .../Errors/Error/DistributionBar.js           |  92 ++---
 .../app/components/Errors/Error/ErrorInfo.js  | 170 ++++-----
 .../Funnels/FunnelGraph/FunnelGraph.js        | 330 ++++++++++--------
 .../Funnels/FunnelHeader/FunnelHeader.js      | 147 +++++---
 .../Funnels/FunnelMenuItem/FunnelMenuItem.js  |  49 +--
 .../Funnels/IssueItem/IssueGraph.js           |  57 +--
 frontend/app/components/Header/Header.js      |   6 +-
 .../components/Session/IOSPlayer/Network.js   |   8 +-
 .../Session/Layout/Player/Timeline.js         |  10 +-
 .../Session_/Issues/IssueListItem.js          |  27 +-
 .../components/Session_/Network/Network.js    |  12 +-
 .../Session_/Network/NetworkContent.js        |  21 +-
 .../components/EventRow/EventRow.tsx          | 125 ++++---
 .../FeatureSelection/FeatureSelection.tsx     |  76 ++--
 .../TimelinePointer/TimelinePointer.tsx       |  58 +--
 .../components/Session_/TimeTable/BarRow.tsx  |  68 ++--
 frontend/app/components/hocs/withCopy.tsx     |  36 +-
 .../components/shared/Bookmark/Bookmark.tsx   |  17 +-
 .../shared/DevTools/JumpButton/JumpButton.tsx |   6 +-
 .../DevTools/NetworkPanel/NetworkPanel.tsx    |  29 +-
 .../shared/DevTools/TimeTable/BarRow.tsx      |  71 ++--
 .../EmailVerificationMessage.js               |  44 ++-
 .../shared/Filters/FilterList/FilterList.tsx  |  73 ++--
 .../shared/LiveSearchBar/LiveSearchBar.tsx    |  47 +--
 .../shared/ReloadButton/ReloadButton.tsx      |  12 +-
 .../MetaMoreButton/MetaMoreButton.tsx         |  50 ++-
 .../SessionMetaList/SessionMetaList.tsx       |  24 +-
 .../components/CaptureRate.tsx                |  10 +-
 .../SortOrderButton/SortOrderButton.tsx       |  62 ++--
 .../shared/SupportCallout/SupportCallout.tsx  |   5 +-
 frontend/app/components/ui/Avatar/Avatar.js   |  48 ++-
 frontend/app/components/ui/Button/Button.tsx  | 159 +++++----
 .../app/components/ui/HelpText/HelpText.tsx   |  27 +-
 .../components/ui/IconButton/IconButton.js    | 136 ++++----
 .../app/components/ui/ItemMenu/ItemMenu.tsx   |   4 +-
 .../components/ui/Pagination/Pagination.tsx   | 116 +++---
 frontend/app/components/ui/PopMenu/PopMenu.js |  61 ++--
 .../app/components/ui/Popover/Popover.tsx     |   2 +-
 .../app/components/ui/Popup/Popup.stories.js  |   8 -
 frontend/app/components/ui/Popup/Popup.tsx    |  57 ---
 frontend/app/components/ui/Popup/index.js     |   1 -
 .../ui/QuestionMarkHint/QuestionMarkHint.js   |  23 +-
 .../ui/SegmentSelection/SegmentSelection.js   |  74 ++--
 .../ui/SideMenuitem/SideMenuitem.js           |  12 +-
 .../ui/TextEllipsis/TextEllipsis.js           | 160 ++++-----
 .../app/components/ui/TextLabel/TextLabel.js  |  33 +-
 .../ui/TimelinePointer/TimelinePointer.js     |  25 +-
 .../components/ui/Tooltip/FloatingTooltip.tsx |   4 +-
 .../app/components/ui/Tooltip/Tooltip.tsx     |  11 +-
 .../app/components/ui/Tooltip/Tooltip.tsx_    |  47 ---
 frontend/app/components/ui/index.js           |   1 -
 frontend/app/types/session/session.ts         | 327 ++++++++---------
 76 files changed, 2088 insertions(+), 2373 deletions(-)
 delete mode 100644 frontend/app/components/BugFinder/SessionList/Tooltip.js
 delete mode 100644 frontend/app/components/Client/ManageUsers/ManageUsers.js
 delete mode 100644 frontend/app/components/Client/ManageUsers/UserItem.js
 delete mode 100644 frontend/app/components/Client/ManageUsers/index.js
 delete mode 100644 frontend/app/components/Client/ManageUsers/manageUsers.module.css
 delete mode 100644 frontend/app/components/Client/ManageUsers/userItem.module.css
 delete mode 100644 frontend/app/components/ui/Popup/Popup.stories.js
 delete mode 100644 frontend/app/components/ui/Popup/Popup.tsx
 delete mode 100644 frontend/app/components/ui/Popup/index.js
 delete mode 100644 frontend/app/components/ui/Tooltip/Tooltip.tsx_

diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index e93dcb538..ee5258747 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Popup, Button, Tooltip } from 'UI';
+import { Button, Tooltip } from 'UI';
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { toggleChatWindow } from 'Duck/sessions';
@@ -195,8 +195,8 @@ function AssistActions({
       </Tooltip>
       <div className={stl.divider} />
 
-      <Popup
-        content={
+      <Tooltip
+        title={
           cannotCall
             ? `You don't have the permissions to perform this action.`
             : `Call ${userId ? userId : 'User'}`
@@ -218,7 +218,7 @@ function AssistActions({
             {onCall ? 'End' : isPrestart ? 'Join Call' : 'Call'}
           </Button>
         </div>
-      </Popup>
+      </Tooltip>
 
       <div className="fixed ml-3 left-0 top-0" style={{ zIndex: 999 }}>
         {onCall && callObject && (
diff --git a/frontend/app/components/BugFinder/SessionList/Tooltip.js b/frontend/app/components/BugFinder/SessionList/Tooltip.js
deleted file mode 100644
index a054b0beb..000000000
--- a/frontend/app/components/BugFinder/SessionList/Tooltip.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { Popup } from 'UI';
-
-export default class Tooltip extends React.PureComponent {
-	state = { 
-		open: false,
-	}
-	mouseOver = false
-	onMouseEnter = () => {
-		this.mouseOver = true;
-		setTimeout(() => {
-			if (this.mouseOver) this.setState({ open: true });
-		}, 1000)
-	}
-	onMouseLeave = () => {
-		this.mouseOver = false;
-		this.setState({
-			open: false,
-		});
-	}
-
-	render() {
-		const { trigger, tooltip } = this.props;
-		const { open } = this.state;
-		return (
-			<Popup
-				open={ open }
-				content={ tooltip }
-				inverted
-			>
-				<span 
-					onMouseEnter={ this.onMouseEnter }
-					onMouseLeave={ this.onMouseLeave }
-				>
-					{ trigger }
-				</span>
-			</Popup>
-		);
-	}
-}
\ No newline at end of file
diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
index 400c10435..4dde1a130 100644
--- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
+++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux';
 import cn from 'classnames';
-import { SideMenuitem, Popup } from 'UI'
+import { SideMenuitem, Tooltip } from 'UI'
 import stl from './sessionMenu.module.css';
 import { clearEvents } from 'Duck/filters';
 import { issues_types } from 'Types/session/issue'
@@ -24,12 +24,11 @@ function SessionsMenu(props) {
           <span>Sessions</span>
         </div>
         <span className={ cn(stl.manageButton, 'mr-2') } onClick={() => showModal(<SessionSettings />, { right: true })}>
-          <Popup
-            hideOnClick={true}
-            content={<span>Configure the percentage of sessions <br /> to be captured, timezone and more.</span>}
+          <Tooltip
+            title={<span>Configure the percentage of sessions <br /> to be captured, timezone and more.</span>}
           >
             Settings
-          </Popup>
+          </Tooltip>
         </span>
       </div>
 
diff --git a/frontend/app/components/Client/ManageUsers/ManageUsers.js b/frontend/app/components/Client/ManageUsers/ManageUsers.js
deleted file mode 100644
index dd703813e..000000000
--- a/frontend/app/components/Client/ManageUsers/ManageUsers.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import cn from 'classnames';
-import withPageTitle from 'HOCs/withPageTitle';
-import { 
-  Form, IconButton, SlideModal, Input, Button, Loader,
-  NoContent, Popup, CopyButton } from 'UI';
-import Select from 'Shared/Select';
-import { init, save, edit, remove as deleteMember, fetchList, generateInviteLink } from 'Duck/member';
-import { fetchList as fetchRoles } from 'Duck/roles';
-import styles from './manageUsers.module.css';
-import UserItem from './UserItem';
-import { confirm } from 'UI';
-import { toast } from 'react-toastify';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-
-const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
-const LIMIT_WARNING = 'You have reached users limit.';
-
-@connect(state => ({
-  account: state.getIn([ 'user', 'account' ]),
-  members: state.getIn([ 'members', 'list' ]).filter(u => u.id),
-  member: state.getIn([ 'members', 'instance' ]),
-  errors: state.getIn([ 'members', 'saveRequest', 'errors' ]),
-  loading: state.getIn([ 'members', 'loading' ]),
-  saving: state.getIn([ 'members', 'saveRequest', 'loading' ]),
-  roles: state.getIn(['roles', 'list']).filter(r => !r.protected).map(r => ({ label: r.name, value: r.roleId })).toJS(),
-  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
-}), {
-  init,
-  save,
-  edit,
-  deleteMember,
-  fetchList,
-  generateInviteLink,
-  fetchRoles
-})
-@withPageTitle('Team - OpenReplay Preferences')
-class ManageUsers extends React.PureComponent {
-  state = { showModal: false, remaining: this.props.account.limits.teamMember.remaining, invited: false }
-
-  // writeOption = (e, { name, value }) => this.props.edit({ [ name ]: value });
-  onChange = ({ name, value }) => this.props.edit({ [ name ]: value.value });
-  onChangeCheckbox = ({ target: { checked, name } }) => this.props.edit({ [ name ]: checked });
-  setFocus = () => this.focusElement && this.focusElement.focus();
-  closeModal = () => this.setState({ showModal: false });
-  componentWillMount = () => {
-    this.props.fetchList();
-    if (this.props.isEnterprise) {
-      this.props.fetchRoles();
-    }
-  }
-  
-  adminLabel = (user) => {
-    if (user.superAdmin) return null;
-    return user.admin ? 'Admin' : '';
-  };
-
-  editHandler = user => {
-    this.init(user)
-  }
-
-  deleteHandler = async (user) => {
-    if (await confirm({
-      header: 'Users',
-      confirmation: `Are you sure you want to remove this user?`
-    })) {
-      this.props.deleteMember(user.id).then(() => {
-        const { remaining } = this.state;
-        if (remaining <= 0) return;
-        this.setState({ remaining: remaining - 1 })
-      });
-    }
-  }
-
-  save = (e) => {
-    e.preventDefault();
-    this.props.save(this.props.member)
-      .then(() => {
-        const { errors } = this.props;
-        if (errors && errors.size > 0) {
-          errors.forEach(e => {
-            toast.error(e);
-          })
-        }
-        this.setState({ invited: true })
-        // this.closeModal()
-      });
-  }
-  
-  formContent = () => {
-    const { member, account, isEnterprise, roles } = this.props;
-
-    return (
-      <div className={ styles.form }>
-        <Form onSubmit={ this.save } >
-          <div className={ styles.formGroup }>
-            <label>{ 'Full Name' }</label>
-            <Input
-              ref={ (ref) => { this.focusElement = ref; } }
-              name="name"
-              value={ member.name }
-              onChange={ this.onChange }
-              className={ styles.input }
-              id="name-field"
-            />
-          </div>
-
-          <Form.Field>
-            <label>{ 'Email Address' }</label>
-            <Input
-              disabled={member.exists()}
-              name="email"
-              value={ member.email }
-              onChange={ this.onChange }
-              className={ styles.input }
-            />
-          </Form.Field>
-          { !account.smtp &&
-            <div className={cn("mb-4 p-2", styles.smtpMessage)}>
-              SMTP is not configured (see <a className="link" href="https://docs.openreplay.com/configuration/configure-smtp" target="_blank">here</a> how to set it up).  You can still add new users, but you’d have to manually copy then send them the invitation link.
-            </div>
-          }
-          <Form.Field>
-            <label className={ styles.checkbox }>
-              <input
-                name="admin"
-                type="checkbox"
-                value={ member.admin }
-                checked={ !!member.admin }
-                onChange={ this.onChangeCheckbox }
-                disabled={member.superAdmin}
-              />
-              <span>{ 'Admin Privileges' }</span>
-            </label>
-            <div className={ styles.adminInfo }>{ 'Can manage Projects and team members.' }</div>
-          </Form.Field>
-          
-          { isEnterprise && (
-            <Form.Field>
-              <label htmlFor="role">{ 'Role' }</label>
-              <Select
-                placeholder="Role"
-                selection
-                options={ roles }
-                name="roleId"
-                value={ roles.find(r => r.value === member.roleId) }
-                onChange={ this.onChange }
-              />
-            </Form.Field>
-          )}
-        </Form>
-
-        <div className="flex items-center">
-          <div className="flex items-center mr-auto">
-            <Button
-              onClick={ this.save }    
-              disabled={ !member.validate() }
-              loading={ this.props.saving }
-              variant="primary"
-              className="float-left mr-2"
-            >
-              { member.exists() ? 'Update' : 'Invite' }
-            </Button>
-            {member.exists() && (
-              <Button
-                onClick={ this.closeModal }
-              >
-                { 'Cancel' }
-              </Button>
-            )}
-          </div>
-          { !member.joined && member.invitationLink &&
-            <CopyButton
-              content={member.invitationLink}
-              className="link"
-              btnText="Copy invite link"
-            />
-          }
-        </div>
-      </div>
-    )
-  }
-
-  init = (v) => {
-    const { roles } = this.props;
-    this.props.init(v ? v : { roleId: roles[0] ? roles[0].value : null });
-    this.setState({ showModal: true });
-    setTimeout(this.setFocus, 100);
-  }
-
-  render() {
-    const {
-      members, loading, account, hideHeader = false
-    } = this.props;
-    const { showModal, remaining, invited } = this.state;
-    const isAdmin = account.admin || account.superAdmin;
-    const canAddUsers = isAdmin && remaining !== 0;
-
-    return (
-      <React.Fragment>
-        <Loader loading={ loading }>
-          <SlideModal
-            title="Invite People"
-            size="small"
-            isDisplayed={ showModal }
-            content={ showModal && this.formContent() }
-            onClose={ this.closeModal }
-          />
-          <div className={ styles.wrapper }>
-            <div className={ cn(styles.tabHeader, 'flex items-center') }>
-              <div className="flex items-center mr-auto">
-                { !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + `Users (${members.size})` }</h3> }
-                { hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Users (${members.size})` }</h3>}
-                <Popup
-                  disabled={ canAddUsers }
-                  content={ `${ !canAddUsers ? (!isAdmin ? PERMISSION_WARNING : LIMIT_WARNING) : 'Add team member' }` }
-                >
-                  <div>
-                    <IconButton
-                        id="add-button"
-                        disabled={ !canAddUsers }
-                        circle
-                        icon="plus"
-                        outline
-                        onClick={ () => this.init() }
-                    />
-                  </div>
-                </Popup>
-              </div>              
-            </div>
-
-            <NoContent
-              title={
-                <div className="flex flex-col items-center justify-center">
-                  <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-                  <div className="mt-6 text-2xl">No data available.</div>
-                </div>
-              }
-              size="small"
-              show={ members.size === 0 }
-              // animatedIcon="empty-state"
-            >
-              <div className={ styles.list }>
-                {
-                  members.map(user => (
-                    <UserItem
-                      generateInviteLink={this.props.generateInviteLink}
-                      key={ user.id }
-                      user={ user }
-                      adminLabel={ this.adminLabel(user) }
-                      deleteHandler={ isAdmin && account.email !== user.email
-                        ? this.deleteHandler
-                        : null
-                      }
-                      editHandler={ isAdmin ? this.editHandler : null }
-                    />
-                  ))
-                }
-
-                { !members.size > 0 &&
-                  <div>{ 'No Data.' }</div>
-                }
-              </div>
-            </NoContent>
-          </div>
-        </Loader>
-      </React.Fragment>
-    );
-  }
-}
-
-export default ManageUsers;
diff --git a/frontend/app/components/Client/ManageUsers/UserItem.js b/frontend/app/components/Client/ManageUsers/UserItem.js
deleted file mode 100644
index 7192b9004..000000000
--- a/frontend/app/components/Client/ManageUsers/UserItem.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { Icon, CopyButton, Popup } from 'UI';
-import styles from './userItem.module.css';
-
-const UserItem = ({ user, adminLabel, deleteHandler, editHandler, generateInviteLink }) => (
-  <div className={ styles.wrapper } id="user-row">
-    <Icon name="user-alt" size="16" marginRight="10" />
-    <div id="user-name">{ user.name || user.email }</div>
-    <div className="px-2"/>
-    { adminLabel && <div className={ styles.adminLabel }>{ adminLabel }</div>}
-    { user.roleName && <div className={ styles.adminLabel }>{ user.roleName }</div>}
-    <div className={ styles.actions }>
-      { user.expiredInvitation && !user.joined &&
-        <Popup
-          content={ `Generate Invitation Link` }
-        >
-          <div className={ styles.button } onClick={ () => generateInviteLink(user) } id="trash">
-              <Icon name="link-45deg" size="16" color="red"/>
-            </div>
-        </Popup>
-      }
-      { !user.expiredInvitation && !user.joined && user.invitationLink &&
-        <Popup
-          content={ `Copy Invitation Link` }  
-        >
-          <div className={ styles.button }>
-              <CopyButton
-                content={user.invitationLink}
-                className="link"
-                btnText={<Icon name="link-45deg" size="16" color="teal"/>}
-              />
-            </div>
-        </Popup>
-      }
-      { !!deleteHandler &&
-        <div className={ styles.button } onClick={ () => deleteHandler(user) } id="trash">
-          <Icon name="trash" size="16" color="teal"/>
-        </div>
-      }
-      { !!editHandler && 
-        <div className={ styles.button } onClick={ () => editHandler(user) }>
-          <Icon name="edit" size="16" color="teal"/>
-        </div>
-      }
-    </div>
-  </div>
-);
-
-export default UserItem;
diff --git a/frontend/app/components/Client/ManageUsers/index.js b/frontend/app/components/Client/ManageUsers/index.js
deleted file mode 100644
index 64f58febe..000000000
--- a/frontend/app/components/Client/ManageUsers/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ManageUsers';
diff --git a/frontend/app/components/Client/ManageUsers/manageUsers.module.css b/frontend/app/components/Client/ManageUsers/manageUsers.module.css
deleted file mode 100644
index f62e7367a..000000000
--- a/frontend/app/components/Client/ManageUsers/manageUsers.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.tabHeader {
-  display: flex;
-  align-items: center;
-  margin-bottom: 25px;
-
-  & .tabTitle {
-    margin: 0 15px 0 0;
-    font-weight: 400 !important;
-  }
-}
-
-.form {
-  padding: 0 20px;
-
-  & .formGroup {
-    margin-bottom: 15px;
-  }
-  & label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: 500;
-  }
-
-  & .input {
-    width: 100%;
-  }
-
-  & input[type=checkbox] {
-    margin-right: 10px;
-    height: 13px;
-  }
-}
-
-.adminInfo {
-  font-size: 12px;
-  color: $gray-medium;
-}
-
-.smtpMessage {
-  background-color: #faf6e0;
-  border-radius: 3px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Client/ManageUsers/userItem.module.css b/frontend/app/components/Client/ManageUsers/userItem.module.css
deleted file mode 100644
index e11592408..000000000
--- a/frontend/app/components/Client/ManageUsers/userItem.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-@import 'mixins.css';
-
-.wrapper {
-  padding: 15px 10px;
-  display: flex;
-  align-items: center;
-  border-bottom: solid thin $gray-light-shade;
-
-  &:hover {
-    background-color: $active-blue;
-    transition: all 0.2s;
-    & .actions {
-      opacity: 1;
-      transition: all 0.4s;
-    }
-  }
-
-  & .adminLabel {
-    margin-left: 5px;
-    padding: 0 10px;
-    border-radius: 3px;
-    background-color: $gray-lightest;
-    font-size: 10px;
-    border: solid thin $gray-light;
-  }
-}
-
-.actions {
-  margin-left: auto;
-  /* opacity: 0; */
-  transition: all 0.4s;
-  display: flex;
-  align-items: center;
-  & .button {
-    padding: 5px;
-    cursor: pointer;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover {
-      & svg {
-        fill: $teal-dark;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 293ff28d0..42b51df06 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import cn from 'classnames';
-import { Loader, Popup, NoContent, Button } from 'UI';
+import { Loader, NoContent, Button, Tooltip } from 'UI';
 import { connect } from 'react-redux';
 import stl from './roles.module.css';
 import RoleForm from './components/RoleForm';
@@ -69,9 +69,9 @@ function Roles(props: Props) {
                     <div className={cn(stl.tabHeader, 'flex items-center')}>
                         <div className="flex items-center mr-auto px-5 pt-5">
                             <h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>
-                            <Popup content="You don’t have the permissions to perform this action." disabled={isAdmin}>
+                            <Tooltip title="You don’t have the permissions to perform this action." disabled={isAdmin}>
                                 <Button variant="primary" onClick={() => editHandler({})}>Add</Button>
-                            </Popup>
+                            </Tooltip>
                         </div>
                     </div>
 
diff --git a/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx b/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx
index 1d0721495..36bf497e2 100644
--- a/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx
+++ b/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup, Button, IconButton } from 'UI';
+import { Tooltip, Button, IconButton } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 import { init, remove, fetchGDPR } from 'Duck/site';
@@ -11,20 +11,27 @@ const PERMISSION_WARNING = 'You don’t have the permissions to perform this act
 const LIMIT_WARNING = 'You have reached site limit.';
 
 function AddProjectButton({ isAdmin = false, init = () => {} }: any) {
-    const { userStore } = useStore();
-    const { showModal, hideModal } = useModal();
-    const limtis = useObserver(() => userStore.limits);
-    const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
+  const { userStore } = useStore();
+  const { showModal, hideModal } = useModal();
+  const limtis = useObserver(() => userStore.limits);
+  const canAddProject = useObserver(
+    () => isAdmin && (limtis.projects === -1 || limtis.projects > 0)
+  );
 
-    const onClick = () => {
-        init();
-        showModal(<NewSiteForm onClose={hideModal} />, { right: true });
-    };
-    return (
-        <Popup content={`${!isAdmin ? PERMISSION_WARNING : !canAddProject ? LIMIT_WARNING : 'Add a Project'}`}>
-            <Button variant="primary" onClick={onClick} disabled={!canAddProject || !isAdmin}>Add Project</Button>
-        </Popup>
-    );
+  const onClick = () => {
+    init();
+    showModal(<NewSiteForm onClose={hideModal} />, { right: true });
+  };
+  return (
+    <Tooltip
+      title={`${!isAdmin ? PERMISSION_WARNING : !canAddProject ? LIMIT_WARNING : 'Add a Project'}`}
+      disabled={isAdmin || canAddProject}
+    >
+      <Button variant="primary" onClick={onClick} disabled={!canAddProject || !isAdmin}>
+        Add Project
+      </Button>
+    </Tooltip>
+  );
 }
 
 export default connect(null, { init, remove, fetchGDPR })(AddProjectButton);
diff --git a/frontend/app/components/Client/Sites/ProjectKey.tsx b/frontend/app/components/Client/Sites/ProjectKey.tsx
index d53b336f8..67391720c 100644
--- a/frontend/app/components/Client/Sites/ProjectKey.tsx
+++ b/frontend/app/components/Client/Sites/ProjectKey.tsx
@@ -1,8 +1,8 @@
 import { withCopy } from 'HOCs';
 import React from 'react';
 
-function ProjectKey({ value, tooltip }: any) {
-    return <div className="rounded border bg-gray-lightest w-fit px-2">{value}</div>;
+function ProjectKey({ value }: any) {
+  return <div className="rounded border bg-gray-lightest w-fit px-2">{value}</div>;
 }
 
 export default withCopy(ProjectKey);
diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 27e22f638..7104547c1 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import withPageTitle from 'HOCs/withPageTitle';
-import { Loader, Button, Popup, TextLink, NoContent } from 'UI';
+import { Loader, Button, Tooltip, TextLink, NoContent } from 'UI';
 import { init, remove, fetchGDPR } from 'Duck/site';
 import { RED, YELLOW, GREEN, STATUS_COLOR_MAP } from 'Types/site';
 import stl from './sites.module.css';
@@ -101,7 +101,7 @@ class Sites extends React.PureComponent {
                             >
                                 <div className="col-span-4">
                                     <div className="flex items-center">
-                                        <Popup content={STATUS_MESSAGE_MAP[_site.status]} inverted>
+                                        <Tooltip title={STATUS_MESSAGE_MAP[_site.status]}>
                                             <div className="relative flex items-center justify-center w-10 h-10">
                                                 <div
                                                     className="absolute left-0 right-0 top-0 bottom-0 mx-auto w-10 h-10 rounded-full opacity-10"
@@ -111,7 +111,7 @@ class Sites extends React.PureComponent {
                                                     {getInitials(_site.name)}
                                                 </div>
                                             </div>
-                                        </Popup>
+                                        </Tooltip>
                                         <span className="ml-2">{_site.host}</span>
                                     </div>
                                 </div>
diff --git a/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx b/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
index 19f77b420..f9c500615 100644
--- a/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
+++ b/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
-import { Popup, IconButton, Button } from 'UI';
+import { Tooltip, Button } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
 const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
 const LIMIT_WARNING = 'You have reached users limit.';
 
-function AddUserButton({ isAdmin = false, onClick }: any ) {
-    const { userStore } = useStore();
-    const limtis = useObserver(() => userStore.limits);
-    const cannAddUser = useObserver(() => isAdmin && (limtis.teamMember === -1 || limtis.teamMember > 0));
-    return (
-        <Popup
-            content={ `${ !isAdmin ? PERMISSION_WARNING : (!cannAddUser ? LIMIT_WARNING : 'Add team member') }` }
-        >
-            <Button disabled={ !cannAddUser || !isAdmin } variant="primary" onClick={ onClick }>Add Team Member</Button>
-        </Popup>
-    );
+function AddUserButton({ isAdmin = false, onClick }: any) {
+  const { userStore } = useStore();
+  const limtis = useObserver(() => userStore.limits);
+  const cannAddUser = useObserver(
+    () => isAdmin && (limtis.teamMember === -1 || limtis.teamMember > 0)
+  );
+  return (
+    <Tooltip
+      title={`${!isAdmin ? PERMISSION_WARNING : !cannAddUser ? LIMIT_WARNING : 'Add team member'}`}
+      disabled={isAdmin || cannAddUser}
+    >
+      <Button disabled={!cannAddUser || !isAdmin} variant="primary" onClick={onClick}>
+        Add Team Member
+      </Button>
+    </Tooltip>
+  );
 }
 
-export default AddUserButton;
\ No newline at end of file
+export default AddUserButton;
diff --git a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
index f5cb0a744..abae1cbe1 100644
--- a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
+++ b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
@@ -1,68 +1,108 @@
 //@ts-nocheck
 import React from 'react';
-import { Button, Popup } from 'UI';
+import { Button, Tooltip } from 'UI';
 import { checkForRecent } from 'App/date';
 import cn from 'classnames';
 
 const AdminPrivilegeLabel = ({ user }) => {
-    return (
-        <>
-            {user.isAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Admin</span>}
-            {user.isSuperAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Owner</span>}
-            {!user.isAdmin && !user.isSuperAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Member</span>}
-        </>
-    );
+  return (
+    <>
+      {user.isAdmin && (
+        <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Admin</span>
+      )}
+      {user.isSuperAdmin && (
+        <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Owner</span>
+      )}
+      {!user.isAdmin && !user.isSuperAdmin && (
+        <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Member</span>
+      )}
+    </>
+  );
 };
 interface Props {
-    isOnboarding?: boolean;
-    user: any;
-    editHandler?: any;
-    generateInvite?: any;
-    copyInviteCode?: any;
-    isEnterprise?: boolean;
+  isOnboarding?: boolean;
+  user: any;
+  editHandler?: any;
+  generateInvite?: any;
+  copyInviteCode?: any;
+  isEnterprise?: boolean;
 }
 function UserListItem(props: Props) {
-    const { user, editHandler = () => {}, generateInvite = () => {}, copyInviteCode = () => {}, isEnterprise = false, isOnboarding = false } = props;
-    return (
-        <div className="grid grid-cols-12 py-4 px-5 border-t items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
-            <div className="col-span-5">
-                <span className="mr-2">{user.name}</span>
-                {/* {isEnterprise && <AdminPrivilegeLabel user={user} />} */}
-            </div>
-            <div className="col-span-3">
-                {!isEnterprise && <AdminPrivilegeLabel user={user} />}
-                {isEnterprise && (
-                    <>
-                    <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">{user.roleName}</span>
-                    { user.isSuperAdmin || user.isAdmin && <><span className="ml-2" /><AdminPrivilegeLabel user={user} /></> }
-                </>)}
-            </div>
-            {!isOnboarding && (
-                <div className="col-span-2">
-                    <span>{user.createdAt && checkForRecent(user.createdAt, 'LLL dd, yyyy, hh:mm a')}</span>
-                </div>
+  const {
+    user,
+    editHandler = () => {},
+    generateInvite = () => {},
+    copyInviteCode = () => {},
+    isEnterprise = false,
+    isOnboarding = false,
+  } = props;
+  return (
+    <div
+      className="grid grid-cols-12 py-4 px-5 border-t items-center select-none hover:bg-active-blue group cursor-pointer"
+      onClick={editHandler}
+    >
+      <div className="col-span-5">
+        <span className="mr-2">{user.name}</span>
+        {/* {isEnterprise && <AdminPrivilegeLabel user={user} />} */}
+      </div>
+      <div className="col-span-3">
+        {!isEnterprise && <AdminPrivilegeLabel user={user} />}
+        {isEnterprise && (
+          <>
+            <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">
+              {user.roleName}
+            </span>
+            {user.isSuperAdmin ||
+              (user.isAdmin && (
+                <>
+                  <span className="ml-2" />
+                  <AdminPrivilegeLabel user={user} />
+                </>
+              ))}
+          </>
+        )}
+      </div>
+      {!isOnboarding && (
+        <div className="col-span-2">
+          <span>{user.createdAt && checkForRecent(user.createdAt, 'LLL dd, yyyy, hh:mm a')}</span>
+        </div>
+      )}
+
+      <div
+        className={cn('justify-self-end invisible group-hover:visible', {
+          'col-span-2': !isOnboarding,
+          'col-span-4': isOnboarding,
+        })}
+      >
+        <div className="grid grid-cols-2 gap-3 items-center justify-end">
+          <div>
+            {!user.isJoined && user.invitationLink && !user.isExpiredInvite && (
+              <Tooltip title="Copy Invite Code" hideOnClick={true}>
+                <Button
+                  variant="text-primary"
+                  icon="link-45deg"
+                  className=""
+                  onClick={copyInviteCode}
+                />
+              </Tooltip>
             )}
 
-            <div className={cn('justify-self-end invisible group-hover:visible', { 'col-span-2': !isOnboarding, 'col-span-4': isOnboarding })}>
-                <div className="grid grid-cols-2 gap-3 items-center justify-end">
-                    <div>
-                        {!user.isJoined && user.invitationLink && !user.isExpiredInvite && (
-                            <Popup delay={500} content="Copy Invite Code" hideOnClick={true}>
-                                <Button variant="text-primary" icon="link-45deg" className="" onClick={copyInviteCode} />
-                            </Popup>
-                        )}
-
-                        {!user.isJoined && user.isExpiredInvite && (
-                            <Popup delay={500} arrow content="Generate Invite" hideOnClick={true}>
-                                <Button icon="link-45deg" variant="text-primary" className="" onClick={generateInvite} />
-                            </Popup>
-                        )}
-                    </div>
-                    <Button variant="text-primary" icon="pencil" />
-                </div>
-            </div>
+            {!user.isJoined && user.isExpiredInvite && (
+              <Tooltip title="Generate Invite" hideOnClick={true}>
+                <Button
+                  icon="link-45deg"
+                  variant="text-primary"
+                  className=""
+                  onClick={generateInvite}
+                />
+              </Tooltip>
+            )}
+          </div>
+          <Button variant="text-primary" icon="pencil" />
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default UserListItem;
diff --git a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js
index febeb62b4..28fd52a75 100644
--- a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js
+++ b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js
@@ -1,20 +1,26 @@
-import { Popup, Icon } from 'UI';
+import { Tooltip, Icon } from 'UI';
 import styles from './imageInfo.module.css';
 
 const ImageInfo = ({ data }) => (
-  <div className={ styles.name }>
-    <Popup
-      className={ styles.popup }
-      content={ <img src={ `//${ data.url }` } className={ styles.imagePreview } alt="One of the slowest images" /> }
+  <div className={styles.name}>
+    <Tooltip
+      className={styles.Tooltip}
+      title={
+        <img
+          src={`//${data.url}`}
+          className={styles.imagePreview}
+          alt="One of the slowest images"
+        />
+      }
     >
-      <div className={ styles.imageWrapper }>
-          <Icon name="camera-alt" size="18" color="gray-light" />
-          <div className={ styles.label }>{ 'Preview' }</div>
-        </div>
-    </Popup>
-    <Popup content={ data.url } >
-      <span>{ data.name }</span>
-    </Popup>
+      <div className={styles.imageWrapper}>
+        <Icon name="camera-alt" size="18" color="gray-light" />
+        <div className={styles.label}>{'Preview'}</div>
+      </div>
+    </Tooltip>
+    <Tooltip title={data.url}>
+      <span>{data.name}</span>
+    </Tooltip>
   </div>
 );
 
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
index 62e8dc2e5..b804ca439 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -1,28 +1,35 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
-import { Loader, NoContent, Icon, Popup } from 'UI';
+import { Loader, NoContent, Icon, Tooltip } from 'UI';
 import { Styles } from '../../common';
 import { ResponsiveContainer } from 'recharts';
 import stl from './CustomMetricWidget.module.css';
 import { getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
-import { init, edit, remove, setAlertMetricId, setActiveWidget, updateActiveState } from 'Duck/customMetrics';
+import {
+  init,
+  edit,
+  remove,
+  setAlertMetricId,
+  setActiveWidget,
+  updateActiveState,
+} from 'Duck/customMetrics';
 import { setShowAlerts } from 'Duck/dashboard';
 import CustomMetriLineChart from '../CustomMetriLineChart';
 import CustomMetricPieChart from '../CustomMetricPieChart';
 import CustomMetricPercentage from '../CustomMetricPercentage';
 import CustomMetricTable from '../CustomMetricTable';
-import { NO_METRIC_DATA } from 'App/constants/messages'
+import { NO_METRIC_DATA } from 'App/constants/messages';
 
-const customParams = rangeName => {
-  const params = { density: 70 }
+const customParams = (rangeName) => {
+  const params = { density: 70 };
 
   // if (rangeName === LAST_24_HOURS) params.density = 70
   // if (rangeName === LAST_30_MINUTES) params.density = 70
   // if (rangeName === YESTERDAY) params.density = 70
   // if (rangeName === LAST_7_DAYS) params.density = 70
 
-  return params
-}
+  return params;
+};
 
 interface Props {
   metric: any;
@@ -43,12 +50,12 @@ interface Props {
 }
 function CustomMetricWidget(props: Props) {
   const { metric, period, isTemplate } = props;
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
   const [data, setData] = useState<any>([]);
   // const [seriesMap, setSeriesMap] = useState<any>([]);
 
   const colors = Styles.customMetricColors;
-  const params = customParams(period.rangeName)
+  const params = customParams(period.rangeName);
   // const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart', startDate: period.start, endDate: period.end }
   const isLineChart = metric.viewType === 'lineChart';
   const isProgress = metric.viewType === 'progress';
@@ -61,17 +68,18 @@ function CustomMetricWidget(props: Props) {
       period: period,
       ...period.toTimestamps(),
       filters,
-    }
+    };
     props.setActiveWidget(activeWidget);
-  }
+  };
 
   const clickHandler = (event, index) => {
     if (event) {
       const payload = event.activePayload[0].payload;
       const timestamp = payload.timestamp;
-      const periodTimestamps = metric.metricType === 'timeseries' ?
-        getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density) :
-        period.toTimestamps();
+      const periodTimestamps =
+        metric.metricType === 'timeseries'
+          ? getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density)
+          : period.toTimestamps();
 
       const activeWidget = {
         widget: metric,
@@ -79,68 +87,81 @@ function CustomMetricWidget(props: Props) {
         ...periodTimestamps,
         timestamp: payload.timestamp,
         index,
-      }
+      };
 
       props.setActiveWidget(activeWidget);
     }
-  }
+  };
 
   const updateActiveState = (metricId, state) => {
     props.updateActiveState(metricId, state);
-  }
+  };
 
   return (
     <div className={stl.wrapper}>
       <div className="flex items-center p-2">
         <div className="font-medium">{metric.name}</div>
         <div className="ml-auto flex items-center">
-          {!isTable && !isPieChart && <WidgetIcon className="cursor-pointer mr-6" icon="bell-plus" tooltip="Set Alert" onClick={props.onAlertClick} /> }
-          <WidgetIcon className="cursor-pointer mr-6" icon="pencil" tooltip="Edit Metric" onClick={() => props.init(metric)} />
-          <WidgetIcon className="cursor-pointer" icon="close" tooltip="Hide Metric" onClick={() => updateActiveState(metric.metricId, false)} />
+          {!isTable && !isPieChart && (
+            <WidgetIcon
+              className="cursor-pointer mr-6"
+              icon="bell-plus"
+              tooltip="Set Alert"
+              onClick={props.onAlertClick}
+            />
+          )}
+          <WidgetIcon
+            className="cursor-pointer mr-6"
+            icon="pencil"
+            tooltip="Edit Metric"
+            onClick={() => props.init(metric)}
+          />
+          <WidgetIcon
+            className="cursor-pointer"
+            icon="close"
+            tooltip="Hide Metric"
+            onClick={() => updateActiveState(metric.metricId, false)}
+          />
         </div>
       </div>
       <div className="px-3">
-        <Loader loading={ loading } size="small">
-          <NoContent
-            size="small"
-            title={NO_METRIC_DATA}
-            show={ data.length === 0 }
-          >
-            <ResponsiveContainer height={ 240 } width="100%">
+        <Loader loading={loading} size="small">
+          <NoContent size="small" title={NO_METRIC_DATA} show={data.length === 0}>
+            <ResponsiveContainer height={240} width="100%">
               <>
                 {isLineChart && (
                   <CustomMetriLineChart
-                      data={ data }
-                      params={ params }
-                      // seriesMap={ seriesMap }
-                      colors={ colors }
-                      onClick={ clickHandler }
+                    data={data}
+                    params={params}
+                    // seriesMap={ seriesMap }
+                    colors={colors}
+                    onClick={clickHandler}
                   />
                 )}
 
                 {isPieChart && (
                   <CustomMetricPieChart
                     metric={metric}
-                    data={ data[0] }
-                    colors={ colors }
-                    onClick={ clickHandlerTable }
+                    data={data[0]}
+                    colors={colors}
+                    onClick={clickHandlerTable}
                   />
                 )}
 
                 {isProgress && (
                   <CustomMetricPercentage
-                    data={ data[0] }
-                    params={ params }
-                    colors={ colors }
-                    onClick={ clickHandler }
+                    data={data[0]}
+                    params={params}
+                    colors={colors}
+                    onClick={clickHandler}
                   />
                 )}
 
                 {isTable && (
                   <CustomMetricTable
-                    metric={ metric }
-                    data={ data[0] }
-                    onClick={ clickHandlerTable }
+                    metric={metric}
+                    data={data[0]}
+                    onClick={clickHandlerTable}
                     isTemplate={isTemplate}
                   />
                 )}
@@ -153,26 +174,36 @@ function CustomMetricWidget(props: Props) {
   );
 }
 
-export default connect(state => ({
-  period: state.getIn(['dashboard', 'period']),
-}), {
-  remove,
-  setShowAlerts,
-  setAlertMetricId,
-  edit,
-  setActiveWidget,
-  updateActiveState,
-  init,
-})(CustomMetricWidget);
+export default connect(
+  (state) => ({
+    period: state.getIn(['dashboard', 'period']),
+  }),
+  {
+    remove,
+    setShowAlerts,
+    setAlertMetricId,
+    edit,
+    setActiveWidget,
+    updateActiveState,
+    init,
+  }
+)(CustomMetricWidget);
 
-
-const WidgetIcon = ({ className = '', tooltip = '', icon, onClick }) => (
-  <Popup
-    size="small"
-    content={tooltip}
-  >
+const WidgetIcon = ({
+  className = '',
+  tooltip = '',
+  icon,
+  onClick,
+}: {
+  className: string;
+  tooltip: string;
+  icon: string;
+  onClick: any;
+}) => (
+  <Tooltip title={tooltip}>
     <div className={className} onClick={onClick}>
-        <Icon name={icon} size="14" />
+      {/* @ts-ignore */}
+      <Icon name={icon} size="14" />
     </div>
-  </Popup>
-)
+  </Tooltip>
+);
diff --git a/frontend/app/components/Dashboard/Widgets/Performance/Performance.js b/frontend/app/components/Dashboard/Widgets/Performance/Performance.js
index 5dd9879bc..6c585305f 100644
--- a/frontend/app/components/Dashboard/Widgets/Performance/Performance.js
+++ b/frontend/app/components/Dashboard/Widgets/Performance/Performance.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Map } from 'immutable';
 import cn from 'classnames';
 import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Legend } from 'recharts';
-import { Loader, TextEllipsis, Popup, Icon } from 'UI';
+import { Loader, TextEllipsis, Tooltip } from 'UI';
 import { TYPES } from 'Types/resource';
 import { LAST_24_HOURS, LAST_30_MINUTES, LAST_7_DAYS, LAST_30_DAYS } from 'Types/app/period';
 import { fetchPerformanseSearch } from 'Duck/dashboard';
@@ -101,7 +101,7 @@ export default class Performance extends React.PureComponent {
 
   compare = () => this.setState({ comparing: true })
 
-  legendPopup = (component, trigger) => <Popup size="mini" content={ component }>{trigger}</Popup>
+  legendPopup = (component, trigger) => <Tooltip size="mini" content={ component }>{trigger}</Tooltip>
 
   legendFormatter = (value, entry, index) => {
     const { opacity } = this.state;
@@ -113,16 +113,15 @@ export default class Performance extends React.PureComponent {
     if (value.includes(BASE_KEY)) {
       const resourceIndex = Number.parseInt(value.substr(BASE_KEY.length));
       return (
-        <Popup
-          wide
-          content={ this.state.resources.getIn([ resourceIndex, 'value' ]) }
+        <Tooltip
+          title={ this.state.resources.getIn([ resourceIndex, 'value' ]) }
         >
           <TextEllipsis
               maxWidth="200px"
               style={ { verticalAlign: 'middle' } }
               text={ this.state.resources.getIn([ resourceIndex, 'value' ]) }
             />
-        </Popup>
+        </Tooltip>
       );
     }
   }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/ImageInfo.js
index c220e44cf..c8b3890e3 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/ImageInfo.js
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/ImageInfo.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import cn from 'classnames';
 import styles from './imageInfo.module.css';
 
@@ -8,18 +8,24 @@ const supportedTypes = ['png', 'jpg', 'jpeg', 'svg'];
 const ImageInfo = ({ data }) => {
   const canPreview = supportedTypes.includes(data.type);
   return (
-    <div className={ styles.name }>      
-      <Popup
-        className={ styles.popup }
+    <div className={styles.name}>
+      <Tooltip
+        className={styles.popup}
         disabled={!canPreview}
-        content={ <img src={ `${ data.url }` } className={ styles.imagePreview } alt="One of the slowest images" /> }
+        title={
+          <img
+            src={`${data.url}`}
+            className={styles.imagePreview}
+            alt="One of the slowest images"
+          />
+        }
       >
-        <div className={cn({ [styles.hasPreview]: canPreview})}>
-          <div className={ styles.label }>{data.name}</div>
+        <div className={cn({ [styles.hasPreview]: canPreview })}>
+          <div className={styles.label}>{data.name}</div>
         </div>
-      </Popup>
+      </Tooltip>
     </div>
-  )
+  );
 };
 
 ImageInfo.displayName = 'ImageInfo';
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js
index 6381434f0..cf7402a80 100644
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js
@@ -1,24 +1,27 @@
 import React from 'react';
-import { Popup, Icon } from 'UI';
+import { Tooltip, Icon } from 'UI';
 import styles from './imageInfo.module.css';
 
 const ImageInfo = ({ data }) => (
-  <div className={ styles.name }>
-    <Popup
-      className={ styles.popup }
-      content={ <img src={ `//${ data.url }` } className={ styles.imagePreview } alt="One of the slowest images" /> }
+  <div className={styles.name}>
+    <Tooltip
+      className={styles.popup}
+      title={
+        <img
+          src={`//${data.url}`}
+          className={styles.imagePreview}
+          alt="One of the slowest images"
+        />
+      }
     >
-      <div className={ styles.imageWrapper }>
+      <div className={styles.imageWrapper}>
         <Icon name="camera-alt" size="18" color="gray-light" />
-        <div className={ styles.label }>{ 'Preview' }</div>
+        <div className={styles.label}>{'Preview'}</div>
       </div>
-    </Popup>
-    <Popup
-      disabled
-      content={ data.url }
-    >
-      <span>{ data.name }</span>
-    </Popup>
+    </Tooltip>
+    <Tooltip disabled content={data.url}>
+      <span>{data.name}</span>
+    </Tooltip>
   </div>
 );
 
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js
index c220e44cf..c8b3890e3 100644
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import cn from 'classnames';
 import styles from './imageInfo.module.css';
 
@@ -8,18 +8,24 @@ const supportedTypes = ['png', 'jpg', 'jpeg', 'svg'];
 const ImageInfo = ({ data }) => {
   const canPreview = supportedTypes.includes(data.type);
   return (
-    <div className={ styles.name }>      
-      <Popup
-        className={ styles.popup }
+    <div className={styles.name}>
+      <Tooltip
+        className={styles.popup}
         disabled={!canPreview}
-        content={ <img src={ `${ data.url }` } className={ styles.imagePreview } alt="One of the slowest images" /> }
+        title={
+          <img
+            src={`${data.url}`}
+            className={styles.imagePreview}
+            alt="One of the slowest images"
+          />
+        }
       >
-        <div className={cn({ [styles.hasPreview]: canPreview})}>
-          <div className={ styles.label }>{data.name}</div>
+        <div className={cn({ [styles.hasPreview]: canPreview })}>
+          <div className={styles.label}>{data.name}</div>
         </div>
-      </Popup>
+      </Tooltip>
     </div>
-  )
+  );
 };
 
 ImageInfo.displayName = 'ImageInfo';
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
index 8821fe5e9..08bb072bc 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx
@@ -1,50 +1,59 @@
 import React from 'react';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 
 const MIN_WIDTH = '20px';
 interface Props {
-    issue: any
+  issue: any;
 }
 function FunnelIssueGraph(props: Props) {
-    const { issue } = props;
+  const { issue } = props;
 
-    return (
-        <div className="flex rounded-sm" style={{ width: '600px' }}>
-            <div style={{ width: issue.unaffectedSessionsPer + '%', minWidth: MIN_WIDTH }} className="relative">
-                <Popup
-                    content={ `Unaffected sessions` }
-                    size="tiny"
-                    inverted
-                    position="top center"
-                >
-                    <div className="w-full relative rounded-tl-sm rounded-bl-sm" style={{ height: '18px', backgroundColor: 'rgba(217, 219, 238, 0.7)' }} />
-                    <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.unaffectedSessions}</div>               
-                </Popup>
-            </div>
-            <div style={{ width: issue.affectedSessionsPer + '%', minWidth: MIN_WIDTH}} className="border-l relative">
-                <Popup
-                    content={ `Affected sessions` }
-                    size="tiny"
-                    inverted
-                    position="top center"
-                >        
-                    <div className="w-full relative" style={{ height: '18px', backgroundColor: 'rgba(238, 238, 238, 0.7)' }} />
-                    <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.affectedSessions}</div>
-                </Popup>
-            </div>
-            <div style={{ width: issue.lostConversionsPer + '%', minWidth: MIN_WIDTH}} className="border-l relative">
-                <Popup
-                    content={ `Conversion lost` }
-                    size="tiny"
-                    inverted
-                    position="top center"
-                >
-                    <div className="w-full relative rounded-tr-sm rounded-br-sm" style={{ height: '18px', backgroundColor: 'rgba(204, 0, 0, 0.26)' }} />
-                    <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm color-red">{issue.lostConversions}</div>            
-                </Popup>
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex rounded-sm" style={{ width: '600px' }}>
+      <div
+        style={{ width: issue.unaffectedSessionsPer + '%', minWidth: MIN_WIDTH }}
+        className="relative"
+      >
+        <Tooltip title={`Unaffected sessions`} placement="top">
+          <div
+            className="w-full relative rounded-tl-sm rounded-bl-sm"
+            style={{ height: '18px', backgroundColor: 'rgba(217, 219, 238, 0.7)' }}
+          />
+          <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">
+            {issue.unaffectedSessions}
+          </div>
+        </Tooltip>
+      </div>
+      <div
+        style={{ width: issue.affectedSessionsPer + '%', minWidth: MIN_WIDTH }}
+        className="border-l relative"
+      >
+        <Tooltip title={`Affected sessions`} placement="top">
+          <div
+            className="w-full relative"
+            style={{ height: '18px', backgroundColor: 'rgba(238, 238, 238, 0.7)' }}
+          />
+          <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">
+            {issue.affectedSessions}
+          </div>
+        </Tooltip>
+      </div>
+      <div
+        style={{ width: issue.lostConversionsPer + '%', minWidth: MIN_WIDTH }}
+        className="border-l relative"
+      >
+        <Tooltip title={`Conversion lost`} placement="top">
+          <div
+            className="w-full relative rounded-tr-sm rounded-br-sm"
+            style={{ height: '18px', backgroundColor: 'rgba(204, 0, 0, 0.26)' }}
+          />
+          <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm color-red">
+            {issue.lostConversions}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  );
 }
 
-export default FunnelIssueGraph;
\ No newline at end of file
+export default FunnelIssueGraph;
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index b613bd370..bf0ccda20 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -5,7 +5,7 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 import { Button, Icon, SegmentSelection } from 'UI'
 import FilterSeries from '../FilterSeries';
-import { confirm, Popup } from 'UI';
+import { confirm, Tooltip } from 'UI';
 import Select from 'Shared/Select'
 import { withSiteId, dashboardMetricDetails, metricDetails } from 'App/routes'
 
@@ -200,8 +200,8 @@ function WidgetForm(props: Props) {
             </div>
 
             <div className="form-groups flex items-center justify-between">
-                <Popup
-                    content="Cannot save funnel metric without at least 2 events"
+                <Tooltip
+                    title="Cannot save funnel metric without at least 2 events"
                     disabled={!cannotSaveFunnel}
                 >
                     <Button
@@ -211,7 +211,7 @@ function WidgetForm(props: Props) {
                     >
                         {metric.exists() ? 'Update' : 'Create'}
                     </Button>
-                </Popup>
+                </Tooltip>
                 <div className="flex items-center">
                     {metric.exists() && (
                         <Button variant="text-primary" onClick={onDelete}>
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx
index aec8e23ad..bc804b2b8 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 
 interface Props {
-    className: string
-    onClick: () => void
-    icon: string
-    tooltip: string
+  className: string;
+  onClick: () => void;
+  icon: string;
+  tooltip: string;
 }
 function WidgetIcon(props: Props) {
-    const { className, onClick, icon, tooltip } = props;
-    return (
-        <Popup title={tooltip} >
-            <div className={className} onClick={onClick}>
-                <Icon name={icon} size="14" />
-            </div>
-        </Popup>
-    );
+  const { className, onClick, icon, tooltip } = props;
+  return (
+    <Tooltip title={tooltip}>
+      <div className={className} onClick={onClick}>
+        {/* @ts-ignore */}
+        <Icon name={icon} size="14" />
+      </div>
+    </Tooltip>
+  );
 }
 
 export default WidgetIcon;
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index b532c1cc5..eb7faa64b 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
-import { ItemMenu, Popup } from 'UI';
+import { ItemMenu, Tooltip } from 'UI';
 import { useDrag, useDrop } from 'react-dnd';
 import WidgetChart from '../WidgetChart';
 import { observer } from 'mobx-react-lite';
@@ -14,150 +14,161 @@ import { FilterKey } from 'App/types/filter/filterType';
 import LazyLoad from 'react-lazyload';
 
 interface Props {
-    className?: string;
-    widget?: any;
-    index?: number;
-    moveListItem?: any;
-    isPreview?: boolean;
-    isTemplate?: boolean
-    dashboardId?: string;
-    siteId?: string,
-    active?: boolean;
-    history?: any
-    onClick?: () => void;
-    isWidget?: boolean;
-    hideName?: boolean;
-    grid?: string;
+  className?: string;
+  widget?: any;
+  index?: number;
+  moveListItem?: any;
+  isPreview?: boolean;
+  isTemplate?: boolean;
+  dashboardId?: string;
+  siteId?: string;
+  active?: boolean;
+  history?: any;
+  onClick?: () => void;
+  isWidget?: boolean;
+  hideName?: boolean;
+  grid?: string;
 }
 function WidgetWrapper(props: Props & RouteComponentProps) {
-    const { dashboardStore } = useStore();
-    const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, siteId, grid = "" } = props;
-    const widget: any = props.widget;
-    const isTimeSeries = widget.metricType === 'timeseries';
-    const isPredefined = widget.metricType === 'predefined';
-    const dashboard = dashboardStore.selectedDashboard;
+  const { dashboardStore } = useStore();
+  const {
+    isWidget = false,
+    active = false,
+    index = 0,
+    moveListItem = null,
+    isPreview = false,
+    isTemplate = false,
+    siteId,
+    grid = '',
+  } = props;
+  const widget: any = props.widget;
+  const isTimeSeries = widget.metricType === 'timeseries';
+  const isPredefined = widget.metricType === 'predefined';
+  const dashboard = dashboardStore.selectedDashboard;
 
-    const [{ isDragging }, dragRef] = useDrag({
-        type: 'item',
-        item: { index, grid },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-            opacity: monitor.isDragging() ? 0.5 : 1,
-        }),
-    });
+  const [{ isDragging }, dragRef] = useDrag({
+    type: 'item',
+    item: { index, grid },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+      opacity: monitor.isDragging() ? 0.5 : 1,
+    }),
+  });
 
-    const [{ isOver, canDrop }, dropRef] = useDrop({
-        accept: 'item',
-        drop: (item: any) => {
-            if (item.index === index || (item.grid !== grid)) return;
-            moveListItem(item.index, index);
-        },
-        canDrop(item) {
-            return item.grid === grid
-        },
-        collect: (monitor: any) => ({
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop(),
-        }),
-    })
+  const [{ isOver, canDrop }, dropRef] = useDrop({
+    accept: 'item',
+    drop: (item: any) => {
+      if (item.index === index || item.grid !== grid) return;
+      moveListItem(item.index, index);
+    },
+    canDrop(item) {
+      return item.grid === grid;
+    },
+    collect: (monitor: any) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  });
 
-    const onDelete = async () => {
-        dashboardStore.deleteDashboardWidget(dashboard?.dashboardId, widget.widgetId);
-    }
+  const onDelete = async () => {
+    dashboardStore.deleteDashboardWidget(dashboard?.dashboardId, widget.widgetId);
+  };
 
-    const onChartClick = () => {
-        if (!isWidget || isPredefined) return;
-
-        props.history.push(withSiteId(dashboardMetricDetails(dashboard?.dashboardId, widget.metricId),siteId));
-    }
-
-    const ref: any = useRef(null)
-    const dragDropRef: any = dragRef(dropRef(ref))
-    const addOverlay = isTemplate || (!isPredefined && isWidget && widget.metricOf !== FilterKey.ERRORS && widget.metricOf !== FilterKey.SESSIONS)
-
-    return (
-            <div
-                className={
-                    cn(
-                        "relative rounded bg-white border group",
-                        'col-span-' + widget.config.col,
-                        { "hover:shadow-border-gray": !isTemplate && isWidget },
-                        { "hover:shadow-border-main": isTemplate }
-                    )
-                }
-                style={{
-                    userSelect: 'none',
-                    opacity: isDragging ? 0.5 : 1,
-                    borderColor: (canDrop && isOver) || active ? '#394EFF' : (isPreview ? 'transparent' : '#EEEEEE'),
-                }}
-                ref={dragDropRef}
-                onClick={props.onClick ? props.onClick : () => {}}
-                id={`widget-${widget.widgetId}`}
-            >
-                {!isTemplate && isWidget && isPredefined &&
-                    <div
-                        className={cn(
-                            stl.drillDownMessage,
-                            'disabled text-gray text-sm invisible group-hover:visible')}
-                        >
-                            {'Cannot drill down system provided metrics'}
-                    </div>
-                }
-                {/* @ts-ignore */}
-                <Popup
-                    hideOnClick={true}
-                    position="bottom"
-                    delay={300}
-                    followCursor
-                    disabled={!isTemplate}
-                    boundary="viewport"
-                    flip={["top"]}
-                    content={<span>Click to select</span>}
-                >
-                    {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
-                    <div
-                        className={cn("p-3 pb-4 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
-                    >
-                        {!props.hideName ? <div className="capitalize-first w-full font-medium">{widget.name}</div> : null}
-                        {isWidget && (
-                            <div className="flex items-center" id="no-print">
-                                {!isPredefined && isTimeSeries && (
-                                    <>
-                                        <AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
-                                        <div className='mx-2'/>
-                                    </>
-                                )}
-
-                                {!isTemplate && (
-                                    <ItemMenu
-                                        items={[
-                                            {
-                                                text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit',
-                                                onClick: onChartClick,
-                                                disabled: widget.metricType === 'predefined',
-                                            },
-                                            {
-                                                text: 'Hide',
-                                                onClick: onDelete
-                                            },
-                                        ]}
-                                    />
-                                )}
-                            </div>
-                        )}
-                    </div>
-
-                    {/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
-                    <LazyLoad offset={!isTemplate ? 100 : 10} >
-                        <div className="px-4" onClick={onChartClick}>
-                            <WidgetChart metric={widget} isTemplate={isTemplate} isWidget={isWidget} />
-                        </div>
-                    </LazyLoad>
-                </Popup>
-            </div>
+  const onChartClick = () => {
+    if (!isWidget || isPredefined) return;
 
+    props.history.push(
+      withSiteId(dashboardMetricDetails(dashboard?.dashboardId, widget.metricId), siteId)
     );
+  };
+
+  const ref: any = useRef(null);
+  const dragDropRef: any = dragRef(dropRef(ref));
+  const addOverlay =
+    isTemplate ||
+    (!isPredefined &&
+      isWidget &&
+      widget.metricOf !== FilterKey.ERRORS &&
+      widget.metricOf !== FilterKey.SESSIONS);
+
+  return (
+    <div
+      className={cn(
+        'relative rounded bg-white border group',
+        'col-span-' + widget.config.col,
+        { 'hover:shadow-border-gray': !isTemplate && isWidget },
+        { 'hover:shadow-border-main': isTemplate }
+      )}
+      style={{
+        userSelect: 'none',
+        opacity: isDragging ? 0.5 : 1,
+        borderColor:
+          (canDrop && isOver) || active ? '#394EFF' : isPreview ? 'transparent' : '#EEEEEE',
+      }}
+      ref={dragDropRef}
+      onClick={props.onClick ? props.onClick : () => {}}
+      id={`widget-${widget.widgetId}`}
+    >
+      {!isTemplate && isWidget && isPredefined && (
+        <div
+          className={cn(
+            stl.drillDownMessage,
+            'disabled text-gray text-sm invisible group-hover:visible'
+          )}
+        >
+          {'Cannot drill down system provided metrics'}
+        </div>
+      )}
+      <Tooltip disabled={!isTemplate} title={<span>Click to select</span>} className="w-full">
+        {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
+        <div
+          className={cn('p-3 pb-4 flex items-center justify-between', {
+            'cursor-move': !isTemplate && isWidget,
+          })}
+        >
+          {!props.hideName ? (
+            <div className="capitalize-first w-full font-medium">{widget.name}</div>
+          ) : null}
+          {isWidget && (
+            <div className="flex items-center" id="no-print">
+              {!isPredefined && isTimeSeries && (
+                <>
+                  <AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
+                  <div className="mx-2" />
+                </>
+              )}
+
+              {!isTemplate && (
+                <ItemMenu
+                  items={[
+                    {
+                      text:
+                        widget.metricType === 'predefined'
+                          ? 'Cannot edit system generated metrics'
+                          : 'Edit',
+                      onClick: onChartClick,
+                      disabled: widget.metricType === 'predefined',
+                    },
+                    {
+                      text: 'Hide',
+                      onClick: onDelete,
+                    },
+                  ]}
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
+        <LazyLoad offset={!isTemplate ? 100 : 0}>
+          <div className="px-4" onClick={onChartClick}>
+            <WidgetChart metric={widget} isTemplate={isTemplate} isWidget={isWidget} />
+          </div>
+        </LazyLoad>
+      </Tooltip>
+    </div>
+  );
 }
 
-
 export default withRouter(observer(WidgetWrapper));
diff --git a/frontend/app/components/Errors/Error/DistributionBar.js b/frontend/app/components/Errors/Error/DistributionBar.js
index e6cc38ca5..fcb83f3bb 100644
--- a/frontend/app/components/Errors/Error/DistributionBar.js
+++ b/frontend/app/components/Errors/Error/DistributionBar.js
@@ -1,59 +1,59 @@
 import React from 'react';
 import cn from 'classnames';
-import { Popup, TextEllipsis } from 'UI';
+import { Tooltip, TextEllipsis } from 'UI';
 import { Styles } from '../../Dashboard/Widgets/common';
 import cls from './distributionBar.module.css';
 import { colorScale } from 'App/utils';
 
 function DistributionBar({ className, title, partitions }) {
-    if (partitions.length === 0) {
-        return null;
-    }
+  if (partitions.length === 0) {
+    return null;
+  }
 
-    const values = Array(partitions.length)
-        .fill()
-        .map((element, index) => index + 0);
-    const colors = colorScale(values, Styles.colors);
+  const values = Array(partitions.length)
+    .fill()
+    .map((element, index) => index + 0);
+  const colors = colorScale(values, Styles.colors);
 
-    return (
-        <div className={className}>
-            <div className="flex justify-between text-sm mb-1">
-                <div className="capitalize">{title}</div>
-                <div className="flex items-center">
-                    <div className="font-thin capitalize" style={{ maxWidth: '80px', height: '19px' }}>
-                        <TextEllipsis text={partitions[0].label} />
-                    </div>
-                    <div className="ml-2">{`${Math.round(partitions[0].prc)}% `}</div>
-                </div>
-            </div>
-            <div className={cn('border-radius-3 overflow-hidden flex', cls.bar)}>
-                {partitions.map((p, index) => (
-                    <Popup
-                        key={p.label}
-                        content={
-                            <div className="text-center">
-                                <span className="capitalize">{p.label}</span>
-                                <br />
-                                {`${Math.round(p.prc)}%`}
-                            </div>
-                        }
-                        style={{
-                            marginLeft: '1px',
-                            width: `${p.prc}%`,
-							backgroundColor: colors(index),
-                        }}
-                    >
-                        <div
-                            className="h-full bg-tealx"
-                            style={{
-                                backgroundColor: colors(index),
-                            }}
-                        />
-                    </Popup>
-                ))}
-            </div>
+  return (
+    <div className={className}>
+      <div className="flex justify-between text-sm mb-1">
+        <div className="capitalize">{title}</div>
+        <div className="flex items-center">
+          <div className="font-thin capitalize" style={{ maxWidth: '80px', height: '19px' }}>
+            <TextEllipsis text={partitions[0].label} />
+          </div>
+          <div className="ml-2">{`${Math.round(partitions[0].prc)}% `}</div>
         </div>
-    );
+      </div>
+      <div className={cn('border-radius-3 overflow-hidden flex', cls.bar)}>
+        {partitions.map((p, index) => (
+          <Tooltip
+            key={p.label}
+            title={
+              <div className="text-center">
+                <span className="capitalize">{p.label}</span>
+                <br />
+                {`${Math.round(p.prc)}%`}
+              </div>
+            }
+            style={{
+              marginLeft: '1px',
+              width: `${p.prc}%`,
+              backgroundColor: colors(index),
+            }}
+          >
+            <div
+              className="h-full bg-tealx"
+              style={{
+                backgroundColor: colors(index),
+              }}
+            />
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
 }
 
 DistributionBar.displayName = 'DistributionBar';
diff --git a/frontend/app/components/Errors/Error/ErrorInfo.js b/frontend/app/components/Errors/Error/ErrorInfo.js
index 4b941d2de..91c06b617 100644
--- a/frontend/app/components/Errors/Error/ErrorInfo.js
+++ b/frontend/app/components/Errors/Error/ErrorInfo.js
@@ -1,119 +1,87 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import withSiteIdRouter from 'HOCs/withSiteIdRouter';
-import { errors as errorsRoute, error as errorRoute } from 'App/routes';
-import { NoContent, Loader, IconButton, Icon, Popup, BackLink } from 'UI';
+import { error as errorRoute } from 'App/routes';
+import { NoContent, Loader } from 'UI';
 import { fetch, fetchTrace } from 'Duck/errors';
 import MainSection from './MainSection';
 import SideSection from './SideSection';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 @connect(
-    (state) => ({
-        errorIdInStore: state.getIn(['errors', 'instance']).errorId,
-        list: state.getIn(['errors', 'instanceTrace']),
-        loading: state.getIn(['errors', 'fetch', 'loading']) || state.getIn(['errors', 'fetchTrace', 'loading']),
-        errorOnFetch: state.getIn(['errors', 'fetch', 'errors']) || state.getIn(['errors', 'fetchTrace', 'errors']),
-    }),
-    {
-        fetch,
-        fetchTrace,
-    }
+  (state) => ({
+    errorIdInStore: state.getIn(['errors', 'instance']).errorId,
+    list: state.getIn(['errors', 'instanceTrace']),
+    loading:
+      state.getIn(['errors', 'fetch', 'loading']) ||
+      state.getIn(['errors', 'fetchTrace', 'loading']),
+    errorOnFetch:
+      state.getIn(['errors', 'fetch', 'errors']) || state.getIn(['errors', 'fetchTrace', 'errors']),
+  }),
+  {
+    fetch,
+    fetchTrace,
+  }
 )
 @withSiteIdRouter
 export default class ErrorInfo extends React.PureComponent {
-    ensureInstance() {
-        const { errorId, loading, errorOnFetch } = this.props;
-        if (!loading && this.props.errorIdInStore !== errorId && errorId != null) {
-            this.props.fetch(errorId);
-            this.props.fetchTrace(errorId);
-        }
+  ensureInstance() {
+    const { errorId, loading, errorOnFetch } = this.props;
+    if (!loading && this.props.errorIdInStore !== errorId && errorId != null) {
+      this.props.fetch(errorId);
+      this.props.fetchTrace(errorId);
     }
-    componentDidMount() {
-        this.ensureInstance();
+  }
+  componentDidMount() {
+    this.ensureInstance();
+  }
+  componentDidUpdate() {
+    this.ensureInstance();
+  }
+  next = () => {
+    const { list, errorId } = this.props;
+    const curIndex = list.findIndex((e) => e.errorId === errorId);
+    const next = list.get(curIndex + 1);
+    if (next != null) {
+      this.props.history.push(errorRoute(next.errorId));
     }
-    componentDidUpdate() {
-        this.ensureInstance();
+  };
+  prev = () => {
+    const { list, errorId } = this.props;
+    const curIndex = list.findIndex((e) => e.errorId === errorId);
+    const prev = list.get(curIndex - 1);
+    if (prev != null) {
+      this.props.history.push(errorRoute(prev.errorId));
     }
-    next = () => {
-        const { list, errorId } = this.props;
-        const curIndex = list.findIndex((e) => e.errorId === errorId);
-        const next = list.get(curIndex + 1);
-        if (next != null) {
-            this.props.history.push(errorRoute(next.errorId));
-        }
-    };
-    prev = () => {
-        const { list, errorId } = this.props;
-        const curIndex = list.findIndex((e) => e.errorId === errorId);
-        const prev = list.get(curIndex - 1);
-        if (prev != null) {
-            this.props.history.push(errorRoute(prev.errorId));
-        }
-    };
-    render() {
-        const { loading, errorIdInStore, list, errorId } = this.props;
+  };
+  render() {
+    const { loading, errorIdInStore, list, errorId } = this.props;
 
-        let nextDisabled = true,
-            prevDisabled = true;
-        if (list.size > 0) {
-            nextDisabled = loading || list.last().errorId === errorId;
-            prevDisabled = loading || list.first().errorId === errorId;
-        }
-
-        return (
-            <NoContent
-                title={
-                    <div className="flex flex-col items-center justify-center">
-                        <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-                        <div className="mt-6 text-2xl">No Error Found!</div>
-                    </div>
-                }
-                subtext="Please try to find existing one."
-                // animatedIcon="no-results"
-                show={!loading && errorIdInStore == null}
-            >
-                {/* <div className="w-9/12 mb-4 flex justify-between">
-					<BackLink	to={ errorsRoute() } label="Back" />
-					<div />
-					<div className="flex items-center">
-						<Popup
-							pinned
-							content="Prev Error"
-						>
-							<IconButton
-								outline
-								compact
-								size="small"
-								icon="prev1"
-								disabled={ prevDisabled }
-								onClick={this.prev}
-							/>
-						</Popup>
-						<div className="mr-3" />
-
-						<Popup
-							pinned
-							content="Next Error"
-						>
-							<IconButton
-								outline
-								compact
-								size="small"
-								icon="next1"
-								disabled={ nextDisabled }
-								onClick={this.next}
-							/>
-						</Popup>
-					</div>
-				</div> */}
-                <div className="flex">
-                    <Loader loading={loading} className="w-9/12">
-                        <MainSection className="w-9/12" />
-                        <SideSection className="w-3/12" />
-                    </Loader>
-                </div>
-            </NoContent>
-        );
+    let nextDisabled = true,
+      prevDisabled = true;
+    if (list.size > 0) {
+      nextDisabled = loading || list.last().errorId === errorId;
+      prevDisabled = loading || list.first().errorId === errorId;
     }
+
+    return (
+      <NoContent
+        title={
+          <div className="flex flex-col items-center justify-center">
+            <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
+            <div className="mt-6 text-2xl">No Error Found!</div>
+          </div>
+        }
+        subtext="Please try to find existing one."
+        show={!loading && errorIdInStore == null}
+      >
+        <div className="flex">
+          <Loader loading={loading} className="w-9/12">
+            <MainSection className="w-9/12" />
+            <SideSection className="w-3/12" />
+          </Loader>
+        </div>
+      </NoContent>
+    );
+  }
 }
diff --git a/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js b/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js
index 3159dacba..8f3cbb5ea 100644
--- a/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js
+++ b/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js
@@ -1,12 +1,23 @@
-import React, { useState } from 'react'
-import { Icon, Popup } from 'UI'
+import React, { useState } from 'react';
+import { Icon, Tooltip as AppTooltip } from 'UI';
 import { numberCompact } from 'App/utils';
-import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, LabelList, Label } from 'recharts';
+import {
+  BarChart,
+  Bar,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  LabelList,
+  Label,
+} from 'recharts';
 import { connect } from 'react-redux';
 import { setActiveStages } from 'Duck/funnels';
 import { Styles } from '../../Dashboard/Widgets/common';
-import { numberWithCommas } from 'App/utils'
-import { truncate } from 'App/utils'
+import { numberWithCommas } from 'App/utils';
+import { truncate } from 'App/utils';
 
 const MIN_BAR_HEIGHT = 20;
 
@@ -14,27 +25,32 @@ function CustomTick(props) {
   const { x, y, payload } = props;
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} fontSize={12} textAnchor="middle" fill="#666">{payload.value}</text>
+      <text x={0} y={0} dy={16} fontSize={12} textAnchor="middle" fill="#666">
+        {payload.value}
+      </text>
     </g>
   );
 }
 
 function FunnelGraph(props) {
-  const { data, activeStages, funnelId, liveFilters } = props;  
-  const [activeIndex, setActiveIndex] = useState(activeStages)
+  const { data, activeStages, funnelId, liveFilters } = props;
+  const [activeIndex, setActiveIndex] = useState(activeStages);
 
   const renderPercentage = (props) => {
-    const {
-      x, y, width, height, value,
-    } = props;
+    const { x, y, width, height, value } = props;
     const radius = 10;
-    const _x = (x + width / 2) + 45;
-  
+    const _x = x + width / 2 + 45;
+
     return (
       <g>
         <svg width="46px" height="21px" version="1.1">
           <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <path d="M37.2387001,0.5 L45.3588127,10.5034561 L37.4215407,20.5 L0.5,20.5 L0.5,0.5 L37.2387001,0.5 Z" id="Rectangle" stroke="#AFACAC" fill="#FFFFFF"></path>
+            <path
+              d="M37.2387001,0.5 L45.3588127,10.5034561 L37.4215407,20.5 L0.5,20.5 L0.5,0.5 L37.2387001,0.5 Z"
+              id="Rectangle"
+              stroke="#AFACAC"
+              fill="#FFFFFF"
+            ></path>
           </g>
         </svg>
         <text x={x} y={70} fill="#000" textAnchor="middle" dominantBaseline="middle">
@@ -45,31 +61,38 @@ function FunnelGraph(props) {
   };
 
   const renderCustomizedLabel = (props) => {
-    const {
-      x, y, width, height, value, textColor = '#fff'
-    } = props;    
+    const { x, y, width, height, value, textColor = '#fff' } = props;
     const radius = 10;
 
     if (value === 0) return;
-  
+
     return (
-      <g>        
-        <text x={x + width / 2} y={(y - radius) + 20} fill={ textColor } font-size="12" textAnchor="middle" dominantBaseline="middle">
+      <g>
+        <text
+          x={x + width / 2}
+          y={y - radius + 20}
+          fill={textColor}
+          font-size="12"
+          textAnchor="middle"
+          dominantBaseline="middle"
+        >
           {numberCompact(value)}
         </text>
       </g>
     );
   };
 
-  const handleClick= (data, index) => {    
-    if (activeStages.length === 1 && activeStages.includes(index)) { // selecting the same bar
+  const handleClick = (data, index) => {
+    if (activeStages.length === 1 && activeStages.includes(index)) {
+      // selecting the same bar
       props.setActiveStages([], null);
       return;
     }
-    
-    if (activeStages.length === 2) { // already having two bars
-      return;      
-    } 
+
+    if (activeStages.length === 2) {
+      // already having two bars
+      return;
+    }
 
     // new selection
     const arr = activeStages.concat([index]);
@@ -78,167 +101,180 @@ function FunnelGraph(props) {
 
   const resetActiveSatges = () => {
     props.setActiveStages([], liveFilters, funnelId, true);
-  }
+  };
 
   const renderDropLabel = ({ x, y, width, value }) => {
     if (value === 0) return;
     return (
-      <text fill="#cc0000" x={x + width / 2} y={y - 5} textAnchor="middle" fontSize="12">{value}</text>
-    )
-  }
+      <text fill="#cc0000" x={x + width / 2} y={y - 5} textAnchor="middle" fontSize="12">
+        {value}
+      </text>
+    );
+  };
 
-  const renderMainLabel = ({ x, y, width, value }) => {    
+  const renderMainLabel = ({ x, y, width, value }) => {
     return (
-      <text fill="#FFFFFF" x={x + width / 2} y={y + 14} textAnchor="middle" fontSize="12">{numberWithCommas(value)}</text>
-    )
-  }
+      <text fill="#FFFFFF" x={x + width / 2} y={y + 14} textAnchor="middle" fontSize="12">
+        {numberWithCommas(value)}
+      </text>
+    );
+  };
 
-
-  const CustomBar = (props) => {    
-    const { fill, x, y, width, height, sessionsCount, index, dropDueToIssues } = props;    
-    const yp = sessionsCount < MIN_BAR_HEIGHT ? (MIN_BAR_HEIGHT - 1): dropDueToIssues     
+  const CustomBar = (props) => {
+    const { fill, x, y, width, height, sessionsCount, index, dropDueToIssues } = props;
+    const yp = sessionsCount < MIN_BAR_HEIGHT ? MIN_BAR_HEIGHT - 1 : dropDueToIssues;
     const tmp = (height <= 20 ? 20 : height) - (TEMP[index].height > 20 ? 0 : TEMP[index].height);
     return (
-      <svg >
+      <svg>
         <rect x={x} y={y} width={width} height={tmp} fill={fill} />
       </svg>
-    )
-  }
-  const MainBar = (props) => {        
-    const { fill, x, y, width, height, sessionsCount, index, dropDueToIssues, hasSelection = false } = props;    
-    const yp = sessionsCount < MIN_BAR_HEIGHT ? (MIN_BAR_HEIGHT - 1): dropDueToIssues     
+    );
+  };
+  const MainBar = (props) => {
+    const {
+      fill,
+      x,
+      y,
+      width,
+      height,
+      sessionsCount,
+      index,
+      dropDueToIssues,
+      hasSelection = false,
+    } = props;
+    const yp = sessionsCount < MIN_BAR_HEIGHT ? MIN_BAR_HEIGHT - 1 : dropDueToIssues;
 
-    TEMP[index] = {height,y};
+    TEMP[index] = { height, y };
 
     return (
       <svg style={{ cursor: hasSelection ? '' : 'pointer' }}>
         <rect x={x} y={y} width={width} height={height} fill={fill} />
       </svg>
-    )
-  }
+    );
+  };
 
-  const renderDropPct = (props) => { // TODO
+  const renderDropPct = (props) => {
+    // TODO
     const { fill, x, y, width, height, value, totalBars } = props;
-    const barW = x + ((730 / totalBars) / 2);
-    
+    const barW = x + 730 / totalBars / 2;
+
     return (
-      <svg >
-        <rect x={barW} y={80} width={width} height={20} fill='red' />        
+      <svg>
+        <rect x={barW} y={80} width={width} height={20} fill="red" />
       </svg>
-    )
-  }
+    );
+  };
 
   const CustomTooltip = (props) => {
     const { payload } = props;
     if (payload.length === 0) return null;
     const { value, headerText } = payload[0].payload;
-  
+
     // const value = payload[0].payload.value;
     if (!value) return null;
     return (
       <div className="rounded border bg-white p-2">
         <div>{headerText}</div>
-        {value.map(i => (
+        {value.map((i) => (
           <div className="text-sm ml-2">{truncate(i, 30)}</div>
         ))}
       </div>
-    )
+    );
   };
-  // const CustomTooltip = ({ active, payload, msg = ''  }) => {    
+  // const CustomTooltip = ({ active, payload, msg = ''  }) => {
   //   return (
-  //     <div className="rounded border bg-white p-2">          
+  //     <div className="rounded border bg-white p-2">
   //       <p className="text-sm">{msg}</p>
   //     </div>
   //   );
   // };
 
-  const TEMP = {}
+  const TEMP = {};
 
   return (
     <div className="relative">
-      { activeStages.length === 2 && (
+      {activeStages.length === 2 && (
         <div
-          className="absolute right-0 top-0 cursor-pointer z-10" 
-          style={{marginRight: '60px', marginTop: '0' }}
+          className="absolute right-0 top-0 cursor-pointer z-10"
+          style={{ marginRight: '60px', marginTop: '0' }}
           onClick={resetActiveSatges}
         >
-          <Popup
-            content={ `Reset Selection` }
-          >
+          <AppTooltip title={`Reset Selection`}>
             <Icon name="sync-alt" size="15" color="teal" />
-          </Popup>
+          </AppTooltip>
         </div>
-      )}      
-      <BarChart width={800} height={190} data={data} 
-        margin={{top: 20, right: 20, left: 0, bottom: 0}}
+      )}
+      <BarChart
+        width={800}
+        height={190}
+        data={data}
+        margin={{ top: 20, right: 20, left: 0, bottom: 0 }}
         background={'transparent'}
       >
-          <CartesianGrid strokeDasharray="1 3" stroke="#BBB" vertical={false} />
-          {/* {activeStages.length < 2 && <Tooltip cursor={{ fill: 'transparent' }} content={<CustomTooltip msg={activeStages.length > 0 ? 'Select one more event.' : 'Select any two events to analyze in depth.'} />} />} */}
-          <Tooltip cursor={{ fill: 'transparent' }} content={CustomTooltip} />
+        <CartesianGrid strokeDasharray="1 3" stroke="#BBB" vertical={false} />
+        {/* {activeStages.length < 2 && <Tooltip cursor={{ fill: 'transparent' }} content={<CustomTooltip msg={activeStages.length > 0 ? 'Select one more event.' : 'Select any two events to analyze in depth.'} />} />} */}
+        <Tooltip cursor={{ fill: 'transparent' }} content={CustomTooltip} />
 
-          <Bar
-            dataKey="sessionsCount"
-            onClick={handleClick}
-            maxBarSize={80}            
-            stackId="a"
-            shape={<MainBar hasSelection={activeStages.length === 2} />}
-            cursor="pointer"
-            minPointSize={MIN_BAR_HEIGHT}
-            background={false}
-          >
-            <LabelList dataKey="sessionsCount" content={renderMainLabel} />
-            {
-              data.map((entry, index) => {
-                const selected = activeStages.includes(index) || (index > activeStages[0] && index < activeStages[1]);
-                const opacity = activeStages.length > 0 && !selected ? 0.4 : 1;                
-                return (
-                  <Cell                     
-                    cursor="pointer"
-                    fill={selected ? '#394EFF' : (opacity === 1 ? '#3EAAAF' : '#CCC') }
-                    key={`cell-${index}`}                    
-                  />
-                )
-              })
-            }
-          </Bar>
-          
-          <Bar
-            hide={activeStages.length !== 2}            
-            dataKey="dropDueToIssues"
-            onClick={handleClick}
-            maxBarSize={80}
-            stackId="a"       
-            shape={<CustomBar />}     
-            minPointSize={MIN_BAR_HEIGHT}
-          >
-            <LabelList dataKey="dropDueToIssues" content={renderDropLabel} />            
-            {
-              data.map((entry, index) => {
-                const selected = activeStages.includes(index) || (index > activeStages[0] && index < activeStages[1]);
-                const opacity = activeStages.length > 0 && !selected ? 0.4 : 1;                
-                return (
-                  <Cell                             
-                    opacity={opacity}
-                    cursor="pointer"
-                    fill={ activeStages[1] === index ? '#cc000040' : 'transparent' }
-                    key={`cell-${index}`}
-                  />
-                )
-              })
-            }
-          </Bar>
-          
-          <XAxis
-            stroke={0}
-            dataKey="label"
-            strokeWidth={0}
-            interval={0}
-            // tick ={{ fill: '#666', fontSize: 12 }}
-            tick={<CustomTick />}
-            xAxisId={0}
-          />
-          {/* <XAxis
+        <Bar
+          dataKey="sessionsCount"
+          onClick={handleClick}
+          maxBarSize={80}
+          stackId="a"
+          shape={<MainBar hasSelection={activeStages.length === 2} />}
+          cursor="pointer"
+          minPointSize={MIN_BAR_HEIGHT}
+          background={false}
+        >
+          <LabelList dataKey="sessionsCount" content={renderMainLabel} />
+          {data.map((entry, index) => {
+            const selected =
+              activeStages.includes(index) || (index > activeStages[0] && index < activeStages[1]);
+            const opacity = activeStages.length > 0 && !selected ? 0.4 : 1;
+            return (
+              <Cell
+                cursor="pointer"
+                fill={selected ? '#394EFF' : opacity === 1 ? '#3EAAAF' : '#CCC'}
+                key={`cell-${index}`}
+              />
+            );
+          })}
+        </Bar>
+
+        <Bar
+          hide={activeStages.length !== 2}
+          dataKey="dropDueToIssues"
+          onClick={handleClick}
+          maxBarSize={80}
+          stackId="a"
+          shape={<CustomBar />}
+          minPointSize={MIN_BAR_HEIGHT}
+        >
+          <LabelList dataKey="dropDueToIssues" content={renderDropLabel} />
+          {data.map((entry, index) => {
+            const selected =
+              activeStages.includes(index) || (index > activeStages[0] && index < activeStages[1]);
+            const opacity = activeStages.length > 0 && !selected ? 0.4 : 1;
+            return (
+              <Cell
+                opacity={opacity}
+                cursor="pointer"
+                fill={activeStages[1] === index ? '#cc000040' : 'transparent'}
+                key={`cell-${index}`}
+              />
+            );
+          })}
+        </Bar>
+
+        <XAxis
+          stroke={0}
+          dataKey="label"
+          strokeWidth={0}
+          interval={0}
+          // tick ={{ fill: '#666', fontSize: 12 }}
+          tick={<CustomTick />}
+          xAxisId={0}
+        />
+        {/* <XAxis
             stroke={0}
             xAxisId={1} 
             dataKey="value"
@@ -248,13 +284,21 @@ function FunnelGraph(props) {
             tick ={{ fill: '#666', fontSize: 12 }}
             tickFormatter={val => '"' + val + '"'}
           /> */}
-          <YAxis interval={ 0 } strokeWidth={0} tick ={{ fill: '#999999', fontSize: 11 }} tickFormatter={val => Styles.tickFormatter(val)} />
-        </BarChart>        
-      </div>
-  )
+        <YAxis
+          interval={0}
+          strokeWidth={0}
+          tick={{ fill: '#999999', fontSize: 11 }}
+          tickFormatter={(val) => Styles.tickFormatter(val)}
+        />
+      </BarChart>
+    </div>
+  );
 }
 
-export default connect(state => ({
-  activeStages: state.getIn(['funnels', 'activeStages']).toJS(),
-  liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
-}), { setActiveStages })(FunnelGraph)
+export default connect(
+  (state) => ({
+    activeStages: state.getIn(['funnels', 'activeStages']).toJS(),
+    liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
+  }),
+  { setActiveStages }
+)(FunnelGraph);
diff --git a/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js b/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
index be74d26b4..58e64d295 100644
--- a/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
+++ b/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
@@ -1,7 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { Icon, BackLink, IconButton, Dropdown, Popup, TextEllipsis, Button } from 'UI';
-import { remove as deleteFunnel, fetch, fetchInsights, fetchIssuesFiltered, fetchSessionsFiltered } from 'Duck/funnels';
-import { editFilter, editFunnelFilter, refresh, addFilter } from 'Duck/funnels';
+import React, { useState } from 'react';
+import { Icon, BackLink, IconButton, Dropdown, Tooltip, TextEllipsis, Button } from 'UI';
+import {
+  remove as deleteFunnel,
+  fetch,
+  fetchInsights,
+  fetchIssuesFiltered,
+  fetchSessionsFiltered,
+} from 'Duck/funnels';
+import { editFilter, editFunnelFilter, refresh } from 'Duck/funnels';
 import DateRange from 'Shared/DateRange';
 import { connect } from 'react-redux';
 import { confirm } from 'UI';
@@ -10,84 +16,107 @@ import stl from './funnelHeader.module.css';
 
 const Info = ({ label = '', value = '', className = 'mx-4' }) => {
   return (
-    <div className={className}>      
+    <div className={className}>
       <span className="color-gray-medium">{label}</span>
-      <span className="font-medium ml-2">{value}</span> 
+      <span className="font-medium ml-2">{value}</span>
     </div>
-  )
-}
+  );
+};
 
 const FunnelHeader = (props) => {
-  const { funnel, insights, funnels, onBack, funnelId, showFilters = false, funnelFilters, renameHandler } = props;
-  const [showSaveModal, setShowSaveModal] = useState(false)
+  const {
+    funnel,
+    insights,
+    funnels,
+    onBack,
+    funnelId,
+    showFilters = false,
+    funnelFilters,
+    renameHandler,
+  } = props;
+  const [showSaveModal, setShowSaveModal] = useState(false);
 
   const writeOption = (e, { name, value }) => {
-    props.redirect(value)
-    props.fetch(value).then(() => props.refresh(value))
-  }
+    props.redirect(value);
+    props.fetch(value).then(() => props.refresh(value));
+  };
 
   const deleteFunnel = async (e, funnel) => {
     e.preventDefault();
     e.stopPropagation();
-    
-    if (await confirm({
+
+    if (
+      await confirm({
         header: 'Delete Funnel',
         confirmButton: 'Delete',
-        confirmation: `Are you sure you want to permanently delete "${funnel.name}"?`
-    })) {
-        props.deleteFunnel(funnel.funnelId).then(props.onBack);
-    } else {}
-  }
-  
+        confirmation: `Are you sure you want to permanently delete "${funnel.name}"?`,
+      })
+    ) {
+      props.deleteFunnel(funnel.funnelId).then(props.onBack);
+    } else {
+    }
+  };
+
   const onDateChange = (e) => {
     props.editFunnelFilter(e, funnelId);
-  }
+  };
 
   const options = funnels.map(({ funnelId, name }) => ({ text: name, value: funnelId })).toJS();
-  const selectedFunnel = funnels.filter(i => i.funnelId === parseInt(funnelId)).first() || {};
-  const eventsCount = funnel.filter.filters.filter(i => i.isEvent).size;
+  const selectedFunnel = funnels.filter((i) => i.funnelId === parseInt(funnelId)).first() || {};
+  const eventsCount = funnel.filter.filters.filter((i) => i.isEvent).size;
 
   return (
     <div>
       <div className="bg-white border rounded flex items-center w-full relative group pr-2">
-        <BackLink onClick={onBack} vertical className="absolute" style={{ left: '-50px', top: '8px' }} />
-        <FunnelSaveModal
-          show={showSaveModal}
-          closeHandler={() => setShowSaveModal(false)}
-        />      
+        <BackLink
+          onClick={onBack}
+          vertical
+          className="absolute"
+          style={{ left: '-50px', top: '8px' }}
+        />
+        <FunnelSaveModal show={showSaveModal} closeHandler={() => setShowSaveModal(false)} />
         <div className="flex items-center mr-auto relative">
-          <Dropdown          
+          <Dropdown
             scrolling
             trigger={
-              <div className="text-xl capitalize font-medium" style={{ maxWidth: '300px', overflow: 'hidden'}}>
+              <div
+                className="text-xl capitalize font-medium"
+                style={{ maxWidth: '300px', overflow: 'hidden' }}
+              >
                 <TextEllipsis text={selectedFunnel.name} />
               </div>
-            }                 
+            }
             options={options}
-            className={ stl.dropdown }
+            className={stl.dropdown}
             name="funnel"
-            value={ parseInt(funnelId) }
+            value={parseInt(funnelId)}
             // icon={null}
-            onChange={ writeOption }
+            onChange={writeOption}
             selectOnBlur={false}
-            icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
+            icon={
+              <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} />
+            }
           />
           <Info label="Events" value={eventsCount} />
           <span>-</span>
-          <Button variant="text-primary" onClick={props.toggleFilters}>{ showFilters ? 'HIDE' : 'EDIT FUNNEL' }</Button>
-          <Info label="Sessions" value={insights.sessionsCount} />          
+          <Button variant="text-primary" onClick={props.toggleFilters}>
+            {showFilters ? 'HIDE' : 'EDIT FUNNEL'}
+          </Button>
+          <Info label="Sessions" value={insights.sessionsCount} />
           <Info label="Conversion" value={`${insights.conversions}%`} />
         </div>
-        <div className="flex items-center">   
+        <div className="flex items-center">
           <div className="flex items-center invisible group-hover:visible">
-            <Popup
-              content={ `Edit Funnel` }
-            >
-                <IconButton icon="edit" onClick={() => setShowSaveModal(true)} />
-            </Popup>
-            <Popup content={ `Remove Funnel` } >
-                <IconButton icon="trash" onClick={(e) => deleteFunnel(e, funnel)} className="ml-2 mr-2" />
-            </Popup>
+            <Tooltip title={`Edit Funnel`}>
+              <IconButton icon="edit" onClick={() => setShowSaveModal(true)} />
+            </Tooltip>
+            <Tooltip title={`Remove Funnel`}>
+              <IconButton
+                icon="trash"
+                onClick={(e) => deleteFunnel(e, funnel)}
+                className="ml-2 mr-2"
+              />
+            </Tooltip>
           </div>
           <DateRange
             rangeValue={funnelFilters.rangeValue}
@@ -99,10 +128,22 @@ const FunnelHeader = (props) => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default connect(state => ({
-  funnelFilters: state.getIn([ 'funnels', 'funnelFilters' ]).toJS(),
-  funnel: state.getIn([ 'funnels', 'instance' ]),
-}), { editFilter, editFunnelFilter, deleteFunnel, fetch, fetchInsights, fetchIssuesFiltered, fetchSessionsFiltered, refresh })(FunnelHeader)
+export default connect(
+  (state) => ({
+    funnelFilters: state.getIn(['funnels', 'funnelFilters']).toJS(),
+    funnel: state.getIn(['funnels', 'instance']),
+  }),
+  {
+    editFilter,
+    editFunnelFilter,
+    deleteFunnel,
+    fetch,
+    fetchInsights,
+    fetchIssuesFiltered,
+    fetchSessionsFiltered,
+    refresh,
+  }
+)(FunnelHeader);
diff --git a/frontend/app/components/Funnels/FunnelMenuItem/FunnelMenuItem.js b/frontend/app/components/Funnels/FunnelMenuItem/FunnelMenuItem.js
index 68a7686b4..7693eb927 100644
--- a/frontend/app/components/Funnels/FunnelMenuItem/FunnelMenuItem.js
+++ b/frontend/app/components/Funnels/FunnelMenuItem/FunnelMenuItem.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import cn from 'classnames'
-import stl from './funnelMenuItem.module.css'
-import { Icon, ItemMenu, Popup } from 'UI'
+import React from 'react';
+import cn from 'classnames';
+import stl from './funnelMenuItem.module.css';
+import { Icon, Tooltip } from 'UI';
 
 function FunnelMenuItem({
   iconName = 'info',
@@ -14,31 +14,34 @@ function FunnelMenuItem({
 }) {
   return (
     <div
-      className={ cn(
-        className,
-        stl.menuItem,
-        "flex items-center py-1 justify-between group",
-        { [stl.active] : active }
-      )}
+      className={cn(className, stl.menuItem, 'flex items-center py-1 justify-between group', {
+        [stl.active]: active,
+      })}
       onClick={disabled ? null : onClick}
     >
-      <div className={ cn(stl.iconLabel, 'flex items-center', { [stl.disabled] : disabled })}>
+      <div className={cn(stl.iconLabel, 'flex items-center', { [stl.disabled]: disabled })}>
         <div className="flex items-center justify-center w-8 h-8 flex-shrink-0">
-          <Icon name={ iconName } size={ 16 } color={'gray-dark'} className="absolute" />
+          <Icon name={iconName} size={16} color={'gray-dark'} className="absolute" />
         </div>
-        <span className={cn(stl.title, 'cap-first')}>{ title }</span>
+        <span className={cn(stl.title, 'cap-first')}>{title}</span>
       </div>
       <div className="flex items-center">
-        <div className={cn("mx-2", { 'invisible': !isPublic })}>
-          <Popup content={ `Shared with team` } >
-              <div className={cn("bg-gray-light h-8 w-8 rounded-full flex items-center justify-center", stl.teamIcon)} style={{ opacity: '0.3'}}>
-                <Icon name="user-friends" color="gray-dark" size={16} />
-              </div>
-          </Popup>
-        </div>        
-      </div>      
+        <div className={cn('mx-2', { invisible: !isPublic })}>
+          <Tooltip title={`Shared with team`}>
+            <div
+              className={cn(
+                'bg-gray-light h-8 w-8 rounded-full flex items-center justify-center',
+                stl.teamIcon
+              )}
+              style={{ opacity: '0.3' }}
+            >
+              <Icon name="user-friends" color="gray-dark" size={16} />
+            </div>
+          </Tooltip>
+        </div>
+      </div>
     </div>
-  )
+  );
 }
 
-export default FunnelMenuItem
+export default FunnelMenuItem;
diff --git a/frontend/app/components/Funnels/IssueItem/IssueGraph.js b/frontend/app/components/Funnels/IssueItem/IssueGraph.js
index 0c3827c75..958e10cc2 100644
--- a/frontend/app/components/Funnels/IssueItem/IssueGraph.js
+++ b/frontend/app/components/Funnels/IssueItem/IssueGraph.js
@@ -1,30 +1,45 @@
-import React from 'react'
-import { Popup } from 'UI'
+import React from 'react';
+import { Tooltip } from 'UI';
 
 function IssueGraph({ issue }) {
   return (
-    <div className="flex rounded-sm" style={{ width: '600px' }}>            
-      <Popup content={ `Unaffected sessions` } >
-          <div style={{ width: issue.unaffectedSessionsPer + '%' }} className="relative">        
-            <div className="w-full relative rounded-tl-sm rounded-bl-sm" style={{ height: '18px', backgroundColor: 'rgba(217, 219, 238, 0.7)' }} />
-            <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.unaffectedSessions}</div>            
+    <div className="flex rounded-sm" style={{ width: '600px' }}>
+      <Tooltip title={`Unaffected sessions`}>
+        <div style={{ width: issue.unaffectedSessionsPer + '%' }} className="relative">
+          <div
+            className="w-full relative rounded-tl-sm rounded-bl-sm"
+            style={{ height: '18px', backgroundColor: 'rgba(217, 219, 238, 0.7)' }}
+          />
+          <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">
+            {issue.unaffectedSessions}
           </div>
-      </Popup>
-      <Popup content={ `Affected sessions` } >
-          <div style={{ width: issue.affectedSessionsPer + '%'}} className="border-l relative">
-            <div className="w-full relative" style={{ height: '18px', backgroundColor: 'rgba(238, 238, 238, 0.7)' }} />
-            <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">{issue.affectedSessions}</div>
-            {/* <div className="absolute left-0 ml-1 text-xs">{issue.affectedSessionsPer}</div> */}
+        </div>
+      </Tooltip>
+      <Tooltip title={`Affected sessions`}>
+        <div style={{ width: issue.affectedSessionsPer + '%' }} className="border-l relative">
+          <div
+            className="w-full relative"
+            style={{ height: '18px', backgroundColor: 'rgba(238, 238, 238, 0.7)' }}
+          />
+          <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">
+            {issue.affectedSessions}
           </div>
-      </Popup>
-      <Popup content={ `Conversion lost` } >
-          <div style={{ width: issue.lostConversionsPer + '%'}} className="border-l relative">
-            <div className="w-full relative rounded-tr-sm rounded-br-sm" style={{ height: '18px', backgroundColor: 'rgba(204, 0, 0, 0.26)' }} />
-            <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm color-red">{issue.lostConversions}</div>            
+          {/* <div className="absolute left-0 ml-1 text-xs">{issue.affectedSessionsPer}</div> */}
+        </div>
+      </Tooltip>
+      <Tooltip title={`Conversion lost`}>
+        <div style={{ width: issue.lostConversionsPer + '%' }} className="border-l relative">
+          <div
+            className="w-full relative rounded-tr-sm rounded-br-sm"
+            style={{ height: '18px', backgroundColor: 'rgba(204, 0, 0, 0.26)' }}
+          />
+          <div className="absolute ml-2 font-bold top-0 bottom-0 text-sm color-red">
+            {issue.lostConversions}
           </div>
-      </Popup>
+        </div>
+      </Tooltip>
     </div>
-  )
+  );
 }
 
-export default IssueGraph
+export default IssueGraph;
diff --git a/frontend/app/components/Header/Header.js b/frontend/app/components/Header/Header.js
index 2b3cf1192..b00ebb93b 100644
--- a/frontend/app/components/Header/Header.js
+++ b/frontend/app/components/Header/Header.js
@@ -4,7 +4,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import cn from 'classnames';
 import { client, CLIENT_DEFAULT_TAB } from 'App/routes';
 import { logout } from 'Duck/user';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import styles from './header.module.css';
 import OnboardingExplore from './OnboardingExplore/OnboardingExplore';
 import Notifications from '../Alerts/Notifications';
@@ -68,7 +68,7 @@ const Header = (props) => {
 
         <Notifications />
         <div className={cn(styles.userDetails, 'group cursor-pointer')}>
-          <Popup content={`Preferences`} disabled>
+          <Tooltip title={`Preferences`} disabled>
             <div className="flex items-center">
               <NavLink to={CLIENT_PATH}>
                 <Icon name="gear" size="20" color="gray-dark" />
@@ -76,7 +76,7 @@ const Header = (props) => {
 
               <SettingsMenu className="invisible group-hover:visible" account={account} />
             </div>
-          </Popup>
+          </Tooltip>
         </div>
 
         <div className={cn(styles.userDetails, 'group cursor-pointer')}>
diff --git a/frontend/app/components/Session/IOSPlayer/Network.js b/frontend/app/components/Session/IOSPlayer/Network.js
index 3956b7031..3d9a8e11a 100644
--- a/frontend/app/components/Session/IOSPlayer/Network.js
+++ b/frontend/app/components/Session/IOSPlayer/Network.js
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
 import { useState, useCallback } from 'react';
-import { Popup, SlideModal } from 'UI';
+import { Tooltip, SlideModal } from 'UI';
 
 import { NETWORK } from 'Player/ios/state';
 
@@ -24,13 +24,13 @@ const COLUMNS = [
     label: 'url',
     width: 130,
     render: (r) => (
-      <Popup
-        content={<div className={cls.popupNameContent}>{r.url}</div>}
+      <Tooltip
+        title={<div className={cls.popupNameContent}>{r.url}</div>}
         size="mini"
         position="right center"
       >
         <div className={cls.popupNameTrigger}>{r.url}</div>
-      </Popup>
+      </Tooltip>
     ),
   },
   {
diff --git a/frontend/app/components/Session/Layout/Player/Timeline.js b/frontend/app/components/Session/Layout/Player/Timeline.js
index 6aecca736..a388e1adb 100644
--- a/frontend/app/components/Session/Layout/Player/Timeline.js
+++ b/frontend/app/components/Session/Layout/Player/Timeline.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCallback } from 'react';
 import cn from 'classnames';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import { CRASHES, EVENTS } from 'Player/ios/state';
 import TimeTracker from './TimeTracker';
 import PlayerTime from './PlayerTime';
@@ -28,12 +28,10 @@ export default function Timeline({ player }) {
           <div key={e.key} className={cls.event} style={{ left: `${e.time * scale}%` }} />
         ))}
         {player.lists[CRASHES].list.map((e) => (
-          <Popup
+          <Tooltip
             key={e.key}
-            offset="-19"
-            pinned
             className="error"
-            content={
+            title={
               <div className={cls.popup}>
                 <b>{`Crash ${e.name}:`}</b>
                 <br />
@@ -46,7 +44,7 @@ export default function Timeline({ player }) {
               className={cn(cls.markup, cls.error)}
               style={{ left: `${e.time * scale}%` }}
             />
-          </Popup>
+          </Tooltip>
         ))}
       </div>
       <PlayerTime player={player} timeKey="endTime" />
diff --git a/frontend/app/components/Session_/Issues/IssueListItem.js b/frontend/app/components/Session_/Issues/IssueListItem.js
index 1ccdbcfe2..c0e561a33 100644
--- a/frontend/app/components/Session_/Issues/IssueListItem.js
+++ b/frontend/app/components/Session_/Issues/IssueListItem.js
@@ -1,29 +1,32 @@
 import React from 'react';
 import cn from 'classnames';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import stl from './issueListItem.module.css';
 
 const IssueListItem = ({ issue, onClick, icon, user, active }) => {
   return (
     <div
-      onClick={ () => onClick(issue) }
-      className={ cn(stl.wrapper, active ? 'active-bg' : '', 'flex flex-col justify-between cursor-pointer text-base text-gray-800')}
+      onClick={() => onClick(issue)}
+      className={cn(
+        stl.wrapper,
+        active ? 'active-bg' : '',
+        'flex flex-col justify-between cursor-pointer text-base text-gray-800'
+      )}
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center">
-          { icon }
-          {/* <img src={ icon } width="16" height="16" className="mr-3" /> */}
-          <span>{ issue.id }</span>
+          {icon}
+          <span>{issue.id}</span>
         </div>
         <div className="flex items-center">
-          { user && 
-            <Popup content={ 'Assignee ' + user.name } >
-              <img src={ user.avatarUrls['24x24'] } width="24" height="24" />
-            </Popup>
-          }
+          {user && (
+            <Tooltip title={'Assignee ' + user.name}>
+              <img src={user.avatarUrls['24x24']} width="24" height="24" />
+            </Tooltip>
+          )}
         </div>
       </div>
-      <div className={ stl.title }>{ issue.title  }</div>
+      <div className={stl.title}>{issue.title}</div>
     </div>
   );
 };
diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js
index 08779abd6..f824cba09 100644
--- a/frontend/app/components/Session_/Network/Network.js
+++ b/frontend/app/components/Session_/Network/Network.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { connectPlayer, jump, pause } from 'Player';
-import { Popup, Button, TextEllipsis } from 'UI';
+import { Tooltip, Button, TextEllipsis } from 'UI';
 import { getRE } from 'App/utils';
 import { TYPES } from 'Types/session/resource';
 import stl from './network.module.css';
@@ -29,12 +29,12 @@ const TAB_TO_TYPE_MAP = {
 export function renderName(r) {
   return (
     <div className="flex justify-between items-center grow-0 w-full">
-      <Popup
+      <Tooltip
         style={{ maxWidth: '75%' }}
-        content={<div className={stl.popupNameContent}>{r.url}</div>}
+        title={<div className={stl.popupNameContent}>{r.url}</div>}
       >
         <TextEllipsis>{r.name}</TextEllipsis>
-      </Popup>
+      </Tooltip>
     </div>
   );
 }
@@ -56,9 +56,9 @@ export function renderDuration(r) {
   }
 
   return (
-    <Popup content={tooltipText}>
+    <Tooltip title={tooltipText}>
       <div className={cn(className, stl.duration)}> {text} </div>
-    </Popup>
+    </Tooltip>
   );
 }
 
diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js
index e0f91587c..5f335dbf3 100644
--- a/frontend/app/components/Session_/Network/NetworkContent.js
+++ b/frontend/app/components/Session_/Network/NetworkContent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 // import { connectPlayer } from 'Player';
-import { QuestionMarkHint, Popup, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI';
+import { QuestionMarkHint, Tooltip, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI';
 import { getRE } from 'App/utils';
 import { TYPES } from 'Types/session/resource';
 import { formatBytes } from 'App/utils';
@@ -40,17 +40,17 @@ const LOAD_TIME_COLOR = 'red';
 
 export function renderType(r) {
   return (
-    <Popup style={{ width: '100%' }} content={<div className={stl.popupNameContent}>{r.type}</div>}>
+    <Tooltip style={{ width: '100%' }} title={<div className={stl.popupNameContent}>{r.type}</div>}>
       <div className={stl.popupNameTrigger}>{r.type}</div>
-    </Popup>
+    </Tooltip>
   );
 }
 
 export function renderName(r) {
   return (
-    <Popup style={{ width: '100%' }} content={<div className={stl.popupNameContent}>{r.url}</div>}>
+    <Tooltip style={{ width: '100%' }} title={<div className={stl.popupNameContent}>{r.url}</div>}>
       <div className={stl.popupNameTrigger}>{r.name}</div>
-    </Popup>
+    </Tooltip>
   );
 }
 
@@ -76,7 +76,6 @@ const renderXHRText = () => (
   <span className="flex items-center">
     {XHR}
     <QuestionMarkHint
-      onHover={true}
       content={
         <>
           Use our{' '}
@@ -129,9 +128,9 @@ function renderSize(r) {
   }
 
   return (
-    <Popup style={{ width: '100%' }} content={content}>
+    <Tooltip style={{ width: '100%' }} content={content}>
       <div>{triggerText}</div>
-    </Popup>
+    </Tooltip>
   );
 }
 
@@ -152,9 +151,9 @@ export function renderDuration(r) {
   }
 
   return (
-    <Popup style={{ width: '100%' }} content={tooltipText}>
+    <Tooltip style={{ width: '100%' }} content={tooltipText}>
       <div className={cn(className, stl.duration)}> {text} </div>
-    </Popup>
+    </Tooltip>
   );
 }
 
@@ -244,7 +243,7 @@ export default class NetworkContent extends React.PureComponent {
           <BottomBlock.Content>
             <div className="flex items-center justify-between px-4">
               <div>
-              <Toggler checked={true} name="test" onChange={() => {}} label="4xx-5xx Only" />
+                <Toggler checked={true} name="test" onChange={() => {}} label="4xx-5xx Only" />
               </div>
               <InfoLine>
                 <InfoLine.Point label={filtered.length} value=" requests" />
diff --git a/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx b/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
index c07086fdb..c5545fbb6 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
@@ -1,66 +1,87 @@
 import React from 'react';
 import cn from 'classnames';
 import { getTimelinePosition } from 'App/utils';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import PerformanceGraph from '../PerformanceGraph';
 interface Props {
-    list?: any[];
-    title: string;
-    message?: string;
-    className?: string;
-    endTime?: number;
-    renderElement?: (item: any) => React.ReactNode;
-    isGraph?: boolean;
-    zIndex?: number;
-    noMargin?: boolean;
-
+  list?: any[];
+  title: string;
+  message?: string;
+  className?: string;
+  endTime?: number;
+  renderElement?: (item: any) => React.ReactNode;
+  isGraph?: boolean;
+  zIndex?: number;
+  noMargin?: boolean;
 }
 const EventRow = React.memo((props: Props) => {
-    const { title, className, list = [], endTime = 0, isGraph = false, message = '' } = props;
-    const scale = 100 / endTime;
-    const _list =
-        !isGraph &&
-        React.useMemo(() => {
-            return list.map((item: any, _index: number) => {
-                const spread = item.toJS ? { ...item.toJS() } : { ...item }
-                return {
-                    ...spread,
-                    left: getTimelinePosition(item.time, scale),
-                };
-            });
-        }, [list]);
+  const { title, className, list = [], endTime = 0, isGraph = false, message = '' } = props;
+  const scale = 100 / endTime;
+  const _list =
+    !isGraph &&
+    React.useMemo(() => {
+      return list.map((item: any, _index: number) => {
+        const spread = item.toJS ? { ...item.toJS() } : { ...item };
+        return {
+          ...spread,
+          left: getTimelinePosition(item.time, scale),
+        };
+      });
+    }, [list]);
 
-    return (
-        <div className={cn('w-full flex flex-col py-2', className)} style={{ height: isGraph ? 60 : 50 }}>
-            <div className={cn("uppercase color-gray-medium text-sm flex items-center py-1", props.noMargin ? '' : 'ml-4' )}>
-                <div style={{ zIndex: props.zIndex ? props.zIndex : undefined }} className="mr-2 leading-none">{title}</div>
-                {message ? <RowInfo zIndex={props.zIndex} message={message} /> : null}
-            </div>
-            <div className="relative w-full" style={{ zIndex: props.zIndex ? props.zIndex : undefined }}>
-                {isGraph ? (
-                    <PerformanceGraph list={list} />
-                ) : (
-                    _list.length > 0 ? _list.map((item: any, index: number) => {
-                        return (
-                            <div key={index} className="absolute" style={{ left: `clamp(0%, calc(${item.left}% - 7px), calc(100% - 14px))`, zIndex: props.zIndex ? props.zIndex : undefined }}>
-                                {props.renderElement ? props.renderElement(item) : null}
-                            </div>
-                        );
-                    }) : (
-                        <div className={cn("color-gray-medium text-sm pt-2", props.noMargin ? '' : 'ml-4')}>None captured.</div>
-                    )
-                )}
-            </div>
+  return (
+    <div
+      className={cn('w-full flex flex-col py-2', className)}
+      style={{ height: isGraph ? 60 : 50 }}
+    >
+      <div
+        className={cn(
+          'uppercase color-gray-medium text-sm flex items-center py-1',
+          props.noMargin ? '' : 'ml-4'
+        )}
+      >
+        <div
+          style={{ zIndex: props.zIndex ? props.zIndex : undefined }}
+          className="mr-2 leading-none"
+        >
+          {title}
         </div>
-    );
+        {message ? <RowInfo zIndex={props.zIndex} message={message} /> : null}
+      </div>
+      <div className="relative w-full" style={{ zIndex: props.zIndex ? props.zIndex : undefined }}>
+        {isGraph ? (
+          <PerformanceGraph list={list} />
+        ) : _list.length > 0 ? (
+          _list.map((item: any, index: number) => {
+            return (
+              <div
+                key={index}
+                className="absolute"
+                style={{
+                  left: `clamp(0%, calc(${item.left}% - 7px), calc(100% - 14px))`,
+                  zIndex: props.zIndex ? props.zIndex : undefined,
+                }}
+              >
+                {props.renderElement ? props.renderElement(item) : null}
+              </div>
+            );
+          })
+        ) : (
+          <div className={cn('color-gray-medium text-sm pt-2', props.noMargin ? '' : 'ml-4')}>
+            None captured.
+          </div>
+        )}
+      </div>
+    </div>
+  );
 });
 
 export default EventRow;
 
-function RowInfo({ message, zIndex } : any) {
-    return (
-     <Popup content={message} delay={0} style={{ zIndex: zIndex ? zIndex : undefined }}>
-        <Icon name="info-circle" color="gray-medium"/>
-     </Popup>
-    )
+function RowInfo({ message, zIndex }: any) {
+  return (
+    <Tooltip title={message} delay={0} style={{ zIndex: zIndex ? zIndex : undefined }}>
+      <Icon name="info-circle" color="gray-medium" />
+    </Tooltip>
+  );
 }
diff --git a/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx b/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
index 1f1c35912..c91e2b362 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, Popup } from 'UI';
+import { Checkbox, Tooltip } from 'UI';
 
 const NETWORK = 'NETWORK';
 const ERRORS = 'ERRORS';
@@ -8,48 +8,48 @@ const CLICKRAGE = 'CLICKRAGE';
 const PERFORMANCE = 'PERFORMANCE';
 
 export const HELP_MESSAGE: any = {
-    NETWORK: 'Network requests made in this session',
-    EVENTS: 'Visualizes the events that takes place in the DOM',
-    ERRORS: 'Visualizes native JS errors like Type, URI, Syntax etc.',
-    CLICKRAGE: 'Indicates user frustration when repeated clicks are recorded',
-    PERFORMANCE: 'Summary of this session’s memory, and CPU consumption on the timeline',
-}
+  NETWORK: 'Network requests made in this session',
+  EVENTS: 'Visualizes the events that takes place in the DOM',
+  ERRORS: 'Visualizes native JS errors like Type, URI, Syntax etc.',
+  CLICKRAGE: 'Indicates user frustration when repeated clicks are recorded',
+  PERFORMANCE: 'Summary of this session’s memory, and CPU consumption on the timeline',
+};
 
 interface Props {
-    list: any[];
-    updateList: any;
+  list: any[];
+  updateList: any;
 }
 function FeatureSelection(props: Props) {
-    const { list } = props;
-    const features = [NETWORK, ERRORS, EVENTS, CLICKRAGE, PERFORMANCE];
-    const disabled = list.length >= 3;
+  const { list } = props;
+  const features = [NETWORK, ERRORS, EVENTS, CLICKRAGE, PERFORMANCE];
+  const disabled = list.length >= 3;
 
-    return (
-        <React.Fragment>
-            {features.map((feature, index) => {
-                const checked = list.includes(feature);
-                const _disabled = disabled && !checked;
-                return (
-                    <Popup content="X-RAY supports up to 3 views" disabled={!_disabled} delay={0}>
-                        <Checkbox
-                            key={index}
-                            label={feature}
-                            checked={checked}
-                            className="mx-4"
-                            disabled={_disabled}
-                            onClick={() => {
-                                if (checked) {
-                                    props.updateList(list.filter((item: any) => item !== feature));
-                                } else {
-                                    props.updateList([...list, feature]);
-                                }
-                        }}
-                    />
-                    </Popup>
-                );
-            })}
-        </React.Fragment>
-    );
+  return (
+    <React.Fragment>
+      {features.map((feature, index) => {
+        const checked = list.includes(feature);
+        const _disabled = disabled && !checked;
+        return (
+          <Tooltip title="X-RAY supports up to 3 views" disabled={!_disabled} delay={0}>
+            <Checkbox
+              key={index}
+              label={feature}
+              checked={checked}
+              className="mx-4"
+              disabled={_disabled}
+              onClick={() => {
+                if (checked) {
+                  props.updateList(list.filter((item: any) => item !== feature));
+                } else {
+                  props.updateList([...list, feature]);
+                }
+              }}
+            />
+          </Tooltip>
+        );
+      })}
+    </React.Fragment>
+  );
 }
 
 export default FeatureSelection;
diff --git a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
index 6c05e5739..0d6f3ba31 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import { connectPlayer, Controls } from 'App/player';
-import { toggleBottomBlock, NETWORK, EXCEPTIONS, PERFORMANCE } from 'Duck/components/player';
+import { Controls } from 'App/player';
+import { NETWORK, EXCEPTIONS } from 'Duck/components/player';
 import { useModal } from 'App/components/Modal';
-import { Icon, ErrorDetails, Popup } from 'UI';
-import { Tooltip } from 'react-tippy';
-import { TYPES as EVENT_TYPES } from 'Types/session/event';
+import { Icon, Tooltip } from 'UI';
 import StackEventModal from '../StackEventModal';
 import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 import FetchDetails from 'Shared/FetchDetailsModal';
@@ -46,54 +44,58 @@ const TimelinePointer = React.memo((props: Props) => {
   const renderNetworkElement = (item: any) => {
     const name = item.name || '';
     return (
-      <Popup
-        content={
+      <Tooltip
+        title={
           <div className="">
             <b>{item.success ? 'Slow resource: ' : 'Missing resource:'}</b>
             <br />
-            {name.length > 200 ? name.slice(0, 100) + ' ... ' + name.slice(-50) : name.length > 200 ? (item.name.slice(0, 100) + ' ... ' + item.name.slice(-50)) : item.name}
+            {name.length > 200
+              ? name.slice(0, 100) + ' ... ' + name.slice(-50)
+              : name.length > 200
+              ? item.name.slice(0, 100) + ' ... ' + item.name.slice(-50)
+              : item.name}
           </div>
         }
         delay={0}
-        position="top"
+        placement="top"
       >
         <div onClick={createEventClickHandler(item, NETWORK)} className="cursor-pointer">
           <div className="h-4 w-4 rounded-full bg-red text-white font-bold flex items-center justify-center text-sm">
             <span>!</span>
           </div>
         </div>
-      </Popup>
+      </Tooltip>
     );
   };
 
   const renderClickRageElement = (item: any) => {
     return (
-      <Popup
-        content={
+      <Tooltip
+        title={
           <div className="">
             <b>{'Click Rage'}</b>
           </div>
         }
         delay={0}
-        position="top"
+        placement="top"
       >
         <div onClick={createEventClickHandler(item, null)} className="cursor-pointer">
           <Icon className="bg-white" name="funnel/emoji-angry" color="red" size="16" />
         </div>
-      </Popup>
+      </Tooltip>
     );
   };
 
   const renderStackEventElement = (item: any) => {
     return (
-      <Popup
-        content={
+      <Tooltip
+        title={
           <div className="">
             <b>{'Stack Event'}</b>
           </div>
         }
         delay={0}
-        position="top"
+        placement="top"
       >
         <div
           onClick={createEventClickHandler(item, 'EVENT')}
@@ -101,20 +103,20 @@ const TimelinePointer = React.memo((props: Props) => {
         >
           {/* <Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" /> */}
         </div>
-      </Popup>
+      </Tooltip>
     );
   };
 
   const renderPerformanceElement = (item: any) => {
     return (
-      <Popup
-        content={
+      <Tooltip
+        title={
           <div className="">
             <b>{item.type}</b>
           </div>
         }
         delay={0}
-        position="top"
+        placement="top"
       >
         <div
           onClick={createEventClickHandler(item, EXCEPTIONS)}
@@ -122,14 +124,14 @@ const TimelinePointer = React.memo((props: Props) => {
         >
           {/* <Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" /> */}
         </div>
-      </Popup>
+      </Tooltip>
     );
   };
 
   const renderExceptionElement = (item: any) => {
     return (
-      <Popup
-        content={
+      <Tooltip
+        title={
           <div className="">
             <b>{'Exception'}</b>
             <br />
@@ -137,14 +139,14 @@ const TimelinePointer = React.memo((props: Props) => {
           </div>
         }
         delay={0}
-        position="top"
+        placement="top"
       >
         <div onClick={createEventClickHandler(item, 'ERRORS')} className="cursor-pointer">
           <div className="h-4 w-4 rounded-full bg-red text-white font-bold flex items-center justify-center text-sm">
-              <span>!</span>
-            </div>
+            <span>!</span>
+          </div>
         </div>
-      </Popup>
+      </Tooltip>
     );
   };
 
diff --git a/frontend/app/components/Session_/TimeTable/BarRow.tsx b/frontend/app/components/Session_/TimeTable/BarRow.tsx
index 9de1a8279..98aa3e3fb 100644
--- a/frontend/app/components/Session_/TimeTable/BarRow.tsx
+++ b/frontend/app/components/Session_/TimeTable/BarRow.tsx
@@ -1,25 +1,30 @@
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import { percentOf } from 'App/utils';
-import styles from './barRow.module.css'
+import styles from './barRow.module.css';
 import tableStyles from './timeTable.module.css';
 import React from 'react';
 
-const formatTime = time => time < 1000 ? `${time.toFixed(2)}ms` : `${time / 1000}s`;
+const formatTime = (time) => (time < 1000 ? `${time.toFixed(2)}ms` : `${time / 1000}s`);
 
 interface Props {
   resource: {
-    time: number
-    ttfb?: number
-    duration?: number
-    key: string
-  }
-  popup?: boolean
-  timestart: number
-  timewidth: number
+    time: number;
+    ttfb?: number;
+    duration?: number;
+    key: string;
+  };
+  popup?: boolean;
+  timestart: number;
+  timewidth: number;
 }
 
 // TODO: If request has no duration, set duration to 0.2s. Enforce existence of duration in the future.
-const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = false, timestart = 0, timewidth }: Props) => {
+const BarRow = ({
+  resource: { time, ttfb = 0, duration = 200, key },
+  popup = false,
+  timestart = 0,
+  timewidth,
+}: Props) => {
   const timeOffset = time - timestart;
   ttfb = ttfb || 0;
   const trigger = (
@@ -28,7 +33,7 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
       style={{
         left: `${percentOf(timeOffset, timewidth)}%`,
         right: `${100 - percentOf(timeOffset + duration, timewidth)}%`,
-        minWidth: '5px'
+        minWidth: '5px',
       }}
     >
       <div
@@ -41,23 +46,28 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
         className={styles.downloadBar}
         style={{
           width: `${percentOf(duration - ttfb, duration)}%`,
-          minWidth: '5px'
+          minWidth: '5px',
         }}
       />
     </div>
   );
-  if (!popup) return <div key={key} className={tableStyles.row} > {trigger} </div>;
+  if (!popup)
+    return (
+      <div key={key} className={tableStyles.row}>
+        {' '}
+        {trigger}{' '}
+      </div>
+    );
 
   return (
-    <div key={key} className={tableStyles.row} >
-      <Popup
-        basic
-        content={
+    <div key={key} className={tableStyles.row}>
+      <Tooltip
+        title={
           <React.Fragment>
-            {ttfb != null &&
+            {ttfb != null && (
               <div className={styles.popupRow}>
                 <div className={styles.title}>{'Waiting (TTFB)'}</div>
-                <div className={styles.popupBarWrapper} >
+                <div className={styles.popupBarWrapper}>
                   <div
                     className={styles.ttfbBar}
                     style={{
@@ -66,11 +76,11 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
                     }}
                   />
                 </div>
-                <div className={styles.time} >{formatTime(ttfb)}</div>
+                <div className={styles.time}>{formatTime(ttfb)}</div>
               </div>
-            }
+            )}
             <div className={styles.popupRow}>
-              <div className={styles.title} >{'Content Download'}</div>
+              <div className={styles.title}>{'Content Download'}</div>
               <div className={styles.popupBarWrapper}>
                 <div
                   className={styles.downloadBar}
@@ -86,11 +96,13 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
         }
         size="mini"
         position="top center"
-      />
+      >
+        {trigger}
+      </Tooltip>
     </div>
   );
-}
+};
 
-BarRow.displayName = "BarRow";
+BarRow.displayName = 'BarRow';
 
-export default BarRow;
\ No newline at end of file
+export default BarRow;
diff --git a/frontend/app/components/hocs/withCopy.tsx b/frontend/app/components/hocs/withCopy.tsx
index 702ddae54..374f287ec 100644
--- a/frontend/app/components/hocs/withCopy.tsx
+++ b/frontend/app/components/hocs/withCopy.tsx
@@ -3,25 +3,25 @@ import copy from 'copy-to-clipboard';
 import { Tooltip } from 'UI';
 
 const withCopy = (WrappedComponent: React.ComponentType) => {
-    const ComponentWithCopy = (props: any) => {
-        const [copied, setCopied] = React.useState(false);
-        const { value, tooltip } = props;
-        const copyToClipboard = (text: string) => {
-            copy(text);
-            setCopied(true);
-            setTimeout(() => {
-                setCopied(false);
-            }, 1000);
-        };
-        return (
-            <div onClick={() => copyToClipboard(value)} className="w-fit">
-                <Tooltip title={copied ? tooltip : 'Click to copy'}>
-                    <WrappedComponent {...props} copyToClipboard={copyToClipboard} />
-                </Tooltip>
-            </div>
-        );
+  const ComponentWithCopy = (props: any) => {
+    const [copied, setCopied] = React.useState(false);
+    const { value, tooltip } = props;
+    const copyToClipboard = (text: string) => {
+      copy(text);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
     };
-    return ComponentWithCopy;
+    return (
+      <div onClick={() => copyToClipboard(value)} className="w-fit cursor-pointer">
+        <Tooltip title={copied ? tooltip : 'Click to copy'} delay={0}>
+          <WrappedComponent {...props} copyToClipboard={copyToClipboard} />
+        </Tooltip>
+      </div>
+    );
+  };
+  return ComponentWithCopy;
 };
 
 export default withCopy;
diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx
index 9dc2b8c4d..04c88e589 100644
--- a/frontend/app/components/shared/Bookmark/Bookmark.tsx
+++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Popup, Button, Icon } from 'UI';
+import { Tooltip, Button, Icon } from 'UI';
 import { toggleFavorite } from 'Duck/sessions';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 
 interface Props {
   toggleFavorite: (sessionId: string) => Promise<void>;
-  favorite: Boolean;
+  favorite: boolean;
   sessionId: any;
-  isEnterprise: Boolean;
+  isEnterprise: boolean;
   noMargin?: boolean;
 }
 function Bookmark(props: Props) {
@@ -37,12 +37,7 @@ function Bookmark(props: Props) {
 
   return (
     <div onClick={toggleFavorite} className="w-full">
-      <Popup
-        delay={500}
-        content={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
-        hideOnClick={true}
-        distance={20}
-      >
+      <Tooltip title={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}>
         {noMargin ? (
           <div className="flex items-center cursor-pointer h-full w-full p-3">
             <Icon
@@ -62,13 +57,13 @@ function Bookmark(props: Props) {
             <span className="ml-2">{isEnterprise ? 'Vault' : 'Bookmark'}</span>
           </Button>
         )}
-      </Popup>
+      </Tooltip>
     </div>
   );
 }
 
 export default connect(
-  (state) => ({
+  (state: any) => ({
     isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
     favorite: state.getIn(['sessions', 'current', 'favorite']),
   }),
diff --git a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
index f29551251..82c319a49 100644
--- a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
+++ b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 
 interface Props {
   onClick: any;
@@ -8,7 +8,7 @@ interface Props {
 function JumpButton(props: Props) {
   const { tooltip = '' } = props;
   return (
-    <Popup content={tooltip} disabled={!!tooltip}>
+    <Tooltip title={tooltip} disabled={!!tooltip}>
       <div
         className="mr-2 border cursor-pointer invisible group-hover:visible rounded-lg bg-active-blue text-xs flex items-center px-2 py-1 color-teal absolute right-0 top-0 bottom-0 hover:shadow h-6 my-auto"
         onClick={(e: any) => {
@@ -19,7 +19,7 @@ function JumpButton(props: Props) {
         <Icon name="caret-right-fill" size="12" color="teal" />
         <span>JUMP</span>
       </div>
-    </Popup>
+    </Tooltip>
   );
 }
 
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index cfa2d4215..685b219bf 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
-import cn from 'classnames';
-// import { connectPlayer } from 'Player';
-import { QuestionMarkHint, Popup, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI';
+import { QuestionMarkHint, Tooltip, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI';
 import { getRE } from 'App/utils';
 import Resource, { TYPES } from 'Types/session/resource';
 import { formatBytes } from 'App/utils';
@@ -10,12 +8,10 @@ import { formatMs } from 'App/date';
 import TimeTable from '../TimeTable';
 import BottomBlock from '../BottomBlock';
 import InfoLine from '../BottomBlock/InfoLine';
-// import stl from './network.module.css';
 import { Duration } from 'luxon';
-import { connectPlayer, jump, pause } from 'Player';
+import { connectPlayer, jump } from 'Player';
 import { useModal } from 'App/components/Modal';
 import FetchDetailsModal from 'Shared/FetchDetailsModal';
-import { sort } from 'App/duck/sessions';
 
 const ALL = 'ALL';
 const XHR = 'xhr';
@@ -49,17 +45,17 @@ function compare(a: any, b: any, key: string) {
 
 export function renderType(r: any) {
   return (
-    <Popup style={{ width: '100%' }} content={<div>{r.type}</div>}>
+    <Tooltip style={{ width: '100%' }} title={<div>{r.type}</div>}>
       <div>{r.type}</div>
-    </Popup>
+    </Tooltip>
   );
 }
 
 export function renderName(r: any) {
   return (
-    <Popup style={{ width: '100%' }} content={<div>{r.url}</div>}>
+    <Tooltip style={{ width: '100%' }} title={<div>{r.url}</div>}>
       <div>{r.name}</div>
-    </Popup>
+    </Tooltip>
   );
 }
 
@@ -75,7 +71,6 @@ const renderXHRText = () => (
   <span className="flex items-center">
     {XHR}
     <QuestionMarkHint
-      onHover={true}
       content={
         <>
           Use our{' '}
@@ -128,9 +123,9 @@ function renderSize(r: any) {
   }
 
   return (
-    <Popup style={{ width: '100%' }} content={content}>
+    <Tooltip style={{ width: '100%' }} title={content}>
       <div>{triggerText}</div>
-    </Popup>
+    </Tooltip>
   );
 }
 
@@ -151,9 +146,9 @@ export function renderDuration(r: any) {
   }
 
   return (
-    <Popup style={{ width: '100%' }} content={tooltipText}>
+    <Tooltip style={{ width: '100%' }} title={tooltipText}>
       <div> {text} </div>
-    </Popup>
+    </Tooltip>
   );
 }
 
@@ -221,7 +216,7 @@ function NetworkPanel(props: Props) {
       ({ type, name, status, success }: any) =>
         (!!filter ? filterRE.test(status) || filterRE.test(name) || filterRE.test(type) : true) &&
         (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
-        (showOnlyErrors ? (parseInt(status) >= 400 || !success) : true)
+        (showOnlyErrors ? parseInt(status) >= 400 || !success : true)
     );
     return list;
   }, [filter, sortBy, sortAscending, showOnlyErrors, activeTab]);
@@ -374,7 +369,7 @@ function NetworkPanel(props: Props) {
                   dataKey: 'decodedBodySize',
                   render: renderSize,
                   onClick: handleSort,
-                  hidden: activeTab === XHR
+                  hidden: activeTab === XHR,
                 },
                 {
                   label: 'Time',
diff --git a/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx b/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
index 9de1a8279..2b151cf14 100644
--- a/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
+++ b/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
@@ -1,25 +1,30 @@
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import { percentOf } from 'App/utils';
-import styles from './barRow.module.css'
+import styles from './barRow.module.css';
 import tableStyles from './timeTable.module.css';
 import React from 'react';
 
-const formatTime = time => time < 1000 ? `${time.toFixed(2)}ms` : `${time / 1000}s`;
+const formatTime = (time) => (time < 1000 ? `${time.toFixed(2)}ms` : `${time / 1000}s`);
 
 interface Props {
   resource: {
-    time: number
-    ttfb?: number
-    duration?: number
-    key: string
-  }
-  popup?: boolean
-  timestart: number
-  timewidth: number
+    time: number;
+    ttfb?: number;
+    duration?: number;
+    key: string;
+  };
+  popup?: boolean;
+  timestart: number;
+  timewidth: number;
 }
 
 // TODO: If request has no duration, set duration to 0.2s. Enforce existence of duration in the future.
-const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = false, timestart = 0, timewidth }: Props) => {
+const BarRow = ({
+  resource: { time, ttfb = 0, duration = 200, key },
+  popup = false,
+  timestart = 0,
+  timewidth,
+}: Props) => {
   const timeOffset = time - timestart;
   ttfb = ttfb || 0;
   const trigger = (
@@ -28,7 +33,7 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
       style={{
         left: `${percentOf(timeOffset, timewidth)}%`,
         right: `${100 - percentOf(timeOffset + duration, timewidth)}%`,
-        minWidth: '5px'
+        minWidth: '5px',
       }}
     >
       <div
@@ -41,23 +46,28 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
         className={styles.downloadBar}
         style={{
           width: `${percentOf(duration - ttfb, duration)}%`,
-          minWidth: '5px'
+          minWidth: '5px',
         }}
       />
     </div>
   );
-  if (!popup) return <div key={key} className={tableStyles.row} > {trigger} </div>;
+  if (!popup)
+    return (
+      <div key={key} className={tableStyles.row}>
+        {' '}
+        {trigger}{' '}
+      </div>
+    );
 
   return (
-    <div key={key} className={tableStyles.row} >
-      <Popup
-        basic
-        content={
+    <div key={key} className={tableStyles.row}>
+      <Tooltip
+        title={
           <React.Fragment>
-            {ttfb != null &&
+            {ttfb != null && (
               <div className={styles.popupRow}>
                 <div className={styles.title}>{'Waiting (TTFB)'}</div>
-                <div className={styles.popupBarWrapper} >
+                <div className={styles.popupBarWrapper}>
                   <div
                     className={styles.ttfbBar}
                     style={{
@@ -66,11 +76,11 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
                     }}
                   />
                 </div>
-                <div className={styles.time} >{formatTime(ttfb)}</div>
+                <div className={styles.time}>{formatTime(ttfb)}</div>
               </div>
-            }
+            )}
             <div className={styles.popupRow}>
-              <div className={styles.title} >{'Content Download'}</div>
+              <div className={styles.title}>{'Content Download'}</div>
               <div className={styles.popupBarWrapper}>
                 <div
                   className={styles.downloadBar}
@@ -84,13 +94,14 @@ const BarRow = ({ resource: { time, ttfb = 0, duration = 200, key }, popup = fal
             </div>
           </React.Fragment>
         }
-        size="mini"
-        position="top center"
-      />
+        placement="top"
+      >
+        {trigger}
+      </Tooltip>
     </div>
   );
-}
+};
 
-BarRow.displayName = "BarRow";
+BarRow.displayName = 'BarRow';
 
-export default BarRow;
\ No newline at end of file
+export default BarRow;
diff --git a/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js b/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
index 4d548e7bc..2f29ce2c5 100644
--- a/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
+++ b/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
@@ -1,30 +1,40 @@
-import React from 'react'
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
-import { Popup } from 'UI'
-import { resendEmailVerification } from 'Duck/user'
+import { Tooltip } from 'UI';
+import { resendEmailVerification } from 'Duck/user';
 import { toast } from 'react-toastify';
 
 function EmailVerificationMessage(props) {
+  const [sent, setSent] = useState(false);
   const { email } = props;
   const send = () => {
-    props.resendEmailVerification(email).then(function() {
+    props.resendEmailVerification(email).then(function () {
       toast.success(`Verification email sent to ${email}`);
-    })
-  }
-  return (
-    <Popup
-      content={
-        `We've sent a verification email to "${email}" please follow the instructions in it to use OpenReplay uninterruptedly.`
-      }
+      setSent(true);
+    });
+  };
+  return !sent ? (
+    <Tooltip
+      title={`We've sent a verification email to "${email}" please follow the instructions in it to use OpenReplay uninterruptedly.`}
     >
       <div
-          className="mt-3 px-3 rounded-2xl font-medium"
-          style={{ paddingTop: '3px', height: '28px', backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)' }}
+        className="mt-3 px-3 rounded-2xl font-medium"
+        style={{
+          paddingTop: '3px',
+          height: '28px',
+          backgroundColor: 'rgba(255, 239, 239, 1)',
+          border: 'solid thin rgba(221, 181, 181, 1)',
+        }}
       >
-          <span>Please, verify your email.</span> <a href="#" className="link" onClick={send}>Resend</a>
+        <span>Please, verify your email.</span>{' '}
+        <a href="#" className="link" onClick={send}>
+          Resend
+        </a>
       </div>
-    </Popup>
-  )
+    </Tooltip>
+  ) : (
+    <></>
+  );
 }
 
-export default connect(null, { resendEmailVerification })(EmailVerificationMessage)
+export default connect(null, { resendEmailVerification })(EmailVerificationMessage);
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 1116c044f..ab53a4214 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import FilterItem from '../FilterItem';
-import { SegmentSelection, Popup } from 'UI';
+import { SegmentSelection, Tooltip } from 'UI';
 import { List } from 'immutable';
 import { useObserver } from 'mobx-react-lite';
 
@@ -24,31 +24,34 @@ function FilterList(props: Props) {
 
   const onRemoveFilter = (filterIndex: any) => {
     props.onRemoveFilter(filterIndex);
-  }
+  };
 
   return useObserver(() => (
     <div className="flex flex-col">
-      { hasEvents && (
+      {hasEvents && (
         <>
           <div className="flex items-center mb-2">
             <div className="text-sm color-gray-medium mr-auto">EVENTS</div>
-            { !hideEventsOrder && (
+            {!hideEventsOrder && (
               <div className="flex items-center">
-                <div className="mr-2 color-gray-medium text-sm" style={{ textDecoration: 'underline dotted'}}>
-                  <Popup
-                    content={ `Select the operator to be applied between events in your search.` }
+                <div
+                  className="mr-2 color-gray-medium text-sm"
+                  style={{ textDecoration: 'underline dotted' }}
+                >
+                  <Tooltip
+                    title={`Select the operator to be applied between events in your search.`}
                   >
                     <div>Events Order</div>
-                  </Popup>
+                  </Tooltip>
                 </div>
-              
+
                 <SegmentSelection
                   primary
                   name="eventsOrder"
                   extraSmall={true}
                   onSelect={props.onChangeEventsOrder}
                   value={{ value: filter.eventsOrder }}
-                  list={ [
+                  list={[
                     { name: 'THEN', value: 'then' },
                     { name: 'AND', value: 'and' },
                     { name: 'OR', value: 'or' },
@@ -57,38 +60,42 @@ function FilterList(props: Props) {
               </div>
             )}
           </div>
-          {filters.map((filter: any, filterIndex: any) => filter.isEvent ? (
-            <FilterItem
-              key={`${filter.key}-${filterIndex}`}
-              filterIndex={rowIndex++}
-              filter={filter}
-              onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
-              onRemoveFilter={() => onRemoveFilter(filterIndex) }
-              saveRequestPayloads={saveRequestPayloads}
-            />
-          ): null)}
-          <div className='mb-2' />
+          {filters.map((filter: any, filterIndex: any) =>
+            filter.isEvent ? (
+              <FilterItem
+                key={`${filter.key}-${filterIndex}`}
+                filterIndex={rowIndex++}
+                filter={filter}
+                onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+                onRemoveFilter={() => onRemoveFilter(filterIndex)}
+                saveRequestPayloads={saveRequestPayloads}
+              />
+            ) : null
+          )}
+          <div className="mb-2" />
         </>
       )}
 
       {hasFilters && (
         <>
-          {hasEvents && <div className='border-t -mx-5 mb-4' />}
+          {hasEvents && <div className="border-t -mx-5 mb-4" />}
           <div className="mb-2 text-sm color-gray-medium mr-auto">FILTERS</div>
-          {filters.map((filter: any, filterIndex: any) => !filter.isEvent ? (
-            <FilterItem
-              key={filterIndex}
-              isFilter={true}
-              filterIndex={filterIndex}
-              filter={filter}
-              onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
-              onRemoveFilter={() => onRemoveFilter(filterIndex) }
-            />
-          ): null)}
+          {filters.map((filter: any, filterIndex: any) =>
+            !filter.isEvent ? (
+              <FilterItem
+                key={filterIndex}
+                isFilter={true}
+                filterIndex={filterIndex}
+                filter={filter}
+                onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+                onRemoveFilter={() => onRemoveFilter(filterIndex)}
+              />
+            ) : null
+          )}
         </>
       )}
     </div>
   ));
 }
 
-export default FilterList;
\ No newline at end of file
+export default FilterList;
diff --git a/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx b/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx
index 186524020..269c932bf 100644
--- a/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx
+++ b/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx
@@ -1,36 +1,39 @@
 import React from 'react';
 import LiveSessionSearchField from 'Shared/LiveSessionSearchField';
-import { Button, Popup } from 'UI';
+import { Button, Tooltip } from 'UI';
 import { clearSearch } from 'Duck/liveSearch';
 import { connect } from 'react-redux';
 
 interface Props {
-    clearSearch: () => void;
-    appliedFilter: any;
+  clearSearch: () => void;
+  appliedFilter: any;
 }
 const LiveSearchBar = (props: Props) => {
   const { appliedFilter } = props;
   const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
   return (
     <div className="flex items-center">
-        <div style={{ width: "60%", marginRight: "10px"}}>
-            <LiveSessionSearchField />
-        </div>
-        <div className="flex items-center" style={{ width: "40%"}}>
-            <Popup content={'Clear Steps'} >
-                <Button
-                    variant="text-primary"
-                    disabled={!hasFilters}
-                    className="ml-auto font-medium"
-                    onClick={() => props.clearSearch()}
-                >
-                    Clear
-                </Button>
-            </Popup>
-        </div>
+      <div style={{ width: '60%', marginRight: '10px' }}>
+        <LiveSessionSearchField />
+      </div>
+      <div className="flex items-center" style={{ width: '40%' }}>
+        <Tooltip title={'Clear Steps'}>
+          <Button
+            variant="text-primary"
+            disabled={!hasFilters}
+            className="ml-auto font-medium"
+            onClick={() => props.clearSearch()}
+          >
+            Clear
+          </Button>
+        </Tooltip>
+      </div>
     </div>
-  )
-}
-export default connect(state => ({
+  );
+};
+export default connect(
+  (state) => ({
     appliedFilter: state.getIn(['liveSearch', 'instance']),
-}), { clearSearch })(LiveSearchBar);
\ No newline at end of file
+  }),
+  { clearSearch }
+)(LiveSearchBar);
diff --git a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
index 3f5ebc6e3..1eba6c115 100644
--- a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
+++ b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularLoader, Icon, Popup } from 'UI';
+import { CircularLoader, Icon, Tooltip } from 'UI';
 import cn from 'classnames';
 
 interface Props {
@@ -12,13 +12,11 @@ interface Props {
 export default function ReloadButton(props: Props) {
   const { loading, onClick, iconSize = '20', iconName = 'arrow-repeat', className = '' } = props;
   return (
-    <Popup content="Refresh">
-      <div
-        className={cn('h-5 w-6 flex items-center justify-center', className)}
-        onClick={onClick}
-      >
+    <Tooltip title="Refresh">
+      <div className={cn('h-5 w-6 flex items-center justify-center', className)} onClick={onClick}>
+        {/* @ts-ignore */}
         {loading ? <CircularLoader className="ml-1" /> : <Icon name={iconName} size={iconSize} />}
       </div>
-    </Popup>
+    </Tooltip>
   );
 }
diff --git a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
index 0b6450f86..9253b2de9 100644
--- a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
@@ -1,32 +1,30 @@
-import React from 'react'
-import { Popup } from 'UI'
-import MetaItem from '../MetaItem'
+import React from 'react';
+import { Popover, Button } from 'UI';
+import MetaItem from '../MetaItem';
 
 interface Props {
-    list: any[],
-    maxLength: number,
+  list: any[];
+  maxLength: number;
 }
 export default function MetaMoreButton(props: Props) {
-    const { list, maxLength } = props
-    return (
-        <Popup
-            className="p-0"
-            theme="light"
-            content={ 
-                <div className="text-sm grid grid-col p-4 gap-3" style={{ maxHeight: '200px', overflowY: 'auto'}}>
-                    {list.slice(maxLength).map(({ label, value }, index) => (
-                        <MetaItem key={index} label={label} value={value} />
-                    ))}
-                </div>
-            }
-            on="click"
-            position="center center"
+  const { list, maxLength } = props;
+  return (
+    <Popover
+      render={() => (
+        <div
+          className="text-sm grid grid-col p-4 gap-3 bg-white"
+          style={{ maxHeight: '200px', overflowY: 'auto' }}
         >
-            <div className=" flex items-center">
-                    <span className="rounded bg-active-blue color-teal p-2 color-gray-dark cursor-pointer whitespace-nowrap">
-                        +{list.length - maxLength} More
-                    </span>
-                </div>
-        </Popup>
-    )
+          {list.slice(maxLength).map(({ label, value }, index) => (
+            <MetaItem key={index} label={label} value={value} />
+          ))}
+        </div>
+      )}
+      placement="bottom"
+    >
+      <div className="flex items-center">
+        <Button variant="text-primary">+{list.length - maxLength} More</Button>
+      </div>
+    </Popover>
+  );
 }
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index 599eac3e2..236dde8ea 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
@@ -1,27 +1,25 @@
-import React from 'react'
-import { Popup } from 'UI'
-import cn from 'classnames'
+import React from 'react';
+import { Popup } from 'UI';
+import cn from 'classnames';
 import MetaItem from '../MetaItem';
 import MetaMoreButton from '../MetaMoreButton';
 
 interface Props {
-  className?: string,
-  metaList: any[],
-  maxLength?: number,
+  className?: string;
+  metaList: any[];
+  maxLength?: number;
 }
 
 export default function SessionMetaList(props: Props) {
-  const { className = '', metaList, maxLength = 4 } = props
+  const { className = '', metaList, maxLength = 4 } = props;
 
   return (
-    <div className={cn("text-sm flex items-center", className)}>
+    <div className={cn('text-sm flex items-center', className)}>
       {metaList.slice(0, maxLength).map(({ label, value }, index) => (
-        <MetaItem key={index} label={label} value={''+value} className="mr-3" />
+        <MetaItem key={index} label={label} value={'' + value} className="mr-3" />
       ))}
 
-      {metaList.length > maxLength && (
-        <MetaMoreButton list={metaList} maxLength={maxLength} />
-      )}
+      {metaList.length > maxLength && <MetaMoreButton list={metaList} maxLength={maxLength} />}
     </div>
-  )
+  );
 }
diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
index b4b847950..563fe65ca 100644
--- a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Icon, Toggler, Button, Input, Loader, Popup } from 'UI';
+import { Icon, Toggler, Button, Input, Loader, Tooltip } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { connect } from 'react-redux';
@@ -43,17 +43,17 @@ function CaptureRate({ isAdmin = false }) {
         <Loader loading={loading}>
             <h3 className="text-lg">Capture Rate</h3>
             <div className="my-1">The percentage of session you want to capture</div>
-            <Popup content="You don't have permission to change." disabled={isAdmin} delay={0}>
+            <Tooltip title="You don't have permission to change." disabled={isAdmin} delay={0}>
                 <div className={cn('mt-2 mb-4 mr-1 flex items-center', { disabled: !isAdmin })}>
                     <Toggler checked={captureAll} name="test" onChange={toggleRate} />
                     <span className="ml-2" style={{ color: captureAll ? '#000000' : '#999' }}>
                         100%
                     </span>
                 </div>
-            </Popup>
+            </Tooltip>
             {!captureAll && (
                 <div className="flex items-center">
-                    <Popup content="You don't have permission to change." disabled={isAdmin} delay={0}>
+                    <Tooltip title="You don't have permission to change." disabled={isAdmin} delay={0}>
                         <div className={cn("relative", { 'disabled' : !isAdmin })}>
                             <Input
                                 type="number"
@@ -66,7 +66,7 @@ function CaptureRate({ isAdmin = false }) {
                             />
                             <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
                         </div>
-                    </Popup>
+                    </Tooltip>
                     <span className="mx-3">of the sessions</span>
                     <Button
                         disabled={!changed}
diff --git a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
index e693864fe..11c897dd9 100644
--- a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
+++ b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
@@ -1,34 +1,40 @@
-import React from 'react'
-import { Icon, Popup } from 'UI'
-import cn from 'classnames'
+import React from 'react';
+import { Icon, Tooltip } from 'UI';
+import cn from 'classnames';
 
 interface Props {
-    sortOrder: string,
-    onChange?: (sortOrder: string) => void,
+  sortOrder: string;
+  onChange?: (sortOrder: string) => void;
 }
 export default React.memo(function SortOrderButton(props: Props) {
-    const { sortOrder, onChange = () => null } = props
-    const isAscending = sortOrder === 'asc'
+  const { sortOrder, onChange = () => null } = props;
+  const isAscending = sortOrder === 'asc';
 
-    return (
-        <div className="flex items-center border">
-            <Popup content={'Ascending'} >
-                <div
-                    className={cn("p-2 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
-                    onClick={() => onChange('asc')}
-                >
-                    <Icon name="arrow-up" size="14" color={isAscending ? 'teal' : 'gray-medium'} />
-                </div>
-            </Popup>
-
-            <Popup content={'Descending'} >
-                <div
-                    className={cn("p-2 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
-                    onClick={() => onChange('desc')}
-                >
-                    <Icon name="arrow-down" size="14" color={!isAscending ? 'teal' : 'gray-medium'} />
-                </div>
-            </Popup>
+  return (
+    <div className="flex items-center border">
+      <Tooltip title={'Ascending'}>
+        <div
+          className={cn('p-2 hover:bg-active-blue', {
+            'cursor-pointer bg-white': !isAscending,
+            'bg-active-blue pointer-events-none': isAscending,
+          })}
+          onClick={() => onChange('asc')}
+        >
+          <Icon name="arrow-up" size="14" color={isAscending ? 'teal' : 'gray-medium'} />
         </div>
-    )
-})
+      </Tooltip>
+
+      <Tooltip title={'Descending'}>
+        <div
+          className={cn('p-2 hover:bg-active-blue border-l', {
+            'cursor-pointer bg-white': isAscending,
+            'bg-active-blue pointer-events-none': !isAscending,
+          })}
+          onClick={() => onChange('desc')}
+        >
+          <Icon name="arrow-down" size="14" color={!isAscending ? 'teal' : 'gray-medium'} />
+        </div>
+      </Tooltip>
+    </div>
+  );
+});
diff --git a/frontend/app/components/shared/SupportCallout/SupportCallout.tsx b/frontend/app/components/shared/SupportCallout/SupportCallout.tsx
index dbcdd5f95..784c10202 100644
--- a/frontend/app/components/shared/SupportCallout/SupportCallout.tsx
+++ b/frontend/app/components/shared/SupportCallout/SupportCallout.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-// import SlackIcon from '../../../svg/slack-help.svg';
-import { Popup, Icon } from 'UI';
+import { Icon } from 'UI';
 import SupportList from './components/SupportList';
 
 function SupportCallout() {
@@ -10,11 +9,9 @@ function SupportCallout() {
         <SupportList />
       </div>
       <div className="fixed z-50 left-0 bottom-0 m-4">
-        {/* <Popup content="OpenReplay community" delay={0}> */}
         <div className="w-12 h-12 cursor-pointer bg-white border rounded-full flex items-center justify-center group-hover:shadow-lg group-hover:!bg-active-blue">
           <Icon name="question-lg" size={30} color="teal" />
         </div>
-        {/* </Popup> */}
       </div>
     </div>
   );
diff --git a/frontend/app/components/ui/Avatar/Avatar.js b/frontend/app/components/ui/Avatar/Avatar.js
index 71327fafa..52f4e910e 100644
--- a/frontend/app/components/ui/Avatar/Avatar.js
+++ b/frontend/app/components/ui/Avatar/Avatar.js
@@ -2,23 +2,39 @@ import React from 'react';
 import cn from 'classnames';
 import { avatarIconName } from 'App/iconNames';
 import stl from './avatar.module.css';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 
-const Avatar = ({ isActive = false, isAssist = false, width = '38px', height = '38px', iconSize = 26, seed }) => {
-    var iconName = avatarIconName(seed);
-    return (
-        <Popup content={isActive ? 'Active user' : 'User might be inactive'} disabled={!isAssist}>
-            <div className={cn(stl.wrapper, 'p-2 border flex items-center justify-center rounded-full relative')} style={{ width, height }}>
-                <Icon name={iconName} size={iconSize} color="tealx" />
-                {isAssist && (
-                    <div
-                        className={cn('w-2 h-2 rounded-full absolute right-0 bottom-0', { 'bg-green': isActive, 'bg-orange': !isActive })}
-                        style={{ marginRight: '3px', marginBottom: '3px' }}
-                    />
-                )}
-            </div>
-        </Popup>
-    );
+const Avatar = ({
+  isActive = false,
+  isAssist = false,
+  width = '38px',
+  height = '38px',
+  iconSize = 26,
+  seed,
+}) => {
+  var iconName = avatarIconName(seed);
+  return (
+    <Tooltip title={isActive ? 'Active user' : 'User might be inactive'} disabled={!isAssist}>
+      <div
+        className={cn(
+          stl.wrapper,
+          'p-2 border flex items-center justify-center rounded-full relative'
+        )}
+        style={{ width, height }}
+      >
+        <Icon name={iconName} size={iconSize} color="tealx" />
+        {isAssist && (
+          <div
+            className={cn('w-2 h-2 rounded-full absolute right-0 bottom-0', {
+              'bg-green': isActive,
+              'bg-orange': !isActive,
+            })}
+            style={{ marginRight: '3px', marginBottom: '3px' }}
+          />
+        )}
+      </div>
+    </Tooltip>
+  );
 };
 
 export default Avatar;
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index ceb5e22d4..dc73f9e60 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -1,95 +1,104 @@
 import React from 'react';
 import cn from 'classnames';
-import { CircularLoader, Icon, Popup } from 'UI';
+import { CircularLoader, Icon, Tooltip } from 'UI';
 
 interface Props {
-    className?: string;
-    children?: React.ReactNode;
-    onClick?: () => void;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green'
-    loading?: boolean;
-    icon?: string;
-    iconSize?: number;
-    rounded?: boolean;
-    tooltip?: any;
-    [x: string]: any;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green';
+  loading?: boolean;
+  icon?: string;
+  iconSize?: number;
+  rounded?: boolean;
+  tooltip?: any;
+  [x: string]: any;
 }
 export default (props: Props) => {
-    const {
-        icon = '',
-        iconSize = 18,
-        className = '',
-        variant = 'default', // 'default|primary|text|text-primary|text-red|outline',
-        type = 'button',
-        size = '',
-        disabled = false,
-        children,
-        loading = false,
-        rounded = false,
-        tooltip = null,
-        ...rest
-    } = props;
+  const {
+    icon = '',
+    iconSize = 18,
+    className = '',
+    variant = 'default', // 'default|primary|text|text-primary|text-red|outline',
+    type = 'button',
+    size = '',
+    disabled = false,
+    children,
+    loading = false,
+    rounded = false,
+    tooltip = null,
+    ...rest
+  } = props;
 
-    let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
-    let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal';
+  let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
+  let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal';
 
-    if (variant === 'default') {
-        classes.push('bg-white hover:bg-gray-light border border-gray-light');
-    }
+  if (variant === 'default') {
+    classes.push('bg-white hover:bg-gray-light border border-gray-light');
+  }
 
-    if (variant === 'primary') {
-        classes.push('bg-teal color-white hover:bg-teal-dark');
-    }
+  if (variant === 'primary') {
+    classes.push('bg-teal color-white hover:bg-teal-dark');
+  }
 
-    if (variant === 'green') {
-        classes.push('bg-green color-white hover:bg-green-dark');
-        iconColor = 'white';
-    }
+  if (variant === 'green') {
+    classes.push('bg-green color-white hover:bg-green-dark');
+    iconColor = 'white';
+  }
 
-    if (variant === 'text') {
-        classes.push('bg-transparent color-gray-dark hover:bg-gray-light-shade');
-    }
+  if (variant === 'text') {
+    classes.push('bg-transparent color-gray-dark hover:bg-gray-light-shade');
+  }
 
-    if (variant === 'text-primary') {
-        classes.push('bg-transparent color-teal hover:bg-teal-light hover:color-teal-dark');
-    }
+  if (variant === 'text-primary') {
+    classes.push('bg-transparent color-teal hover:bg-teal-light hover:color-teal-dark');
+  }
 
-    if (variant === 'text-red') {
-        classes.push('bg-transparent color-red hover:bg-teal-light');
-    }
+  if (variant === 'text-red') {
+    classes.push('bg-transparent color-red hover:bg-teal-light');
+  }
 
-    if (variant === 'outline') {
-        classes.push('bg-white color-teal border border-teal hover:bg-teal-light');
-    }
+  if (variant === 'outline') {
+    classes.push('bg-white color-teal border border-teal hover:bg-teal-light');
+  }
 
-    if (disabled) {
-        classes.push('opacity-40 pointer-events-none');
-    }
+  if (disabled) {
+    classes.push('opacity-40 pointer-events-none');
+  }
 
-    if (variant === 'primary') {
-        iconColor = 'white';
-    }
-    if (variant === 'text-red') {
-        iconColor = 'red';
-    }
+  if (variant === 'primary') {
+    iconColor = 'white';
+  }
+  if (variant === 'text-red') {
+    iconColor = 'red';
+  }
 
-    if (rounded) {
-        classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center'));
-    }
+  if (rounded) {
+    classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center'));
+  }
 
-    const render = () => (
-        <button {...rest} type={type} className={cn(classes, className)}>
-            {icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size={iconSize} />}
-            {loading && (
-                <div className="absolute flex items-center justify-center inset-0 z-1 rounded">
-                    <CircularLoader />
-                </div>
-            )}
-            <div className={cn({ 'opacity-0': loading }, 'flex items-center')}>{children}</div>
-        </button>
-    );
+  const render = () => (
+    <button {...rest} type={type} className={cn(classes, className)}>
+      {icon && (
+        // @ts-ignore
+        <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size={iconSize} />
+      )}
+      {loading && (
+        <div className="absolute flex items-center justify-center inset-0 z-1 rounded">
+          <CircularLoader />
+        </div>
+      )}
+      <div className={cn({ 'opacity-0': loading }, 'flex items-center')}>{children}</div>
+    </button>
+  );
 
-    return tooltip ? <Popup content={tooltip.title} {...tooltip}>{render()}</Popup> : render();
+  return tooltip ? (
+    <Tooltip title={tooltip.title} {...tooltip}>
+      {render()}
+    </Tooltip>
+  ) : (
+    render()
+  );
 };
diff --git a/frontend/app/components/ui/HelpText/HelpText.tsx b/frontend/app/components/ui/HelpText/HelpText.tsx
index c8e1862f8..0bfdfdc5e 100644
--- a/frontend/app/components/ui/HelpText/HelpText.tsx
+++ b/frontend/app/components/ui/HelpText/HelpText.tsx
@@ -1,19 +1,20 @@
-
-import React from 'react'
-import { Icon, Popup } from 'UI'
+import React from 'react';
+import { Icon, Tooltip } from 'UI';
 
 interface Props {
-    text: string,
-    className?: string,
-    position?: string,
+  text: string;
+  className?: string;
+  position?: string;
 }
 export default function HelpText(props: Props) {
-    const { text, className = '', position = 'top center' } = props
-    return (
-        <div>
-            <Popup content={text} >
-                <div className={className}><Icon name="question-circle" size={16} /></div>
-            </Popup>
+  const { text, className = '', position = 'top center' } = props;
+  return (
+    <div>
+      <Tooltip title={text}>
+        <div className={className}>
+          <Icon name="question-circle" size={16} />
         </div>
-    )
+      </Tooltip>
+    </div>
+  );
 }
diff --git a/frontend/app/components/ui/IconButton/IconButton.js b/frontend/app/components/ui/IconButton/IconButton.js
index 1b80bf98d..2d24bd1f5 100644
--- a/frontend/app/components/ui/IconButton/IconButton.js
+++ b/frontend/app/components/ui/IconButton/IconButton.js
@@ -1,79 +1,81 @@
 import React from 'react';
 import cn from 'classnames';
-import { CircularLoader, Icon, Popup } from 'UI';
+import { CircularLoader, Icon, Tooltip } from 'UI';
 import stl from './iconButton.module.css';
 
-const IconButton = React.forwardRef(({
-  icon,
-  label = false,
-  active,
-  onClick,
-  plain = false,
-  shadow = false,
-  red = false,
-  primary = false,
-  primaryText = false,
-  redText = false,
-  outline = false,
-  loading = false,
-  roundedOutline = false,
-  hideLoader = false,
-  circle = false,
-  size = 'default',
-  marginRight,
-  buttonSmall,
-  className = '',
-  style,
-  name,
-  disabled = false,
-  tooltip = false,
-  tooltipPosition = 'top center',
-  compact = false,
-  ...rest
-}, ref) => (
-  <Popup
-    content={tooltip}
-    position={tooltipPosition}
-  >
-    <button
-        ref={ ref }
-        name={ name }
-        className={ cn(stl.button, className, {
-          [ stl.plain ]: plain,
-          [ stl.active ]: active,
-          [ stl.shadow ]: shadow,
-          [ stl.primary ]: primary,
-          [ stl.red ]: red,
-          [ stl.primaryText ]: primaryText,
-          [ stl.redText ]: redText,
-          [ stl.outline ]: outline,
-          [ stl.circle ]: circle,
-          [ stl.roundedOutline ]: roundedOutline,
-          [ stl.buttonSmall ]: buttonSmall,
-          [ stl.small ]: size === 'small',
-          [ stl.tiny ]: size === 'tiny',
-          [ stl.marginRight ]: marginRight,
-          [ stl.compact ]: compact,
-          [ stl.hasLabel]: !!label
-        }) }
-        onClick={ onClick }
-        disabled={ disabled || loading }
+const IconButton = React.forwardRef(
+  (
+    {
+      icon,
+      label = false,
+      active,
+      onClick,
+      plain = false,
+      shadow = false,
+      red = false,
+      primary = false,
+      primaryText = false,
+      redText = false,
+      outline = false,
+      loading = false,
+      roundedOutline = false,
+      hideLoader = false,
+      circle = false,
+      size = 'default',
+      marginRight,
+      buttonSmall,
+      className = '',
+      style,
+      name,
+      disabled = false,
+      tooltip = false,
+      tooltipPosition = 'top center',
+      compact = false,
+      ...rest
+    },
+    ref
+  ) => (
+    <Tooltip title={tooltip} position={tooltipPosition}>
+      <button
+        ref={ref}
+        name={name}
+        className={cn(stl.button, className, {
+          [stl.plain]: plain,
+          [stl.active]: active,
+          [stl.shadow]: shadow,
+          [stl.primary]: primary,
+          [stl.red]: red,
+          [stl.primaryText]: primaryText,
+          [stl.redText]: redText,
+          [stl.outline]: outline,
+          [stl.circle]: circle,
+          [stl.roundedOutline]: roundedOutline,
+          [stl.buttonSmall]: buttonSmall,
+          [stl.small]: size === 'small',
+          [stl.tiny]: size === 'tiny',
+          [stl.marginRight]: marginRight,
+          [stl.compact]: compact,
+          [stl.hasLabel]: !!label,
+        })}
+        onClick={onClick}
+        disabled={disabled || loading}
         style={style}
-        { ...rest }
+        {...rest}
       >
-        { !hideLoader && <CircularLoader loading={ loading } /> }
-        { icon && 
+        {!hideLoader && <CircularLoader loading={loading} />}
+        {icon && (
           <Icon
             color="teal"
-            name={ icon } 
-            data-hidden={ loading }
-            size={ size === 'tiny' || size === 'small' || buttonSmall ? '14' : '16' } 
+            name={icon}
+            data-hidden={loading}
+            size={size === 'tiny' || size === 'small' || buttonSmall ? '14' : '16'}
           />
-        }
-        { label && <span className={ cn(stl.label, icon || loading ? 'ml-2' : '') }>{ label }</span> }
+        )}
+        {label && <span className={cn(stl.label, icon || loading ? 'ml-2' : '')}>{label}</span>}
       </button>
-  </Popup>
-));
+    </Tooltip>
+  )
+);
 
-IconButton.displayName = "IconButton";
+IconButton.displayName = 'IconButton';
 export default IconButton;
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
index 3cad92520..e2d85a568 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
@@ -4,7 +4,7 @@ import styles from './itemMenu.module.css';
 import cn from 'classnames';
 
 interface Item {
-  icon: string;
+  icon?: string;
   text: string;
   onClick: (args: any) => void;
   hidden?: boolean;
@@ -15,7 +15,7 @@ interface Props {
   bold?: boolean;
   flat?: boolean;
   items: Item[];
-  label: React.ReactNode;
+  label?: React.ReactNode;
   onToggle?: (args: any) => void;
 }
 
diff --git a/frontend/app/components/ui/Pagination/Pagination.tsx b/frontend/app/components/ui/Pagination/Pagination.tsx
index 6d131fa96..71c249901 100644
--- a/frontend/app/components/ui/Pagination/Pagination.tsx
+++ b/frontend/app/components/ui/Pagination/Pagination.tsx
@@ -1,76 +1,64 @@
-//@ts-nocheck
-import React from 'react'
-import { Icon, Popup } from 'UI'
-import cn from 'classnames'
+import React from 'react';
+import { Icon, Tooltip } from 'UI';
+import cn from 'classnames';
 import { debounce } from 'App/utils';
 import { numberWithCommas } from 'App/utils';
 interface Props {
-  page: number
-  totalPages: number
-  onPageChange: (page: number) => void
-  limit?: number
-  debounceRequest?: number
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  limit?: number;
+  debounceRequest?: number;
 }
 export default function Pagination(props: Props) {
   const { page, totalPages, onPageChange, limit = 5, debounceRequest = 0 } = props;
   const [currentPage, setCurrentPage] = React.useState(page);
-  React.useMemo(
-    () => setCurrentPage(page),
-    [page],
-  );
+  React.useMemo(() => setCurrentPage(page), [page]);
 
   const debounceChange = React.useCallback(debounce(onPageChange, debounceRequest), []);
 
-    const changePage = (page: number) => {
-        if (page > 0 && page <= totalPages) {
-            setCurrentPage(page);
-            debounceChange(page);
-        }
+  const changePage = (page: number) => {
+    if (page > 0 && page <= totalPages) {
+      setCurrentPage(page);
+      debounceChange(page);
     }
-    
-    const isFirstPage = currentPage === 1;
-    const isLastPage = currentPage === totalPages;
-    return (
-        <div className="flex items-center">
-            <Popup
-                content="Previous Page"
-                // hideOnClick={true}
-                animation="none"
-                delay={1500}
-            >
-                <button
-                    className={cn("py-2 px-3", { "opacity-50 cursor-default": isFirstPage })}
-                    disabled={isFirstPage}
-                    onClick={() => changePage(currentPage - 1)}
-                >
-                    <Icon name="chevron-left" size="18" color={isFirstPage ? 'gray-medium' : 'teal'} />
-                </button>
-            </Popup>
-            <span className="mr-2 color-gray-medium">Page</span>
-            <input
-                type="number"
-                className={cn("py-1 px-2 bg-white border border-gray-light rounded w-16", { "opacity-50 cursor-default": totalPages === 1 })}
-                value={currentPage}
-                min={1}
-                max={totalPages ? totalPages : 1}
-                onChange={(e) => changePage(parseInt(e.target.value))}
-            />
-            <span className="mx-3 color-gray-medium">of</span>
-            <span >{numberWithCommas(totalPages)}</span>
-            <Popup
-                content="Next Page"
-                // hideOnClick={true}
-                animation="none"
-                delay={1500}
-            >
-                <button
-                    className={cn("py-2 px-3", { "opacity-50 cursor-default": isLastPage })}
-                    disabled={isLastPage}
-                    onClick={() => changePage(currentPage + 1)}
-                >
-                    <Icon name="chevron-right" size="18" color={isLastPage ? 'gray-medium' : 'teal'} />
-                </button>
-            </Popup>
-        </div>
-    )
+  };
+
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+  return (
+    <div className="flex items-center">
+      <Tooltip title="Previous Page">
+        <button
+          className={cn('py-2 px-3', { 'opacity-50 cursor-default': isFirstPage })}
+          disabled={isFirstPage}
+          onClick={() => changePage(currentPage - 1)}
+        >
+          <Icon name="chevron-left" size="18" color={isFirstPage ? 'gray-medium' : 'teal'} />
+        </button>
+      </Tooltip>
+      <span className="mr-2 color-gray-medium">Page</span>
+      <input
+        type="number"
+        className={cn('py-1 px-2 bg-white border border-gray-light rounded w-16', {
+          'opacity-50 cursor-default': totalPages === 1,
+        })}
+        value={currentPage}
+        min={1}
+        max={totalPages ? totalPages : 1}
+        onChange={(e) => changePage(parseInt(e.target.value))}
+      />
+      <span className="mx-3 color-gray-medium">of</span>
+      <span>{numberWithCommas(totalPages)}</span>
+      <Tooltip title="Next Page">
+        <button
+          className={cn('py-2 px-3', { 'opacity-50 cursor-default': isLastPage })}
+          disabled={isLastPage}
+          onClick={() => changePage(currentPage + 1)}
+        >
+          <Icon name="chevron-right" size="18" color={isLastPage ? 'gray-medium' : 'teal'} />
+        </button>
+      </Tooltip>
+    </div>
+  );
 }
diff --git a/frontend/app/components/ui/PopMenu/PopMenu.js b/frontend/app/components/ui/PopMenu/PopMenu.js
index a73896ed5..d8fde3f2f 100644
--- a/frontend/app/components/ui/PopMenu/PopMenu.js
+++ b/frontend/app/components/ui/PopMenu/PopMenu.js
@@ -1,56 +1,43 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import cn from 'classnames';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import cls from './popMenu.module.css';
 
 export default React.memo(function PopMenu({ items }) {
-  const [ open, setOpen ] = useState(false);
+  const [open, setOpen] = useState(false);
   return (
-    <OutsideClickDetectingDiv
-      className={ cls.wrapper }
-      onClickOutside={() => setOpen(false)}
-    >
-      { open &&
-        <div className={ cls.menuItems } >
-          { items.map(item => (
+    <OutsideClickDetectingDiv className={cls.wrapper} onClickOutside={() => setOpen(false)}>
+      {open && (
+        <div className={cls.menuItems}>
+          {items.map((item) => (
             <button
-              key={ item.label }
-              onClick={ (e) => { 
-                item.onClick(e); 
+              key={item.label}
+              onClick={(e) => {
+                item.onClick(e);
                 setOpen(false);
               }}
-              className={ cn("flex items-center justify-end color-green bg-white uppercase overflow-hidden", cls.menuItemButton) }
+              className={cn(
+                'flex items-center justify-end color-green bg-white uppercase overflow-hidden',
+                cls.menuItemButton
+              )}
             >
-              <div className={ cls.buttonLabel }>{ item.label }</div>
-              <Icon 
-                name={ item.icon }
-                size="18"
-                className={ cls.icon }
-                color="teal"
-              />
+              <div className={cls.buttonLabel}>{item.label}</div>
+              <Icon name={item.icon} size="18" className={cls.icon} color="teal" />
             </button>
           ))}
         </div>
-      }
-      <Popup
-        content={ `Add Step` }
-        size="tiny"
-        inverted
-        position="top center"
-      > 
+      )}
+      <Tooltip title="Add Step">
         <button
-          onClick={ () => setOpen(o => !o) }
-          className={ cn("bg-teal flex items-center justify-center", cls.addStepButton, {[cls.openMenuBtn] : open }) }
+          onClick={() => setOpen((o) => !o)}
+          className={cn('bg-teal flex items-center justify-center', cls.addStepButton, {
+            [cls.openMenuBtn]: open,
+          })}
         >
-          <Icon 
-            name="plus"
-            size="18"
-            className={ cls.plusIcon }
-            color="white"
-          />
+          <Icon name="plus" size="18" className={cls.plusIcon} color="white" />
         </button>
-      </Popup>      
+      </Tooltip>
     </OutsideClickDetectingDiv>
   );
 });
diff --git a/frontend/app/components/ui/Popover/Popover.tsx b/frontend/app/components/ui/Popover/Popover.tsx
index 9f64af9f6..f3fc2dffd 100644
--- a/frontend/app/components/ui/Popover/Popover.tsx
+++ b/frontend/app/components/ui/Popover/Popover.tsx
@@ -63,7 +63,7 @@ const Popover = ({ children, render, placement }: Props) => {
               position: strategy,
               top: y ?? 0,
               left: x ?? 0,
-              zIndex: INDEXES.TOOLTIP
+              zIndex: INDEXES.TOOLTIP,
             }}
             aria-labelledby={labelId}
             aria-describedby={descriptionId}
diff --git a/frontend/app/components/ui/Popup/Popup.stories.js b/frontend/app/components/ui/Popup/Popup.stories.js
deleted file mode 100644
index 022c84731..000000000
--- a/frontend/app/components/ui/Popup/Popup.stories.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import Popup from '.';
-
-storiesOf('Popup', module)
-  .add('Pure', () => (
-    <Popup />
-  ))
-
diff --git a/frontend/app/components/ui/Popup/Popup.tsx b/frontend/app/components/ui/Popup/Popup.tsx
deleted file mode 100644
index 0bf9258af..000000000
--- a/frontend/app/components/ui/Popup/Popup.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { Tooltip, Theme, Trigger, Position, Animation } from 'react-tippy';
-
-interface Props {
-    content?: any;
-    title?: any;
-    trigger?: Trigger;
-    position?: Position;
-    className?: string;
-    delay?: number;
-    hideDelay?: number;
-    disabled?: boolean;
-    arrow?: boolean;
-    style?: any;
-    theme?: Theme;
-    interactive?: boolean;
-    children?: any;
-    animation?: Animation;
-    // [x:string]: any;
-}
-export default ({
-    position = 'top',
-    title = '',
-    className = '',
-    trigger = 'mouseenter',
-    delay = 0,
-    hideDelay = 0,
-    content = '',
-    disabled = false,
-    arrow = false,
-    theme = 'dark',
-    style = {},
-    interactive = false,
-    children,
-    animation = 'fade',
-}: // ...props
-Props) => (
-    // @ts-ignore
-    <Tooltip
-        animation={animation}
-        position={position}
-        className={className}
-        trigger={trigger}
-        html={content || title}
-        disabled={disabled}
-        arrow={arrow}
-        delay={delay}
-        hideOnClick={true}
-        hideOnScroll={true}
-        theme={theme}
-        style={style}
-        interactive={interactive}
-        hideDelay={hideDelay}
-    >
-        {children}
-    </Tooltip>
-);
diff --git a/frontend/app/components/ui/Popup/index.js b/frontend/app/components/ui/Popup/index.js
deleted file mode 100644
index ab5f1602c..000000000
--- a/frontend/app/components/ui/Popup/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Popup';
\ No newline at end of file
diff --git a/frontend/app/components/ui/QuestionMarkHint/QuestionMarkHint.js b/frontend/app/components/ui/QuestionMarkHint/QuestionMarkHint.js
index 793edf95d..6cc7981b7 100644
--- a/frontend/app/components/ui/QuestionMarkHint/QuestionMarkHint.js
+++ b/frontend/app/components/ui/QuestionMarkHint/QuestionMarkHint.js
@@ -1,16 +1,11 @@
 import React from 'react';
-import cn from "classnames";
-import { Icon, Popup } from 'UI';
+import cn from 'classnames';
+import { Icon, Tooltip } from 'UI';
 
-export default function QuestionMarkHint({ onHover = false, content, ...props }) {
-	return (
-		<Popup
-      trigger={ onHover ? 'mouseenter' : 'click'}
-      content={ content }
-      interactive
-      { ...props }
-    >
-      <Icon name="question-circle"  size="18" className={ cn("cursor-pointer") }/>
-    </Popup>
-	);
-}
\ No newline at end of file
+export default function QuestionMarkHint({ content, ...props }) {
+  return (
+    <Tooltip title={content} {...props}>
+      <Icon name="question-circle" size="18" className={cn('cursor-pointer')} />
+    </Tooltip>
+  );
+}
diff --git a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
index 97db6cef1..d3c71b6cf 100644
--- a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
+++ b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
@@ -1,44 +1,62 @@
 import React from 'react';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import cn from 'classnames';
 import styles from './segmentSelection.module.css';
 
 class SegmentSelection extends React.Component {
   setActiveItem = (item) => {
     this.props.onSelect(null, { name: this.props.name, value: item.value });
-  }
+  };
 
   render() {
-    const { className, list, small = false, extraSmall = false, primary = false, size = "normal", icons = false, disabled = false, disabledMessage = 'Not Allowed', outline } = this.props;
+    const {
+      className,
+      list,
+      small = false,
+      extraSmall = false,
+      primary = false,
+      size = 'normal',
+      icons = false,
+      disabled = false,
+      disabledMessage = 'Not Allowed',
+      outline,
+    } = this.props;
 
     return (
-      <Popup
-        content={disabledMessage}
-        disabled={!disabled}
-      >
-        <div className={ cn(styles.wrapper, { 
-            [styles.primary] : primary,
-            [styles.small]  : size === 'small' || small,
-            [styles.extraSmall]  : size === 'extraSmall' || extraSmall,
-            [styles.icons]  : icons === true,
-            [styles.disabled] : disabled,
-            [styles.outline]: outline,
-          }, className) }
+      <Tooltip title={disabledMessage} disabled={!disabled}>
+        <div
+          className={cn(
+            styles.wrapper,
+            {
+              [styles.primary]: primary,
+              [styles.small]: size === 'small' || small,
+              [styles.extraSmall]: size === 'extraSmall' || extraSmall,
+              [styles.icons]: icons === true,
+              [styles.disabled]: disabled,
+              [styles.outline]: outline,
+            },
+            className
+          )}
         >
-          { list.map(item => (
-              <div
-                key={ item.name }
-                className={ cn(styles.item, 'w-full', { 'opacity-25 cursor-default' : item.disabled }) }
-                data-active={ this.props.value && this.props.value.value === item.value }
-                onClick={ () => !item.disabled && this.setActiveItem(item) }
-              >
-                { item.icon && <Icon name={ item.icon } size={(size === "extraSmall" || icons) ? 14 : 20} marginRight={ item.name ? "6" : "" } /> }
-                <div className="leading-none">{ item.name }</div>
-              </div>
-          ))
-          }
+          {list.map((item) => (
+            <div
+              key={item.name}
+              className={cn(styles.item, 'w-full', { 'opacity-25 cursor-default': item.disabled })}
+              data-active={this.props.value && this.props.value.value === item.value}
+              onClick={() => !item.disabled && this.setActiveItem(item)}
+            >
+              {item.icon && (
+                <Icon
+                  name={item.icon}
+                  size={size === 'extraSmall' || icons ? 14 : 20}
+                  marginRight={item.name ? '6' : ''}
+                />
+              )}
+              <div className="leading-none">{item.name}</div>
+            </div>
+          ))}
         </div>
-      </Popup>
+      </Tooltip>
     );
   }
 }
diff --git a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
index 7c8e8272a..8538a9a63 100644
--- a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
+++ b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import cn from 'classnames';
 import stl from './sideMenuItem.module.css';
 
@@ -18,12 +18,10 @@ function SideMenuitem({
     ...props
   }) {
   return (
-    <Popup
+    <Tooltip
       disabled={ !disabled }
-      content={ 'No recordings' }
-      size="tiny"
-      inverted
-      position="left center"
+      title={ 'No recordings' }
+      placement="left"
     >
       <div
           className={ cn(
@@ -51,7 +49,7 @@ function SideMenuitem({
             <div onClick={deleteHandler} className={stl.actions}><Icon name="trash" size="14" /></div>
           }
         </div>
-    </Popup>
+    </Tooltip>
   )
 }
 
diff --git a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
index 036d12d46..7cd51e39f 100644
--- a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
+++ b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { useState, useRef, useEffect, forwardRef } from 'react';
 import cn from 'classnames';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import styles from './textEllipsis.module.css';
 
-/** calculates text width in pixels 
+/** calculates text width in pixels
  * by creating a hidden element with
  * text and counting its width
  * @param text String - text string
@@ -12,96 +12,100 @@ import styles from './textEllipsis.module.css';
  * @returns width number
  */
 function findTextWidth(text, fontProp) {
-	const tag = document.createElement('div')
+  const tag = document.createElement('div');
 
-	tag.style.position = 'absolute'
-	tag.style.left = '-99in'
-	tag.style.whiteSpace = 'nowrap'
-	tag.style.font = fontProp
-	tag.innerHTML = text
+  tag.style.position = 'absolute';
+  tag.style.left = '-99in';
+  tag.style.whiteSpace = 'nowrap';
+  tag.style.font = fontProp;
+  tag.innerHTML = text;
 
-	document.body.appendChild(tag)
-	const result = tag.clientWidth
-	document.body.removeChild(tag)
+  document.body.appendChild(tag);
+  const result = tag.clientWidth;
+  document.body.removeChild(tag);
 
-	return result;
+  return result;
 }
 
 const Trigger = forwardRef(({ textOrChildren, maxWidth, style, className, ...rest }, ref) => (
-	<div 
-		className={ cn(styles.textEllipsis, className) }
-		style={{ maxWidth, ...style }}
-		ref={ref}
-		{ ...rest }
-		>
-			{ textOrChildren }
-	</div>
-))
+  <div
+    className={cn(styles.textEllipsis, className)}
+    style={{ maxWidth, ...style }}
+    ref={ref}
+    {...rest}
+  >
+    {textOrChildren}
+  </div>
+));
 
-const TextEllipsis = ({ 
-	text,
-	hintText = text,
-	children = null, 
-	maxWidth="auto",
-	style = {}, 
-	className="", 
-	noHint=false,
-	popupProps={},
-	hintProps={},
-	...props 
+const TextEllipsis = ({
+  text,
+  hintText = text,
+  children = null,
+  maxWidth = 'auto',
+  style = {},
+  className = '',
+  noHint = false,
+  popupProps = {},
+  hintProps = {},
+  ...props
 }) => {
-	const [showPopup, setShowPopup] = useState(false)
-	const [computed, setComputed] = useState(false)
-	const textRef = useRef(null);
+  const [showPopup, setShowPopup] = useState(false);
+  const [computed, setComputed] = useState(false);
+  const textRef = useRef(null);
 
-	const textOrChildren = text || children;
-	
-	const popupId = (Math.random() + 1).toString(36).substring(2);
+  const textOrChildren = text || children;
 
-	useEffect(() => {
-		if (computed) return;
-		if (textRef.current) {
-			const element = textRef.current;
+  const popupId = (Math.random() + 1).toString(36).substring(2);
 
-			const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
-			
-			const textWidth = findTextWidth(element.innerText, fontSize)
-			if (textWidth > element.clientWidth) setShowPopup(true)
-			else setShowPopup(false)
-			setComputed(true)
-		}
-		
-	}, [textRef.current, computed])
+  useEffect(() => {
+    if (computed) return;
+    if (textRef.current) {
+      const element = textRef.current;
 
-	if (noHint || !showPopup) return (
-		<Trigger 
-			className={className} 
-			maxWidth={maxWidth} 
-			style={style} 
-			textOrChildren={textOrChildren} 
-			ref={textRef}
-			{...props} 
-		/>
-	)
+      const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size');
 
-	return (
-		<Popup
-			content={ <div className="customPopupText" { ...hintProps } >{ hintText || textOrChildren }</div> }
-			{ ...popupProps }
-		>
-			<Trigger
-				className={className} 
-				maxWidth={maxWidth} 
-				style={style} 
-				textOrChildren={textOrChildren} 
-				id={popupId}
-				ref={textRef}
-				{...props}  
-			/> 	
-		</Popup>
-	);
+      const textWidth = findTextWidth(element.innerText, fontSize);
+      if (textWidth > element.clientWidth) setShowPopup(true);
+      else setShowPopup(false);
+      setComputed(true);
+    }
+  }, [textRef.current, computed]);
+
+  if (noHint || !showPopup)
+    return (
+      <Trigger
+        className={className}
+        maxWidth={maxWidth}
+        style={style}
+        textOrChildren={textOrChildren}
+        ref={textRef}
+        {...props}
+      />
+    );
+
+  return (
+    <Tooltip
+      title={
+        <div className="customPopupText" {...hintProps}>
+          {hintText || textOrChildren}
+        </div>
+      }
+      {...popupProps}
+    >
+      <Trigger
+        className={className}
+        maxWidth={maxWidth}
+        style={style}
+        textOrChildren={textOrChildren}
+        id={popupId}
+        ref={textRef}
+        {...props}
+      />
+    </Tooltip>
+  );
 };
 
-TextEllipsis.displayName ="TextEllipsis";
+TextEllipsis.displayName = 'TextEllipsis';
 
 export default TextEllipsis;
diff --git a/frontend/app/components/ui/TextLabel/TextLabel.js b/frontend/app/components/ui/TextLabel/TextLabel.js
index cdadce948..dbd855d66 100644
--- a/frontend/app/components/ui/TextLabel/TextLabel.js
+++ b/frontend/app/components/ui/TextLabel/TextLabel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import styles from './textLabel.module.css';
 
 export default function TextLabel({
@@ -12,26 +12,27 @@ export default function TextLabel({
   textTransform = '',
   color = 'gray-medium',
   iconColor = color,
-}) { 
+}) {
   return (
-    <div className={ cn("flex items-center", styles.sessionLabel) } style={ { minWidth: `${ minWidth }` } }>
-      <Icon name={ icon } size="16" color={ iconColor } />
-      { popupLabel ?
-        <Popup
-          content={ popupLabel }
-          size="mini"
-          inverted
-        >
-          <div style={ { maxWidth: `${ maxWidth }px` } } className={textTransform}>{ label }</div>
-        </Popup>
-        :
+    <div
+      className={cn('flex items-center', styles.sessionLabel)}
+      style={{ minWidth: `${minWidth}` }}
+    >
+      <Icon name={icon} size="16" color={iconColor} />
+      {popupLabel ? (
+        <Tooltip title={popupLabel}>
+          <div style={{ maxWidth: `${maxWidth}px` }} className={textTransform}>
+            {label}
+          </div>
+        </Tooltip>
+      ) : (
         <div
-          style={ { maxWidth: `${ maxWidth }px`, lineHeight: '16px' } }
+          style={{ maxWidth: `${maxWidth}px`, lineHeight: '16px' }}
           className={cn(`color-${color}`, textTransform)} // textTransform by tailwind
         >
-          { label }
+          {label}
         </div>
-      }
+      )}
     </div>
   );
 }
diff --git a/frontend/app/components/ui/TimelinePointer/TimelinePointer.js b/frontend/app/components/ui/TimelinePointer/TimelinePointer.js
index 00ac7fff7..56791d057 100644
--- a/frontend/app/components/ui/TimelinePointer/TimelinePointer.js
+++ b/frontend/app/components/ui/TimelinePointer/TimelinePointer.js
@@ -1,24 +1,19 @@
-import React from 'react'
-import { Icon, Popup } from 'UI'
-import stl from './timelinePointer.module.css'
-import cn from 'classnames'
+import React from 'react';
+import { Icon, Tooltip } from 'UI';
+import stl from './timelinePointer.module.css';
+import cn from 'classnames';
 
 function TimelinePointer({ icon, content }) {
   return (
-    <Popup
-      // offset={20}
-      // pinned
-      distance={15}
-      content={content}
-    >
-      <div className={cn(stl.wrapper, 'flex items-center justify-center relative')}>          
+    <Tooltip title={content}>
+      <div className={cn(stl.wrapper, 'flex items-center justify-center relative')}>
         <div className={stl.pin} />
-        <div style={{ top: '3px' }} className={stl.icon} >
+        <div style={{ top: '3px' }} className={stl.icon}>
           <Icon name={icon} size="18" style={{ fill: '#D3545F' }} />
         </div>
       </div>
-    </Popup>
-  )
+    </Tooltip>
+  );
 }
 
-export default TimelinePointer
+export default TimelinePointer;
diff --git a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
index 6713d487b..2aca6fc88 100644
--- a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
@@ -87,9 +87,9 @@ export const TooltipAnchor = React.forwardRef<
   }
 
   return (
-    <button ref={ref} {...state.getReferenceProps(props)}>
+    <div ref={ref} {...state.getReferenceProps(props)}>
       {children}
-    </button>
+    </div>
   );
 });
 
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.tsx b/frontend/app/components/ui/Tooltip/Tooltip.tsx
index 777f52d9a..733870afc 100644
--- a/frontend/app/components/ui/Tooltip/Tooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/Tooltip.tsx
@@ -11,9 +11,18 @@ interface Props {
   placement?: Placement;
   className?: string;
   delay?: number;
+  style?: any;
 }
 function Tooltip(props: Props) {
-  const { title, disabled = false, open = false, placement, className = '', delay = 500 } = props;
+  const {
+    title,
+    disabled = false,
+    open = false,
+    placement,
+    className = '',
+    delay = 500,
+    style = {},
+  } = props;
   const state = useTooltipState({ disabled: disabled, placement, delay });
   return (
     <>
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.tsx_ b/frontend/app/components/ui/Tooltip/Tooltip.tsx_
deleted file mode 100644
index 04bd3424c..000000000
--- a/frontend/app/components/ui/Tooltip/Tooltip.tsx_
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { Popup } from 'UI';
-import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
-
-interface Props {
-  timeout: number;
-  position: string;
-  tooltip: string;
-  trigger: React.ReactNode;
-}
-
-export default class Tooltip extends React.PureComponent<Props> {
-  static defaultProps = {
-    timeout: 500,
-  };
-  state = {
-    open: false,
-  };
-  mouseOver = false;
-  onMouseEnter = () => {
-    this.mouseOver = true;
-    setTimeout(() => {
-      if (this.mouseOver) this.setState({ open: true });
-    }, this.props.timeout);
-  };
-  onMouseLeave = () => {
-    this.mouseOver = false;
-    this.setState({
-      open: false,
-    });
-  };
-
-  render() {
-    const { trigger, tooltip, position } = this.props;
-    const { open } = this.state;
-    return (
-      <Popup open={open} content={tooltip} disabled={!tooltip} position={position}>
-        <span //TODO: no wrap component around
-          onMouseEnter={this.onMouseEnter}
-          onMouseLeave={this.onMouseLeave}
-        >
-          {trigger}
-        </span>
-      </Popup>
-    );
-  }
-}
diff --git a/frontend/app/components/ui/index.js b/frontend/app/components/ui/index.js
index 5c8c7813c..7b18e3c64 100644
--- a/frontend/app/components/ui/index.js
+++ b/frontend/app/components/ui/index.js
@@ -3,7 +3,6 @@ export { default as Link } from './Link';
 // export { default as Dropdown } from './Dropdown';
 export { default as Button } from './Button';
 export { default as Label } from './Label';
-export { default as Popup } from './Popup';
 export { default as Progress } from './Progress';
 export { default as SlideModal } from './SlideModal';
 export { default as NoContent } from './NoContent';
diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts
index 77e8b02f6..961b34864 100644
--- a/frontend/app/types/session/session.ts
+++ b/frontend/app/types/session/session.ts
@@ -15,166 +15,177 @@ function hashString(s: string): number {
   let hash = 0;
   for (let i = 0; i < s.length; i++) {
     hash = (hash + s.charCodeAt(i) * mul) % HASH_MOD;
-    mul = (mul*HASH_P) % HASH_MOD;
+    mul = (mul * HASH_P) % HASH_MOD;
   }
   return hash;
 }
 
-export default Record({
-  sessionId: '',
-  pageTitle: '',
-  active: false,
-  siteId: '',
-  projectKey: '',
-  peerId: '',
-  live: false,
-  startedAt: 0,
-  duration: 0,
-  events: List(),
-  logs: List(),
-  stackEvents: List(),
-  resources: List(),
-  missedResources: List(),
-  metadata: Map(),
-  favorite: false,
-  filterId: '',
-  messagesUrl: '',
-  domURL: [],
-  devtoolsURL: [],
-  mobsUrl: [], // @depricated
-  userBrowser: '',
-  userBrowserVersion: '?',
-  userCountry: '',
-  userDevice: '',
-  userDeviceType: '',
-  isMobile: false,
-  userOs: '',
-  userOsVersion: '',
-  userId: '',
-  userAnonymousId: '',
-  userUuid: undefined,
-  userDisplayName: "",
-  userNumericHash: 0,
-  viewed: false,
-  consoleLogCount: '?',
-  eventsCount: '?',
-  pagesCount: '?',
-  clickRage: undefined,
-  clickRageTime: undefined,
-  resourcesScore: 0,
-  consoleError: undefined,
-  resourceError: undefined,
-  returningLocation: undefined,
-  returningLocationTime: undefined,
-  errorsCount: 0,
-  watchdogs: [],
-  issueTypes: [],
-  issues: [],
-  userDeviceHeapSize: 0,
-  userDeviceMemorySize: 0,
-  errors: List(),
-  crashes: [],
-  socket: null,
-  isIOS: false,
-  revId: '',
-  userSessionsCount: 0,
-  agentIds: [],
-  isCallActive: false,
-  agentToken: '',
-  notes: [],
-  notesWithEvents: [],
-  fileKey: '',
-}, {
-  fromJS:({
-    startTs=0,
-    timestamp = 0,
-    backendErrors=0,
-    consoleErrors=0,
-    projectId,
-    errors,
-    stackEvents = [],
-    issues = [],
-    sessionId,
-    sessionID,
-    domURL = [],
-    devtoolsURL= [],
-    mobsUrl = [],
-    notes = [],
-    ...session
-  }) => {
-    const duration = Duration.fromMillis(session.duration < 1000 ? 1000 : session.duration);
-    const durationSeconds = duration.valueOf();
-    const startedAt = +startTs || +timestamp;
-
-    const userDevice = session.userDevice || session.userDeviceType || 'Other';
-    const userDeviceType = session.userDeviceType || 'other';
-    const isMobile = [ 'console', 'mobile', 'tablet' ].includes(userDeviceType)
-
-    const events = List(session.events)
-      .map(e => SessionEvent({ ...e, time: e.timestamp - startedAt }))
-      .filter(({ type, time }) => type !== TYPES.CONSOLE && time <= durationSeconds);
-
-    let resources = List(session.resources)
-      .map(Resource);
-    // this code shoud die.
-    const firstResourceTime = resources.map(r => r.time).reduce((a,b)=>Math.min(a,b), Number.MAX_SAFE_INTEGER);
-    resources = resources
-      .map(r => r.set("time", r.time - firstResourceTime))
-      .sort((r1, r2) => r1.time - r2.time);
-    const missedResources = resources.filter(({ success }) => !success);
-    const logs = List(session.logs).map(Log);
-
-    const stackEventsList = List(stackEvents)
-      .concat(List(session.userEvents))
-      .sortBy(se => se.timestamp)
-      .map(se => StackEvent({ ...se, time: se.timestamp - startedAt }));
-    const exceptions = List(errors)
-      .map(SessionError)
-
-    const issuesList = List(issues)
-      .map(e => Issue({ ...e, time: e.timestamp - startedAt }))
-
-
-    const rawEvents = !session.events
-      ? []
-      // @ts-ignore
-      : session.events.map(evt => ({ ...evt, time: evt.timestamp - startedAt })).filter(({ type, time }) => type !== TYPES.CONSOLE && time <= durationSeconds) || []
-    const rawNotes = notes
-    const notesWithEvents = [...rawEvents, ...rawNotes].sort((a, b) => {
-      const aTs = a.time || a.timestamp
-      const bTs = b.time || b.timestamp
-
-      return aTs - bTs
-    })
-
-    return {
-      ...session,
-      isIOS: session.platform === "ios",
-      watchdogs: session.watchdogs || [],
-      errors: exceptions,
-      siteId: projectId,
-      events,
-      logs,
-      stackEvents: stackEventsList,
-      resources,
-      missedResources,
-      userDevice,
-      userDeviceType,
-      isMobile,
-      startedAt,
-      duration,
-      userNumericHash: hashString(session.userId || session.userAnonymousId || session.userUuid || session.userID || session.userUUID || ""),
-      userDisplayName: session.userId || session.userAnonymousId || session.userID || 'Anonymous User',
-      firstResourceTime,
-      issues: issuesList,
-      sessionId: sessionId || sessionID,
-      userId: session.userId || session.userID,
-      mobsUrl: Array.isArray(mobsUrl) ? mobsUrl : [ mobsUrl ],
-      domURL,
-      devtoolsURL,
-      notes,
-      notesWithEvents: List(notesWithEvents),
-    };
+export default Record(
+  {
+    sessionId: '',
+    pageTitle: '',
+    active: false,
+    siteId: '',
+    projectKey: '',
+    peerId: '',
+    live: false,
+    startedAt: 0,
+    duration: 0,
+    events: List(),
+    logs: List(),
+    stackEvents: List(),
+    resources: List(),
+    missedResources: List(),
+    metadata: Map(),
+    favorite: false,
+    filterId: '',
+    messagesUrl: '',
+    domURL: [],
+    devtoolsURL: [],
+    mobsUrl: [], // @depricated
+    userBrowser: '',
+    userBrowserVersion: '?',
+    userCountry: '',
+    userDevice: '',
+    userDeviceType: '',
+    isMobile: false,
+    userOs: '',
+    userOsVersion: '',
+    userId: '',
+    userAnonymousId: '',
+    userUuid: undefined,
+    userDisplayName: '',
+    userNumericHash: 0,
+    viewed: false,
+    consoleLogCount: '?',
+    eventsCount: '?',
+    pagesCount: '?',
+    clickRage: undefined,
+    clickRageTime: undefined,
+    resourcesScore: 0,
+    consoleError: undefined,
+    resourceError: undefined,
+    returningLocation: undefined,
+    returningLocationTime: undefined,
+    errorsCount: 0,
+    watchdogs: [],
+    issueTypes: [],
+    issues: [],
+    userDeviceHeapSize: 0,
+    userDeviceMemorySize: 0,
+    errors: List(),
+    crashes: [],
+    socket: null,
+    isIOS: false,
+    revId: '',
+    userSessionsCount: 0,
+    agentIds: [],
+    isCallActive: false,
+    agentToken: '',
+    notes: [],
+    notesWithEvents: [],
+    fileKey: '',
   },
-  idKey: "sessionId",
-});
+  {
+    fromJS: ({
+      startTs = 0,
+      timestamp = 0,
+      backendErrors = 0,
+      consoleErrors = 0,
+      projectId,
+      errors,
+      stackEvents = [],
+      issues = [],
+      sessionId,
+      sessionID,
+      domURL = [],
+      devtoolsURL = [],
+      mobsUrl = [],
+      notes = [],
+      ...session
+    }) => {
+      const duration = Duration.fromMillis(session.duration < 1000 ? 1000 : session.duration);
+      const durationSeconds = duration.valueOf();
+      const startedAt = +startTs || +timestamp;
+
+      const userDevice = session.userDevice || session.userDeviceType || 'Other';
+      const userDeviceType = session.userDeviceType || 'other';
+      const isMobile = ['console', 'mobile', 'tablet'].includes(userDeviceType);
+
+      const events = List(session.events)
+        .map((e) => SessionEvent({ ...e, time: e.timestamp - startedAt }))
+        .filter(({ type, time }) => type !== TYPES.CONSOLE && time <= durationSeconds);
+
+      let resources = List(session.resources).map(Resource);
+      // this code shoud die.
+      const firstResourceTime = resources
+        .map((r) => r.time)
+        .reduce((a, b) => Math.min(a, b), Number.MAX_SAFE_INTEGER);
+      resources = resources
+        .map((r) => r.set('time', r.time - firstResourceTime))
+        .sort((r1, r2) => r1.time - r2.time);
+      const missedResources = resources.filter(({ success }) => !success);
+      const logs = List(session.logs).map(Log);
+
+      const stackEventsList = List(stackEvents)
+        .concat(List(session.userEvents))
+        .sortBy((se) => se.timestamp)
+        .map((se) => StackEvent({ ...se, time: se.timestamp - startedAt }));
+      const exceptions = List(errors).map(SessionError);
+
+      const issuesList = List(issues).map((e) => Issue({ ...e, time: e.timestamp - startedAt }));
+
+      const rawEvents = !session.events
+        ? []
+        : // @ts-ignore
+          session.events
+            .map((evt) => ({ ...evt, time: evt.timestamp - startedAt }))
+            .filter(({ type, time }) => type !== TYPES.CONSOLE && time <= durationSeconds) || [];
+      const rawNotes = notes;
+      const notesWithEvents = [...rawEvents, ...rawNotes].sort((a, b) => {
+        const aTs = a.time || a.timestamp;
+        const bTs = b.time || b.timestamp;
+
+        return aTs - bTs;
+      });
+
+      return {
+        ...session,
+        isIOS: session.platform === 'ios',
+        watchdogs: session.watchdogs || [],
+        errors: exceptions,
+        siteId: projectId,
+        events,
+        logs,
+        stackEvents: stackEventsList,
+        resources,
+        missedResources,
+        userDevice,
+        userDeviceType,
+        isMobile,
+        startedAt,
+        duration,
+        userNumericHash: hashString(
+          session.userId ||
+            session.userAnonymousId ||
+            session.userUuid ||
+            session.userID ||
+            session.userUUID ||
+            ''
+        ),
+        userDisplayName:
+          session.userId || session.userAnonymousId || session.userID || 'Anonymous User',
+        firstResourceTime,
+        issues: issuesList,
+        sessionId: sessionId || sessionID,
+        userId: session.userId || session.userID,
+        mobsUrl: Array.isArray(mobsUrl) ? mobsUrl : [mobsUrl],
+        domURL,
+        devtoolsURL,
+        notes,
+        notesWithEvents: List(notesWithEvents),
+      };
+    },
+    idKey: 'sessionId',
+  }
+);

From 55bbd8597286a5aac9b6c5575111035030b7bb30 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 15 Nov 2022 12:27:31 +0100
Subject: [PATCH 07/21] change(ui) - notes guide

---
 .../Session_/components/NotePopup.tsx         | 18 +++-
 .../shared/GuidePopup/GuidePopup.tsx          | 82 +++++++++++++------
 .../shared/XRayButton/XRayButton.tsx          | 30 +++----
 .../components/ui/Tooltip/FloatingTooltip.tsx | 58 ++++++++++++-
 .../app/components/ui/Tooltip/Tooltip.tsx     | 21 ++++-
 frontend/app/styles/general.css               |  8 ++
 6 files changed, 167 insertions(+), 50 deletions(-)

diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx
index 7b3ad24c6..7c5ea49f4 100644
--- a/frontend/app/components/Session_/components/NotePopup.tsx
+++ b/frontend/app/components/Session_/components/NotePopup.tsx
@@ -3,6 +3,7 @@ import { Button } from 'UI';
 import { connectPlayer, pause } from 'Player';
 import { connect } from 'react-redux';
 import { setCreateNoteTooltip } from 'Duck/sessions';
+import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
 
 function NotePopup({
   setCreateNoteTooltip,
@@ -24,9 +25,18 @@ function NotePopup({
   }, []);
 
   return (
-    <Button icon="quotes" variant="text" disabled={tooltipActive} onClick={toggleNotePopup}>
-      Add Note
-    </Button>
+    <GuidePopup
+      title={
+        <div className="color-gray-dark">
+          Introducing <span className={''}>Notes</span>
+        </div>
+      }
+      description={'Annotate session replays and share your feedback with the rest of your team.'}
+    >
+      <Button icon="quotes" variant="text" disabled={tooltipActive} onClick={toggleNotePopup}>
+        Add Note
+      </Button>
+    </GuidePopup>
   );
 }
 
@@ -36,7 +46,7 @@ const NotePopupPl = connectPlayer(
 )(React.memo(NotePopup));
 
 const NotePopupComp = connect(
-  (state) => ({ tooltipActive: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']) }),
+  (state: any) => ({ tooltipActive: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']) }),
   { setCreateNoteTooltip }
 )(NotePopupPl);
 
diff --git a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
index 014c4321d..5eec8fc19 100644
--- a/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
+++ b/frontend/app/components/shared/GuidePopup/GuidePopup.tsx
@@ -1,37 +1,71 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Controls as Player } from 'Player';
 import { Tooltip } from 'UI';
+import { INDEXES } from 'App/constants/zindex';
 
 export const FEATURE_KEYS = {
-  XRAY: 'featureViewed'
-}
+  XRAY: 'featureViewed',
+  NOTES: 'notesFeatureViewed',
+};
 
 interface IProps {
-  children: React.ReactNode
-  title: React.ReactNode
-  description: React.ReactNode
-  key?: keyof typeof FEATURE_KEYS
+  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
-      title={
-        <div>
-          <div className="font-bold">
-            {title}
+  const [showGuide, setShowGuide] = useState(!localStorage.getItem(FEATURE_KEYS.NOTES));
+  useEffect(() => {
+    if (!showGuide) {
+      return;
+    }
+    Player.pause();
+  }, []);
+
+  const onClick = () => {
+    setShowGuide(false);
+    localStorage.setItem(FEATURE_KEYS.NOTES, 'true');
+  };
+
+  return showGuide ? (
+    <div>
+      <div
+        onClick={onClick}
+        className="bg-gray-darkest fixed inset-0 z-10 w-full h-screen cursor-pointer"
+        style={{ zIndex: INDEXES.POPUP_GUIDE_BG, opacity: '0.7' }}
+      ></div>
+      <Tooltip
+        offset={30}
+        className="!bg-white rounded text-center shadow !p-6"
+        title={
+          <div className="relative">
+            <div className="font-bold">{title}</div>
+            <div className="color-gray-medium w-80">{description}</div>
+            <div className="w-10 h-10 bg-white rotate-45 absolute right-0 left-0 m-auto" style={{ top: '-38px'}} />
           </div>
-          <div className="color-gray-medium">
-            {description}
+        }
+        open={true}
+      >
+        <div className="relative pointer-events-none">
+          <div className="" style={{ zIndex: INDEXES.POPUP_GUIDE_BTN, position: 'inherit' }}>
+            {children}
           </div>
+          <div
+            className="absolute bg-white top-0 left-0"
+            style={{
+              zIndex: INDEXES.POPUP_GUIDE_BG,
+              width: '120px',
+              height: '40px',
+              borderRadius: '30px',
+              margin: '-2px -10px',
+            }}
+          ></div>
         </div>
-      }
-      // distance={30}
-      // theme={'light'}
-      open={true}
-      // arrow={true}
-    >
-      {children}
-    </Tooltip>
+      </Tooltip>
+    </div>
+  ) : (
+    children
   );
 }
diff --git a/frontend/app/components/shared/XRayButton/XRayButton.tsx b/frontend/app/components/shared/XRayButton/XRayButton.tsx
index 6a2a73dd7..98368da21 100644
--- a/frontend/app/components/shared/XRayButton/XRayButton.tsx
+++ b/frontend/app/components/shared/XRayButton/XRayButton.tsx
@@ -39,10 +39,10 @@ function XRayButton(props: Props) {
       )}
       <div className="relative">
         {showGuide ? (
-          <GuidePopup
-            title={<>Introducing <span className={stl.text}>X-Ray</span></>}
-            description={"Get a quick overview on the issues in this session."}
-          >
+          // <GuidePopup
+          //   title={<div className="color-gray-dark">Introducing <span className={stl.text}>X-Ray</span></div>}
+          //   description={"Get a quick overview on the issues in this session."}
+          // >
             <button
               className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
               onClick={onClick}
@@ -51,17 +51,17 @@ function XRayButton(props: Props) {
               <span className="z-1">X-RAY</span>
             </button>
 
-            <div
-              className="absolute bg-white top-0 left-0 z-0"
-              style={{
-                zIndex: INDEXES.POPUP_GUIDE_BG,
-                width: '100px',
-                height: '50px',
-                borderRadius: '30px',
-                margin: '-10px -16px',
-              }}
-            ></div>
-          </GuidePopup>
+            // <div
+            //   className="absolute bg-white top-0 left-0 z-0"
+            //   style={{
+            //     zIndex: INDEXES.POPUP_GUIDE_BG,
+            //     width: '100px',
+            //     height: '50px',
+            //     borderRadius: '30px',
+            //     margin: '-10px -16px',
+            //   }}
+            // ></div>
+          // </GuidePopup>
         ) : (
           <Tooltip title="Get a quick overview on the issues in this session." disabled={isActive}>
             <button
diff --git a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
index 2aca6fc88..c157940de 100644
--- a/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/FloatingTooltip.tsx
@@ -3,7 +3,7 @@ import { mergeRefs } from 'react-merge-refs';
 import {
   useFloating,
   autoUpdate,
-  offset,
+  offset as _offset,
   flip,
   shift,
   useHover,
@@ -12,6 +12,8 @@ import {
   useRole,
   useInteractions,
   FloatingPortal,
+  arrow,
+  computePosition,
 } from '@floating-ui/react-dom-interactions';
 import type { Placement } from '@floating-ui/react-dom-interactions';
 import { INDEXES } from 'App/constants/zindex';
@@ -20,14 +22,19 @@ export function useTooltipState({
   disabled = false,
   initialOpen = false,
   placement = 'top',
+  offset = 5,
   delay,
+  arrowRef = null,
 }: {
   disabled?: boolean;
   initialOpen?: boolean;
   placement?: Placement;
+  offset?: number;
   delay?: number;
+  arrowRef?: any;
 } = {}) {
   const [open, setOpen] = React.useState(initialOpen);
+  const staticSide = mapPlacementSideToCSSProperty(placement);
 
   React.useEffect(() => {
     if (disabled) {
@@ -40,7 +47,7 @@ export function useTooltipState({
     open,
     onOpenChange: setOpen,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(5), flip(), shift()],
+    middleware: [_offset(offset), flip(), shift(), arrow({ element: arrowRef })],
   });
 
   const context = data.context;
@@ -49,15 +56,16 @@ export function useTooltipState({
   const focus = useFocus(context);
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: 'tooltip' });
-
   const interactions = useInteractions([hover, focus, dismiss, role]);
 
   return React.useMemo(
     () => ({
       open,
       setOpen,
+      arrowRef,
       ...interactions,
       ...data,
+      staticSide,
     }),
     [open, setOpen, interactions, data]
   );
@@ -73,6 +81,7 @@ export const TooltipAnchor = React.forwardRef<
   }
 >(function TooltipAnchor({ children, state, asChild = false, ...props }, propRef) {
   const childrenRef = (children as any).ref;
+
   const ref = React.useMemo(
     () => mergeRefs([state.reference, propRef, childrenRef]),
     [state.reference, propRef, childrenRef]
@@ -119,3 +128,46 @@ export const FloatingTooltip = React.forwardRef<
     </FloatingPortal>
   );
 });
+
+function mapPlacementSideToCSSProperty(placement: Placement) {
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+  }[placement.split('-')[0]];
+
+  return staticSide;
+}
+
+export const FloatingArrow = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLProps<HTMLDivElement> & { state: TooltipState }
+>(function Tooltip({ state, ...props }, propRef) {
+  const ref = React.useMemo(() => state.arrowRef, [state.arrowRef, propRef]);
+  const { x: arrowX, y: arrowY } = state.middlewareData?.arrow || { x: 0, y: 0 };
+  const staticSide = state.staticSide;
+
+  return (
+    <FloatingPortal>
+      {state.open && (
+        <div
+          ref={ref}
+          style={{
+            width: '20px',
+            height: '20px',
+            backgroundColor: 'white',
+            position: state.strategy,
+            left: arrowX != null ? `${arrowX + state.x}px` : '',
+            top: arrowY != null ? `${arrowY + state.y}px` : '',
+            [staticSide]: '-10px',
+            zIndex: INDEXES.TOOLTIP - 1,
+            transform: 'rotate(45deg)',
+            ...props.style,
+          }}
+          {...state.getFloatingProps(props)}
+        />
+      )}
+    </FloatingPortal>
+  );
+});
diff --git a/frontend/app/components/ui/Tooltip/Tooltip.tsx b/frontend/app/components/ui/Tooltip/Tooltip.tsx
index 733870afc..5cc7a021c 100644
--- a/frontend/app/components/ui/Tooltip/Tooltip.tsx
+++ b/frontend/app/components/ui/Tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
+import { useTooltipState, TooltipAnchor, FloatingTooltip, FloatingArrow } from './FloatingTooltip';
 import type { Placement } from '@floating-ui/react-dom-interactions';
 import cn from 'classnames';
 
@@ -12,6 +12,7 @@ interface Props {
   className?: string;
   delay?: number;
   style?: any;
+  offset?: number;
 }
 function Tooltip(props: Props) {
   const {
@@ -22,18 +23,30 @@ function Tooltip(props: Props) {
     className = '',
     delay = 500,
     style = {},
+    offset = 5,
   } = props;
-  const state = useTooltipState({ disabled: disabled, placement, delay });
+  const arrowRef = React.useRef(null);
+
+  const state = useTooltipState({
+    disabled: disabled,
+    placement,
+    delay,
+    initialOpen: open,
+    offset,
+    arrowRef,
+  });
+
   return (
-    <>
+    <div className="relative">
       <TooltipAnchor state={state}>{props.children}</TooltipAnchor>
       <FloatingTooltip
         state={state}
         className={cn('bg-gray-darkest color-white rounded py-1 px-2 animate-fade', className)}
       >
         {title}
+        {/* <FloatingArrow state={state} className="" /> */}
       </FloatingTooltip>
-    </>
+    </div>
   );
 }
 
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index 84f327edd..cce982514 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -347,4 +347,12 @@ p {
   0% {
     opacity: 0;
   }
+}
+
+#arrow {
+  position: absolute;
+  background: #333;
+  width: 80px;
+  height: 80px;
+  transform: rotate(45deg);
 }
\ No newline at end of file

From 994ee425f01f985116b4c11f1289bfd5eeb86466 Mon Sep 17 00:00:00 2001
From: Rajesh Rajendran <rjshrjndrn@users.noreply.github.com>
Date: Tue, 15 Nov 2022 11:30:41 +0000
Subject: [PATCH 08/21] trivy scan for GH actions (#815)

* ci(acions): Chalice security scan
* chore(api): Fix building chalice
---
 .github/workflows/api-ee.yaml | 22 +++++++++++++++++++++-
 .github/workflows/api.yaml    | 22 +++++++++++++++++++++-
 api/build.sh                  |  3 ++-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/api-ee.yaml b/.github/workflows/api-ee.yaml
index e41779634..e5974b302 100644
--- a/.github/workflows/api-ee.yaml
+++ b/.github/workflows/api-ee.yaml
@@ -1,6 +1,11 @@
 # This action will push the chalice changes to aws
 on:
   workflow_dispatch:
+    inputs:
+      skip_security_checks:
+        description: 'Skip Security checks if there is a unfixable vuln or error. Value: true/false'
+        required: false
+        default: 'false'
   push:
     branches:
       - dev
@@ -46,8 +51,23 @@ jobs:
         IMAGE_TAG: ${{ github.ref_name }}_${{ github.sha }}-ee
         ENVIRONMENT: staging
       run: |
+        skip_security_checks=${{ github.event.inputs.skip_security_checks }}
         cd api
-        PUSH_IMAGE=1 bash build.sh ee
+        PUSH_IMAGE=0 bash -x ./build.sh ee
+        [[ "x$skip_security_checks" == "xtrue" ]]  || {
+          curl -L https://github.com/aquasecurity/trivy/releases/download/v0.34.0/trivy_0.34.0_Linux-64bit.tar.gz | tar -xzf - -C ./ 
+          images=("chalice" "alerts")
+          for image in ${images[*]};do
+            ./trivy image --exit-code 1 --security-checks vuln --vuln-type os,library --severity "HIGH,CRITICAL"  --ignore-unfixed $DOCKER_REPO/$image:$IMAGE_TAG 
+          done
+          err_code=$?
+          [[ $err_code -ne 0 ]] && {
+            exit $err_code
+          }
+        } && {
+          echo "Skipping Security Checks"
+        }
+        PUSH_IMAGE=1 bash -x ./build.sh ee
     - name: Creating old image input
       run: |
         #
diff --git a/.github/workflows/api.yaml b/.github/workflows/api.yaml
index ee49ded09..8c1849970 100644
--- a/.github/workflows/api.yaml
+++ b/.github/workflows/api.yaml
@@ -1,6 +1,11 @@
 # This action will push the chalice changes to aws
 on:
   workflow_dispatch:
+    inputs:
+      skip_security_checks:
+        description: 'Skip Security checks if there is a unfixable vuln or error. Value: true/false'
+        required: false
+        default: 'false'
   push:
     branches:
       - dev
@@ -45,8 +50,23 @@ jobs:
         IMAGE_TAG: ${{ github.ref_name }}_${{ github.sha }}
         ENVIRONMENT: staging
       run: |
+        skip_security_checks=${{ github.event.inputs.skip_security_checks }}
         cd api
-        PUSH_IMAGE=1 bash build.sh
+        PUSH_IMAGE=0 bash -x ./build.sh
+        [[ "x$skip_security_checks" == "xtrue" ]]  || {
+          curl -L https://github.com/aquasecurity/trivy/releases/download/v0.34.0/trivy_0.34.0_Linux-64bit.tar.gz | tar -xzf - -C ./ 
+          images=("chalice" "alerts")
+          for image in ${images[*]};do
+            ./trivy image --exit-code 1 --security-checks vuln --vuln-type os,library --severity "HIGH,CRITICAL"  --ignore-unfixed $DOCKER_REPO/$image:$IMAGE_TAG 
+          done
+          err_code=$?
+          [[ $err_code -ne 0 ]] && {
+            exit $err_code
+          }
+        } && {
+          echo "Skipping Security Checks"
+        }
+        PUSH_IMAGE=1 bash -x ./build.sh
     - name: Creating old image input
       run: |
         #
diff --git a/api/build.sh b/api/build.sh
index a7abdb877..9e1df8a28 100644
--- a/api/build.sh
+++ b/api/build.sh
@@ -49,8 +49,9 @@ build_api $1
 echo buil_complete
 IMAGE_TAG=$IMAGE_TAG PUSH_IMAGE=$PUSH_IMAGE DOCKER_REPO=$DOCKER_REPO bash build_alerts.sh $1
 
+echo "alerts done"
 [[ $1 == "ee" ]] && {
   cp ../ee/api/build_crons.sh .
   IMAGE_TAG=$IMAGE_TAG PUSH_IMAGE=$PUSH_IMAGE DOCKER_REPO=$DOCKER_REPO bash build_crons.sh $1
   rm build_crons.sh
-}
+} || true

From 731f47d9395d3f51a27bbffe0b72c8e885065a41 Mon Sep 17 00:00:00 2001
From: Taha Yassine Kraiem <tahayk2@gmail.com>
Date: Tue, 15 Nov 2022 14:02:29 +0100
Subject: [PATCH 09/21] chore(chalice): return error if unprocessed file is
 huge chore(chalice): fixed add webhook

---
 api/chalicelib/core/assist.py | 10 ++++++----
 api/routers/core.py           |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/api/chalicelib/core/assist.py b/api/chalicelib/core/assist.py
index 0a5e5e59d..7fd68e029 100644
--- a/api/chalicelib/core/assist.py
+++ b/api/chalicelib/core/assist.py
@@ -1,5 +1,5 @@
 from os import access, R_OK
-from os.path import exists as path_exists
+from os.path import exists as path_exists, getsize
 
 import jwt
 import requests
@@ -207,9 +207,11 @@ def get_raw_mob_by_id(project_id, session_id):
     path_to_file = efs_path + "/" + __get_mob_path(project_id=project_id, session_id=session_id)
     if path_exists(path_to_file):
         if not access(path_to_file, R_OK):
-            raise HTTPException(400, f"Replay file found under: {efs_path};"
-                                     f" but it is not readable, please check permissions")
-
+            raise HTTPException(400, f"Replay file found under: {efs_path};" +
+                                f" but it is not readable, please check permissions")
+        # getsize return size in bytes, UNPROCESSED_MAX_SIZE is in Kb
+        if (getsize(path_to_file) / 1000) >= config("UNPROCESSED_MAX_SIZE", cast=int, default=200 * 1000):
+            raise HTTPException(413, "Replay file too large")
         return path_to_file
 
     return None
diff --git a/api/routers/core.py b/api/routers/core.py
index 9a0032329..76383668d 100644
--- a/api/routers/core.py
+++ b/api/routers/core.py
@@ -867,7 +867,7 @@ def delete_slack_integration(integrationId: int, context: schemas.CurrentContext
     return webhook.delete(context.tenant_id, integrationId)
 
 
-@app.post('/webhooks', tags=["webhooks"])
+@app.put('/webhooks', tags=["webhooks"])
 def add_edit_webhook(data: schemas.CreateEditWebhookSchema = Body(...),
                      context: schemas.CurrentContext = Depends(OR_context)):
     return {"data": webhook.add_edit(tenant_id=context.tenant_id, data=data.dict(), replace_none=True)}

From d89ced3579af44c848e0cd7e677d0ef05ce2ed62 Mon Sep 17 00:00:00 2001
From: Taha Yassine Kraiem <tahayk2@gmail.com>
Date: Tue, 15 Nov 2022 14:10:36 +0100
Subject: [PATCH 10/21] chore(chalice): support old search

---
 api/routers/core.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/api/routers/core.py b/api/routers/core.py
index 76383668d..80f2b6296 100644
--- a/api/routers/core.py
+++ b/api/routers/core.py
@@ -49,6 +49,7 @@ def login(data: schemas.UserLoginSchema = Body(...)):
 
 
 @app.post('/{projectId}/sessions/search', tags=["sessions"])
+@app.post('/{projectId}/sessions/search2', tags=["sessions"])
 def sessions_search(projectId: int, data: schemas.FlatSessionsSearchPayloadSchema = Body(...),
                     context: schemas.CurrentContext = Depends(OR_context)):
     data = sessions.search_sessions(data=data, project_id=projectId, user_id=context.user_id)

From 314291e836ca6690b76e7904caafd632da0bea96 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 15 Nov 2022 12:31:16 +0100
Subject: [PATCH 11/21] fix(ui) - header settings menu margin

---
 frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx b/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
index a4ce1f26c..5d443a842 100644
--- a/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
+++ b/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
@@ -30,7 +30,7 @@ function SettingsMenu(props: RouteComponentProps<Props>) {
   };
   return (
     <div
-      style={{ width: '150px', marginTop: '49px' }}
+      style={{ width: '150px', marginTop: '35px' }}
       className={cn(className, 'absolute right-0 top-0 bg-white border p-2')}
     >
       {isAdmin && (

From d8d79afd2d052db92ee8241f4b121cf5c97601a4 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 15 Nov 2022 14:10:31 +0100
Subject: [PATCH 12/21] fix(ui) - lazyload offset

---
 .../Dashboard/components/WidgetWrapper/WidgetWrapper.tsx     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index eb7faa64b..4aac81dd6 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -119,7 +119,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
           {'Cannot drill down system provided metrics'}
         </div>
       )}
-      <Tooltip disabled={!isTemplate} title={<span>Click to select</span>} className="w-full">
+      <Tooltip disabled={!isTemplate} title="Click to select">
         {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
         <div
           className={cn('p-3 pb-4 flex items-center justify-between', {
@@ -160,8 +160,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
           )}
         </div>
 
-        {/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
-        <LazyLoad offset={!isTemplate ? 100 : 0}>
+        <LazyLoad offset={!isTemplate ? 100 : 600}>
           <div className="px-4" onClick={onChartClick}>
             <WidgetChart metric={widget} isTemplate={isTemplate} isWidget={isWidget} />
           </div>

From 28934e300ea4b00fd83bc3bcbda4a05268ce6835 Mon Sep 17 00:00:00 2001
From: rjshrjndrn <rjshrjndrn@gmail.com>
Date: Tue, 15 Nov 2022 12:34:16 +0100
Subject: [PATCH 13/21] chore(script): error handling

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>
---
 api/build.sh | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/api/build.sh b/api/build.sh
index 9e1df8a28..895f9bb8e 100644
--- a/api/build.sh
+++ b/api/build.sh
@@ -6,8 +6,16 @@
 # Default will be OSS build.
 
 # Usage: IMAGE_TAG=latest DOCKER_REPO=myDockerHubID bash build.sh <ee>
-set -e
 
+# Helper function
+exit_err() {
+  err_code=$1
+  if [[ err_code != 0 ]]; then
+    exit $err_code
+  fi
+}
+
+environment=$1
 git_sha1=${IMAGE_TAG:-$(git rev-parse HEAD)}
 envarg="default-foss"
 check_prereq() {
@@ -45,13 +53,13 @@ function build_api(){
 }
 
 check_prereq
-build_api $1
+build_api $environment
 echo buil_complete
 IMAGE_TAG=$IMAGE_TAG PUSH_IMAGE=$PUSH_IMAGE DOCKER_REPO=$DOCKER_REPO bash build_alerts.sh $1
 
-echo "alerts done"
-[[ $1 == "ee" ]] && {
+[[ $environment == "ee" ]] && {
   cp ../ee/api/build_crons.sh .
   IMAGE_TAG=$IMAGE_TAG PUSH_IMAGE=$PUSH_IMAGE DOCKER_REPO=$DOCKER_REPO bash build_crons.sh $1
+  exit_err $?
   rm build_crons.sh
 } || true

From 34c62d8ad981ca0a63bfe3b13d925da6e7bad477 Mon Sep 17 00:00:00 2001
From: rjshrjndrn <rjshrjndrn@gmail.com>
Date: Tue, 15 Nov 2022 14:35:43 +0100
Subject: [PATCH 14/21] ci(actions): Adding slack alert

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>
---
 .github/workflows/api-ee.yaml | 9 +++++++++
 .github/workflows/api.yaml    | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/.github/workflows/api-ee.yaml b/.github/workflows/api-ee.yaml
index e5974b302..1642e5c20 100644
--- a/.github/workflows/api-ee.yaml
+++ b/.github/workflows/api-ee.yaml
@@ -114,6 +114,15 @@ jobs:
         IMAGE_TAG: ${{ github.ref_name }}_${{ github.sha }}
         ENVIRONMENT: staging
 
+    - name: Alert slack
+      if: ${{ failure() }}
+      uses: rtCamp/action-slack-notify@v2
+      env:
+        SLACK_CHANNEL: ee
+        SLACK_TITLE: "Failed ${{ github.action }}"
+        SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
+        SLACK_WEBHOOK: ${{ secrets.SLACK_WEB_HOOK }}
+
     # - name: Debug Job
     #   if: ${{ failure() }}
     #   uses: mxschmitt/action-tmate@v3
diff --git a/.github/workflows/api.yaml b/.github/workflows/api.yaml
index 8c1849970..b0abe1f37 100644
--- a/.github/workflows/api.yaml
+++ b/.github/workflows/api.yaml
@@ -113,6 +113,15 @@ jobs:
         IMAGE_TAG: ${{ github.ref_name }}_${{ github.sha }}
         ENVIRONMENT: staging
 
+    - name: Alert slack
+      if: ${{ failure() }}
+      uses: rtCamp/action-slack-notify@v2
+      env:
+        SLACK_CHANNEL: foss
+        SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
+        SLACK_TITLE: "Failed ${{ github.action }}"
+        SLACK_WEBHOOK: ${{ secrets.SLACK_WEB_HOOK }}
+
     # - name: Debug Job
     #   if: ${{ failure() }}
     #   uses: mxschmitt/action-tmate@v3

From 9c8b10a86e6f5b82b9fca979e22b9b3bbd1e85e9 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 15 Nov 2022 14:42:35 +0100
Subject: [PATCH 15/21] fix(ui) - alert from reset

---
 .../components/Alerts/AlertForm/Condition.tsx |   4 +-
 .../Dashboard/components/Alerts/NewAlert.tsx  | 213 +++++++++---------
 2 files changed, 109 insertions(+), 108 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
index dcb24d6e4..3fa9a9a43 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
@@ -63,7 +63,7 @@ function Condition({
           isSearchable={true}
           options={triggerOptions}
           name="left"
-          value={triggerOptions.find((i) => i.value === instance.query.left)}
+          value={triggerOptions.find((i) => i.value === instance.query.left) || ''}
           onChange={({ value }) => writeQueryOption(null, { name: 'left', value: value.value })}
         />
       </div>
@@ -75,7 +75,7 @@ function Condition({
             placeholder="Select Condition"
             options={conditions}
             name="operator"
-            value={conditions.find(c => c.value === instance.query.operator)}
+            value={conditions.find(c => c.value === instance.query.operator) || ''}
             onChange={({ value }) =>
               writeQueryOption(null, { name: 'operator', value: value.value })
             }
diff --git a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
index aee10e143..0ea012e71 100644
--- a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
@@ -18,9 +18,11 @@ import NotifyHooks from './AlertForm/NotifyHooks';
 import AlertListItem from './AlertListItem';
 import Condition from './AlertForm/Condition';
 
-
 const Circle = ({ text }: { text: string }) => (
-  <div style={{ left: -14, height: 26, width: 26 }} className="circle rounded-full bg-gray-light flex items-center justify-center absolute top-0">
+  <div
+    style={{ left: -14, height: 26, width: 26 }}
+    className="circle rounded-full bg-gray-light flex items-center justify-center absolute top-0"
+  >
     {text}
   </div>
 );
@@ -54,7 +56,7 @@ interface IProps extends RouteComponentProps {
   loading: boolean;
   deleting: boolean;
   triggerOptions: any[];
-  list: any,
+  list: any;
   fetchTriggerOptions: () => void;
   edit: (query: any) => void;
   init: (alert?: Alert) => any;
@@ -83,6 +85,7 @@ const NewAlert = (props: IProps) => {
   } = props;
 
   useEffect(() => {
+    init({});
     if (list.size === 0) fetchList();
     props.fetchTriggerOptions();
     fetchWebhooks();
@@ -90,19 +93,22 @@ const NewAlert = (props: IProps) => {
 
   useEffect(() => {
     if (list.size > 0) {
-      const alertId = location.pathname.split('/').pop()
-      const currentAlert = list.toJS().find((alert: Alert) => alert.alertId === parseInt(alertId, 10));
+      const alertId = location.pathname.split('/').pop();
+      const currentAlert = list
+        .toJS()
+        .find((alert: Alert) => alert.alertId === parseInt(alertId, 10));
       init(currentAlert);
     }
-  }, [list])
-
+  }, [list]);
 
   const write = ({ target: { value, name } }: React.ChangeEvent<HTMLInputElement>) =>
     props.edit({ [name]: value });
+
   const writeOption = (
     _: React.ChangeEvent,
     { name, value }: { name: string; value: Record<string, any> }
   ) => props.edit({ [name]: value.value });
+
   const onChangeCheck = ({ target: { checked, name } }: React.ChangeEvent<HTMLInputElement>) =>
     props.edit({ [name]: checked });
 
@@ -115,39 +121,35 @@ const NewAlert = (props: IProps) => {
       })
     ) {
       remove(instance.alertId).then(() => {
-        props.history.push(withSiteId(alerts(), siteId))
+        props.history.push(withSiteId(alerts(), siteId));
       });
     }
   };
+
   const onSave = (instance: Alert) => {
     const wasUpdating = instance.exists();
     save(instance).then(() => {
       if (!wasUpdating) {
         toast.success('New alert saved');
-        props.history.push(withSiteId(alerts(), siteId))
+        props.history.push(withSiteId(alerts(), siteId));
       } else {
         toast.success('Alert updated');
       }
     });
   };
 
-  const onClose = () => {
-    props.history.push(withSiteId(alerts(), siteId))
-  }
-
   const slackChannels = webhooks
     .filter((hook) => hook.type === SLACK)
     .map(({ webhookId, name }) => ({ value: webhookId, label: name }))
     // @ts-ignore
     .toJS();
+
   const hooks = webhooks
     .filter((hook) => hook.type === WEBHOOK)
     .map(({ webhookId, name }) => ({ value: webhookId, label: name }))
     // @ts-ignore
     .toJS();
 
-
-
   const writeQueryOption = (
     e: React.ChangeEvent,
     { name, value }: { name: string; value: string }
@@ -184,87 +186,84 @@ const NewAlert = (props: IProps) => {
         onSubmit={() => onSave(instance)}
         id="alert-form"
       >
-        <div
-          className={cn('px-6 py-4 flex justify-between items-center',
-          )}
-        >
+        <div className={cn('px-6 py-4 flex justify-between items-center')}>
           <h1 className="mb-0 text-2xl mr-4 min-w-fit">
-            <WidgetName name={instance.name} onUpdate={(name) => write({ target: { value: name, name: 'name' }} as any)} canEdit />
+            <WidgetName
+              name={instance.name}
+              onUpdate={(name) => write({ target: { value: name, name: 'name' } } as any)}
+              canEdit
+            />
           </h1>
-          <div
-            className="text-gray-600 w-full cursor-pointer"
-          >
-          </div>
+          <div className="text-gray-600 w-full cursor-pointer"></div>
         </div>
 
-            <div className="px-6 pb-3 flex flex-col">
-              <Section
-                index="1"
-                title={'Alert based on'}
-                content={
-                  <div className="">
-                    <SegmentSelection
-                      outline
-                      name="detectionMethod"
-                      className="my-3 w-1/4"
-                      onSelect={(e: any, { name, value }: any) => props.edit({ [name]: value })}
-                      value={{ value: instance.detectionMethod }}
-                      list={[
-                        { name: 'Threshold', value: 'threshold' },
-                        { name: 'Change', value: 'change' },
-                      ]}
-                    />
-                    <div className="text-sm color-gray-medium">
-                      {isThreshold &&
-                        'Eg. When Threshold is above 1ms over the past 15mins, notify me through Slack #foss-notifications.'}
-                      {!isThreshold &&
-                        'Eg. Alert me if % change of memory.avg is greater than 10% over the past 4 hours compared to the previous 4 hours.'}
-                    </div>
-                    <div className="my-4" />
-                  </div>
-                }
-              />
-              <Section
-                index="2"
-                title="Condition"
-                content={
-                  <Condition
-                    isThreshold={isThreshold}
-                    writeOption={writeOption}
-                    instance={instance}
-                    triggerOptions={triggerOptions}
-                    writeQueryOption={writeQueryOption}
-                    writeQuery={writeQuery}
-                    unit={unit}
-                  />
-                }
-              />
-              <Section
-                index="3"
-                title="Notify Through"
-                description="You'll be noticed in app notifications. Additionally opt in to receive alerts on:"
-                content={
-                  <NotifyHooks
-                    instance={instance}
-                    onChangeCheck={onChangeCheck}
-                    slackChannels={slackChannels}
-                    validateEmail={validateEmail}
-                    hooks={hooks}
-                    edit={edit}
-                  />
-                }
-              />
-            </div>
-
-            <div className="flex items-center justify-between p-6 border-t">
-              <BottomButtons
-                loading={loading}
+        <div className="px-6 pb-3 flex flex-col">
+          <Section
+            index="1"
+            title={'Alert based on'}
+            content={
+              <div className="">
+                <SegmentSelection
+                  outline
+                  name="detectionMethod"
+                  className="my-3 w-1/4"
+                  onSelect={(e: any, { name, value }: any) => props.edit({ [name]: value })}
+                  value={{ value: instance.detectionMethod }}
+                  list={[
+                    { name: 'Threshold', value: 'threshold' },
+                    { name: 'Change', value: 'change' },
+                  ]}
+                />
+                <div className="text-sm color-gray-medium">
+                  {isThreshold &&
+                    'Eg. When Threshold is above 1ms over the past 15mins, notify me through Slack #foss-notifications.'}
+                  {!isThreshold &&
+                    'Eg. Alert me if % change of memory.avg is greater than 10% over the past 4 hours compared to the previous 4 hours.'}
+                </div>
+                <div className="my-4" />
+              </div>
+            }
+          />
+          <Section
+            index="2"
+            title="Condition"
+            content={
+              <Condition
+                isThreshold={isThreshold}
+                writeOption={writeOption}
                 instance={instance}
-                deleting={deleting}
-                onDelete={onDelete}
+                triggerOptions={triggerOptions}
+                writeQueryOption={writeQueryOption}
+                writeQuery={writeQuery}
+                unit={unit}
               />
-            </div>
+            }
+          />
+          <Section
+            index="3"
+            title="Notify Through"
+            description="You'll be noticed in app notifications. Additionally opt in to receive alerts on:"
+            content={
+              <NotifyHooks
+                instance={instance}
+                onChangeCheck={onChangeCheck}
+                slackChannels={slackChannels}
+                validateEmail={validateEmail}
+                hooks={hooks}
+                edit={edit}
+              />
+            }
+          />
+        </div>
 
+        <div className="flex items-center justify-between p-6 border-t">
+          <BottomButtons
+            loading={loading}
+            instance={instance}
+            deleting={deleting}
+            onDelete={onDelete}
+          />
+        </div>
       </Form>
 
       <div className="bg-white mt-4 border rounded mb-10">
@@ -276,21 +275,23 @@ const NewAlert = (props: IProps) => {
   );
 };
 
-export default withRouter(connect(
-  (state) => ({
+export default withRouter(
+  connect(
+    (state) => ({
+      // @ts-ignore
+      instance: state.getIn(['alerts', 'instance']),
+      //@ts-ignore
+      list: state.getIn(['alerts', 'list']),
+      // @ts-ignore
+      triggerOptions: state.getIn(['alerts', 'triggerOptions']),
+      // @ts-ignore
+      loading: state.getIn(['alerts', 'saveRequest', 'loading']),
+      // @ts-ignore
+      deleting: state.getIn(['alerts', 'removeRequest', 'loading']),
+      // @ts-ignore
+      webhooks: state.getIn(['webhooks', 'list']),
+    }),
+    { fetchTriggerOptions, init, edit, save, remove, fetchWebhooks, fetchList }
     // @ts-ignore
-    instance: state.getIn(['alerts', 'instance']),
-    //@ts-ignore
-    list: state.getIn(['alerts', 'list']),
-    // @ts-ignore
-    triggerOptions: state.getIn(['alerts', 'triggerOptions']),
-    // @ts-ignore
-    loading: state.getIn(['alerts', 'saveRequest', 'loading']),
-    // @ts-ignore
-    deleting: state.getIn(['alerts', 'removeRequest', 'loading']),
-    // @ts-ignore
-    webhooks: state.getIn(['webhooks', 'list']),
-  }),
-  { fetchTriggerOptions, init, edit, save, remove, fetchWebhooks, fetchList }
-  // @ts-ignore
-)(NewAlert));
+  )(NewAlert)
+);

From fd05c39f00f1f1baa80695f06a14c128a61e4138 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 15 Nov 2022 14:42:35 +0100
Subject: [PATCH 16/21] fix(ui) - alert from reset

---
 .github/workflows/api-ee.yaml | 4 +++-
 .github/workflows/api.yaml    | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/api-ee.yaml b/.github/workflows/api-ee.yaml
index 1642e5c20..9eb23910a 100644
--- a/.github/workflows/api-ee.yaml
+++ b/.github/workflows/api-ee.yaml
@@ -119,9 +119,11 @@ jobs:
       uses: rtCamp/action-slack-notify@v2
       env:
         SLACK_CHANNEL: ee
-        SLACK_TITLE: "Failed ${{ github.action }}"
+        SLACK_TITLE: "Failed ${{ github.workflow }}"
         SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
         SLACK_WEBHOOK: ${{ secrets.SLACK_WEB_HOOK }}
+        SLACK_USERNAME: "OR Bot"
+        SLACK_MESSAGE: 'Build failed :bomb:'
 
     # - name: Debug Job
     #   if: ${{ failure() }}
diff --git a/.github/workflows/api.yaml b/.github/workflows/api.yaml
index b0abe1f37..e4d85ff24 100644
--- a/.github/workflows/api.yaml
+++ b/.github/workflows/api.yaml
@@ -118,9 +118,11 @@ jobs:
       uses: rtCamp/action-slack-notify@v2
       env:
         SLACK_CHANNEL: foss
+        SLACK_TITLE: "Failed ${{ github.workflow }}"
         SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
-        SLACK_TITLE: "Failed ${{ github.action }}"
         SLACK_WEBHOOK: ${{ secrets.SLACK_WEB_HOOK }}
+        SLACK_USERNAME: "OR Bot"
+        SLACK_MESSAGE: 'Build failed :bomb:'
 
     # - name: Debug Job
     #   if: ${{ failure() }}

From 81028375bc201ad2a699c7edee6327bb11649b62 Mon Sep 17 00:00:00 2001
From: rjshrjndrn <rjshrjndrn@gmail.com>
Date: Tue, 15 Nov 2022 15:06:05 +0100
Subject: [PATCH 17/21] ci(action): Security check

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>
---
 .github/workflows/workers-ee.yaml | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/workers-ee.yaml b/.github/workflows/workers-ee.yaml
index 3035148ec..d19b51504 100644
--- a/.github/workflows/workers-ee.yaml
+++ b/.github/workflows/workers-ee.yaml
@@ -7,6 +7,10 @@ on:
         description: 'Name of a single service to build(in small letters). "all" to build everything'
         required: false
         default: 'false'
+      skip_security_checks:
+        description: 'Skip Security checks if there is a unfixable vuln or error. Value: true/false'
+        required: false
+        default: 'false'
   push:
     branches:
     - dev
@@ -61,6 +65,7 @@ jobs:
         #
         set -x
         touch /tmp/images_to_build.txt
+        skip_security_checks=${{ github.event.inputs.skip_security_checks }}
         tmp_param=${{ github.event.inputs.build_service }}
         build_param=${tmp_param:-'false'}
         case ${build_param} in
@@ -89,7 +94,18 @@ jobs:
         for image in $(cat /tmp/images_to_build.txt);
         do
           echo "Bulding $image"
-          PUSH_IMAGE=1 bash -x ./build.sh ee $image
+          PUSH_IMAGE=0 bash -x ./build.sh skip $image
+          [[ "x$skip_security_checks" == "xtrue" ]]  || {
+            curl -L https://github.com/aquasecurity/trivy/releases/download/v0.34.0/trivy_0.34.0_Linux-64bit.tar.gz | tar -xzf - -C ./ 
+            ./trivy image --exit-code 1 --vuln-type os,library --severity "HIGH,CRITICAL"  --ignore-unfixed $DOCKER_REPO/$image:$IMAGE_TAG 
+            err_code=$?
+            [[ $err_code -ne 0 ]] && {
+              exit $err_code
+            }
+          } && {
+            echo "Skipping Security Checks"
+          }
+          PUSH_IMAGE=1 bash -x ./build.sh skip $image
           echo "::set-output name=image::$DOCKER_REPO/$image:$IMAGE_TAG"
         done
 

From 13d63fb65fc9e53e21cf25647c42f84b9ed3ae3b Mon Sep 17 00:00:00 2001
From: rjshrjndrn <rjshrjndrn@gmail.com>
Date: Tue, 15 Nov 2022 15:07:01 +0100
Subject: [PATCH 18/21] ci(actions): Alert slack on failure

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>
---
 .github/workflows/workers-ee.yaml | 12 ++++++++++++
 .github/workflows/workers.yaml    | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/.github/workflows/workers-ee.yaml b/.github/workflows/workers-ee.yaml
index d19b51504..35580b5a9 100644
--- a/.github/workflows/workers-ee.yaml
+++ b/.github/workflows/workers-ee.yaml
@@ -156,6 +156,18 @@ jobs:
         # Deploy command
         helm template openreplay -n app openreplay -f vars.yaml -f /tmp/image_override.yaml --set ingress-nginx.enabled=false --set skipMigration=true | kubectl apply -f -
 
+    - name: Alert slack
+      if: ${{ failure() }}
+      uses: rtCamp/action-slack-notify@v2
+      env:
+        SLACK_CHANNEL: ee
+        SLACK_TITLE: "Failed ${{ github.workflow }}"
+        SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
+        SLACK_WEBHOOK: ${{ secrets.SLACK_WEB_HOOK }}
+        SLACK_USERNAME: "OR Bot"
+        SLACK_MESSAGE: 'Build failed :bomb:'
+
+
     # - name: Debug Job
     #   if: ${{ failure() }}
     #   uses: mxschmitt/action-tmate@v3
diff --git a/.github/workflows/workers.yaml b/.github/workflows/workers.yaml
index 472d48a67..341a196ad 100644
--- a/.github/workflows/workers.yaml
+++ b/.github/workflows/workers.yaml
@@ -153,6 +153,16 @@ jobs:
         # Deploy command
         helm template openreplay -n app openreplay -f vars.yaml -f /tmp/image_override.yaml --set ingress-nginx.enabled=false --set skipMigration=true | kubectl apply -f -
 
+    - name: Alert slack
+      if: ${{ failure() }}
+      uses: rtCamp/action-slack-notify@v2
+      env:
+        SLACK_CHANNEL: foss
+        SLACK_TITLE: "Failed ${{ github.workflow }}"
+        SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
+        SLACK_WEBHOOK: ${{ secrets.SLACK_WEB_HOOK }}
+        SLACK_USERNAME: "OR Bot"
+        SLACK_MESSAGE: 'Build failed :bomb:'
     # - name: Debug Job
     #   if: ${{ failure() }}
     #   uses: mxschmitt/action-tmate@v3

From e6b883572808f0d7d0b166ddceb2812202d6788e Mon Sep 17 00:00:00 2001
From: Taha Yassine Kraiem <tahayk2@gmail.com>
Date: Tue, 15 Nov 2022 15:23:32 +0100
Subject: [PATCH 19/21] chore(chalice): enhanced sourcemaps to handle incorrect
 frames

---
 api/chalicelib/core/sourcemaps.py | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/api/chalicelib/core/sourcemaps.py b/api/chalicelib/core/sourcemaps.py
index 886198e35..921649d97 100644
--- a/api/chalicelib/core/sourcemaps.py
+++ b/api/chalicelib/core/sourcemaps.py
@@ -54,7 +54,8 @@ def __frame_is_valid(f):
 
 def __format_frame(f):
     f["context"] = []  # no context by default
-    if "source" in f: f.pop("source")
+    if "source" in f:
+        f.pop("source")
     url = f.pop("fileName")
     f["absPath"] = url
     f["filename"] = urlparse(url).path
@@ -74,8 +75,13 @@ def format_payload(p, truncate_to_first=False):
 
 
 def url_exists(url):
-    r = requests.head(url, allow_redirects=False)
-    return r.status_code == 200 and r.headers.get("Content-Type") != "text/html"
+    try:
+        r = requests.head(url, allow_redirects=False)
+        return r.status_code == 200 and r.headers.get("Content-Type") != "text/html"
+    except Exception as e:
+        print(f"!! Issue checking if URL exists: {url}")
+        print(e)
+        return False
 
 
 def get_traces_group(project_id, payload):
@@ -97,8 +103,8 @@ def get_traces_group(project_id, payload):
             continue
 
         if key not in payloads:
-            file_exists_in_bucket = s3.exists(config('sourcemaps_bucket'), key)
-            if not file_exists_in_bucket:
+            file_exists_in_bucket = len(file_url) > 0 and s3.exists(config('sourcemaps_bucket'), key)
+            if len(file_url) > 0 and not file_exists_in_bucket:
                 print(f"{u['absPath']} sourcemap (key '{key}') doesn't exist in S3 looking in server")
                 if not file_url.endswith(".map"):
                     file_url += '.map'

From c182206b3a1fe5458632b471102ff9d1f5c8e376 Mon Sep 17 00:00:00 2001
From: Alex Kaminskii <alex@openreplay.com>
Date: Tue, 15 Nov 2022 16:00:33 +0100
Subject: [PATCH 20/21] style(frontend): remove unused states, add a bit of
 types

---
 .../app/player/MessageDistributor/managers/ActivityManager.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app/player/MessageDistributor/managers/ActivityManager.ts b/frontend/app/player/MessageDistributor/managers/ActivityManager.ts
index b70e4aefd..412fefdce 100644
--- a/frontend/app/player/MessageDistributor/managers/ActivityManager.ts
+++ b/frontend/app/player/MessageDistributor/managers/ActivityManager.ts
@@ -7,12 +7,12 @@ class SkipIntervalCls {
   get time(): number {
   	return this.start;
   }
-  contains(ts) {
+  contains(ts: number) {
     return ts > this.start && ts < this.end;
   }
 }
 
-export type SkipInterval = InstanceType<typeof SkipIntervalCls>;
+export type SkipInterval = InstanceType<typeof SkipIntervalCls>; // exporting only class' type
 
 
 export default class ActivityManager extends ListWalker<SkipInterval> {

From 0e1134a577c11d94c334ee87863d7534f7273156 Mon Sep 17 00:00:00 2001
From: Alex Kaminskii <alex@openreplay.com>
Date: Tue, 15 Nov 2022 16:00:59 +0100
Subject: [PATCH 21/21] style(frontend): remove unused states, add a bit of
 types

---
 .../StatedScreen/StatedScreen.ts               | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts
index 29fead989..45028f88f 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/StatedScreen.ts
@@ -34,8 +34,6 @@ export interface MarkedTarget {
 export interface State extends SuperState {
   messagesLoading: boolean,
   cssLoading: boolean,
-  disconnected: boolean,
-  userPageLoading: boolean, 
   markedTargets: MarkedTarget[] | null,
   activeTargetIndex: number,
 }
@@ -44,8 +42,6 @@ export const INITIAL_STATE: State = {
   ...SUPER_INITIAL_STATE,
   messagesLoading: false,
   cssLoading: false,
-  disconnected: false,
-  userPageLoading: false,
   markedTargets: null,
   activeTargetIndex: 0
 };
@@ -63,21 +59,13 @@ export default class StatedScreen extends Screen {
     update({ cssLoading });
   }
 
-  setDisconnected(disconnected: boolean) {
-    if (!getState().live) return; //?
-    this.display(!disconnected);
-    update({ disconnected });
-  }
-
-  setUserPageLoading(userPageLoading: boolean) {
-    this.display(!userPageLoading);
-    update({ userPageLoading });
-  }
-
   setSize({ height, width }: { height: number, width: number }) {
     update({ width, height });
     this.scale();
+    this.updateMarketTargets()
+  }
 
+  updateMarketTargets() {
     const { markedTargets } = getState();
     if (markedTargets) {
       update({