UX Changes: Ability to view as table and search on the dashboard

packages/ui/src/ui-component/button/StyledButton.js

@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles'
 import { Button } from '@mui/material'
+import MuiToggleButton from '@mui/material/ToggleButton'
 
 export const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
     color: 'white',
@@ -9,3 +10,10 @@ export const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
         backgroundImage: `linear-gradient(rgb(0 0 0/10%) 0 0)`
     }
 }))
+
+export const StyledToggleButton = styled(MuiToggleButton)(({ theme, color = 'primary' }) => ({
+    '&.Mui-selected, &.Mui-selected:hover': {
+        color: 'white',
+        backgroundColor: theme.palette[color].main
+    }
+}))

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

@@ -0,0 +1,133 @@
+import PropTypes from 'prop-types'
+import { useNavigate } from 'react-router-dom'
+import { IconEdit } from '@tabler/icons'
+import moment from 'moment'
+import { styled } from '@mui/material/styles'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell, { tableCellClasses } from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import { Button, Typography } from '@mui/material'
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14
+    }
+}))
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    '&:nth-of-type(odd)': {
+        backgroundColor: theme.palette.action.hover
+    },
+    // hide last border
+    '&:last-child td, &:last-child th': {
+        border: 0
+    }
+}))
+
+export const FlowListTable = ({ data, images, filterFunction }) => {
+    const navigate = useNavigate()
+    const goToCanvas = (selectedChatflow) => {
+        navigate(`/canvas/${selectedChatflow.id}`)
+    }
+    return (
+        <>
+            <TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
+                <Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
+                    <TableHead>
+                        <TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
+                            <StyledTableCell
+                                component='th'
+                                scope='row'
+                                sx={{ fontSize: '1.1rem', fontWeight: 200 }}
+                                style={{ width: '25%' }}
+                                key='0'
+                            >
+                                Name
+                            </StyledTableCell>
+                            <StyledTableCell style={{ width: '35%' }} key='1'>
+                                Nodes
+                            </StyledTableCell>
+                            <StyledTableCell style={{ width: '30%' }} key='2'>
+                                Last Modified Date
+                            </StyledTableCell>
+                            <StyledTableCell style={{ width: '10%' }} key='3'>
+                                Actions
+                            </StyledTableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {data.filter(filterFunction).map((row, index) => (
+                            <StyledTableRow key={index}>
+                                <TableCell key='0'>
+                                    <Typography
+                                        sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
+                                    >
+                                        {row.templateName || row.name}
+                                    </Typography>
+                                </TableCell>
+
+                                <TableCell key='1'>
+                                    {images[row.id] && (
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                flexWrap: 'wrap',
+                                                marginTop: 5
+                                            }}
+                                        >
+                                            {images[row.id].map((img) => (
+                                                <div
+                                                    key={img}
+                                                    style={{
+                                                        width: 35,
+                                                        height: 35,
+                                                        marginRight: 5,
+                                                        borderRadius: '50%',
+                                                        backgroundColor: 'white',
+                                                        marginTop: 5
+                                                    }}
+                                                >
+                                                    <img
+                                                        style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
+                                                        alt=''
+                                                        src={img}
+                                                    />
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </TableCell>
+                                <TableCell key='2'>{moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}</TableCell>
+                                <TableCell key='3'>
+                                    <Button
+                                        variant='outlined'
+                                        sx={{ marginRight: '10px' }}
+                                        onClick={() => goToCanvas(row)}
+                                        startIcon={<IconEdit />}
+                                    >
+                                        Open
+                                    </Button>
+                                </TableCell>
+                            </StyledTableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </>
+    )
+}
+
+FlowListTable.propTypes = {
+    data: PropTypes.object,
+    images: PropTypes.array,
+    filterFunction: PropTypes.func
+}

packages/ui/src/ui-component/toolbar/Toolbar.js

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import ViewListIcon from '@mui/icons-material/ViewList'
+import ViewModuleIcon from '@mui/icons-material/ViewModule'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import { StyledToggleButton } from '../button/StyledButton'
+
+export default function Toolbar() {
+    const [view, setView] = React.useState('list')
+
+    const handleChange = (event, nextView) => {
+        setView(nextView)
+    }
+
+    return (
+        <ToggleButtonGroup value={view} exclusive onChange={handleChange}>
+            <StyledToggleButton variant='contained' value='list' aria-label='list'>
+                <ViewListIcon />
+            </StyledToggleButton>
+            <StyledToggleButton variant='contained' value='module' aria-label='module'>
+                <ViewModuleIcon />
+            </StyledToggleButton>
+        </ToggleButtonGroup>
+    )
+}

packages/ui/src/views/chatflows/index.js

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
 // material-ui
-import { Grid, Box, Stack } from '@mui/material'
+import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, Typography, InputAdornment, TextField } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 
 // project imports
@@ -11,7 +11,6 @@ import MainCard from 'ui-component/cards/MainCard'
 import ItemCard from 'ui-component/cards/ItemCard'
 import { gridSpacing } from 'store/constant'
 import WorkflowEmptySVG from 'assets/images/workflow_empty.svg'
-import { StyledButton } from 'ui-component/button/StyledButton'
 import LoginDialog from 'ui-component/dialog/LoginDialog'
 
 // API
@@ -24,7 +23,13 @@ import useApi from 'hooks/useApi'
 import { baseURL } from 'store/constant'
 
 // icons
-import { IconPlus } from '@tabler/icons'
+import { IconPlus, IconSearch } from '@tabler/icons'
+import * as React from 'react'
+import ViewListIcon from '@mui/icons-material/ViewList'
+import ViewModuleIcon from '@mui/icons-material/ViewModule'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import { FlowListTable } from '../../ui-component/table/FlowListTable'
+import { StyledButton } from '../../ui-component/button/StyledButton'
 
 // ==============================|| CHATFLOWS ||============================== //
 
@@ -35,10 +40,24 @@ const Chatflows = () => {
 
     const [isLoading, setLoading] = useState(true)
     const [images, setImages] = useState({})
+    const [search, setSearch] = useState('')
     const [loginDialogOpen, setLoginDialogOpen] = useState(false)
     const [loginDialogProps, setLoginDialogProps] = useState({})
 
     const getAllChatflowsApi = useApi(chatflowsApi.getAllChatflows)
+    const [view, setView] = React.useState('card')
+
+    const handleChange = (event, nextView) => {
+        setView(nextView)
+    }
+
+    const onSearchChange = (event) => {
+        setSearch(event.target.value)
+    }
+
+    function filterFlows(data) {
+        return data.name.toLowerCase().indexOf(search.toLowerCase()) > -1
+    }
 
     const onLoginClick = (username, password) => {
         localStorage.setItem('username', username)
@@ -102,26 +121,61 @@ const Chatflows = () => {
 
     return (
         <MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
-            <Stack flexDirection='row'>
-                <h1>Chatflows</h1>
-                <Grid sx={{ mb: 1.25 }} container direction='row'>
-                    <Box sx={{ flexGrow: 1 }} />
-                    <Grid item>
-                        <StyledButton variant='contained' sx={{ color: 'white' }} onClick={addNew} startIcon={<IconPlus />}>
-                            Add New
-                        </StyledButton>
+            <Stack flexDirection='column'>
+                <Box sx={{ flexGrow: 1 }}>
+                    <Toolbar style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+                        <Typography edge='start' variant='h1' component='div' sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
+                            Chatflows
+                        </Typography>
+                        <Box sx={{ flexGrow: 1 }} />
+                        <TextField
+                            size='small'
+                            sx={{ width: 400 }}
+                            variant='outlined'
+                            onChange={onSearchChange}
+                            InputProps={{
+                                startAdornment: (
+                                    <InputAdornment position='start'>
+                                        <IconSearch />
+                                    </InputAdornment>
+                                )
+                            }}
+                        />
+                        <Box sx={{ flexGrow: 1 }} />
+                        <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
+                            <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
+                                <ToggleButtonGroup value={view} color='primary' exclusive onChange={handleChange}>
+                                    <ToggleButton variant='contained' value='card' selectedColor='#00abc0'>
+                                        <ViewModuleIcon />
+                                    </ToggleButton>
+                                    <ToggleButton variant='contained' value='list'>
+                                        <ViewListIcon />
+                                    </ToggleButton>
+                                </ToggleButtonGroup>
+                            </ButtonGroup>
+                            <Box sx={{ width: 5 }} />
+                            <ButtonGroup disableElevation aria-label='outlined primary button group'>
+                                <StyledButton variant='contained' onClick={addNew} startIcon={<IconPlus />}>
+                                    Add New
+                                </StyledButton>
+                            </ButtonGroup>
+                        </ButtonGroup>
+                    </Toolbar>
+                </Box>
+                {!isLoading && (!view || view === 'card') && getAllChatflowsApi.data && (
+                    <Grid container spacing={gridSpacing}>
+                        {getAllChatflowsApi.data.filter(filterFlows).map((data, index) => (
+                            <Grid key={index} item lg={3} md={4} sm={6} xs={12}>
+                                <ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
+                            </Grid>
+                        ))}
                     </Grid>
-                </Grid>
+                )}
+                {!isLoading && view === 'list' && getAllChatflowsApi.data && (
+                    <FlowListTable sx={{ mt: 20 }} data={getAllChatflowsApi.data} images={images} filterFunction={filterFlows} />
+                )}
             </Stack>
-            <Grid container spacing={gridSpacing}>
-                {!isLoading &&
-                    getAllChatflowsApi.data &&
-                    getAllChatflowsApi.data.map((data, index) => (
-                        <Grid key={index} item lg={3} md={4} sm={6} xs={12}>
-                            <ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
-                        </Grid>
-                    ))}
-            </Grid>
+
             {!isLoading && (!getAllChatflowsApi.data || getAllChatflowsApi.data.length === 0) && (
                 <Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
                     <Box sx={{ p: 2, height: 'auto' }}>