fix(ui) - dropdown search and other fixes

frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx

@@ -21,7 +21,8 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
   const [insightsFilters, setInsightsFilters] = useState(filters)
   
   const onDateChange = (e) => {
-    setInsightsFilters({ ...insightsFilters, startDate: e.startDate, endDate: e.endDate })
+    const { startDate, endDate, rangeValue } = e;
+    setInsightsFilters({ ...insightsFilters, startDate, endDate, rangeValue })
   }
 
   useEffect(() => {     
@@ -47,16 +48,17 @@ function PageInsightsPanel({ filters, fetchInsights, events = [], insights, urlO
     <div className="px-4 bg-gray-lightest">
       <div className="my-3 flex -ml-2">
         <DateRange
-          // rangeValue={filters.rangeValue}
-          startDate={filters.startDate}
-          endDate={filters.endDate}
+          rangeValue={insightsFilters.rangeValue}
+          startDate={insightsFilters.startDate}
+          endDate={insightsFilters.endDate}
           onDateChange={onDateChange}
-          customRangeRight
+          customHidden
         />
       </div>
       <div className="mb-4 flex items-center">
         <div className="mr-2 flex-shrink-0">In Page</div>
         <Dropdown
+          search
           labeled
           placeholder="change"
           selection

frontend/app/components/shared/DateRange.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import DateRangeDropdown from 'Shared/DateRangeDropdown';
 
 function DateRange (props) {
-  const { startDate, endDate, rangeValue, className, onDateChange, customRangeRight=false } = props;
+  const { startDate, endDate, rangeValue, className, onDateChange, customRangeRight=false, customHidden = false } = props;
   
   return (
     <DateRangeDropdown
@@ -13,6 +13,7 @@ function DateRange (props) {
       endDate={ endDate }
       className={ className }
       customRangeRight={customRangeRight}
+      customHidden={customHidden}
     />
   );  
 }