feat ui: change session sort header to ant ui design (#2094)

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button, Dropdown, Space, Typography, Input } from 'antd';
-import { FilePdfOutlined, DownOutlined, TableOutlined } from '@ant-design/icons';
+import { Button, Space, Typography, Select as AntSelect } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
 import { DATE_RANGE_OPTIONS, CUSTOM_RANGE } from 'App/dateRange';
 import Select from 'Shared/Select';
 import Period from 'Types/app/period';
@@ -31,7 +31,9 @@ function SelectDateRange(props: Props) {
 
   const onChange = (value: any) => {
     if (value === CUSTOM_RANGE) {
-      setIsCustom(true);
+      setTimeout(() => {
+        setIsCustom(true);
+      }, 1)
     } else {
       // @ts-ignore
       props.onChange(new Period({ rangeName: value }));
@@ -47,26 +49,19 @@ function SelectDateRange(props: Props) {
 
   const isCustomRange = period.rangeName === CUSTOM_RANGE;
   const customRange = isCustomRange ? period.rangeFormatted() : '';
-
+  
   if (props.isAnt) {
-    const onAntUpdate = ({ key }: { key: string }) => {
-      onChange(key);
+    const onAntUpdate = (val) => {
+      onChange(val);
     };
     return (
       <div className={'relative'}>
-        <Dropdown
-          menu={{
-            items: options.map((o) => ({ key: o.value, label: o.label })),
-            onClick: onAntUpdate,
-          }}
-        >
-          <Button size={'small'}>
-            <Space>
-              <Typography.Text>{selectedValue?.label || 'Select Range'}</Typography.Text>
-              <DownOutlined rev={undefined} />
-            </Space>
-          </Button>
-        </Dropdown>
+        <AntSelect
+          options={options}
+          onChange={onAntUpdate}
+          style={{ width: 170 }}
+          defaultValue={selectedValue?.value ?? undefined}
+        />
         {isCustom && (
           <OutsideClickDetectingDiv
             onClickOutside={(e: any) => {

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

@@ -51,7 +51,7 @@ function SessionHeader(props: Props) {
             <>
               <SessionTags />
               <div className='mr-auto' />
-              <SelectDateRange period={period} onChange={onDateChange} right={true} />
+              <SelectDateRange isAnt period={period} onChange={onDateChange} right={true} />
               <div className='mx-2' />
             </>
           )}

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

@@ -1,42 +1,52 @@
+import { Select } from 'antd';
 import React from 'react';
 import { connect } from 'react-redux';
-import Select from 'Shared/Select';
-import { sort } from 'Duck/sessions';
+
 import { applyFilter } from 'Duck/search';
+import { sort } from 'Duck/sessions';
 
 const sortOptionsMap = {
-    'startTs-desc': 'Newest',
-    'startTs-asc': 'Oldest',
-    'eventsCount-asc': 'Events Ascending',
-    'eventsCount-desc': 'Events Descending',
+  'startTs-desc': 'Newest',
+  'startTs-asc': 'Oldest',
+  'eventsCount-asc': 'Events Ascending',
+  'eventsCount-desc': 'Events Descending',
 };
 
-const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({ value, label }));
+const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({
+  value,
+  label,
+}));
 
 interface Props {
-    filter: any;
-    options?: any;
-    applyFilter: (filter: any) => void;
-    sort: (sort: string, sign: number) => void;
+  filter: any;
+  options?: any;
+  applyFilter: (filter: any) => void;
+  sort: (sort: string, sign: number) => void;
 }
 
 function SessionSort(props: Props) {
-    const { sort, order } = props.filter;
-    const onSort = ({ value }: any) => {
-        value = value.value;
-        const [sort, order] = value.split('-');
-        const sign = order === 'desc' ? -1 : 1;
-        props.applyFilter({ order, sort });
-        props.sort(sort, sign);
-    };
+  const { sort, order } = props.filter;
+  const onSort = (value: string) => {
+    const [sort, order] = value.split('-');
+    const sign = order === 'desc' ? -1 : 1;
+    props.applyFilter({ order, sort });
+    props.sort(sort, sign);
+  };
 
-    const defaultOption = `${sort}-${order}`;
-    return <Select name="sortSessions" plain right options={sortOptions} onChange={onSort} defaultValue={defaultOption} />;
+  const defaultOption = `${sort}-${order}`;
+  return (
+    <Select
+      style={{ width: 160 }}
+      options={sortOptions}
+      onChange={onSort}
+      defaultValue={defaultOption}
+    />
+  );
 }
 
 export default connect(
-    (state: any) => ({
-        filter: state.getIn(['search', 'instance']),
-    }),
-    { sort, applyFilter }
+  (state: any) => ({
+    filter: state.getIn(['search', 'instance']),
+  }),
+  { sort, applyFilter }
 )(SessionSort);

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

@@ -5,6 +5,7 @@ import { setActiveTab } from 'Duck/search';
 import { issues_types, types } from 'Types/session/issue';
 import { Icon } from 'UI';
 import cn from 'classnames';
+import { Segmented } from 'antd'
 
 interface Tag {
   name: string;
@@ -27,18 +28,26 @@ type Props = StateProps & DispatchProps;
 const SessionTags: React.FC<Props> = memo(({ activeTab, tags, total, setActiveTab }) => {
   const disable = activeTab.type === 'all' && total === 0;
 
+  const options = tags.map((tag, i) => ({
+    label: <div className={'flex items-center gap-2'}>
+      {tag.icon ? <Icon
+        name={tag.icon}
+        color={activeTab.type === tag.type ? "teal" : "gray-medium"}
+        size="14"
+        className={cn("group-hover:fill-teal mr-2")}
+      /> : null}
+      <div>{tag.name}</div>
+    </div>,
+    value: tag.type,
+    disabled: disable && tag.type !== 'all',
+  }))
   return (
     <div className='flex items-center'>
-      {tags.map((tag, index) => (
-        <TagItem
-          key={index} // Consider using a unique identifier instead of index if available.
-          onClick={() => setActiveTab(tag)}
-          label={tag.name}
-          isActive={activeTab.type === tag.type}
-          icon={tag.icon}
-          disabled={disable && tag.type !== 'all'}
-        />
-      ))}
+      <Segmented
+        options={options}
+        value={activeTab.type}
+        onChange={setActiveTab}
+      />
     </div>
   );
 });

frontend/app/components/ui/CountryFlag/CountryFlag.tsx

@@ -23,7 +23,7 @@ const CountryFlag: FC<CountryFlagProps> = ({
                                              country = '',
                                              className = '',
                                              style = {},
-                                             width = 22,
+                                             width = 18,
                                              height = 15,
                                              showLabel = false
                                            }) => {