UX Changes: Addition of search filters for API Keys and Credentials.

packages/ui/src/views/apikey/index.js

@@ -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'>
+                    <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
-                    <StyledButton variant='contained' sx={{ color: 'white', mr: 1, height: 37 }} onClick={addNew} startIcon={<IconPlus />}>
+                                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}

packages/ui/src/views/credentials/index.js

@@ -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,9 +192,41 @@ const Credentials = () => {
         <>
             <MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
                 <Stack flexDirection='row'>
+                    <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 }}
@@ -179,6 +235,10 @@ const Credentials = () => {
                                     >
                                         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