Skip to content

Commit

Permalink
Merge pull request #1260 from vinodkiran/FEATURE/keys-credentials
Browse files Browse the repository at this point in the history 
UX Changes to the API Keys Screens
  • Loading branch information
@HenryHengZJ
HenryHengZJ authored Nov 23, 2023
2 parents 4c65c66 + 0d1cc48 commit 0b93b33
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 67 deletions.
32 changes: 28 additions & 4 deletions packages/server/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1148,28 +1148,52 @@ export class App {
// 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
this.app.get('/api/v1/apikey', async (req: Request, res: Response) => {
const keys = await getAPIKeys()
return res.json(keys)
return addChatflowsCount(keys, res)
})

// Add new api key
this.app.post('/api/v1/apikey', async (req: Request, res: Response) => {
const keys = await addAPIKey(req.body.keyName)
return res.json(keys)
return addChatflowsCount(keys, res)
})

// Update api key
this.app.put('/api/v1/apikey/:id', async (req: Request, res: Response) => {
const keys = await updateAPIKey(req.params.id, req.body.keyName)
return res.json(keys)
return addChatflowsCount(keys, res)
})

// Delete new api key
this.app.delete('/api/v1/apikey/:id', async (req: Request, res: Response) => {
const keys = await deleteAPIKey(req.params.id)
return res.json(keys)
return addChatflowsCount(keys, res)
})

// Verify api key
Expand Down
227 changes: 164 additions & 63 deletions packages/ui/src/views/apikey/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
&nbsp;
{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)
Expand Down Expand Up @@ -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'
}
Expand Down Expand Up @@ -246,72 +386,33 @@ const APIKey = () => {
<TableRow>
<TableCell>Key Name</TableCell>
<TableCell>API Key</TableCell>
<TableCell>Usage</TableCell>
<TableCell>Created</TableCell>
<TableCell> </TableCell>
<TableCell> </TableCell>
</TableRow>
</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>
Expand Down

0 comments on commit 0b93b33

Please sign in to comment.