Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/UI updates - Reorganizing Chatflow Dashboard #1231

Merged
merged 14 commits into from
Nov 21, 2023
+872 −46
Merged

Feature/UI updates - Reorganizing Chatflow Dashboard #1231

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f21f525
UX Changes: Ability to view as table and search on the dashboard
vinodkiran Nov 14, 2023
77994ce
UX Changes: adding a placeholder for chatflow search.
vinodkiran Nov 14, 2023
7ef817b
UX Changes: limiting display of node icons to 5 and with label to ind…
vinodkiran Nov 14, 2023
57b3113
UX Changes: minor UI tweaks/adjustments and fixes for small screens
vinodkiran Nov 14, 2023
8d22b70
UX Changes: table view has menu options to conduct flow level operati…
vinodkiran Nov 15, 2023
a7b3484
UX Changes: Ability to set category (tags) to each chatflow; correspo…
vinodkiran Nov 16, 2023
0cc68e5
add dark mode changes
HenryHengZJ Nov 16, 2023
9724771
UX Changes: Fixed 2 edge cases, (1) UI-tag not added, when the user c…
vinodkiran Nov 17, 2023
a0397c0
UX Changes: Column display fixes for 'xs' mode
vinodkiran Nov 17, 2023
213fade
UX Changes: Addition of search filters for API Keys and Credentials.
vinodkiran Nov 17, 2023
5d7febc
add fix where tags are not added when submit is clicked without enter
HenryHengZJ Nov 17, 2023
0b4bf01
unhide columns when xs mode
HenryHengZJ Nov 17, 2023
de7f343
Merge branch 'main' into FEATURE/UI-Updates
HenryHengZJ Nov 20, 2023
c7bf75e
UX Changes: persist user display choice in localStorage
vinodkiran Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
UX Changes: Addition of search filters for API Keys and Credentials.
@vinodkiran
vinodkiran committed Nov 17, 2023
commit 213fade6fa2c0816f33d5a7607bbb95a2972704a
71 changes: 62 additions & 9 deletions packages/ui/src/views/apikey/index.js
View file
Original file line number Diff line number Diff line change
@@ -16,7 +16,11 @@ import {
Paper,
IconButton,
Popover,
Typography
Typography,
Toolbar,
TextField,
InputAdornment,
ButtonGroup
} from '@mui/material'
import { useTheme } from '@mui/material/styles'

@@ -37,7 +41,7 @@ import useConfirm from 'hooks/useConfirm'
import useNotifier from 'utils/useNotifier'

// Icons
import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff, IconSearch } from '@tabler/icons'
import APIEmptySVG from 'assets/images/api_empty.svg'

// ==============================|| APIKey ||============================== //
@@ -59,6 +63,14 @@ const APIKey = () => {
const [showApiKeys, setShowApiKeys] = useState([])
const openPopOver = Boolean(anchorEl)

const [search, setSearch] = useState('')
const onSearchChange = (event) => {
setSearch(event.target.value)
}
function filterKeys(data) {
return data.keyName.toLowerCase().indexOf(search.toLowerCase()) > -1
}

const { confirm } = useConfirm()

const getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)
@@ -171,12 +183,53 @@ const APIKey = () => {
<>
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
<Stack flexDirection='row'>
<h1>API Keys&nbsp;</h1>
<Box sx={{ flexGrow: 1 }} />

<StyledButton variant='contained' sx={{ color: 'white', mr: 1, height: 37 }} onClick={addNew} startIcon={<IconPlus />}>
Create Key
</StyledButton>
<Box sx={{ flexGrow: 1 }}>
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'space-between',
width: '100%'
}}
>
<h1>API Keys&nbsp;</h1>
<TextField
size='small'
sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
variant='outlined'
placeholder='Search key name'
onChange={onSearchChange}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<IconSearch />
</InputAdornment>
)
}}
/>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup
sx={{ maxHeight: 40 }}
disableElevation
variant='contained'
aria-label='outlined primary button group'
>
<ButtonGroup disableElevation aria-label='outlined primary button group'>
<StyledButton
variant='contained'
sx={{ color: 'white', mr: 1, height: 37 }}
onClick={addNew}
startIcon={<IconPlus />}
>
Create Key
</StyledButton>
</ButtonGroup>
</ButtonGroup>
</Toolbar>
</Box>
</Stack>
{apiKeys.length <= 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
@@ -199,7 +252,7 @@ const APIKey = () => {
</TableRow>
</TableHead>
<TableBody>
{apiKeys.map((key, index) => (
{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}
88 changes: 74 additions & 14 deletions packages/ui/src/views/credentials/index.js
View file
Original file line number Diff line number Diff line change
@@ -4,7 +4,23 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
import moment from 'moment'

// material-ui
import { Button, Box, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton } from '@mui/material'
import {
Button,
Box,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
IconButton,
Toolbar,
TextField,
InputAdornment,
ButtonGroup
} from '@mui/material'
import { useTheme } from '@mui/material/styles'

// project imports
@@ -25,7 +41,7 @@ import useConfirm from 'hooks/useConfirm'
import useNotifier from 'utils/useNotifier'

// Icons
import { IconTrash, IconEdit, IconX, IconPlus } from '@tabler/icons'
import { IconTrash, IconEdit, IconX, IconPlus, IconSearch } from '@tabler/icons'
import CredentialEmptySVG from 'assets/images/credential_empty.svg'

// const
@@ -56,6 +72,14 @@ const Credentials = () => {
const getAllCredentialsApi = useApi(credentialsApi.getAllCredentials)
const getAllComponentsCredentialsApi = useApi(credentialsApi.getAllComponentsCredentials)

const [search, setSearch] = useState('')
const onSearchChange = (event) => {
setSearch(event.target.value)
}
function filterCredentials(data) {
return data.credentialName.toLowerCase().indexOf(search.toLowerCase()) > -1
}

const listCredential = () => {
const dialogProp = {
title: 'Add New Credential',
@@ -168,17 +192,53 @@ const Credentials = () => {
<>
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
<Stack flexDirection='row'>
<h1>Credentials&nbsp;</h1>
<Box sx={{ flexGrow: 1 }} />

<StyledButton
variant='contained'
sx={{ color: 'white', mr: 1, height: 37 }}
onClick={listCredential}
startIcon={<IconPlus />}
>
Add Credential
</StyledButton>
<Box sx={{ flexGrow: 1 }}>
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'space-between',
width: '100%'
}}
>
<h1>Credentials&nbsp;</h1>
<TextField
size='small'
sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
variant='outlined'
placeholder='Search credential name'
onChange={onSearchChange}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<IconSearch />
</InputAdornment>
)
}}
/>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup
sx={{ maxHeight: 40 }}
disableElevation
variant='contained'
aria-label='outlined primary button group'
>
<ButtonGroup disableElevation aria-label='outlined primary button group'>
<StyledButton
variant='contained'
sx={{ color: 'white', mr: 1, height: 37 }}
onClick={listCredential}
startIcon={<IconPlus />}
>
Add Credential
</StyledButton>
</ButtonGroup>
</ButtonGroup>
</Toolbar>
</Box>
</Stack>
{credentials.length <= 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
@@ -205,7 +265,7 @@ const Credentials = () => {
</TableRow>
</TableHead>
<TableBody>
{credentials.map((credential, index) => (
{credentials.filter(filterCredentials).map((credential, index) => (
<TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell component='th' scope='row'>
<div