[Feature] Add sort capabilities to ChatFlow and AgentFlow tables (#2609)

Add sort capabilities to ChatFlow and AgentFlow tables

packages/ui/src/ui-component/table/FlowListTable.jsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import moment from 'moment'
@@ -14,6 +15,7 @@ import {
     TableContainer,
     TableHead,
     TableRow,
+    TableSortLabel,
     Tooltip,
     Typography,
     useTheme
@@ -41,10 +43,42 @@ const StyledTableRow = styled(TableRow)(() => ({
     }
 }))
 
+const getLocalStorageKeyName = (name, isAgentCanvas) => {
+    return (isAgentCanvas ? 'agentcanvas' : 'chatflowcanvas') + '_' + name
+}
+
 export const FlowListTable = ({ data, images, isLoading, filterFunction, updateFlowsApi, setError, isAgentCanvas }) => {
     const theme = useTheme()
     const customization = useSelector((state) => state.customization)
 
+    const localStorageKeyOrder = getLocalStorageKeyName('order', isAgentCanvas)
+    const localStorageKeyOrderBy = getLocalStorageKeyName('orderBy', isAgentCanvas)
+
+    const [order, setOrder] = useState(localStorage.getItem(localStorageKeyOrder) || 'desc')
+    const [orderBy, setOrderBy] = useState(localStorage.getItem(localStorageKeyOrderBy) || 'updatedDate')
+
+    const handleRequestSort = (property) => {
+        const isAsc = orderBy === property && order === 'asc'
+        const newOrder = isAsc ? 'desc' : 'asc'
+        setOrder(newOrder)
+        setOrderBy(property)
+        localStorage.setItem(localStorageKeyOrder, newOrder)
+        localStorage.setItem(localStorageKeyOrderBy, property)
+    }
+
+    const sortedData = data
+        ? [...data].sort((a, b) => {
+              if (orderBy === 'name') {
+                  return order === 'asc' ? (a.name || '').localeCompare(b.name || '') : (b.name || '').localeCompare(a.name || '')
+              } else if (orderBy === 'updatedDate') {
+                  return order === 'asc'
+                      ? new Date(a.updatedDate) - new Date(b.updatedDate)
+                      : new Date(b.updatedDate) - new Date(a.updatedDate)
+              }
+              return 0
+          })
+        : []
+
     return (
         <>
             <TableContainer sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2 }} component={Paper}>
@@ -57,7 +91,9 @@ export const FlowListTable = ({ data, images, isLoading, filterFunction, updateF
                     >
                         <TableRow>
                             <StyledTableCell component='th' scope='row' style={{ width: '20%' }} key='0'>
+                                <TableSortLabel active={orderBy === 'name'} direction={order} onClick={() => handleRequestSort('name')}>
                                     Name
+                                </TableSortLabel>
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '25%' }} key='1'>
                                 Category
@@ -66,7 +102,13 @@ export const FlowListTable = ({ data, images, isLoading, filterFunction, updateF
                                 Nodes
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '15%' }} key='3'>
+                                <TableSortLabel
+                                    active={orderBy === 'updatedDate'}
+                                    direction={order}
+                                    onClick={() => handleRequestSort('updatedDate')}
+                                >
                                     Last Modified Date
+                                </TableSortLabel>
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '10%' }} key='4'>
                                 Actions
@@ -113,7 +155,7 @@ export const FlowListTable = ({ data, images, isLoading, filterFunction, updateF
                             </>
                         ) : (
                             <>
-                                {data?.filter(filterFunction).map((row, index) => (
+                                {sortedData.filter(filterFunction).map((row, index) => (
                                     <StyledTableRow key={index}>
                                         <StyledTableCell key='0'>
                                             <Tooltip title={row.templateName || row.name}>