change(ui): select date range highlight selected option and use antd

frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx

@@ -1,16 +1,14 @@
+import React from 'react';
 import { DownOutlined } from '@ant-design/icons';
 import Period from 'Types/app/period';
-import { Dropdown, Button } from 'antd';
+import { Dropdown, Button, Menu, Space, MenuProps } from 'antd';
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { components } from 'react-select';
 
 import { CUSTOM_RANGE, DATE_RANGE_OPTIONS } from 'App/dateRange';
 
 import DateRangePopup from 'Shared/DateRangeDropdown/DateRangePopup';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
-import Select from 'Shared/Select';
 
 interface Props {
   period: any;
@@ -25,7 +23,7 @@ interface Props {
   [x: string]: any;
 }
 
-function SelectDateRange(props: Props) {
+const SelectDateRange: React.FC<Props> = (props: Props) => {
   const [isCustom, setIsCustom] = React.useState(false);
   const { right = false, period, disableCustom = false, timezone, useButtonStyle = false } = props;
   let selectedValue = DATE_RANGE_OPTIONS.find(
@@ -35,21 +33,21 @@ function SelectDateRange(props: Props) {
     disableCustom ? obj.value !== CUSTOM_RANGE : true
   );
 
-  const onChange = (value: any) => {
-    if (value === CUSTOM_RANGE) {
+  const onChange = (e: any) => {
+    if (e.key === CUSTOM_RANGE) {
       setTimeout(() => {
         setIsCustom(true);
       }, 1);
     } else {
-      props.onChange(new Period({ rangeName: value }));
+      props.onChange(Period({ rangeName: e.key }));
     }
   };
 
   const onApplyDateRange = (value: any) => {
-    const range = new Period({
+    const range = Period({
       rangeName: CUSTOM_RANGE,
       start: value.start,
-      end: value.end,
+      end: value.end
     });
     props.onChange(range);
     setIsCustom(false);
@@ -58,91 +56,27 @@ function SelectDateRange(props: Props) {
   const isCustomRange = period.rangeName === CUSTOM_RANGE;
   const customRange = isCustomRange ? period.rangeFormatted() : '';
 
-  if (props.isAnt) {
-    const menuProps = {
-      items: options.map((opt) => ({
-        label: opt.label,
-        key: opt.value,
-      })),
-      defaultSelectedKeys: selectedValue?.value ? [selectedValue.value] : undefined,
-      onClick: (e: any) => {
-        onChange(e.key);
-      },
-    };
-
-    return (
-      <div className={'relative'}>
-        <Dropdown menu={menuProps} >
-          {useButtonStyle ? (
-            <Button type='text'>
-              <span>{isCustomRange ? customRange : selectedValue?.label}</span>
-              <DownOutlined />
-            </Button>
-          ) : (
-            <div className={'cursor-pointer flex items-center gap-2'}>
-              <span>{isCustomRange ? customRange : selectedValue?.label}</span>
-              <DownOutlined />
-            </div>
-          )}
-        </Dropdown>
-        {isCustom && (
-          <OutsideClickDetectingDiv
-            onClickOutside={(e: any) => {
-              if (
-                e.target.parentElement.parentElement.classList.contains(
-                  'rc-time-picker-panel-select'
-                ) ||
-                e.target.parentElement.parentElement.classList[0]?.includes(
-                  '-menu'
-                ) ||
-                e.target.className.includes('ant-picker')
-              ) {
-                return false;
-              }
-              setIsCustom(false);
-            }}
-          >
-            <div
-              className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
-              style={{
-                width: '770px',
-                fontSize: '14px',
-                textAlign: 'left',
-              }}
-            >
-              <DateRangePopup
-                timezone={timezone}
-                onApply={onApplyDateRange}
-                onCancel={() => setIsCustom(false)}
-                selectedDateRange={period.range}
-              />
-            </div>
-          </OutsideClickDetectingDiv>
-        )}
-      </div>
-    );
-  }
+  const menuItems: MenuProps['items'] = options.map((opt) => ({
+    key: opt.value,
+    label: opt.label,
+    className: opt.value === selectedValue?.value ? 'ant-select-item-option-selected' : '',
+  }));
 
   return (
-    <div className="relative">
-      <Select
-        plain
-        value={selectedValue}
-        options={options}
-        onChange={({ value }: any) => onChange(value.value)}
-        components={{
-          SingleValue: ({ children, ...props }: any) => {
-            return (
-              <components.SingleValue {...props}>
-                {isCustomRange ? customRange : children}
-              </components.SingleValue>
-            );
-          },
-        }}
-        period={period}
-        right={true}
-        style={{ width: '100%' }}
-      />
+    <div className={'relative'}>
+      <Dropdown menu={{ items: menuItems, onClick: onChange, selectedKeys: [selectedValue?.value!] }} trigger={['click']}>
+        {useButtonStyle ? (
+          <Button type="text">
+            <span>{isCustomRange ? customRange : selectedValue?.label}</span>
+            <DownOutlined />
+          </Button>
+        ) : (
+          <div className={'cursor-pointer flex items-center gap-2'}>
+            <span>{isCustomRange ? customRange : selectedValue?.label}</span>
+            <DownOutlined />
+          </div>
+        )}
+      </Dropdown>
       {isCustom && (
         <OutsideClickDetectingDiv
           onClickOutside={(e: any) => {
@@ -152,7 +86,8 @@ function SelectDateRange(props: Props) {
               ) ||
               e.target.parentElement.parentElement.classList[0]?.includes(
                 '-menu'
-              )
+              ) ||
+              e.target.className.includes('ant-picker')
             ) {
               return false;
             }
@@ -164,7 +99,7 @@ function SelectDateRange(props: Props) {
             style={{
               width: '770px',
               fontSize: '14px',
-              textAlign: 'left',
+              textAlign: 'left'
             }}
           >
             <DateRangePopup
@@ -178,6 +113,6 @@ function SelectDateRange(props: Props) {
       )}
     </div>
   );
-}
+};
 
 export default observer(SelectDateRange);

frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx

@@ -7,6 +7,7 @@ import NoteTags from '../Notes/NoteTags';
 import { connect } from 'react-redux';
 import SessionSort from '../SessionSort';
 import { setActiveTab } from 'Duck/search';
+import { Space } from 'antd';
 
 interface Props {
   listCount: number;
@@ -51,11 +52,12 @@ function SessionHeader(props: Props) {
             <>
               <SessionTags />
               <div className='mr-auto' />
-              <SelectDateRange isAnt period={period} onChange={onDateChange} right={true} />
-              <div className='mx-2' />
+              <Space>
+                <SelectDateRange isAnt period={period} onChange={onDateChange} right={true} />
+                <SessionSort />
+              </Space>
             </>
           )}
-          <SessionSort />
         </div>
       ) : null}
 

frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx

@@ -21,7 +21,7 @@ function SessionDateRange(props: Props) {
   return (
     <div className="flex items-center">
       <span className="mr-1">No sessions {isCustom ? 'between' : 'in the'}</span>
-      <div className="rounded-lg border"><SelectDateRange period={period} onChange={onDateChange} right={true} /></div>
+      <SelectDateRange period={period} onChange={onDateChange} right={true}  useButtonStyle={true}/>
     </div>
   );
 }
@@ -31,4 +31,4 @@ export default connect(
     filter: state.getIn(['search', 'instance']),
   }),
   { applyFilter }
-)(SessionDateRange);
+)(SessionDateRange);