Merge pull request #1260 from vinodkiran/FEATURE/keys-credentials
UX Changes to the API Keys Screens
This commit is contained in:
Henry Heng
GitHub
commit
0b93b337fd
|
|
@ -1148,28 +1148,52 @@ export class App {
|
||||||
// API Keys
|
// API Keys
|
||||||
// ----------------------------------------
|
// ----------------------------------------
|
||||||
|
|
||||||
|
const addChatflowsCount = async (keys: any, res: Response) => {
|
||||||
|
if (keys) {
|
||||||
|
const updatedKeys: any[] = []
|
||||||
|
//iterate through keys and get chatflows
|
||||||
|
for (const key of keys) {
|
||||||
|
const chatflows = await this.AppDataSource.getRepository(ChatFlow)
|
||||||
|
.createQueryBuilder('cf')
|
||||||
|
.where('cf.apikeyid = :apikeyid', { apikeyid: key.id })
|
||||||
|
.getMany()
|
||||||
|
const linkedChatFlows: any[] = []
|
||||||
|
chatflows.map((cf) => {
|
||||||
|
linkedChatFlows.push({
|
||||||
|
flowName: cf.name,
|
||||||
|
category: cf.category,
|
||||||
|
updatedDate: cf.updatedDate
|
||||||
|
})
|
||||||
|
})
|
||||||
|
key.chatFlows = linkedChatFlows
|
||||||
|
updatedKeys.push(key)
|
||||||
|
}
|
||||||
|
return res.json(updatedKeys)
|
||||||
|
}
|
||||||
|
return res.json(keys)
|
||||||
|
}
|
||||||
// Get api keys
|
// Get api keys
|
||||||
this.app.get('/api/v1/apikey', async (req: Request, res: Response) => {
|
this.app.get('/api/v1/apikey', async (req: Request, res: Response) => {
|
||||||
const keys = await getAPIKeys()
|
const keys = await getAPIKeys()
|
||||||
return res.json(keys)
|
return addChatflowsCount(keys, res)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Add new api key
|
// Add new api key
|
||||||
this.app.post('/api/v1/apikey', async (req: Request, res: Response) => {
|
this.app.post('/api/v1/apikey', async (req: Request, res: Response) => {
|
||||||
const keys = await addAPIKey(req.body.keyName)
|
const keys = await addAPIKey(req.body.keyName)
|
||||||
return res.json(keys)
|
return addChatflowsCount(keys, res)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Update api key
|
// Update api key
|
||||||
this.app.put('/api/v1/apikey/:id', async (req: Request, res: Response) => {
|
this.app.put('/api/v1/apikey/:id', async (req: Request, res: Response) => {
|
||||||
const keys = await updateAPIKey(req.params.id, req.body.keyName)
|
const keys = await updateAPIKey(req.params.id, req.body.keyName)
|
||||||
return res.json(keys)
|
return addChatflowsCount(keys, res)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Delete new api key
|
// Delete new api key
|
||||||
this.app.delete('/api/v1/apikey/:id', async (req: Request, res: Response) => {
|
this.app.delete('/api/v1/apikey/:id', async (req: Request, res: Response) => {
|
||||||
const keys = await deleteAPIKey(req.params.id)
|
const keys = await deleteAPIKey(req.params.id)
|
||||||
return res.json(keys)
|
return addChatflowsCount(keys, res)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Verify api key
|
// Verify api key
|
||||||
|
|
|
||||||
|
|
@ -6,23 +6,25 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Box,
|
Box,
|
||||||
|
Chip,
|
||||||
Stack,
|
Stack,
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCell,
|
|
||||||
TableContainer,
|
TableContainer,
|
||||||
TableHead,
|
TableHead,
|
||||||
TableRow,
|
TableRow,
|
||||||
Paper,
|
Paper,
|
||||||
IconButton,
|
IconButton,
|
||||||
Popover,
|
Popover,
|
||||||
|
Collapse,
|
||||||
Typography,
|
Typography,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
TextField,
|
TextField,
|
||||||
InputAdornment,
|
InputAdornment,
|
||||||
ButtonGroup
|
ButtonGroup
|
||||||
} from '@mui/material'
|
} 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
|
// project imports
|
||||||
import MainCard from 'ui-component/cards/MainCard'
|
import MainCard from 'ui-component/cards/MainCard'
|
||||||
|
|
@ -41,11 +43,146 @@ import useConfirm from 'hooks/useConfirm'
|
||||||
import useNotifier from 'utils/useNotifier'
|
import useNotifier from 'utils/useNotifier'
|
||||||
|
|
||||||
// Icons
|
// 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 APIEmptySVG from 'assets/images/api_empty.svg'
|
||||||
|
import * as PropTypes from 'prop-types'
|
||||||
|
import moment from 'moment/moment'
|
||||||
|
|
||||||
// ==============================|| APIKey ||============================== //
|
// ==============================|| 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 APIKey = () => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const customization = useSelector((state) => state.customization)
|
const customization = useSelector((state) => state.customization)
|
||||||
|
|
@ -118,7 +255,10 @@ const APIKey = () => {
|
||||||
const deleteKey = async (key) => {
|
const deleteKey = async (key) => {
|
||||||
const confirmPayload = {
|
const confirmPayload = {
|
||||||
title: `Delete`,
|
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',
|
confirmButtonName: 'Delete',
|
||||||
cancelButtonName: 'Cancel'
|
cancelButtonName: 'Cancel'
|
||||||
}
|
}
|
||||||
|
|
@ -246,6 +386,7 @@ const APIKey = () => {
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell>Key Name</TableCell>
|
<TableCell>Key Name</TableCell>
|
||||||
<TableCell>API Key</TableCell>
|
<TableCell>API Key</TableCell>
|
||||||
|
<TableCell>Usage</TableCell>
|
||||||
<TableCell>Created</TableCell>
|
<TableCell>Created</TableCell>
|
||||||
<TableCell> </TableCell>
|
<TableCell> </TableCell>
|
||||||
<TableCell> </TableCell>
|
<TableCell> </TableCell>
|
||||||
|
|
@ -253,65 +394,25 @@ const APIKey = () => {
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{apiKeys.filter(filterKeys).map((key, index) => (
|
{apiKeys.filter(filterKeys).map((key, index) => (
|
||||||
<TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
|
<APIKeyRow
|
||||||
<TableCell component='th' scope='row'>
|
key={index}
|
||||||
{key.keyName}
|
apiKey={key}
|
||||||
</TableCell>
|
showApiKeys={showApiKeys}
|
||||||
<TableCell>
|
onCopyClick={(event) => {
|
||||||
{showApiKeys.includes(key.apiKey)
|
navigator.clipboard.writeText(key.apiKey)
|
||||||
? key.apiKey
|
setAnchorEl(event.currentTarget)
|
||||||
: `${key.apiKey.substring(0, 2)}${'•'.repeat(18)}${key.apiKey.substring(
|
setTimeout(() => {
|
||||||
key.apiKey.length - 5
|
handleClosePopOver()
|
||||||
)}`}
|
}, 1500)
|
||||||
<IconButton
|
}}
|
||||||
title='Copy'
|
onShowAPIClick={() => onShowApiKeyClick(key.apiKey)}
|
||||||
color='success'
|
open={openPopOver}
|
||||||
onClick={(event) => {
|
anchorEl={anchorEl}
|
||||||
navigator.clipboard.writeText(key.apiKey)
|
onClose={handleClosePopOver}
|
||||||
setAnchorEl(event.currentTarget)
|
theme={theme}
|
||||||
setTimeout(() => {
|
onEditClick={() => edit(key)}
|
||||||
handleClosePopOver()
|
onDeleteClick={() => deleteKey(key)}
|
||||||
}, 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>
|
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue