From 09e3b44914c142af8ab4a120f90018ca3b4ff155 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 2 Mar 2022 10:28:14 +0100
Subject: [PATCH] feat(ui) - slide modal disable body scroll on open

---
 .../shared/CustomMetrics/CustomMetrics.tsx    |  5 ++++-
 .../components/ui/SlideModal/SlideModal.js    | 22 ++++++++++++++-----
 frontend/app/constants/filterOptions.js       |  9 ++++----
 frontend/app/styles/main.css                  |  6 +++++
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
index aedd4a097..ae0718aea 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { IconButton } from 'UI';
 import { connect } from 'react-redux';
 import { edit, init } from 'Duck/customMetrics';
@@ -7,6 +7,9 @@ interface Props {
   init: (instance?, setDefault?) => void;
 }
 function CustomMetrics(props: Props) {
+  useEffect(() => { // TODO remove this block
+    props.init()
+  }, [])
   return (
     <div className="self-start">
       <IconButton plain outline icon="plus" label="CREATE METRIC" onClick={() => props.init()} />
diff --git a/frontend/app/components/ui/SlideModal/SlideModal.js b/frontend/app/components/ui/SlideModal/SlideModal.js
index cc329463c..92f8ba710 100644
--- a/frontend/app/components/ui/SlideModal/SlideModal.js
+++ b/frontend/app/components/ui/SlideModal/SlideModal.js
@@ -1,12 +1,24 @@
 import styles from './slideModal.css';
 import cn from 'classnames';
 export default class SlideModal extends React.PureComponent {
-  componentDidMount() {
-    document.addEventListener('keydown', this.keyPressHandler);
-  }
+  // componentDidMount() {
+  //   document.addEventListener('keydown', this.keyPressHandler);
+  // }
 
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.keyPressHandler);
+  // componentWillUnmount() {
+  //   document.removeEventListener('keydown', this.keyPressHandler);
+  // }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isDisplayed !== this.props.isDisplayed) {
+      if (this.props.isDisplayed) {
+        document.addEventListener('keydown', this.keyPressHandler);
+        document.body.classList.add('no-scroll');
+      } else {
+        document.removeEventListener('keydown', this.keyPressHandler);
+        document.body.classList.remove('no-scroll');
+      }
+    }
   }
 
   keyPressHandler = (e) => {
diff --git a/frontend/app/constants/filterOptions.js b/frontend/app/constants/filterOptions.js
index 9884d7851..3a497e8cf 100644
--- a/frontend/app/constants/filterOptions.js
+++ b/frontend/app/constants/filterOptions.js
@@ -62,10 +62,11 @@ export const metricTypes = [
 export const metricOf = [
   { text: 'Session Count', value: 'sessionCount', key: 'timeseries' },
   { text: 'Users', value: 'USERID', key: 'table' },
-  { text: 'Rage Click', value: 'rageClick', key: 'table' },
-  { text: 'Dead Click', value: 'deadClick', key: 'table' },
-  { text: 'Browser', value: 'browser', key: 'table' },
-  { text: 'Device', value: 'device', key: 'table' },
+  { text: 'Issues', value: 'ISSUES', key: 'table' },
+  { text: 'Browser', value: 'USERBROWSER', key: 'table' },
+  { text: 'Device', value: 'USERDEVICE', key: 'table' },
+  { text: 'Country', value: 'USERCOUNTRY', key: 'table' },
+  { text: 'URL', value: 'VISITED_URL', key: 'table' },
 ]
 
 export default {
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 81e5ab814..3b7f5fe4b 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -141,4 +141,10 @@
   
   margin: 25px 0;
   background-color: $gray-light;
+}
+
+.no-scroll { 
+  height: 100vh;
+  overflow-y: hidden;
+  padding-right: 15px;
 }
\ No newline at end of file