UX Changes: table view has menu options to conduct flow level operations - delete, rename, clone and export

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

@@ -0,0 +1,232 @@
+import * as React from 'react'
+import { styled, alpha } from '@mui/material/styles'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import EditIcon from '@mui/icons-material/Edit'
+import Divider from '@mui/material/Divider'
+import FileCopyIcon from '@mui/icons-material/FileCopy'
+import FileDownloadIcon from '@mui/icons-material/Downloading'
+import FileDeleteIcon from '@mui/icons-material/Delete'
+import Button from '@mui/material/Button'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import PropTypes from 'prop-types'
+import { uiBaseURL } from '../../store/constant'
+import { generateExportFlowData } from '../../utils/genericHelper'
+import chatflowsApi from 'api/chatflows'
+import useConfirm from 'hooks/useConfirm'
+import useNotifier from '../../utils/useNotifier'
+import { closeSnackbar as closeSnackbarAction, enqueueSnackbar as enqueueSnackbarAction } from '../../store/actions'
+import { IconX } from '@tabler/icons'
+import { useDispatch } from 'react-redux'
+import ConfirmDialog from '../dialog/ConfirmDialog'
+import SaveChatflowDialog from '../dialog/SaveChatflowDialog'
+import { useState } from 'react'
+import useApi from '../../hooks/useApi'
+
+const StyledMenu = styled((props) => (
+    <Menu
+        elevation={0}
+        anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+        }}
+        transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right'
+        }}
+        {...props}
+    />
+))(({ theme }) => ({
+    '& .MuiPaper-root': {
+        borderRadius: 6,
+        marginTop: theme.spacing(1),
+        minWidth: 180,
+        color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
+        boxShadow:
+            'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+        '& .MuiMenu-list': {
+            padding: '4px 0'
+        },
+        '& .MuiMenuItem-root': {
+            '& .MuiSvgIcon-root': {
+                fontSize: 18,
+                color: theme.palette.text.secondary,
+                marginRight: theme.spacing(1.5)
+            },
+            '&:active': {
+                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+            }
+        }
+    }
+}))
+
+export default function FlowListMenu({ chatflow, updateFlowsApi }) {
+    const { confirm } = useConfirm()
+    const dispatch = useDispatch()
+    const [flowDialogOpen, setFlowDialogOpen] = useState(false)
+    const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
+    // ==============================|| Snackbar ||============================== //
+
+    useNotifier()
+    const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+    const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+    const [anchorEl, setAnchorEl] = React.useState(null)
+    const open = Boolean(anchorEl)
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget)
+    }
+    const handleClose = () => {
+        setAnchorEl(null)
+    }
+
+    const handleFlowRename = () => {
+        setAnchorEl(null)
+        setFlowDialogOpen(true)
+    }
+
+    const saveFlowRename = async (chatflowName) => {
+        const updateBody = {
+            name: chatflowName,
+            chatflow
+        }
+        try {
+            await updateChatflowApi.request(chatflow.id, updateBody)
+            await updateFlowsApi.request()
+        } catch (error) {
+            const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
+            enqueueSnackbar({
+                message: errorData,
+                options: {
+                    key: new Date().getTime() + Math.random(),
+                    variant: 'error',
+                    persist: true,
+                    action: (key) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+        }
+    }
+
+    const handleDelete = async () => {
+        setAnchorEl(null)
+        const confirmPayload = {
+            title: `Delete`,
+            description: `Delete chatflow ${chatflow.name}?`,
+            confirmButtonName: 'Delete',
+            cancelButtonName: 'Cancel'
+        }
+        const isConfirmed = await confirm(confirmPayload)
+
+        if (isConfirmed) {
+            try {
+                await chatflowsApi.deleteChatflow(chatflow.id)
+                await updateFlowsApi.request()
+            } catch (error) {
+                const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
+                enqueueSnackbar({
+                    message: errorData,
+                    options: {
+                        key: new Date().getTime() + Math.random(),
+                        variant: 'error',
+                        persist: true,
+                        action: (key) => (
+                            <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                                <IconX />
+                            </Button>
+                        )
+                    }
+                })
+            }
+        }
+    }
+
+    const handleDuplicate = () => {
+        setAnchorEl(null)
+        try {
+            localStorage.setItem('duplicatedFlowData', chatflow.flowData)
+            window.open(`${uiBaseURL}/canvas`, '_blank')
+        } catch (e) {
+            console.error(e)
+        }
+    }
+    const handleExport = () => {
+        setAnchorEl(null)
+        try {
+            const flowData = JSON.parse(chatflow.flowData)
+            let dataStr = JSON.stringify(generateExportFlowData(flowData), null, 2)
+            let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
+
+            let exportFileDefaultName = `${chatflow.name} Chatflow.json`
+
+            let linkElement = document.createElement('a')
+            linkElement.setAttribute('href', dataUri)
+            linkElement.setAttribute('download', exportFileDefaultName)
+            linkElement.click()
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    return (
+        <div>
+            <Button
+                id='demo-customized-button'
+                aria-controls={open ? 'demo-customized-menu' : undefined}
+                aria-haspopup='true'
+                aria-expanded={open ? 'true' : undefined}
+                disableElevation
+                onClick={handleClick}
+                endIcon={<KeyboardArrowDownIcon />}
+            >
+                Options
+            </Button>
+            <StyledMenu
+                id='demo-customized-menu'
+                MenuListProps={{
+                    'aria-labelledby': 'demo-customized-button'
+                }}
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+            >
+                <MenuItem onClick={handleFlowRename} disableRipple>
+                    <EditIcon />
+                    Rename
+                </MenuItem>
+                <MenuItem onClick={handleDuplicate} disableRipple>
+                    <FileCopyIcon />
+                    Duplicate
+                </MenuItem>
+                <MenuItem onClick={handleExport} disableRipple>
+                    <FileDownloadIcon />
+                    Export
+                </MenuItem>
+                <Divider sx={{ my: 0.5 }} />
+                <MenuItem onClick={handleDelete} disableRipple>
+                    <FileDeleteIcon />
+                    Delete
+                </MenuItem>
+            </StyledMenu>
+            <ConfirmDialog />
+            <SaveChatflowDialog
+                show={flowDialogOpen}
+                dialogProps={{
+                    title: `Rename Chatflow`,
+                    confirmButtonName: 'Rename',
+                    cancelButtonName: 'Cancel'
+                }}
+                onCancel={() => setFlowDialogOpen(false)}
+                onConfirm={saveFlowRename}
+            />
+        </div>
+    )
+}
+
+FlowListMenu.propTypes = {
+    chatflow: PropTypes.object,
+    updateFlowsApi: PropTypes.object
+}

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

@@ -1,6 +1,5 @@
 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'
@@ -10,7 +9,8 @@ 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'
+import { Button, Stack, Typography } from '@mui/material'
+import FlowListMenu from '../button/FlowListMenu'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
     [`&.${tableCellClasses.head}`]: {
@@ -32,7 +32,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
     }
 }))
 
-export const FlowListTable = ({ data, images, filterFunction }) => {
+export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi }) => {
     const navigate = useNavigate()
     const goToCanvas = (selectedChatflow) => {
         navigate(`/canvas/${selectedChatflow.id}`)
@@ -44,7 +44,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                 <Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
                     <TableHead>
                         <TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
-                            <StyledTableCell component='th' scope='row' style={{ width: '25%' }} key='0'>
+                            <StyledTableCell component='th' scope='row' style={{ width: '20%' }} key='0'>
                                 Name
                             </StyledTableCell>
                             <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '35%' }} key='1'>
@@ -53,7 +53,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                             <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '30%' }} key='2'>
                                 Last Modified Date
                             </StyledTableCell>
-                            <StyledTableCell style={{ width: '10%' }} key='3'>
+                            <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '15%' }} key='3'>
                                 Actions
                             </StyledTableCell>
                         </TableRow>
@@ -65,7 +65,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                     <Typography
                                         sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
                                     >
-                                        {row.templateName || row.name}
+                                        <Button onClick={() => goToCanvas(row)}>{row.templateName || row.name}</Button>
                                     </Typography>
                                 </TableCell>
 
@@ -111,15 +111,13 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                 <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} 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 sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='3'>
+                                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} justifyContent='center' alignItems='center'>
+                                        {/*<Button sx={{ marginRight: '10px' }} onClick={() => goToCanvas(row)}>*/}
+                                        {/*    OPEN*/}
+                                        {/*</Button>*/}
+                                        <FlowListMenu chatflow={row} updateFlowsApi={updateFlowsApi} />
+                                    </Stack>
                                 </TableCell>
                             </StyledTableRow>
                         ))}
@@ -133,5 +131,6 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
 FlowListTable.propTypes = {
     data: PropTypes.object,
     images: PropTypes.array,
-    filterFunction: PropTypes.func
+    filterFunction: PropTypes.func,
+    updateFlowsApi: PropTypes.object
 }

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

@@ -23,10 +23,8 @@ import useApi from 'hooks/useApi'
 import { baseURL } from 'store/constant'
 
 // icons
-import { IconPlus, IconSearch } from '@tabler/icons'
+import { IconPlus, IconSearch, IconLayoutCards, IconLayoutColumns } 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'
@@ -159,10 +157,10 @@ const Chatflows = () => {
                             >
                                 <ToggleButtonGroup value={view} color='primary' exclusive onChange={handleChange}>
                                     <ToggleButton variant='contained' value='card' selectedColor='#00abc0'>
-                                        <ViewModuleIcon />
+                                        <IconLayoutCards />
                                     </ToggleButton>
                                     <ToggleButton variant='contained' value='list'>
-                                        <ViewListIcon />
+                                        <IconLayoutColumns />
                                     </ToggleButton>
                                 </ToggleButtonGroup>
                             </ButtonGroup>
@@ -185,7 +183,13 @@ const Chatflows = () => {
                     </Grid>
                 )}
                 {!isLoading && view === 'list' && getAllChatflowsApi.data && (
-                    <FlowListTable sx={{ mt: 20 }} data={getAllChatflowsApi.data} images={images} filterFunction={filterFlows} />
+                    <FlowListTable
+                        sx={{ mt: 20 }}
+                        data={getAllChatflowsApi.data}
+                        images={images}
+                        filterFunction={filterFlows}
+                        updateFlowsApi={getAllChatflowsApi}
+                    />
                 )}
             </Stack>