fix(ui): various small ui fixes for buttons

frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux';
+import { Tooltip } from 'react-tippy'
 import cn from 'classnames';
 import { SideMenuitem, SavedSearchList, Progress, Popup } from 'UI'
 import stl from './sessionMenu.css';
@@ -23,7 +24,17 @@ function SessionsMenu(props) {
         <div className={ stl.label }>
           <span>Sessions</span>
         </div>
-        <span className={ cn(stl.manageButton, 'mr-2') } onClick={() => showModal(<SessionSettings />, { right: true })}>Manage</span>
+        <span className={ cn(stl.manageButton, 'mr-2') } onClick={() => showModal(<SessionSettings />, { right: true })}>
+          <Tooltip
+            delay={500}
+            title="Configure the percentage of sessions to be captured, timezone and more."
+            hideOnClick={true}
+            position="bottom-end"
+            tiny
+          >
+            Settings
+          </Tooltip>
+        </span>
         {/* { !capturingAll && (
           <Popup
             trigger={
@@ -32,17 +43,17 @@ function SessionsMenu(props) {
                 className="ml-6 cursor-pointer"
                 onClick={ toggleRehydratePanel }
               >
-                <Progress success percent={ props.captureRate.get('rate') } indicating size="tiny" />            
+                <Progress success percent={ props.captureRate.get('rate') } indicating size="tiny" />
               </div>
             }
             content={ `Capturing ${props.captureRate.get('rate')}% of all sessions. Click to manage capture rate. ` }
             size="tiny"
             inverted
             position="top right"
-          />          
+          />
         )}         */}
       </div>
-      
+
       <div>
         <SideMenuitem
           active={activeTab.type === 'all'}
@@ -51,8 +62,8 @@ function SessionsMenu(props) {
           onClick={() => onMenuItemClick({ name: 'All', type: 'all' })}
         />
       </div>
-      
-      { issues_types.filter(item => item.visible).map(item => (        
+
+      { issues_types.filter(item => item.visible).map(item => (
         <SideMenuitem
           key={item.key}
           // disabled={!keyMap[item.type] && !wdTypeCount[item.type]}
@@ -70,8 +81,8 @@ function SessionsMenu(props) {
           active={activeTab.type === 'bookmark'}
           onClick={() => onMenuItemClick({ name: 'Bookmarks', type: 'bookmark' })}
         />
-      </div>      
-      
+      </div>
+
       <div className={cn(stl.divider, 'mb-4')} />
       <SavedSearchList />
     </div>
@@ -85,6 +96,6 @@ export default connect(state => ({
   captureRate: state.getIn(['watchdogs', 'captureRate']),
   filters: state.getIn([ 'filters', 'appliedFilter' ]),
   sessionsLoading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
-}), { 
+}), {
   clearEvents, fetchSessionList
 })(SessionsMenu);

frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx

@@ -4,6 +4,8 @@ import SavedSearch from 'Shared/SavedSearch';
 import { Button, Popup } from 'UI';
 import { clearSearch } from 'Duck/search';
 import { connect } from 'react-redux';
+import stl from './mainSearchBar.css';
+import cn from 'classnames';
 
 interface Props {
     clearSearch: () => void;
@@ -17,23 +19,13 @@ const MainSearchBar = (props: Props) => {
     <div className="flex items-center">
         <div style={{ width: "60%", marginRight: "10px"}}><SessionSearchField /></div>
         <div className="flex items-center" style={{ width: "40%"}}>
-        {optionsReady && <SavedSearch /> }  
-        <Popup
-            trigger={
-                <Button
-                    plain
-                    disabled={!hasFilters}
-                    className="ml-auto"
-                    onClick={() => props.clearSearch()}
-                >
-                    <span className="font-medium">Clear</span>
-                </Button>
-            }
-            content={'Clear Steps'}
-            size="tiny"
-            inverted
-            position="top right"
-        />
+        {optionsReady && <SavedSearch /> }
+            <span
+                className={cn("ml-auto", stl.button, { [stl.disabled]: !hasFilters })}
+                onClick={() => props.clearSearch()}
+            >
+                <span className="font-medium">Clear search</span>
+            </span>
         </div>
     </div>
   )
@@ -41,4 +33,4 @@ const MainSearchBar = (props: Props) => {
 export default connect(state => ({
     appliedFilter: state.getIn(['search', 'instance']),
     optionsReady: state.getIn(['customFields', 'optionsReady'])
-}), { clearSearch })(MainSearchBar);
+}), { clearSearch })(MainSearchBar);

frontend/app/components/shared/MainSearchBar/mainSearchBar.css

@@ -0,0 +1,17 @@
+.button {
+    color: $teal;
+    cursor: pointer;
+    padding: 4px 8px;
+    border: solid thin transparent;
+    border-radius: 3px;
+    margin-bottom: -3px;
+    &:hover {
+      background-color: $gray-light;
+      color: $gray-darkest;
+    }
+  }
+
+.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}

frontend/app/components/shared/SavedSearch/SavedSearch.tsx

@@ -23,8 +23,8 @@ function SavedSearch(props) {
   }, [])
 
   return (
-    <OutsideClickDetectingDiv 
-      // className={ cn("relative", { "flex-1" : fullWidth }) } 
+    <OutsideClickDetectingDiv
+      // className={ cn("relative", { "flex-1" : fullWidth }) }
       onClickOutside={() => setShowMenu(false)}
     >
       <div className="relative">
@@ -33,7 +33,8 @@ function SavedSearch(props) {
             className="flex items-center"
             onClick={() => setShowMenu(true)}
           >
-            <span className="mr-2">{`Saved Search (${list.size})`}</span>
+            <span className="mr-1">Saved Search</span>
+            <span className="font-bold mr-2">{list.size}</span>
             <Icon name="ellipsis-v" color="teal" size="14" />
           </Button>
           { savedSearch.exists() && (
@@ -61,4 +62,4 @@ function SavedSearch(props) {
 export default connect(state => ({
   list: state.getIn([ 'search', 'list' ]),
   savedSearch: state.getIn([ 'search', 'savedSearch' ])
-}), { fetchListSavedSearch })(SavedSearch);
+}), { fetchListSavedSearch })(SavedSearch);

frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx

@@ -3,6 +3,7 @@ import { Toggler, Button } from 'UI';
 import Select from 'Shared/Select';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
+import { toast } from 'react-toastify';
 
 const str = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
 
@@ -49,25 +50,29 @@ function DefaultTimezone(props) {
         if (!timezone) setTimezone('local');
     }, []);
 
+    const onSelectChange = ({ value }) => {
+        setTimezone(value);
+        setChanged(true);
+    }
+    const onTimezoneSave = () => {
+        setChanged(false);
+        sessionSettings.updateKey('timezone', timezone);
+        toast.success("Default timezone saved successfully");
+    }
+
     return (
         <>
             <h3 className="text-lg">Default Timezone</h3>
             <div className="my-1">Session Time</div>
-            <div className="mt-2 flex items-center" style={{ width: "220px"}}>
+            <div className="mt-2 flex items-center" style={{ width: "230px"}}>
                 <Select
                     options={timezoneOptions}
                     defaultValue={timezone}
                     className="w-full"
-                    onChange={({ value }) => {
-                        setTimezone(value);
-                        setChanged(true);
-                    }}
+                    onChange={onSelectChange}
                 />
                 <div className="col-span-3 ml-3">
-                    <Button disabled={!changed} outline size="medium" onClick={() => {
-                        setChanged(false);
-                        sessionSettings.updateKey('timezone', timezone);
-                    }}>Update</Button>
+                    <Button disabled={!changed} outline size="medium" onClick={onTimezoneSave}>Update</Button>
                 </div>
             </div>
             <div className="text-sm mt-3">This change will impact the timestamp on session card and player.</div>