mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 19:00:59 +03:00
Merge pull request #1260 from vinodkiran/FEATURE/keys-credentials
UX Changes to the API Keys Screens
This commit is contained in:
Henry Heng
@@ -6,23 +6,25 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Chip,
|
||||
Stack,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
IconButton,
|
||||
Popover,
|
||||
Collapse,
|
||||
Typography,
|
||||
Toolbar,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
ButtonGroup
|
||||
} from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import TableCell, { tableCellClasses } from '@mui/material/TableCell'
|
||||
import { useTheme, styled } from '@mui/material/styles'
|
||||
|
||||
// project imports
|
||||
import MainCard from 'ui-component/cards/MainCard'
|
||||
@@ -41,11 +43,146 @@ import useConfirm from 'hooks/useConfirm'
|
||||
import useNotifier from 'utils/useNotifier'
|
||||
|
||||
// Icons
|
||||
import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff, IconSearch } from '@tabler/icons'
|
||||
import {
|
||||
IconTrash,
|
||||
IconEdit,
|
||||
IconCopy,
|
||||
IconChevronsUp,
|
||||
IconChevronsDown,
|
||||
IconX,
|
||||
IconSearch,
|
||||
IconPlus,
|
||||
IconEye,
|
||||
IconEyeOff
|
||||
} from '@tabler/icons'
|
||||
import APIEmptySVG from 'assets/images/api_empty.svg'
|
||||
import * as PropTypes from 'prop-types'
|
||||
import moment from 'moment/moment'
|
||||
|
||||
// ==============================|| APIKey ||============================== //
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: theme.palette.action.hover
|
||||
}
|
||||
}))
|
||||
|
||||
const StyledTableRow = styled(TableRow)(() => ({
|
||||
// hide last border
|
||||
'&:last-child td, &:last-child th': {
|
||||
border: 0
|
||||
}
|
||||
}))
|
||||
|
||||
function APIKeyRow(props) {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
|
||||
<TableCell scope='row'>{props.apiKey.keyName}</TableCell>
|
||||
<TableCell>
|
||||
{props.showApiKeys.includes(props.apiKey.apiKey)
|
||||
? props.apiKey.apiKey
|
||||
: `${props.apiKey.apiKey.substring(0, 2)}${'•'.repeat(18)}${props.apiKey.apiKey.substring(
|
||||
props.apiKey.apiKey.length - 5
|
||||
)}`}
|
||||
<IconButton title='Copy' color='success' onClick={props.onCopyClick}>
|
||||
<IconCopy />
|
||||
</IconButton>
|
||||
<IconButton title='Show' color='inherit' onClick={props.onShowAPIClick}>
|
||||
{props.showApiKeys.includes(props.apiKey.apiKey) ? <IconEyeOff /> : <IconEye />}
|
||||
</IconButton>
|
||||
<Popover
|
||||
open={props.open}
|
||||
anchorEl={props.anchorEl}
|
||||
onClose={props.onClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left'
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' sx={{ pl: 1, pr: 1, color: 'white', background: props.theme.palette.success.dark }}>
|
||||
Copied!
|
||||
</Typography>
|
||||
</Popover>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{props.apiKey.chatFlows.length}{' '}
|
||||
{props.apiKey.chatFlows.length > 0 && (
|
||||
<IconButton aria-label='expand row' size='small' color='inherit' onClick={() => setOpen(!open)}>
|
||||
{props.apiKey.chatFlows.length > 0 && open ? <IconChevronsUp /> : <IconChevronsDown />}
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{props.apiKey.createdAt}</TableCell>
|
||||
<TableCell>
|
||||
<IconButton title='Edit' color='primary' onClick={props.onEditClick}>
|
||||
<IconEdit />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<IconButton title='Delete' color='error' onClick={props.onDeleteClick}>
|
||||
<IconTrash />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{open && (
|
||||
<TableRow sx={{ '& td': { border: 0 } }}>
|
||||
<TableCell sx={{ pb: 0, pt: 0 }} colSpan={6}>
|
||||
<Collapse in={open} timeout='auto' unmountOnExit>
|
||||
<Box sx={{ mt: 1, mb: 2, borderRadius: '15px', border: '1px solid' }}>
|
||||
<Table aria-label='chatflow table'>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<StyledTableCell sx={{ width: '30%', borderTopLeftRadius: '15px' }}>
|
||||
Chatflow Name
|
||||
</StyledTableCell>
|
||||
<StyledTableCell sx={{ width: '20%' }}>Modified On</StyledTableCell>
|
||||
<StyledTableCell sx={{ width: '50%', borderTopRightRadius: '15px' }}>Category</StyledTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.apiKey.chatFlows.map((flow, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<TableCell>{flow.flowName}</TableCell>
|
||||
<TableCell>{moment(flow.updatedDate).format('DD-MMM-YY')}</TableCell>
|
||||
<TableCell>
|
||||
|
||||
{flow.category &&
|
||||
flow.category
|
||||
.split(';')
|
||||
.map((tag, index) => (
|
||||
<Chip key={index} label={tag} style={{ marginRight: 5, marginBottom: 5 }} />
|
||||
))}
|
||||
</TableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
APIKeyRow.propTypes = {
|
||||
apiKey: PropTypes.any,
|
||||
showApiKeys: PropTypes.arrayOf(PropTypes.any),
|
||||
onCopyClick: PropTypes.func,
|
||||
onShowAPIClick: PropTypes.func,
|
||||
open: PropTypes.bool,
|
||||
anchorEl: PropTypes.any,
|
||||
onClose: PropTypes.func,
|
||||
theme: PropTypes.any,
|
||||
onEditClick: PropTypes.func,
|
||||
onDeleteClick: PropTypes.func
|
||||
}
|
||||
const APIKey = () => {
|
||||
const theme = useTheme()
|
||||
const customization = useSelector((state) => state.customization)
|
||||
@@ -118,7 +255,10 @@ const APIKey = () => {
|
||||
const deleteKey = async (key) => {
|
||||
const confirmPayload = {
|
||||
title: `Delete`,
|
||||
description: `Delete key ${key.keyName}?`,
|
||||
description:
|
||||
key.chatFlows.length === 0
|
||||
? `Delete key [${key.keyName}] ? `
|
||||
: `Delete key [${key.keyName}] ?\n There are ${key.chatFlows.length} chatflows using this key.`,
|
||||
confirmButtonName: 'Delete',
|
||||
cancelButtonName: 'Cancel'
|
||||
}
|
||||
@@ -246,6 +386,7 @@ const APIKey = () => {
|
||||
<TableRow>
|
||||
<TableCell>Key Name</TableCell>
|
||||
<TableCell>API Key</TableCell>
|
||||
<TableCell>Usage</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
<TableCell> </TableCell>
|
||||
<TableCell> </TableCell>
|
||||
@@ -253,65 +394,25 @@ const APIKey = () => {
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{apiKeys.filter(filterKeys).map((key, index) => (
|
||||
<TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
|
||||
<TableCell component='th' scope='row'>
|
||||
{key.keyName}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{showApiKeys.includes(key.apiKey)
|
||||
? key.apiKey
|
||||
: `${key.apiKey.substring(0, 2)}${'•'.repeat(18)}${key.apiKey.substring(
|
||||
key.apiKey.length - 5
|
||||
)}`}
|
||||
<IconButton
|
||||
title='Copy'
|
||||
color='success'
|
||||
onClick={(event) => {
|
||||
navigator.clipboard.writeText(key.apiKey)
|
||||
setAnchorEl(event.currentTarget)
|
||||
setTimeout(() => {
|
||||
handleClosePopOver()
|
||||
}, 1500)
|
||||
}}
|
||||
>
|
||||
<IconCopy />
|
||||
</IconButton>
|
||||
<IconButton title='Show' color='inherit' onClick={() => onShowApiKeyClick(key.apiKey)}>
|
||||
{showApiKeys.includes(key.apiKey) ? <IconEyeOff /> : <IconEye />}
|
||||
</IconButton>
|
||||
<Popover
|
||||
open={openPopOver}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClosePopOver}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant='h6'
|
||||
sx={{ pl: 1, pr: 1, color: 'white', background: theme.palette.success.dark }}
|
||||
>
|
||||
Copied!
|
||||
</Typography>
|
||||
</Popover>
|
||||
</TableCell>
|
||||
<TableCell>{key.createdAt}</TableCell>
|
||||
<TableCell>
|
||||
<IconButton title='Edit' color='primary' onClick={() => edit(key)}>
|
||||
<IconEdit />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<IconButton title='Delete' color='error' onClick={() => deleteKey(key)}>
|
||||
<IconTrash />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<APIKeyRow
|
||||
key={index}
|
||||
apiKey={key}
|
||||
showApiKeys={showApiKeys}
|
||||
onCopyClick={(event) => {
|
||||
navigator.clipboard.writeText(key.apiKey)
|
||||
setAnchorEl(event.currentTarget)
|
||||
setTimeout(() => {
|
||||
handleClosePopOver()
|
||||
}, 1500)
|
||||
}}
|
||||
onShowAPIClick={() => onShowApiKeyClick(key.apiKey)}
|
||||
open={openPopOver}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClosePopOver}
|
||||
theme={theme}
|
||||
onEditClick={() => edit(key)}
|
||||
onDeleteClick={() => deleteKey(key)}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
Reference in New Issue
Block a user