fix(ui) - sort state and other fixes

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -8,7 +8,7 @@ import withPermissions from 'HOCs/withPermissions'
 import { KEYS } from 'Types/filter/customFilter';
 import { applyFilter, addAttribute } from 'Duck/filters';
 import { FilterCategory, FilterKey } from 'App/types/filter/filterType';
-import { addFilterByKeyAndValue, updateCurrentPage, toggleSortOrder } from 'Duck/liveSearch';
+import { addFilterByKeyAndValue, updateCurrentPage, updateSort } from 'Duck/liveSearch';
 import DropdownPlain from 'Shared/DropdownPlain';
 import SortOrderButton from 'Shared/SortOrderButton';
 import { TimezoneDropdown } from 'UI';
@@ -28,12 +28,12 @@ interface Props {
   updateCurrentPage: (page: number) => void,
   currentPage: number, 
   metaList: any,
-  sortOrder: string,
-  toggleSortOrder: (sortOrder: string) => void,
+  updateSort: (sort: any) => void,
+  sort: any,
 }
 
 function LiveSessionList(props: Props) {
-  const { loading, filters, list, currentPage, metaList = [], sortOrder } = props;
+  const { loading, filters, list, currentPage, metaList = [], sort } = props;
   var timeoutId;
   const hasUserFilter = filters.map(i => i.key).includes(KEYS.USERID);
   const [sessions, setSessions] = React.useState(list);
@@ -41,7 +41,6 @@ function LiveSessionList(props: Props) {
     text: capitalize(i), value: i
   })).toJS();
   
-  const [sortBy, setSortBy] = React.useState('');
   const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
 
   const addPage = () => props.updateCurrentPage(props.currentPage + 1)
@@ -53,9 +52,11 @@ function LiveSessionList(props: Props) {
   }, []);
 
   useEffect(() => {
-    if (metaList.size === 0 || !!sortBy) return;
+    if (metaList.size === 0 || !!sort.field) return;
 
-    setSortBy(sortOptions[0] && sortOptions[0].value)
+    if ( sortOptions[0]) {
+      props.updateSort({ field: sortOptions[0].value });
+    }
   }, [metaList]);
 
   useEffect(() => {
@@ -96,7 +97,7 @@ function LiveSessionList(props: Props) {
   }
 
   const onSortChange = (e, { value }) => {
-    setSortBy(value);
+    props.updateSort({ field: value });
   }
 
   const timeout = () => {
@@ -106,6 +107,8 @@ function LiveSessionList(props: Props) {
     }, AUTOREFRESH_INTERVAL);
   }
 
+  console.log('srt', sort)
+
   return (
     <div>
       <div className="flex mb-6 justify-between items-end">
@@ -125,10 +128,10 @@ function LiveSessionList(props: Props) {
             <DropdownPlain
               options={sortOptions}
               onChange={onSortChange}
-              value={sortBy}
+              value={sort.field}
             />
           </div>
-          <SortOrderButton onChange={props.toggleSortOrder} sortOrder={sortOrder} />
+          <SortOrderButton onChange={(state) => props.updateSort({ order: state })} sortOrder={sort.order} />
         </div>
       </div>
       <NoContent
@@ -143,8 +146,8 @@ function LiveSessionList(props: Props) {
         show={ !loading && sessions && sessions.size === 0}
       >
         <Loader loading={ loading }>
-          {sessions && sessions.sortBy(i => i.metadata[sortBy]).update(list => {
-            return sortOrder === 'desc' ? list.reverse() : list;
+          {sessions && sessions.sortBy(i => i.metadata[sort.field]).update(list => {
+            return sort.order === 'desc' ? list.reverse() : list;
           }).take(displayedCount).map(session => (
             <SessionItem
               key={ session.sessionId }
@@ -175,7 +178,7 @@ export default withPermissions(['ASSIST_LIVE'])(connect(
     filters: state.getIn([ 'liveSearch', 'instance', 'filters' ]),
     currentPage: state.getIn(["liveSearch", "currentPage"]),
     metaList: state.getIn(['customFields', 'list']).map(i => i.key),
-    sortOrder: state.getIn(['liveSearch', 'sortOrder']),
+    sort: state.getIn(['liveSearch', 'sort']),
   }),
   { 
     fetchLiveList,
@@ -183,6 +186,6 @@ export default withPermissions(['ASSIST_LIVE'])(connect(
     addAttribute,
     addFilterByKeyAndValue,
     updateCurrentPage,
-    toggleSortOrder,
+    updateSort,
   }
 )(LiveSessionList));

frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx

@@ -17,16 +17,16 @@ export default function MetaMoreButton(props: Props) {
                 </span>
                 </div>
             ) }
+            className="p-0"
             content={ 
-                <div className="flex flex-col">
+                <div className="text-sm grid grid-col p-4 gap-3" style={{ maxHeight: '200px', overflowY: 'auto'}}>
                     {list.slice(maxLength).map(({ label, value }, index) => (
-                        <MetaItem key={index} label={label} value={value} className="mb-3" />
+                        <MetaItem key={index} label={label} value={value} />
                     ))}
                 </div>
             }
             on="click"
             position="center center"
-            hideOnScroll
         />
     )
 }

frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx

@@ -8,7 +8,7 @@ interface Props {
   className?: string,
   metaList: []
 }
-const MAX_LENGTH = 3;
+const MAX_LENGTH = 1;
 export default function SessionMetaList(props: Props) {
   const { className = '', metaList } = props
   return (

frontend/app/duck/liveSearch.js

@@ -15,14 +15,17 @@ const EDIT = editType(name);
 const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
 const APPLY = `${name}/APPLY`;
 const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`;
-const TOGGLE_SORT_ORDER = `${name}/TOGGLE_SORT_ORDER`;
+const UPDATE_SORT = `${name}/UPDATE_SORT`;
 
 const initialState = Map({
 	list: List(),
 	instance: new Filter({ filters: [] }),
   filterSearchList: {},
   currentPage: 1,
-  sortOrder: 'asc',
+  sort: {
+    order: 'asc',
+    field: ''
+  }
 });
 
 function reducer(state = initialState, action = {}) {
@@ -31,8 +34,8 @@ function reducer(state = initialState, action = {}) {
       return state.mergeIn(['instance'], action.instance);
     case UPDATE_CURRENT_PAGE:
       return state.set('currentPage', action.page);
-    case TOGGLE_SORT_ORDER:
-      return state.set('sortOrder', action.order);
+    case UPDATE_SORT:
+      return state.mergeIn(['sort'], action.sort);
 	}
 	return state;
 }
@@ -103,9 +106,9 @@ export function updateCurrentPage(page) {
   };
 }
 
-export function toggleSortOrder (order) {
+export function updateSort(sort) {
   return {
-    type: TOGGLE_SORT_ORDER,
-    order,
+    type: UPDATE_SORT,
+    sort,
   };
 }