diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 4307946ba..a8745db73 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -1147,7 +1147,8 @@ export class App {
const linkedChatFlows: any[] = []
chatflows.map((cf) => {
linkedChatFlows.push({
- flowName: cf.name
+ flowName: cf.name,
+ updatedDate: cf.updatedDate
})
})
key.chatFlows = linkedChatFlows
diff --git a/packages/ui/src/views/apikey/index.js b/packages/ui/src/views/apikey/index.js
index 226baaee3..72b73baf6 100644
--- a/packages/ui/src/views/apikey/index.js
+++ b/packages/ui/src/views/apikey/index.js
@@ -6,7 +6,6 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
import {
Button,
Box,
- Chip,
Stack,
Table,
TableBody,
@@ -17,7 +16,8 @@ import {
Paper,
IconButton,
Popover,
- Typography
+ Typography,
+ Collapse
} from '@mui/material'
import { useTheme } from '@mui/material/styles'
@@ -38,11 +38,118 @@ import useConfirm from 'hooks/useConfirm'
import useNotifier from 'utils/useNotifier'
// Icons
-import { IconTrash, IconEdit, IconCopy, IconCornerDownRight, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
+import { IconTrash, IconEdit, IconCopy, IconChevronsUp, IconChevronsDown, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
import APIEmptySVG from 'assets/images/api_empty.svg'
+import * as PropTypes from 'prop-types'
// ==============================|| APIKey ||============================== //
+function APIKeyRow(props) {
+ const [open, setOpen] = useState(false)
+ return (
+ <>
+ *': { borderBottom: 'unset' } }}>
+
+ {props.apiKey.keyName}
+
+
+ {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
+ )}`}
+
+
+
+
+ {props.showApiKeys.includes(props.apiKey.apiKey) ? : }
+
+
+
+ Copied!
+
+
+
+
+ {props.apiKey.chatFlows.length}{' '}
+ {props.apiKey.chatFlows.length > 0 && (
+ setOpen(!open)}>
+ {props.apiKey.chatFlows.length > 0 && open ? : }
+
+ )}
+
+ {props.apiKey.createdAt}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Chatflow Name
+ Modified On
+ Category
+
+
+
+ {props.apiKey.chatFlows.map((flow, index) => (
+
+
+ {flow.flowName}
+
+ {flow.updatedDate}
+
+
+ ))}
+
+
+
+
+
+
+
+ )
+}
+
+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)
@@ -205,78 +312,25 @@ const APIKey = () => {
{apiKeys.map((key, index) => (
- <>
-
-
- {key.keyName}
-
-
- {showApiKeys.includes(key.apiKey)
- ? key.apiKey
- : `${key.apiKey.substring(0, 2)}${'•'.repeat(18)}${key.apiKey.substring(
- key.apiKey.length - 5
- )}`}
- {
- navigator.clipboard.writeText(key.apiKey)
- setAnchorEl(event.currentTarget)
- setTimeout(() => {
- handleClosePopOver()
- }, 1500)
- }}
- >
-
-
- onShowApiKeyClick(key.apiKey)}>
- {showApiKeys.includes(key.apiKey) ? : }
-
-
-
- Copied!
-
-
-
- {key.chatFlows.length}
- {key.createdAt}
-
- edit(key)}>
-
-
-
-
- deleteKey(key)}>
-
-
-
-
- {key.chatFlows.length > 0 && (
-
-
- {' '}
- {key.chatFlows.map((flow, index) => (
-
- ))}
-
-
- )}
-
+ {
+ 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)}
+ />
))}