API Key: UX Fixes and adjustments post the dashboard updates

This commit is contained in:
vinodkiran 2023-11-21 18:40:20 +05:30
parent b1f5f52567
commit c716c1972a
2 changed files with 21 additions and 16 deletions

View File

@ -1161,6 +1161,7 @@ export class App {
chatflows.map((cf) => { chatflows.map((cf) => {
linkedChatFlows.push({ linkedChatFlows.push({
flowName: cf.name, flowName: cf.name,
category: cf.category,
updatedDate: cf.updatedDate updatedDate: cf.updatedDate
}) })
}) })

View File

@ -6,6 +6,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
import { import {
Button, Button,
Box, Box,
Chip,
Stack, Stack,
Table, Table,
TableBody, TableBody,
@ -56,6 +57,7 @@ import {
} from '@tabler/icons' } 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 * as PropTypes from 'prop-types'
import moment from 'moment/moment'
// ==============================|| APIKey ||============================== // // ==============================|| APIKey ||============================== //
@ -63,10 +65,8 @@ function APIKeyRow(props) {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
return ( return (
<> <>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}> <TableRow sx={{ '& td': { border: 0 } }}>
<TableCell component='th' scope='row'> <TableCell scope='row'>{props.apiKey.keyName}</TableCell>
{props.apiKey.keyName}
</TableCell>
<TableCell> <TableCell>
{props.showApiKeys.includes(props.apiKey.apiKey) {props.showApiKeys.includes(props.apiKey.apiKey)
? props.apiKey.apiKey ? props.apiKey.apiKey
@ -118,19 +118,15 @@ function APIKeyRow(props) {
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}> <TableCell sx={{ pb: 0, pt: 0 }} colSpan={6}>
<Collapse in={open} timeout='auto' unmountOnExit> <Collapse in={open} timeout='auto' unmountOnExit>
<Box sx={{ margin: 1 }}> <Box sx={{ margin: 1 }}>
<Table <Table size='small' aria-label='flows'>
sx={{ '&:last-child td, &:last-child th': { border: 1 }, borderColor: 'gray' }}
size='small'
aria-label='flows'
>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell>Chatflow Name</TableCell> <TableCell sx={{ width: '30%' }}>Chatflow Name</TableCell>
<TableCell>Modified On</TableCell> <TableCell sx={{ width: '20%' }}>Modified On</TableCell>
<TableCell>Category</TableCell> <TableCell sx={{ width: '50%' }}>Category</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -139,8 +135,16 @@ function APIKeyRow(props) {
<TableCell component='th' scope='row'> <TableCell component='th' scope='row'>
{flow.flowName} {flow.flowName}
</TableCell> </TableCell>
<TableCell>{flow.updatedDate} </TableCell> <TableCell>{moment(flow.updatedDate).format('DD-MMM-YY')}</TableCell>
<TableCell> </TableCell> <TableCell>
&nbsp;
{flow.category &&
flow.category
.split(';')
.map((tag, index) => (
<Chip key={index} label={tag} style={{ marginRight: 5, marginBottom: 5 }} />
))}
</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
@ -375,7 +379,7 @@ const APIKey = () => {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{apiKeys.map((key, index) => ( {apiKeys.filter(filterKeys).map((key, index) => (
<APIKeyRow <APIKeyRow
key={index} key={index}
apiKey={key} apiKey={key}