From a1b656dc6ad6c4cb75d5b2e6eb4aae4f56a19cd8 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 May 2022 16:07:00 +0200
Subject: [PATCH 1/6] feat(ui) - session settings - ui and state

---
 .../app/components/BugFinder/BugFinder.js     |  2 -
 .../BugFinder/SessionsMenu/SessionsMenu.js    | 10 ++-
 .../app/components/shared/Select/Select.tsx   | 63 ++++++++++++++
 .../app/components/shared/Select/index.ts     |  1 +
 .../SessionSettings/SessionSettings.tsx       | 40 +++++++++
 .../components/CaptureRate.tsx                | 43 ++++++++++
 .../components/DefaultPlaying.tsx             | 25 ++++++
 .../components/DefaultTimezone.tsx            | 42 ++++++++++
 .../components/ListingVisibility.tsx          | 57 +++++++++++++
 .../shared/SessionSettings/index.ts           |  1 +
 .../ui/ToggleButton/ToggleButton.tsx          | 84 +++++++++++++++++++
 frontend/app/components/ui/Toggler/Toggler.js | 22 +++--
 .../app/components/ui/Toggler/toggler.css     | 19 ++++-
 frontend/app/components/ui/index.js           |  1 +
 frontend/app/mstore/index.tsx                 |  3 +
 frontend/app/mstore/settingsStore.ts          | 15 ++++
 frontend/app/mstore/types/sessionSettings.ts  | 26 ++++++
 frontend/app/svg/icons/percent.svg            |  3 +
 18 files changed, 442 insertions(+), 15 deletions(-)
 create mode 100644 frontend/app/components/shared/Select/Select.tsx
 create mode 100644 frontend/app/components/shared/Select/index.ts
 create mode 100644 frontend/app/components/shared/SessionSettings/SessionSettings.tsx
 create mode 100644 frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
 create mode 100644 frontend/app/components/shared/SessionSettings/components/DefaultPlaying.tsx
 create mode 100644 frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
 create mode 100644 frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
 create mode 100644 frontend/app/components/shared/SessionSettings/index.ts
 create mode 100644 frontend/app/components/ui/ToggleButton/ToggleButton.tsx
 create mode 100644 frontend/app/mstore/settingsStore.ts
 create mode 100644 frontend/app/mstore/types/sessionSettings.ts
 create mode 100644 frontend/app/svg/icons/percent.svg

diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index 3ce09d23b..6e4f589a6 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -20,7 +20,6 @@ import { LAST_7_DAYS } from 'Types/app/period';
 import { resetFunnel } from 'Duck/funnels';
 import { resetFunnelFilters } from 'Duck/funnelFilters'
 import NoSessionsMessage from 'Shared/NoSessionsMessage';
-// import TrackerUpdateMessage from 'Shared/TrackerUpdateMessage';
 import SessionSearch from 'Shared/SessionSearch';
 import MainSearchBar from 'Shared/MainSearchBar';
 import { clearSearch, fetchSessions } from 'Duck/search';
@@ -130,7 +129,6 @@ export default class BugFinder extends React.PureComponent {
             />
           </div>
           <div className={cn("side-menu-margined", stl.searchWrapper) }>
-            {/* <TrackerUpdateMessage /> */}
             <NoSessionsMessage />
             <div className="mb-5">
               <MainSearchBar />
diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
index fa0594316..978eb0003 100644
--- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
+++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { SideMenuitem, SavedSearchList, Progress, Popup } from 'UI'
@@ -7,17 +7,23 @@ import {  fetchWatchdogStatus } from 'Duck/watchdogs';
 import { clearEvents } from 'Duck/filters';
 import { issues_types } from 'Types/session/issue'
 import { fetchList as fetchSessionList } from 'Duck/sessions';
+import { useModal } from 'App/components/Modal';
+import SessionSettings from 'Shared/SessionSettings/SessionSettings'
 
 function SessionsMenu(props) {
   const { activeTab, keyMap, wdTypeCount, toggleRehydratePanel } = props;
+  const { hideModal, showModal } = useModal();
 
   const onMenuItemClick = (filter) => {
     props.onMenuItemClick(filter)
   }
-
   
   const capturingAll = props.captureRate && props.captureRate.get('captureAll');
 
+  useEffect(() => {
+    showModal(<SessionSettings />, {});
+  }, [])
+
   return (
     <div className={stl.wrapper}>
       <div className={ cn(stl.header, 'flex items-center') }>
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
new file mode 100644
index 000000000..c4523cf25
--- /dev/null
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import Select from 'react-select';
+
+interface Props {
+    options: any[];
+    isSearchable?: boolean;
+    defaultValue?: any;
+    plain?: boolean;
+    [x:string]: any;
+}
+export default function({ plain = false, options, isSearchable = false, defaultValue, ...rest }: Props) {
+    const customStyles = {
+        option: (provided, state) => ({
+          ...provided,
+          whiteSpace: 'nowrap',
+        }),
+        menu: (provided, state) => ({
+            ...provided,
+            top: 31,
+        }),
+        control: (provided) => {
+            const obj = {
+                ...provided,
+                border: 'solid thin #ddd'
+            }
+            if (plain) {
+                obj['border'] = '1px solid transparent'
+            }
+            return obj;
+        },
+        valueContainer: (provided) => ({
+            ...provided,
+            paddingRight: '0px',
+        }),
+        singleValue: (provided, state) => {
+          const opacity = state.isDisabled ? 0.5 : 1;
+          const transition = 'opacity 300ms';
+      
+          return { ...provided, opacity, transition };
+        }
+    }
+    return (
+        <Select
+            options={options}
+            isSearchable={isSearchable}
+            defaultValue={defaultValue ? options.find(i => i.value === defaultValue) : options[0]}
+            components={{
+                IndicatorSeparator: () => null
+            }}
+            styles={customStyles}
+            theme={(theme) => ({
+                ...theme,
+                colors: {
+                    ...theme.colors,
+                    primary: '#394EFF',
+                }
+            })}
+            {...rest}
+        />
+    );
+}
+
+// export default Select;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Select/index.ts b/frontend/app/components/shared/Select/index.ts
new file mode 100644
index 000000000..b56d05f24
--- /dev/null
+++ b/frontend/app/components/shared/Select/index.ts
@@ -0,0 +1 @@
+export { default } from './Select';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
new file mode 100644
index 000000000..52e3d9ce8
--- /dev/null
+++ b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { Input, Button, Toggler, Icon } from 'UI';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import ListingVisibility from './components/ListingVisibility';
+import DefaultPlaying from './components/DefaultPlaying';
+import DefaultTimezone from './components/DefaultTimezone';
+import CaptureRate from './components/CaptureRate';
+
+function SessionSettings(props) {
+    const { settingsStore } = useStore();
+    const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+
+
+    return useObserver(() => (
+        <div className="bg-white box-shadow h-screen" style={{ width: '450px'}}>
+            <div className="p-6">
+                <h1 className="text-2xl">Session Settings</h1>
+            </div>
+            
+            <div className="p-6 border-b py-8">
+                <ListingVisibility />
+            </div>
+
+            <div className="p-6 border-b py-8">
+               <DefaultPlaying />
+            </div>
+
+            <div className="p-6 border-b py-8">
+                <DefaultTimezone />
+            </div>
+
+            <div className="p-6 py-8">
+                <CaptureRate />
+            </div>
+        </div>
+    ));
+}
+
+export default SessionSettings;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
new file mode 100644
index 000000000..6436bd652
--- /dev/null
+++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Icon, Toggler, Button, Input } from 'UI';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+function CaptureRate(props) {
+    const { settingsStore } = useStore();
+    const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+    const [captureRate, setCaptureRate] = React.useState(sessionSettings.captureRate);
+    const [captureAll, setCaptureAll] = React.useState(captureRate === 100);
+    return (
+        <>
+            <h3 className="text-lg">Capture Rate</h3>
+            <div className="my-1">What percentage of your user sessions do you want to record and monitor?</div>
+            <div className="mt-2 mb-4">
+                <Toggler
+                    checked={captureAll}
+                    name="test"
+                    onChange={() => setCaptureAll(!captureAll)}
+                    label="Capture 100% of the sessions"
+                />
+            </div>
+            <div className="flex items-center">
+                <div className="relative">
+                    <Input
+                        type="number"
+                        value={captureRate}
+                        style={{ height: '38px', width: '100px'}}
+                        onChange={(e, { value }) => setCaptureRate(value)}
+                        disabled={captureAll}
+                        min={0}
+                        minValue={0}
+                    />
+                    <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
+                </div>
+                <span className="mx-3">of the sessions</span>
+                <Button outline size="medium" onClick={settingsStore.updateCaptureRate(captureRate)}>Update</Button>
+            </div>
+        </>
+    );
+}
+
+export default CaptureRate;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultPlaying.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultPlaying.tsx
new file mode 100644
index 000000000..cb80c30b2
--- /dev/null
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultPlaying.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Toggler } from 'UI';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+function DefaultPlaying(props) {
+    const { settingsStore } = useStore();
+    const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+    
+    return useObserver(() => (
+        <>
+            <h3 className="text-lg">Default Playing Options</h3>
+            <div className="my-1">Always start playing the session from the first issue.</div>
+            <div className="mt-2">
+                <Toggler
+                    checked={sessionSettings.skipToIssue}
+                    name="test"
+                    onChange={() => sessionSettings.updateKey('skipToIssue', !sessionSettings.skipToIssue)} 
+                />
+            </div>
+        </>
+    ));
+}
+
+export default DefaultPlaying;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
new file mode 100644
index 000000000..c2f585a3d
--- /dev/null
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import { Toggler, Button } from 'UI';
+import Select from 'Shared/Select';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+const timezoneOptions = [
+    { label: 'UTC', value: 'UTC' },
+    { label: 'EST', value: 'EST' },
+]
+
+function DefaultTimezone(props) {
+    const [changed, setChanged] = React.useState(false);
+    const { settingsStore } = useStore();
+    const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+
+    return (
+        <>
+            <h3 className="text-lg">Default Timezone</h3>
+            <div className="my-1">Session Time</div>
+            <div className="mt-2 flex items-center" style={{ width: "200px"}}>
+                <Select
+                    options={timezoneOptions}
+                    defaultValue={sessionSettings.timezone}
+                    className="w-4/6"
+                    onChange={(e, { value }) => {
+                        sessionSettings.updateKey('timezone', value);
+                        setChanged(true);
+                    }}
+                />
+                <div className="col-span-3 ml-3">
+                    <Button disabled={!changed} outline size="medium" onClick={() => {
+                        setChanged(false);
+                    }}>Update</Button>
+                </div>
+            </div>
+            <div className="text-sm mt-3">This change will impact the timestamp on session card and player.</div>  
+        </>
+    );
+}
+
+export default DefaultTimezone;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
new file mode 100644
index 000000000..1779a2e01
--- /dev/null
+++ b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Select from 'Shared/Select';
+import { Button, Input } from 'UI';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+const numberOptions = [
+    { label: 'Less than', value: '<' },
+    { label: 'Greater than', value: '>' },
+]
+const periodOptions = [
+    { label: 'Mins', value: 'min' },
+    { label: 'Secs', value: 'sec' },
+]
+
+function ListingVisibility(props) {
+    const { settingsStore } = useStore();
+    const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+    const [changed, setChanged] = React.useState(false);
+    const [durationSettings, setDurationSettings] = React.useState(sessionSettings.durationFilter);
+    
+    return (
+        <>
+            <h3 className="text-lg">Listing Visibility</h3>
+            <div className="my-1">Do not show sessions duration with.</div>
+            <div className="grid grid-cols-12 gap-2 mt-2">
+                <div className="col-span-3">
+                    <Select
+                        options={numberOptions}
+                        defaultValue={durationSettings.operator}
+                    />
+                </div>
+                <div className="col-span-3">
+                    <Input
+                        value={durationSettings.count}
+                        type="number"
+                        name="count"
+                        style={{ height: '38px', width: '100%'}}
+                    />
+                </div>
+                <div className="col-span-3">
+                    <Select
+                        defaultValue={durationSettings.countType}
+                        options={periodOptions}
+                    />
+                </div>
+                <div className="col-span-3">
+                    <Button outline size="medium" disabled={!changed} onClick={() => {
+                        setChanged(false);
+                    }}>Update</Button>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default ListingVisibility;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/index.ts b/frontend/app/components/shared/SessionSettings/index.ts
new file mode 100644
index 000000000..6f9daed20
--- /dev/null
+++ b/frontend/app/components/shared/SessionSettings/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionSettings';
\ No newline at end of file
diff --git a/frontend/app/components/ui/ToggleButton/ToggleButton.tsx b/frontend/app/components/ui/ToggleButton/ToggleButton.tsx
new file mode 100644
index 000000000..b6f5cfa55
--- /dev/null
+++ b/frontend/app/components/ui/ToggleButton/ToggleButton.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const CheckedIcon = () => <>🌜</>;
+const UncheckedIcon = () => <>🌞</>;
+
+const ToggleButton = ( props ) => {
+
+    const [toggle, setToggle] = useState(false);
+    const { defaultChecked, onChange, disabled, className } = props;
+
+    useEffect(() => {
+        if (defaultChecked) {
+            setToggle(defaultChecked)
+        }
+    }, [defaultChecked]);
+
+    const triggerToggle = () => {
+        if ( disabled ) {
+            return;
+        }
+
+        setToggle(!toggle);
+
+        if ( typeof onChange === 'function' ) {
+            onChange(!toggle);
+        }
+    }
+
+    const getIcon = (type) => {
+        const { icons } = props;
+        if ( ! icons ) {
+            return null;
+        }
+
+        return icons[type] === undefined ?
+            ToggleButton.defaultProps.icons[type] :
+            icons[type];
+    }
+
+    const toggleClasses = classNames('wrg-toggle', {
+        'wrg-toggle--checked': toggle,
+        'wrg-toggle--disabled': disabled
+    }, className);
+
+    return (
+        <div onClick={triggerToggle} className={toggleClasses}>
+            <div className="wrg-toggle-container">
+                <div className="wrg-toggle-check">
+                    <span>{ getIcon('checked') }</span>
+                </div>
+                <div className="wrg-toggle-uncheck">
+                    <span>{ getIcon('unchecked') }</span>
+                </div>
+            </div>
+            <div className="wrg-toggle-circle"></div>
+            <input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
+        </div>
+    );
+}
+
+ToggleButton.defaultProps = {
+    icons: {
+        checked: <CheckedIcon />, 
+        unchecked: <UncheckedIcon />
+    }
+};
+
+ToggleButton.propTypes = {
+    disabled: PropTypes.bool,
+    defaultChecked: PropTypes.bool,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    icons: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            checked: PropTypes.node,
+            unchecked: PropTypes.node
+        })
+    ])
+};
+
+export default ToggleButton;
\ No newline at end of file
diff --git a/frontend/app/components/ui/Toggler/Toggler.js b/frontend/app/components/ui/Toggler/Toggler.js
index ef6097936..1cf3ba78a 100644
--- a/frontend/app/components/ui/Toggler/Toggler.js
+++ b/frontend/app/components/ui/Toggler/Toggler.js
@@ -3,18 +3,22 @@ import styles from './toggler.css';
 export default ({
   onChange,
   name,
-  className,
+  className = '',
   checked,
+  label = '',
 }) => (
   <div className={ className }>
-    <label className={ styles.switch }>
-      <input
-        type={ styles.checkbox }
-        onClick={ onChange }
-        name={ name }
-        checked={ checked }
-      />
-      <span className={ `${ styles.slider } ${ checked ? styles.checked : '' }` } />
+    <label className={styles.label}>
+      <div className={ styles.switch }>
+        <input
+          type={ styles.checkbox }
+          onClick={ onChange }
+          name={ name }
+          checked={ checked }
+        />
+        <span className={ `${ styles.slider } ${ checked ? styles.checked : '' }` } />
+      </div>
+      { label && <span>{ label }</span> }
     </label>
   </div>
 );
diff --git a/frontend/app/components/ui/Toggler/toggler.css b/frontend/app/components/ui/Toggler/toggler.css
index 171272d67..cf9cf0838 100644
--- a/frontend/app/components/ui/Toggler/toggler.css
+++ b/frontend/app/components/ui/Toggler/toggler.css
@@ -6,6 +6,16 @@
   height: 16px;
 }
 
+.label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  & span {
+    padding-left: 10px;
+    color: $gray-medium;
+  }
+}
 .switch input {
   display:none;
 }
@@ -29,18 +39,23 @@
   width: 20px;
   left: 0;
   bottom: -2px;
-  background-color: white;
+  /* background-color: white; */
   transition: .4s;
   border-radius: 50%;
   border: solid 1px rgba(0, 0, 0, 0.2);
+
+  background: #394EFF;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .slider.checked {
-  background-color: $teal !important;
+  /* background-color: $teal !important; */
+  background-color: #b2bcff !important;
 }
 
 .slider.checked:before {
   border: solid 1px $teal;
+  transform: translateX(15px);
 }
 
 .slider.checked:before {
diff --git a/frontend/app/components/ui/index.js b/frontend/app/components/ui/index.js
index e6a4253e0..193d24384 100644
--- a/frontend/app/components/ui/index.js
+++ b/frontend/app/components/ui/index.js
@@ -58,5 +58,6 @@ export { default as HelpText } from './HelpText';
 export { default as SideMenuHeader } from './SideMenuHeader';
 export { default as PageTitle } from './PageTitle';
 export { default as Pagination } from './Pagination';
+export { default as Toggler } from './Toggler';
 
 export { Input, Modal, Form, Message, Card } from 'semantic-ui-react';
diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx
index 88f5472c2..39c1d84a4 100644
--- a/frontend/app/mstore/index.tsx
+++ b/frontend/app/mstore/index.tsx
@@ -3,14 +3,17 @@ import DashboardStore, { IDashboardSotre } from './dashboardStore';
 import MetricStore, { IMetricStore } from './metricStore';
 import APIClient from 'App/api_client';
 import { dashboardService, metricService } from 'App/services';
+import SettingsStore from './settingsStore';
 
 export class RootStore {
     dashboardStore: IDashboardSotre;
     metricStore: IMetricStore;
+    settingsStore: SettingsStore;
 
     constructor() {
         this.dashboardStore = new DashboardStore();
         this.metricStore = new MetricStore();
+        this.settingsStore = new SettingsStore();
     }
 
     initClient() {
diff --git a/frontend/app/mstore/settingsStore.ts b/frontend/app/mstore/settingsStore.ts
new file mode 100644
index 000000000..82a33a5cb
--- /dev/null
+++ b/frontend/app/mstore/settingsStore.ts
@@ -0,0 +1,15 @@
+import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
+import SessionSettings from "./types/sessionSettings"
+
+export default class SettingsStore {
+    sessionSettings: SessionSettings = new SessionSettings()
+    constructor() {
+        makeAutoObservable(this, {
+            sessionSettings: observable,
+        })
+    }
+
+    updateCaptureRate(value: number) {
+        this.sessionSettings.updateKey('captureRate', value);
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/mstore/types/sessionSettings.ts b/frontend/app/mstore/types/sessionSettings.ts
new file mode 100644
index 000000000..37317cacd
--- /dev/null
+++ b/frontend/app/mstore/types/sessionSettings.ts
@@ -0,0 +1,26 @@
+import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
+
+export default class SessionSettings {
+    skipToIssue: boolean = false
+    timezone: string = "EST"
+    durationFilter: any = {
+        count: 0,
+        countType: 'min',
+        operator: '>'
+    }
+    captureRate: number = 0
+    captureAll: boolean = false
+
+    constructor() {
+        makeAutoObservable(this, {
+            updateKey: action
+        })
+    }
+
+    updateKey(key: string, value: any) {
+        console.log(`SessionSettings.updateKey(${key}, ${value})`)
+        runInAction(() => {
+            this[key] = value
+        })
+    }
+}
diff --git a/frontend/app/svg/icons/percent.svg b/frontend/app/svg/icons/percent.svg
new file mode 100644
index 000000000..6904d8218
--- /dev/null
+++ b/frontend/app/svg/icons/percent.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-percent" viewBox="0 0 16 16">
+  <path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
+</svg>
\ No newline at end of file

From e421511db87b3bcd82cccc2cec510e4dd10e78f1 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 May 2022 16:07:12 +0200
Subject: [PATCH 2/6] feat(ui) - session settings - libs

---
 frontend/package-lock.json | 614 +++++++++++++++++++++++++++----------
 frontend/package.json      |   1 +
 2 files changed, 456 insertions(+), 159 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 75fcde026..77de8a018 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -42,6 +42,7 @@
         "react-redux": "^5.1.2",
         "react-router": "^4.3.1",
         "react-router-dom": "^4.3.1",
+        "react-select": "^5.3.1",
         "react-svg-map": "^2.2.0",
         "react-tippy": "^1.4.0",
         "react-toastify": "^5.5.0",
@@ -114,7 +115,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
       },
@@ -165,7 +165,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
       "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.16.7"
       },
@@ -177,7 +176,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
       "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -186,7 +184,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz",
       "integrity": "sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -216,7 +213,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz",
       "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -230,7 +226,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -264,7 +259,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
       "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.17.7",
         "@babel/helper-validator-option": "^7.16.7",
@@ -338,7 +332,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -362,7 +355,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
       "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
         "@babel/types": "^7.17.0"
@@ -375,7 +367,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -399,7 +390,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -411,7 +401,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
       "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -442,7 +431,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
       "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -481,7 +469,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz",
       "integrity": "sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.17.0"
       },
@@ -505,7 +492,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.7"
       },
@@ -517,7 +503,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
       "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -526,7 +511,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
       "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -550,7 +534,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
       "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
         "@babel/traverse": "^7.17.9",
@@ -564,7 +547,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
       "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
@@ -578,7 +560,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz",
       "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1038,7 +1019,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
       "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -1975,7 +1955,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -1989,7 +1968,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz",
       "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.17.9",
@@ -2010,7 +1988,6 @@
       "version": "7.17.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
       "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -2054,6 +2031,99 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -2097,8 +2167,7 @@
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-      "dev": true
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
@@ -2112,8 +2181,72 @@
     "node_modules/@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "dev": true
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "node_modules/@emotion/react/node_modules/@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "node_modules/@emotion/react/node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
     },
     "node_modules/@emotion/serialize": {
       "version": "0.11.16",
@@ -2173,8 +2306,7 @@
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@emotion/utils": {
       "version": "0.11.3",
@@ -2185,8 +2317,7 @@
     "node_modules/@emotion/weak-memoize": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
-      "dev": true
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "2.3.0",
@@ -2265,7 +2396,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
       "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2273,14 +2403,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
-      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
-      "dev": true
+      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4679,7 +4807,7 @@
       "version": "14.18.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.13.tgz",
       "integrity": "sha512-Z6/KzgyWOga3pJNS42A+zayjhPbf2zM3hegRQaOPnLOzEi86VV++6FLDWgR1LGrVCRufP/ph2daa3tEa5br1zA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.1",
@@ -4712,8 +4840,7 @@
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "node_modules/@types/parse5": {
       "version": "5.0.3",
@@ -4730,8 +4857,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
@@ -4749,7 +4875,6 @@
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz",
       "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -4765,11 +4890,18 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react/node_modules/csstype": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
-      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-      "dev": true
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
     },
     "node_modules/@types/resize-observer-browser": {
       "version": "0.1.7",
@@ -4779,8 +4911,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
@@ -6846,7 +6977,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -7610,7 +7740,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
       "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.1.1"
       }
@@ -9721,7 +9850,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -11052,8 +11180,7 @@
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
     },
     "node_modules/find-up": {
       "version": "5.0.0",
@@ -11747,7 +11874,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -11915,7 +12041,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -13020,7 +13145,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -13036,7 +13160,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -13331,8 +13454,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
@@ -14014,7 +14136,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -14059,8 +14180,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -14078,7 +14198,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -14227,8 +14346,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/loader-runner": {
       "version": "2.4.0",
@@ -14554,6 +14672,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -16039,7 +16162,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -16082,7 +16204,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -16233,7 +16354,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -18996,6 +19116,46 @@
         "isarray": "0.0.1"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.1.tgz",
+      "integrity": "sha512-Y195MmhDoDAj/8gTDyYZU1Raf7tmZd81wxM6RkFko4pqJ4Xv0/ilqUMtSn+GYkwmSlTWeMlzh+e+t7PJgtuXPw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/react-select/node_modules/@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "node_modules/react-select/node_modules/@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
     "node_modules/react-sizeme": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz",
@@ -20055,8 +20215,7 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/safe-regex": {
       "version": "1.1.0",
@@ -20164,7 +20323,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -21456,6 +21614,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "node_modules/sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -22228,7 +22391,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -25615,7 +25777,6 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -25698,7 +25859,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
-      "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.0"
       }
@@ -25733,7 +25893,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
       "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.16.7"
       }
@@ -25741,14 +25900,12 @@
     "@babel/compat-data": {
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
-      "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
-      "dev": true
+      "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ=="
     },
     "@babel/core": {
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz",
       "integrity": "sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==",
-      "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -25771,7 +25928,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz",
       "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -25781,8 +25937,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -25809,7 +25964,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
       "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.17.7",
         "@babel/helper-validator-option": "^7.16.7",
@@ -25862,7 +26016,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
       "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -25880,7 +26033,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
       "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.16.7",
         "@babel/types": "^7.17.0"
@@ -25890,7 +26042,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
       "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -25908,7 +26059,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
       "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -25917,7 +26067,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
       "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
-      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -25941,8 +26090,7 @@
     "@babel/helper-plugin-utils": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-      "dev": true
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.16.8",
@@ -25972,7 +26120,6 @@
       "version": "7.17.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz",
       "integrity": "sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.17.0"
       }
@@ -25990,7 +26137,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
       "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.7"
       }
@@ -25998,14 +26144,12 @@
     "@babel/helper-validator-identifier": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "dev": true
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
     },
     "@babel/helper-validator-option": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
-      "dev": true
+      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ=="
     },
     "@babel/helper-wrap-function": {
       "version": "7.16.8",
@@ -26023,7 +26167,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
       "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.16.7",
         "@babel/traverse": "^7.17.9",
@@ -26034,7 +26177,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
       "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
@@ -26044,8 +26186,7 @@
     "@babel/parser": {
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz",
-      "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==",
-      "dev": true
+      "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg=="
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.16.7",
@@ -26343,7 +26484,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
       "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
-      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -26971,7 +27111,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
       "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/parser": "^7.16.7",
@@ -26982,7 +27121,6 @@
       "version": "7.17.9",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz",
       "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.17.9",
@@ -27000,7 +27138,6 @@
       "version": "7.17.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
       "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -27035,6 +27172,86 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "@emotion/memoize": {
+          "version": "0.7.5",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+          "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+        },
+        "@emotion/serialize": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+          "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+          "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+        },
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "csstype": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -27075,8 +27292,7 @@
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-      "dev": true
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
@@ -27090,8 +27306,62 @@
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "dev": true
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.7.1",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+          "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.0",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/serialize": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+          "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+          "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+        },
+        "@emotion/utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+          "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+        },
+        "csstype": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+        }
+      }
     },
     "@emotion/serialize": {
       "version": "0.11.16",
@@ -27143,8 +27413,7 @@
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@emotion/utils": {
       "version": "0.11.3",
@@ -27155,8 +27424,7 @@
     "@emotion/weak-memoize": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
-      "dev": true
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@fullhuman/postcss-purgecss": {
       "version": "2.3.0",
@@ -27216,20 +27484,17 @@
     "@jridgewell/resolve-uri": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
-      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
-      "dev": true
+      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew=="
     },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
-      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
-      "dev": true
+      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg=="
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -29063,7 +29328,7 @@
       "version": "14.18.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.13.tgz",
       "integrity": "sha512-Z6/KzgyWOga3pJNS42A+zayjhPbf2zM3hegRQaOPnLOzEi86VV++6FLDWgR1LGrVCRufP/ph2daa3tEa5br1zA==",
-      "dev": true
+      "devOptional": true
     },
     "@types/node-fetch": {
       "version": "2.6.1",
@@ -29096,8 +29361,7 @@
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "@types/parse5": {
       "version": "5.0.3",
@@ -29114,8 +29378,7 @@
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/q": {
       "version": "1.5.5",
@@ -29133,7 +29396,6 @@
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz",
       "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -29143,8 +29405,7 @@
         "csstype": {
           "version": "3.0.11",
           "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
-          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-          "dev": true
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
         }
       }
     },
@@ -29157,6 +29418,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resize-observer-browser": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz",
@@ -29165,8 +29434,7 @@
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "@types/source-list-map": {
       "version": "0.1.2",
@@ -30870,8 +31138,7 @@
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "camel-case": {
       "version": "3.0.0",
@@ -31474,7 +31741,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
       "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -33243,7 +33509,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -34330,8 +34595,7 @@
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
     },
     "find-up": {
       "version": "5.0.0",
@@ -34868,8 +35132,7 @@
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -34993,8 +35256,7 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "globalthis": {
       "version": "1.0.2",
@@ -35896,7 +36158,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -35905,8 +36166,7 @@
         "resolve-from": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-          "dev": true
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
         }
       }
     },
@@ -36135,8 +36395,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "is-bigint": {
       "version": "1.0.4",
@@ -36602,8 +36861,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
     "jshint": {
       "version": "2.13.4",
@@ -36638,8 +36896,7 @@
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -36656,8 +36913,7 @@
     "json5": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-      "dev": true
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -36774,8 +37030,7 @@
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "loader-runner": {
       "version": "2.4.0",
@@ -37029,6 +37284,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -38237,7 +38497,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -38273,7 +38532,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -38401,8 +38659,7 @@
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pbkdf2": {
       "version": "3.1.2",
@@ -40593,6 +40850,44 @@
         }
       }
     },
+    "react-select": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.1.tgz",
+      "integrity": "sha512-Y195MmhDoDAj/8gTDyYZU1Raf7tmZd81wxM6RkFko4pqJ4Xv0/ilqUMtSn+GYkwmSlTWeMlzh+e+t7PJgtuXPw==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.7.1",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+          "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.0",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+          "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+        },
+        "@emotion/utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+          "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+        }
+      }
+    },
     "react-sizeme": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz",
@@ -41424,8 +41719,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -41520,8 +41814,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
     "send": {
       "version": "0.17.2",
@@ -42617,6 +42910,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -43203,8 +43501,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -45881,8 +46178,7 @@
     "yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
     "yargs": {
       "version": "17.4.1",
diff --git a/frontend/package.json b/frontend/package.json
index 7f51ba174..3a240eedc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,6 +49,7 @@
     "react-redux": "^5.1.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "react-select": "^5.3.1",
     "react-svg-map": "^2.2.0",
     "react-tippy": "^1.4.0",
     "react-toastify": "^5.5.0",

From 02c39199d211ab16e20435592edc80d4b827a674 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 May 2022 16:26:05 +0200
Subject: [PATCH 3/6] feat(ui) - session settings - changed state

---
 .../SessionSettings/components/CaptureRate.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
index 6436bd652..9576de72a 100644
--- a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
@@ -4,10 +4,12 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
 function CaptureRate(props) {
+    const [changed, setChanged] = React.useState(false);
     const { settingsStore } = useStore();
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
     const [captureRate, setCaptureRate] = React.useState(sessionSettings.captureRate);
     const [captureAll, setCaptureAll] = React.useState(captureRate === 100);
+
     return (
         <>
             <h3 className="text-lg">Capture Rate</h3>
@@ -16,7 +18,10 @@ function CaptureRate(props) {
                 <Toggler
                     checked={captureAll}
                     name="test"
-                    onChange={() => setCaptureAll(!captureAll)}
+                    onChange={() => {
+                        setCaptureAll(!captureAll)
+                        setChanged(true)
+                    }}
                     label="Capture 100% of the sessions"
                 />
             </div>
@@ -26,7 +31,10 @@ function CaptureRate(props) {
                         type="number"
                         value={captureRate}
                         style={{ height: '38px', width: '100px'}}
-                        onChange={(e, { value }) => setCaptureRate(value)}
+                        onChange={(e, { value }) => {
+                            setCaptureRate(value)
+                            setChanged(true);
+                        }}
                         disabled={captureAll}
                         min={0}
                         minValue={0}
@@ -34,7 +42,7 @@ function CaptureRate(props) {
                     <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
                 </div>
                 <span className="mx-3">of the sessions</span>
-                <Button outline size="medium" onClick={settingsStore.updateCaptureRate(captureRate)}>Update</Button>
+                <Button disabled={!changed} outline size="medium" onClick={settingsStore.updateCaptureRate(captureRate)}>Update</Button>
             </div>
         </>
     );

From 87f76f484ded61404c07ebb690225c880e531939 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 May 2022 16:31:19 +0200
Subject: [PATCH 4/6] feat(ui) - session settings - changed state

---
 .../Dashboard/components/DashboardModal/DashboardModal.tsx      | 2 +-
 frontend/app/components/Modal/ModalOverlay.tsx                  | 2 +-
 .../app/components/Session_/Player/Controls/DraggableCircle.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
index 575cb7de8..d19556857 100644
--- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
@@ -38,7 +38,7 @@ function DashboardModal(props) {
     return useObserver(() => (
         <div
             className="fixed border-r shadow p-4 h-screen"
-            style={{ backgroundColor: '#FAFAFA', zIndex: '999', width: '85%', maxWidth: '1300px' }}
+            style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '85%', maxWidth: '1300px' }}
         >
             <div className="mb-6 flex items-end justify-between">
                 <div>
diff --git a/frontend/app/components/Modal/ModalOverlay.tsx b/frontend/app/components/Modal/ModalOverlay.tsx
index 4dad0ec61..ef46024e1 100644
--- a/frontend/app/components/Modal/ModalOverlay.tsx
+++ b/frontend/app/components/Modal/ModalOverlay.tsx
@@ -6,7 +6,7 @@ function ModalOverlay({ children }) {
     let modal = useModal();
  
     return (
-        <div className="fixed w-full h-screen" style={{ zIndex: '999' }}>
+        <div className="fixed w-full h-screen" style={{ zIndex: 999 }}>
             <div
                 onClick={() => modal.hideModal()}
                 className={stl.overlay}
diff --git a/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx b/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx
index f4ebd6abf..385707879 100644
--- a/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx
+++ b/frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx
@@ -19,7 +19,7 @@ function getStyles(
         // because IE will ignore our custom "empty image" drag preview.
         opacity: isDragging ? 0 : 1,
         height: isDragging ? 0 : '',
-        zIndex: '99',
+        zIndex: 99,
         cursor: 'move'
     }
 }

From 18e932e5e97e6029728a27c727ea2682788e97e7 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 3 May 2022 12:26:42 +0200
Subject: [PATCH 5/6] feat(ui) - session settings - capture rate api update

---
 .../BugFinder/SessionsMenu/SessionsMenu.js    |  15 +-
 .../components/Client/Sites/NewSiteForm.js    |   1 -
 frontend/app/components/Modal/Modal.js        |   4 +-
 .../app/components/Modal/ModalOverlay.css     |  21 +++
 .../app/components/Modal/ModalOverlay.tsx     |   5 +-
 frontend/app/components/Modal/index.tsx       |   4 +-
 .../Session_/Player/Controls/Controls.js      |   4 +-
 .../app/components/shared/Select/Select.tsx   |   7 +-
 .../shared/SessionItem/SessionItem.js         |   3 -
 .../shared/SessionItem/SessionItem.tsx        | 164 ++++++++++++++++++
 .../SessionMetaList/SessionMetaList.tsx       |   2 +-
 .../shared/SessionItem/sessionItem.css        |  23 +--
 .../components/CaptureRate.tsx                |  32 +++-
 .../components/DefaultTimezone.tsx            |  17 +-
 .../components/ListingVisibility.tsx          |  19 +-
 frontend/app/constants/index.js               |   1 +
 frontend/app/constants/storageKeys.ts         |   3 +
 frontend/app/duck/search.js                   |  23 +++
 frontend/app/mstore/index.tsx                 |   3 +-
 frontend/app/mstore/settingsStore.ts          |  31 +++-
 frontend/app/mstore/types/sessionSettings.ts  |  28 ++-
 .../StatedScreen/Screen/Cursor.ts             |   1 -
 frontend/app/player/Player.ts                 |   2 +-
 frontend/app/services/SessionService.ts       |  23 +++
 frontend/app/services/index.ts                |   4 +-
 25 files changed, 366 insertions(+), 74 deletions(-)
 create mode 100644 frontend/app/components/shared/SessionItem/SessionItem.tsx
 create mode 100644 frontend/app/constants/storageKeys.ts
 create mode 100644 frontend/app/services/SessionService.ts

diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
index 978eb0003..36dd5f83f 100644
--- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
+++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
@@ -20,9 +20,9 @@ function SessionsMenu(props) {
   
   const capturingAll = props.captureRate && props.captureRate.get('captureAll');
 
-  useEffect(() => {
-    showModal(<SessionSettings />, {});
-  }, [])
+  // useEffect(() => {
+  //   showModal(<SessionSettings />, {});
+  // }, [])
 
   return (
     <div className={stl.wrapper}>
@@ -30,8 +30,8 @@ function SessionsMenu(props) {
         <div className={ stl.label }>
           <span>Sessions</span>
         </div>
-        {capturingAll && <span className={ cn(stl.manageButton, 'mr-2') } onClick={ toggleRehydratePanel }>Manage</span>}        
-        { !capturingAll && (
+        <span className={ cn(stl.manageButton, 'mr-2') } onClick={() => showModal(<SessionSettings />, { right: true })}>Manage</span>
+        {/* { !capturingAll && (
           <Popup
             trigger={
               <div
@@ -47,8 +47,11 @@ function SessionsMenu(props) {
             inverted
             position="top right"
           />          
-        )}        
+        )}         */}
       </div>
+      {/* <div className="text-sm color-gray-medium cursor-pointer mb-4" style={{ textDecoration: 'underline dotted'}} onClick={() => showModal(<SessionSettings />, {})}>
+        Capture, Listing, and Timezone Settings
+      </div> */}
       
       <div>
         <SideMenuitem
diff --git a/frontend/app/components/Client/Sites/NewSiteForm.js b/frontend/app/components/Client/Sites/NewSiteForm.js
index 4195c8c63..e58e95d4e 100644
--- a/frontend/app/components/Client/Sites/NewSiteForm.js
+++ b/frontend/app/components/Client/Sites/NewSiteForm.js
@@ -42,7 +42,6 @@ export default class NewSiteForm extends React.PureComponent {
 					const { sites } = this.props;
 					const site = sites.last();
 					if (!pathname.includes('/client')) {
-						console.log('site', site)
 						this.props.setSiteId(site.get('id'))
 					}
 					this.props.onClose(null, site)
diff --git a/frontend/app/components/Modal/Modal.js b/frontend/app/components/Modal/Modal.js
index baf226621..fa6727ebe 100644
--- a/frontend/app/components/Modal/Modal.js
+++ b/frontend/app/components/Modal/Modal.js
@@ -4,10 +4,10 @@ import { useModal } from '.';
 import ModalOverlay from './ModalOverlay';
 
 export default function Modal({ children }){
-  const { component } = useModal();
+  const { component, props} = useModal();
 
   return component ? ReactDOM.createPortal(
-    <ModalOverlay>
+    <ModalOverlay left={!props.right} right={props.right}>
       {component}
     </ModalOverlay>,
     document.querySelector("#modal-root"),
diff --git a/frontend/app/components/Modal/ModalOverlay.css b/frontend/app/components/Modal/ModalOverlay.css
index e3e33562a..806b59137 100644
--- a/frontend/app/components/Modal/ModalOverlay.css
+++ b/frontend/app/components/Modal/ModalOverlay.css
@@ -7,13 +7,26 @@
     /* transition: all 0.3s ease-in-out; */
     animation: fade 1s forwards;
 }
+
 .slide {
     position: absolute;
+    /* left: -100%; */
+    /* -webkit-animation: slide 0.5s forwards;
+    animation: slide 0.5s forwards; */
+}
+
+.slideLeft {
     left: -100%;
     -webkit-animation: slide 0.5s forwards;
     animation: slide 0.5s forwards;
 }
 
+.slideRight {
+    right: -100%;
+    -webkit-animation: slideRight 0.5s forwards;
+    animation: slideRight 0.5s forwards;
+}
+
 @keyframes fade {
     0% {
         opacity: 0;
@@ -29,4 +42,12 @@
 
 @keyframes slide {
     100% { left: 0; }
+}
+
+@-webkit-keyframes slideRight {
+    100% { right: 0; }
+}
+
+@keyframes slideRight {
+    100% { right: 0%; }
 }
\ No newline at end of file
diff --git a/frontend/app/components/Modal/ModalOverlay.tsx b/frontend/app/components/Modal/ModalOverlay.tsx
index ef46024e1..270840a65 100644
--- a/frontend/app/components/Modal/ModalOverlay.tsx
+++ b/frontend/app/components/Modal/ModalOverlay.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useModal } from 'App/components/Modal';
 import stl from './ModalOverlay.css'
+import cn from 'classnames';
 
-function ModalOverlay({ children }) {
+function ModalOverlay({ children, left = false, right = false }) {
     let modal = useModal();
  
     return (
@@ -12,7 +13,7 @@ function ModalOverlay({ children }) {
                 className={stl.overlay}
                 style={{ background: "rgba(0,0,0,0.5)" }}
             />
-            <div className={stl.slide}>{children}</div>
+            <div className={cn(stl.slide, { [stl.slideLeft] : left, [stl.slideRight] : right })}>{children}</div>
         </div>
     );
 }
diff --git a/frontend/app/components/Modal/index.tsx b/frontend/app/components/Modal/index.tsx
index a653ed24f..339a79fbd 100644
--- a/frontend/app/components/Modal/index.tsx
+++ b/frontend/app/components/Modal/index.tsx
@@ -4,7 +4,9 @@ import Modal from './Modal';
 
 const ModalContext = createContext({
   component: null,
-  props: {},
+  props: {
+    right: false,
+  },
   showModal: (component: any, props: any) => {},
   hideModal: () => {}
 });
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index ab1baba3e..abbf40803 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -276,13 +276,13 @@ export default class Controls extends React.Component {
                     label="Back"
                     icon="replay-10"
                   />
-                  <ControlButton
+                  {/* <ControlButton
                     disabled={ disabled }
                     onClick={ this.props.toggleSkipToIssue }
                     active={ skipToIssue }
                     label="Skip to Issue"
                     icon={skipToIssue ? 'skip-forward-fill' : 'skip-forward'}
-                  />
+                  /> */}
                 </div>
               )}
 
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index c4523cf25..85418f5fc 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -4,11 +4,11 @@ import Select from 'react-select';
 interface Props {
     options: any[];
     isSearchable?: boolean;
-    defaultValue?: any;
+    defaultValue?: string;
     plain?: boolean;
     [x:string]: any;
 }
-export default function({ plain = false, options, isSearchable = false, defaultValue, ...rest }: Props) {
+export default function({ plain = false, options, isSearchable = false, defaultValue = '', ...rest }: Props) {
     const customStyles = {
         option: (provided, state) => ({
           ...provided,
@@ -39,11 +39,12 @@ export default function({ plain = false, options, isSearchable = false, defaultV
           return { ...provided, opacity, transition };
         }
     }
+    const defaultSelected = defaultValue ? options.find(x => x.value === defaultValue) : options[0];
     return (
         <Select
             options={options}
             isSearchable={isSearchable}
-            defaultValue={defaultValue ? options.find(i => i.value === defaultValue) : options[0]}
+            defaultValue={defaultSelected}
             components={{
                 IndicatorSeparator: () => null
             }}
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js
index 35434cf76..af00fa2a2 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.js
+++ b/frontend/app/components/shared/SessionItem/SessionItem.js
@@ -23,9 +23,6 @@ const ASSIST_ROUTE = assistRoute();
 const ASSIST_LIVE_SESSION = liveSession()
 const SESSIONS_ROUTE = sessionsRoute();
 
-// const Label = ({ label = '', color = 'color-gray-medium'}) => (
-//   <div className={ cn('font-light text-sm', color)}>{label}</div>
-// )
 @connect(state => ({
   timezone: state.getIn(['sessions', 'timezone']),
   siteId: state.getIn([ 'site', 'siteId' ]),
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
new file mode 100644
index 000000000..dc51bfc17
--- /dev/null
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import cn from 'classnames';
+import { 
+  Link,
+  Icon,
+  CountryFlag,
+  Avatar,
+  TextEllipsis,
+  Label,
+} from 'UI';
+import { toggleFavorite, setSessionPath } from 'Duck/sessions';
+import { session as sessionRoute, liveSession as liveSessionRoute, withSiteId } from 'App/routes';
+import { durationFormatted, formatTimeOrDate } from 'App/date';
+import stl from './sessionItem.css';
+import Counter from './Counter'
+import { withRouter } from 'react-router-dom';
+import SessionMetaList from './SessionMetaList';
+import ErrorBars from './ErrorBars';
+import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from "App/routes";
+import { capitalize } from 'App/utils';
+import { SKIP_TO_ISSUE, TIMEZONE, DURATION_FILTER  } from 'App/constants/storageKeys'
+
+const ASSIST_ROUTE = assistRoute();
+const ASSIST_LIVE_SESSION = liveSession()
+const SESSIONS_ROUTE = sessionsRoute();
+
+// @connect(state => ({
+//   timezone: state.getIn(['sessions', 'timezone']),
+//   siteId: state.getIn([ 'site', 'siteId' ]),
+// }), { toggleFavorite, setSessionPath })
+// @withRouter
+function SessionItem(props) {
+  // render() {
+    const {
+      session: {
+        sessionId,
+        userBrowser,
+        userOs,
+        userId,
+        userAnonymousId,
+        userDisplayName,
+        userCountry,
+        startedAt,
+        duration,
+        eventsCount,
+        errorsCount,
+        pagesCount,
+        viewed,
+        favorite,
+        userDeviceType,
+        userUuid,
+        userNumericHash,
+        live,
+        metadata,
+        userSessionsCount,
+        issueTypes,
+        active,
+      },
+      timezone,
+      onUserClick = () => null,
+      hasUserFilter = false,
+      disableUser = false,
+      metaList = [],
+      showActive = false,
+      lastPlayedSessionId,
+    } = props;
+    const formattedDuration = durationFormatted(duration);
+    const hasUserId = userId || userAnonymousId;
+    const isSessions = isRoute(SESSIONS_ROUTE, props.location.pathname);
+    const isAssist = isRoute(ASSIST_ROUTE, props.location.pathname) || isRoute(ASSIST_LIVE_SESSION, props.location.pathname);
+    const isLastPlayed = lastPlayedSessionId === sessionId;
+
+    const _metaList = Object.keys(metadata).filter(i => metaList.includes(i)).map(key => {
+      const value = metadata[key];
+      return { label: key, value };
+    });
+
+    return (
+      <div className={ cn(stl.sessionItem, "flex flex-col bg-white p-3 mb-3") } id="session-item" >
+        <div className="flex items-start">
+          <div className={ cn('flex items-center w-full')}>
+            <div className="flex items-center pr-2" style={{ width: "30%"}}>
+              <div><Avatar seed={ userNumericHash } isAssist={isAssist} /></div>
+              <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center">
+                <div
+                  className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
+                  onClick={() => (!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)}
+                >
+                  <TextEllipsis text={userDisplayName} maxWidth={200} popupProps={{ inverted: true, size: 'tiny' }} />
+                </div>
+              </div>
+            </div>
+            <div style={{ width: "20%", height: "38px" }} className="px-2 flex flex-col justify-between">
+              <div>{formatTimeOrDate(startedAt, timezone) }</div>
+              <div className="flex items-center color-gray-medium">
+                {!isAssist && (
+                    <>
+                      <div className="color-gray-medium">
+                        <span className="mr-1">{ eventsCount }</span>
+                        <span>{ eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' }</span>
+                      </div>
+                      <div className="mx-2 text-4xl">·</div>
+                    </>
+                )}
+                <div>{ live ? <Counter startTime={startedAt} /> : formattedDuration }</div>
+              </div>
+            </div>
+            <div style={{ width: "30%", height: "38px" }} className="px-2 flex flex-col justify-between">
+              <CountryFlag country={ userCountry } className="mr-2" label />
+              <div className="color-gray-medium flex items-center">
+                <span className="capitalize" style={{ maxWidth: '70px'}}>
+                  <TextEllipsis text={ capitalize(userBrowser) } popupProps={{ inverted: true, size: "tiny" }} />
+                </span> 
+                <div className="mx-2 text-4xl">·</div>
+                <span className="capitalize" style={{ maxWidth: '70px'}}>
+                  <TextEllipsis text={ capitalize(userOs) } popupProps={{ inverted: true, size: "tiny" }} />
+                </span>
+                <div className="mx-2 text-4xl">·</div>
+                <span className="capitalize" style={{ maxWidth: '70px'}}>
+                  <TextEllipsis text={ capitalize(userDeviceType) } popupProps={{ inverted: true, size: "tiny" }} />
+                </span>
+              </div>
+            </div>
+            { isSessions && (
+              <div style={{ width: "10%"}} className="self-center px-2 flex items-center">
+                <ErrorBars count={issueTypes.length} />
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center">
+            { isAssist && showActive && (
+              <Label success className={cn("bg-green color-white text-right mr-4", { 'opacity-0' : !active})}>
+                <span className="color-white">ACTIVE</span>
+              </Label>
+            )}
+            <div className={ stl.playLink } id="play-button" data-viewed={ viewed }>
+              { isSessions && (
+                <div className="mr-4 flex-shrink-0 w-24">
+                  { isLastPlayed && (
+                    <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
+                      <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap'}}>LAST PLAYED</span>
+                    </Label>
+                  )}
+                </div>
+              )}
+              <Link to={ isAssist ? liveSessionRoute(sessionId) : sessionRoute(sessionId) }>
+                <Icon name={ !viewed && !isAssist ? 'play-fill' : 'play-circle-light' } size="42" color={isAssist ? "tealx" : "teal"} />
+              </Link>
+            </div>
+          </div>
+        </div>
+        { _metaList.length > 0 && (
+          <SessionMetaList className="mt-4" metaList={_metaList} />
+        )}
+      </div>
+    );
+  }
+
+export default connect(state => ({
+  timezone: localStorage.getItem(TIMEZONE) || '',
+  siteId: state.getIn([ 'site', 'siteId' ]),
+}), { toggleFavorite, setSessionPath })(withRouter(SessionItem));
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index 8b0e77ed5..850343110 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
@@ -6,7 +6,7 @@ import MetaMoreButton from '../MetaMoreButton';
 
 interface Props {
   className?: string,
-  metaList: [],
+  metaList: any[],
   maxLength?: number,
 }
 
diff --git a/frontend/app/components/shared/SessionItem/sessionItem.css b/frontend/app/components/shared/SessionItem/sessionItem.css
index f7fcde842..4b042b160 100644
--- a/frontend/app/components/shared/SessionItem/sessionItem.css
+++ b/frontend/app/components/shared/SessionItem/sessionItem.css
@@ -1,23 +1,7 @@
 
-@import 'icons.css';
-@import 'mixins.css';
-
-@keyframes fade {
-  0%   { opacity: 1}
-  50% { opacity: 0}
-  100%   { opacity: 1}
-}
-
 .sessionItem {
   user-select: none;
-  @mixin defaultHover;
   border-radius: 3px;
-  /* padding: 10px 10px; */
-  /* padding-right: 15px; */
-  /* margin-bottom: 15px; */
-  /* background-color: white; */
-  /* display: flex; */
-  /* align-items: center; */
   border: solid thin #EEEEEE;
 
   & .favorite {
@@ -39,7 +23,7 @@
     }
   }
 
-  & .iconStack {
+  /* & .iconStack {
     min-width: 200px;
     display: flex;
     & .icons {
@@ -48,7 +32,7 @@
       margin-bottom: 5px;
       align-items: center;
     }
-  }
+  } */
 
   & .left {
     & > div {
@@ -114,7 +98,4 @@
   text-transform: uppercase;
   font-size: 10px;
   letter-spacing: 1px;
-  & svg {
-    animation: fade 1s infinite;
-  }
 }
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
index 9576de72a..d7be11132 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 from 'react';
-import { Icon, Toggler, Button, Input } from 'UI';
+import React, { useEffect } from 'react';
+import { Icon, Toggler, Button, Input, Loader } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
@@ -7,11 +7,19 @@ function CaptureRate(props) {
     const [changed, setChanged] = React.useState(false);
     const { settingsStore } = useStore();
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+    const loading = useObserver(() => settingsStore.loadingCaptureRate)
     const [captureRate, setCaptureRate] = React.useState(sessionSettings.captureRate);
-    const [captureAll, setCaptureAll] = React.useState(captureRate === 100);
+    const [captureAll, setCaptureAll] = React.useState(sessionSettings.captureAll);
 
-    return (
-        <>
+    useEffect(() => {
+        settingsStore.fetchCaptureRate().then(() => {
+            setCaptureRate(sessionSettings.captureRate);
+            setCaptureAll(sessionSettings.captureAll);
+        });
+    }, [])
+
+    return useObserver(() => (
+        <Loader loading={loading}>
             <h3 className="text-lg">Capture Rate</h3>
             <div className="my-1">What percentage of your user sessions do you want to record and monitor?</div>
             <div className="mt-2 mb-4">
@@ -42,10 +50,18 @@ function CaptureRate(props) {
                     <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
                 </div>
                 <span className="mx-3">of the sessions</span>
-                <Button disabled={!changed} outline size="medium" onClick={settingsStore.updateCaptureRate(captureRate)}>Update</Button>
+                <Button
+                    disabled={!changed}
+                    outline
+                    size="medium"
+                    onClick={() => settingsStore.saveCaptureRate({
+                        rate: captureRate,
+                        captureAll,
+                    }).finally(() => setChanged(false))}
+                >Update</Button>
             </div>
-        </>
-    );
+        </Loader>
+    ));
 }
 
 export default CaptureRate;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
index c2f585a3d..e7af914d4 100644
--- a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
@@ -4,33 +4,38 @@ import Select from 'Shared/Select';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
+const str = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
+const d = str && str[1] || 'UTC';
 const timezoneOptions = [
+    { label: d, value: 'local' },
     { label: 'UTC', value: 'UTC' },
-    { label: 'EST', value: 'EST' },
 ]
 
 function DefaultTimezone(props) {
     const [changed, setChanged] = React.useState(false);
     const { settingsStore } = useStore();
+    const [timezone, setTimezone] = React.useState(settingsStore.sessionSettings.timezone);
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+    console.log('timezone', timezone)
 
     return (
         <>
             <h3 className="text-lg">Default Timezone</h3>
             <div className="my-1">Session Time</div>
-            <div className="mt-2 flex items-center" style={{ width: "200px"}}>
+            <div className="mt-2 flex items-center" style={{ width: "220px"}}>
                 <Select
                     options={timezoneOptions}
-                    defaultValue={sessionSettings.timezone}
-                    className="w-4/6"
-                    onChange={(e, { value }) => {
-                        sessionSettings.updateKey('timezone', value);
+                    defaultValue={timezone}
+                    className="w-full"
+                    onChange={({ value }) => {
+                        setTimezone(value);
                         setChanged(true);
                     }}
                 />
                 <div className="col-span-3 ml-3">
                     <Button disabled={!changed} outline size="medium" onClick={() => {
                         setChanged(false);
+                        sessionSettings.updateKey('timezone', timezone);
                     }}>Update</Button>
                 </div>
             </div>
diff --git a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
index 1779a2e01..d9f137daa 100644
--- a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx
@@ -14,9 +14,9 @@ const periodOptions = [
 ]
 
 function ListingVisibility(props) {
+    const [changed, setChanged] = React.useState(false);
     const { settingsStore } = useStore();
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
-    const [changed, setChanged] = React.useState(false);
     const [durationSettings, setDurationSettings] = React.useState(sessionSettings.durationFilter);
     
     return (
@@ -24,28 +24,41 @@ function ListingVisibility(props) {
             <h3 className="text-lg">Listing Visibility</h3>
             <div className="my-1">Do not show sessions duration with.</div>
             <div className="grid grid-cols-12 gap-2 mt-2">
-                <div className="col-span-3">
+                <div className="col-span-4">
                     <Select
                         options={numberOptions}
                         defaultValue={durationSettings.operator}
+                        onChange={({ value }) => {
+                            setDurationSettings({ ...durationSettings, operator: value });
+                            setChanged(true);
+                        }}
                     />
                 </div>
-                <div className="col-span-3">
+                <div className="col-span-2">
                     <Input
                         value={durationSettings.count}
                         type="number"
                         name="count"
                         style={{ height: '38px', width: '100%'}}
+                        onChange={(e, { value }) => {
+                            setDurationSettings({ ...durationSettings, count: value });
+                            setChanged(true);
+                        }}
                     />
                 </div>
                 <div className="col-span-3">
                     <Select
                         defaultValue={durationSettings.countType}
                         options={periodOptions}
+                        onChange={({ value }) => {
+                            setDurationSettings({ ...durationSettings, countType: value });
+                            setChanged(true);
+                        }}
                     />
                 </div>
                 <div className="col-span-3">
                     <Button outline size="medium" disabled={!changed} onClick={() => {
+                        sessionSettings.updateKey('durationFilter', durationSettings);
                         setChanged(false);
                     }}>Update</Button>
                 </div>
diff --git a/frontend/app/constants/index.js b/frontend/app/constants/index.js
index 239c7478a..30c5c5095 100644
--- a/frontend/app/constants/index.js
+++ b/frontend/app/constants/index.js
@@ -20,3 +20,4 @@ export {
   WEBHOOK as CHANNEL_WEBHOOK
 } from './schedule';
 export { default } from './filterOptions';
+export { default as storageKeys } from './storageKeys';
\ No newline at end of file
diff --git a/frontend/app/constants/storageKeys.ts b/frontend/app/constants/storageKeys.ts
new file mode 100644
index 000000000..ee39d53d6
--- /dev/null
+++ b/frontend/app/constants/storageKeys.ts
@@ -0,0 +1,3 @@
+export const SKIP_TO_ISSUE = "__$session-skipToIssue$__"
+export const TIMEZONE = "__$session-timezone$__"
+export const DURATION_FILTER = "__$session-durationFilter$__"
\ No newline at end of file
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
index dd879592c..c003515a9 100644
--- a/frontend/app/duck/search.js
+++ b/frontend/app/duck/search.js
@@ -9,6 +9,7 @@ import { fetchList as fetchSessionList } from './sessions';
 import { fetchList as fetchErrorsList } from './errors';
 import { FilterCategory, FilterKey, IssueType } from 'Types/filter/filterType';
 import { filtersMap, liveFiltersMap, generateFilterOptions, generateLiveFilterOptions } from 'Types/filter/newFilter';
+import { DURATION_FILTER  } from 'App/constants/storageKeys'
 
 const ERRORS_ROUTE = errorsRoute();
 
@@ -149,6 +150,28 @@ export const reduceThenFetchResource = actionCreator => (...args) => (dispatch,
   filter.limit = 10;
   filter.page = getState().getIn([ 'search', 'currentPage']);
 
+  // duration filter from local storage
+  if (!filter.filters.find(f => f.type === FilterKey.DURATION)) {
+    const durationFilter = JSON.parse(localStorage.getItem(DURATION_FILTER) || '{"count": 0}');
+    let durationValue = parseInt(durationFilter.count)
+    if (durationValue > 0) {
+      const value = [0];
+      durationValue = durationFilter.countType === 'min' ? durationValue * 60 * 1000 : durationValue * 1000;
+      if (durationFilter.operator === '<') {
+        value[0] = durationValue;
+      } else if (durationFilter.operator === '>') {
+        value[1] = durationValue;
+      }
+      
+      filter.filters = filter.filters.concat({
+        type: FilterKey.DURATION,
+        operator: 'is',
+        value,
+      });
+    }
+  }
+
+
   return isRoute(ERRORS_ROUTE, window.location.pathname)
     ? dispatch(fetchErrorsList(filter))
     : dispatch(fetchSessionList(filter));
diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx
index 39c1d84a4..f72972121 100644
--- a/frontend/app/mstore/index.tsx
+++ b/frontend/app/mstore/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import DashboardStore, { IDashboardSotre } from './dashboardStore';
 import MetricStore, { IMetricStore } from './metricStore';
 import APIClient from 'App/api_client';
-import { dashboardService, metricService } from 'App/services';
+import { dashboardService, metricService, sessionService } from 'App/services';
 import SettingsStore from './settingsStore';
 
 export class RootStore {
@@ -20,6 +20,7 @@ export class RootStore {
       const client  = new APIClient();
       dashboardService.initClient(client)
       metricService.initClient(client)
+      sessionService.initClient(client)
     }
 }
 
diff --git a/frontend/app/mstore/settingsStore.ts b/frontend/app/mstore/settingsStore.ts
index 82a33a5cb..0a666f75d 100644
--- a/frontend/app/mstore/settingsStore.ts
+++ b/frontend/app/mstore/settingsStore.ts
@@ -1,7 +1,10 @@
-import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
+import { makeAutoObservable, observable, action } from "mobx"
 import SessionSettings from "./types/sessionSettings"
+import { sessionService } from "App/services"
+import { toast } from 'react-toastify';
 
 export default class SettingsStore {
+    loadingCaptureRate: boolean = false;
     sessionSettings: SessionSettings = new SessionSettings()
     constructor() {
         makeAutoObservable(this, {
@@ -9,7 +12,29 @@ export default class SettingsStore {
         })
     }
 
-    updateCaptureRate(value: number) {
-        this.sessionSettings.updateKey('captureRate', value);
+    saveCaptureRate(data: any) {
+        return sessionService.saveCaptureRate(data)
+            .then(data => {
+                this.sessionSettings.merge({
+                    captureRate: data.rate,
+                    captureAll: data.captureAll
+                })
+                toast.success("Capture rate saved successfully");
+            }).catch(err => {
+                toast.error("Error saving capture rate");
+            })
+    }
+
+    fetchCaptureRate(): Promise<any> {
+        this.loadingCaptureRate = true;
+        return sessionService.fetchCaptureRate()
+            .then(data => {
+                this.sessionSettings.merge({
+                    captureRate: data.rate,
+                    captureAll: data.captureAll
+                })
+            }).finally(() => {
+                this.loadingCaptureRate = false;
+            })
     }
 }
\ No newline at end of file
diff --git a/frontend/app/mstore/types/sessionSettings.ts b/frontend/app/mstore/types/sessionSettings.ts
index 37317cacd..9374b0df1 100644
--- a/frontend/app/mstore/types/sessionSettings.ts
+++ b/frontend/app/mstore/types/sessionSettings.ts
@@ -1,13 +1,10 @@
 import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
+import { SKIP_TO_ISSUE, TIMEZONE, DURATION_FILTER  } from 'App/constants/storageKeys'
 
 export default class SessionSettings {
-    skipToIssue: boolean = false
-    timezone: string = "EST"
-    durationFilter: any = {
-        count: 0,
-        countType: 'min',
-        operator: '>'
-    }
+    skipToIssue: boolean = localStorage.getItem(SKIP_TO_ISSUE) === 'true';
+    timezone: string = localStorage.getItem(TIMEZONE) || 'UTC';
+    durationFilter: any = JSON.parse(localStorage.getItem(DURATION_FILTER) || '{}');
     captureRate: number = 0
     captureAll: boolean = false
 
@@ -17,10 +14,25 @@ export default class SessionSettings {
         })
     }
 
+    merge(settings: any) {
+        for (const key in settings) {
+            if (settings.hasOwnProperty(key)) {
+                this.updateKey(key, settings[key]);
+            }
+        }
+    }
+    
     updateKey(key: string, value: any) {
-        console.log(`SessionSettings.updateKey(${key}, ${value})`)
         runInAction(() => {
             this[key] = value
         })
+
+        if (key === 'captureRate' || key === 'captureAll') return
+
+        if (key === 'durationFilter') {
+            localStorage.setItem(`__$session-${key}$__`, JSON.stringify(value));
+        } else {
+            localStorage.setItem(`__$session-${key}$__`, value);
+        }
     }
 }
diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts
index 1b74ab027..b030403b8 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts
@@ -27,7 +27,6 @@ export default class Cursor {
   }
 
   click() {
-    console.log("clickong ", styles.clicked)
     this.cursor.classList.add(styles.clicked)
     setTimeout(() => {
       this.cursor.classList.remove(styles.clicked)
diff --git a/frontend/app/player/Player.ts b/frontend/app/player/Player.ts
index f1f305868..358ed52c4 100644
--- a/frontend/app/player/Player.ts
+++ b/frontend/app/player/Player.ts
@@ -25,7 +25,7 @@ const HIGHEST_SPEED = 16;
 
 const SPEED_STORAGE_KEY = "__$player-speed$__";
 const SKIP_STORAGE_KEY = "__$player-skip$__";
-const SKIP_TO_ISSUE_STORAGE_KEY = "__$player-skip-to-issue$__";
+const SKIP_TO_ISSUE_STORAGE_KEY = "__$session-skipToIssue$__";
 const AUTOPLAY_STORAGE_KEY = "__$player-autoplay$__";
 const SHOW_EVENTS_STORAGE_KEY = "__$player-show-events$__";
 const storedSpeed: number = parseInt(localStorage.getItem(SPEED_STORAGE_KEY) || "") ;
diff --git a/frontend/app/services/SessionService.ts b/frontend/app/services/SessionService.ts
new file mode 100644
index 000000000..a7940edc1
--- /dev/null
+++ b/frontend/app/services/SessionService.ts
@@ -0,0 +1,23 @@
+import APIClient from 'App/api_client';
+
+export default class SettingsService {
+    private client: APIClient;
+
+    constructor(client?: APIClient) {
+        this.client = client ? client : new APIClient();
+    }
+
+    initClient(client?: APIClient) {
+        this.client = client || new APIClient();
+    }
+
+    saveCaptureRate(data: any) {
+        return this.client.post('/sample_rate', data);
+    }
+
+    fetchCaptureRate() {
+        return this.client.get('/sample_rate')
+            .then(response => response.json())
+            .then(response => response.data || 0);
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/services/index.ts b/frontend/app/services/index.ts
index 944877c16..e721e0f10 100644
--- a/frontend/app/services/index.ts
+++ b/frontend/app/services/index.ts
@@ -1,5 +1,7 @@
 import DashboardService, { IDashboardService } from "./DashboardService";
 import MetricService, { IMetricService } from "./MetricService";
+import SessionSerivce from "./SessionService";
 
 export const dashboardService: IDashboardService  = new DashboardService();
-export const metricService: IMetricService = new MetricService();
\ No newline at end of file
+export const metricService: IMetricService = new MetricService();
+export const sessionService: SessionSerivce = new SessionSerivce();
\ No newline at end of file

From 690577407d067976ec73ed15ddff57073f99e588 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 3 May 2022 12:34:58 +0200
Subject: [PATCH 6/6] feat(ui) - session settings - cleanup

---
 frontend/app/Router.js                         |  3 ---
 .../BugFinder/SessionsMenu/SessionsMenu.js     | 18 ++++--------------
 frontend/app/components/Header/SiteDropdown.js |  3 ---
 .../shared/SessionSettings/SessionSettings.tsx |  6 +-----
 frontend/app/mstore/settingsStore.ts           |  2 ++
 5 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/frontend/app/Router.js b/frontend/app/Router.js
index ab41173bd..dc1ee6ad6 100644
--- a/frontend/app/Router.js
+++ b/frontend/app/Router.js
@@ -26,7 +26,6 @@ import { fetchList as fetchMetadata } from 'Duck/customField';
 import { fetchList as fetchSiteList } from 'Duck/site';
 import { fetchList as fetchAnnouncements } from 'Duck/announcements';
 import { fetchList as fetchAlerts } from 'Duck/alerts';
-import { fetchWatchdogStatus } from 'Duck/watchdogs';
 import { dashboardService } from "App/services";
 import { withStore } from 'App/mstore'
 
@@ -107,7 +106,6 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
   fetchSiteList,
   fetchAnnouncements,
   fetchAlerts,
-  fetchWatchdogStatus,
 })
 class Router extends React.Component {
   state = {
@@ -132,7 +130,6 @@ class Router extends React.Component {
             this.props.fetchMetadata() 
             this.props.fetchAnnouncements();
             this.props.fetchAlerts();
-            this.props.fetchWatchdogStatus();
           }, 100);
         })
       })
diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
index 36dd5f83f..d81ff1a7f 100644
--- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
+++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { SideMenuitem, SavedSearchList, Progress, Popup } from 'UI'
 import stl from './sessionMenu.css';
-import {  fetchWatchdogStatus } from 'Duck/watchdogs';
 import { clearEvents } from 'Duck/filters';
 import { issues_types } from 'Types/session/issue'
 import { fetchList as fetchSessionList } from 'Duck/sessions';
@@ -11,18 +10,12 @@ import { useModal } from 'App/components/Modal';
 import SessionSettings from 'Shared/SessionSettings/SessionSettings'
 
 function SessionsMenu(props) {
-  const { activeTab, keyMap, wdTypeCount, toggleRehydratePanel } = props;
-  const { hideModal, showModal } = useModal();
+  const { activeTab } = props;
+  const { showModal } = useModal();
 
   const onMenuItemClick = (filter) => {
     props.onMenuItemClick(filter)
   }
-  
-  const capturingAll = props.captureRate && props.captureRate.get('captureAll');
-
-  // useEffect(() => {
-  //   showModal(<SessionSettings />, {});
-  // }, [])
 
   return (
     <div className={stl.wrapper}>
@@ -49,9 +42,6 @@ function SessionsMenu(props) {
           />          
         )}         */}
       </div>
-      {/* <div className="text-sm color-gray-medium cursor-pointer mb-4" style={{ textDecoration: 'underline dotted'}} onClick={() => showModal(<SessionSettings />, {})}>
-        Capture, Listing, and Timezone Settings
-      </div> */}
       
       <div>
         <SideMenuitem
@@ -96,5 +86,5 @@ export default connect(state => ({
   filters: state.getIn([ 'filters', 'appliedFilter' ]),
   sessionsLoading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
 }), { 
-  fetchWatchdogStatus, clearEvents, fetchSessionList
+  clearEvents, fetchSessionList
 })(SessionsMenu);
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
index 38fe6ec57..5e560567f 100644
--- a/frontend/app/components/Header/SiteDropdown.js
+++ b/frontend/app/components/Header/SiteDropdown.js
@@ -12,7 +12,6 @@ import NewSiteForm from '../Client/Sites/NewSiteForm';
 import { clearSearch } from 'Duck/search';
 import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
 import { fetchList as fetchAlerts } from 'Duck/alerts';
-import {  fetchWatchdogStatus } from 'Duck/watchdogs';
 import { withStore } from 'App/mstore'
 
 @withStore
@@ -28,7 +27,6 @@ import { withStore } from 'App/mstore'
   clearSearch,
   fetchIntegrationVariables,
   fetchAlerts,
-  fetchWatchdogStatus,
 })
 export default class SiteDropdown extends React.PureComponent {
   state = { showProductModal: false }
@@ -54,7 +52,6 @@ export default class SiteDropdown extends React.PureComponent {
     this.props.clearSearch();
     this.props.fetchIntegrationVariables();
     this.props.fetchAlerts();
-    this.props.fetchWatchdogStatus();
 
     mstore.initClient();
   }
diff --git a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
index 52e3d9ce8..409ede776 100644
--- a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
+++ b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
@@ -8,14 +8,10 @@ import DefaultTimezone from './components/DefaultTimezone';
 import CaptureRate from './components/CaptureRate';
 
 function SessionSettings(props) {
-    const { settingsStore } = useStore();
-    const sessionSettings = useObserver(() => settingsStore.sessionSettings)
-
-
     return useObserver(() => (
         <div className="bg-white box-shadow h-screen" style={{ width: '450px'}}>
             <div className="p-6">
-                <h1 className="text-2xl">Session Settings</h1>
+                <h1 className="text-2xl">Sessions Settings</h1>
             </div>
             
             <div className="p-6 border-b py-8">
diff --git a/frontend/app/mstore/settingsStore.ts b/frontend/app/mstore/settingsStore.ts
index 0a666f75d..d3da8fd10 100644
--- a/frontend/app/mstore/settingsStore.ts
+++ b/frontend/app/mstore/settingsStore.ts
@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 export default class SettingsStore {
     loadingCaptureRate: boolean = false;
     sessionSettings: SessionSettings = new SessionSettings()
+    captureRateFetched: boolean = false;
     constructor() {
         makeAutoObservable(this, {
             sessionSettings: observable,
@@ -33,6 +34,7 @@ export default class SettingsStore {
                     captureRate: data.rate,
                     captureAll: data.captureAll
                 })
+                this.captureRateFetched = true;
             }).finally(() => {
                 this.loadingCaptureRate = false;
             })