From a372269a5d2a04c72ad964a7f48012598eebbd48 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 7 Feb 2022 00:07:43 +0100
Subject: [PATCH] feat(ui) - custom metrics session list timezone and other
 changes

---
 .../SessionListModal/SessionListModal.tsx     | 33 +++++++++++--------
 .../shared/MainSearchBar/MainSearchBar.tsx    |  4 +--
 .../shared/SavedSearch/SavedSearch.tsx        |  2 +-
 frontend/app/types/filter/newFilter.js        |  2 +-
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
index 5a517679a..372c36118 100644
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
+++ b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { SlideModal, NoContent, Dropdown, Icon } from 'UI';
+import { SlideModal, NoContent, Dropdown, Icon, TimezoneDropdown } from 'UI';
 import SessionItem from 'Shared/SessionItem';
 import stl from './SessionListModal.css';
 import { connect } from 'react-redux';
@@ -59,18 +59,25 @@ function SessionListModal(props: Props) {
                     <div className="mb-6 flex items-center">
                         <div className="mr-auto">Showing all sessions between <span className="font-medium">{startTime}</span> and <span className="font-medium">{endTime}</span> </div>
                         <div className="flex items-center ml-6">
-                            <span className="mr-2 color-gray-medium">Series: </span>
-                            <Dropdown
-                                className={stl.dropdown}
-                                direction="left"
-                                options={ seriesOptions }
-                                name="change"
-                                value={ activeSeries }
-                                onChange={ writeOption }
-                                id="change-dropdown"
-                                // icon={null}
-                                icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
-                            />
+                            <div className="flex items-center">
+                                <span className="mr-2 color-gray-medium">Timezone</span>
+                                <TimezoneDropdown />
+                            </div>
+                            <div className="flex items-center ml-6">
+                                <span className="mr-2 color-gray-medium">Sort By</span>
+                                <Dropdown
+                                    className={stl.dropdown}
+                                    direction="left"
+                                    options={ seriesOptions }
+                                    name="change"
+                                    value={ activeSeries }
+                                    onChange={ writeOption }
+                                    id="change-dropdown"
+                                    // icon={null}
+                                    icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
+                                />
+                            </div>
+                            {/* <span className="mr-2 color-gray-medium">Series</span> */}
                         </div>
                     </div>
                     <NoContent 
diff --git a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
index 082afc90d..8125e09ff 100644
--- a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
+++ b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
@@ -11,8 +11,8 @@ interface Props {
 const MainSearchBar = (props: Props) => {
   return (
     <div className="flex items-center">
-        <div style={{ width: "65%", marginRight: "10px"}}><SessionSearchField /></div>
-        <div className="flex items-center" style={{ width: "35%"}}>
+        <div style={{ width: "60%", marginRight: "10px"}}><SessionSearchField /></div>
+        <div className="flex items-center" style={{ width: "40%"}}>
         <SavedSearch />
         <Popup
             trigger={
diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
index 0a8c9d060..cc156474c 100644
--- a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
+++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
@@ -40,7 +40,7 @@ function SavedSearch(props) {
             <div className="flex items-center ml-2">
               <Icon name="search" size="14" />
               <span className="color-gray-medium px-1">Viewing:</span>
-              <span className="font-medium">{savedSearch.name}</span>
+              <span className="font-medium" style={{ whiteSpace: 'nowrap', width: '30%'}}>{savedSearch.name}</span>
             </div>
           )}
         </div>
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 0cd999305..bf3b4de1c 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -42,7 +42,7 @@ export const filtersMap = {
   [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/referrer' },
   [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/duration' },
   [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'User Country', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/country', options: countryOptions },
-  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' },
+  // [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' },
   [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User Id', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },
   [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },