feat(ui) - slide modal disable body scroll on open

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()} />

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) => {

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 {

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;
 }