+ {inputParam && (
+ <>
+ {inputParam.type === 'credential' && (
+ <>
+
+ setShowSpecificCredentialDialog(false)}
+ onConfirm={onConfirmAsyncOption}
+ >
+ )}
+ {showCredentialListDialog && (
+ setShowCredentialListDialog(false)}
+ onCredentialSelected={onCredentialSelected}
+ >
+ )}
+
+ )
+}
+
+CredentialInputHandler.propTypes = {
+ inputParam: PropTypes.object,
+ data: PropTypes.object,
+ onSelect: PropTypes.func,
+ disabled: PropTypes.bool
+}
+
+export default CredentialInputHandler
diff --git a/packages/ui/src/views/canvas/NodeInputHandler.js b/packages/ui/src/views/canvas/NodeInputHandler.js
index ba72a4cef..176df52f8 100644
--- a/packages/ui/src/views/canvas/NodeInputHandler.js
+++ b/packages/ui/src/views/canvas/NodeInputHandler.js
@@ -21,9 +21,14 @@ import { JsonEditorInput } from 'ui-component/json/JsonEditor'
import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
import ToolDialog from 'views/tools/ToolDialog'
import FormatPromptValuesDialog from 'ui-component/dialog/FormatPromptValuesDialog'
+import CredentialInputHandler from './CredentialInputHandler'
+// utils
import { getInputVariables } from 'utils/genericHelper'
+// const
+import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
+
const EDITABLE_TOOLS = ['selectedTool']
const CustomWidthTooltip = styled(({ className, ...props }) =>
+ {
+ setCredentialId(newValue)
+ onSelect(newValue)
+ }}
+ onCreateNew={() => addAsyncOption(inputParam.name)}
+ />
+ {credentialId && (
+ editCredential(credentialId)}>
+
+ )}
+
+
+ )}
+
+ )}
+ {showSpecificCredentialDialog && (
+
+ {inputParam && (
+ <>
+
+ (data[inputParam.name] = newValue)}
+ value={data[inputParam.name] ?? inputParam.default ?? false}
+ />
+ )}
+ {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
+ (data[inputParam.name] = newValue)}
+ value={data[inputParam.name] ?? inputParam.default ?? ''}
+ showDialog={showExpandDialog}
+ dialogProps={expandDialogProps}
+ onDialogCancel={() => setShowExpandDialog(false)}
+ onDialogConfirm={(newValue, inputParamName) => onExpandDialogSave(newValue, inputParamName)}
+ />
+ )}
+ {inputParam.type === 'json' && (
+ (data[inputParam.name] = newValue)}
+ value={data[inputParam.name] ?? inputParam.default ?? ''}
+ isDarkMode={customization.isDarkMode}
+ />
+ )}
+ {inputParam.type === 'options' && (
+ (data[inputParam.name] = newValue)}
+ value={data[inputParam.name] ?? inputParam.default ?? 'choose an option'}
+ />
+ )}
+
+
+ )}
+
+ )
+}
+
+CredentialInputHandler.propTypes = {
+ inputAnchor: PropTypes.object,
+ inputParam: PropTypes.object,
+ data: PropTypes.object,
+ disabled: PropTypes.bool
+}
+
+export default CredentialInputHandler
diff --git a/packages/ui/src/views/credentials/CredentialListDialog.js b/packages/ui/src/views/credentials/CredentialListDialog.js
new file mode 100644
index 000000000..9333db67f
--- /dev/null
+++ b/packages/ui/src/views/credentials/CredentialListDialog.js
@@ -0,0 +1,172 @@
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { useSelector } from 'react-redux'
+import PropTypes from 'prop-types'
+import {
+ List,
+ ListItemButton,
+ ListItem,
+ ListItemAvatar,
+ ListItemText,
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ Box,
+ OutlinedInput,
+ InputAdornment
+} from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { IconSearch, IconX } from '@tabler/icons'
+
+// const
+import { baseURL } from 'store/constant'
+
+const CredentialListDialog = ({ show, dialogProps, onCancel, onCredentialSelected }) => {
+ const portalElement = document.getElementById('portal')
+ const customization = useSelector((state) => state.customization)
+
+ const theme = useTheme()
+ const [searchValue, setSearchValue] = useState('')
+ const [componentsCredentials, setComponentsCredentials] = useState([])
+
+ const filterSearch = (value) => {
+ setSearchValue(value)
+ setTimeout(() => {
+ if (value) {
+ const searchData = dialogProps.componentsCredentials.filter((crd) => crd.name.toLowerCase().includes(value.toLowerCase()))
+ setComponentsCredentials(searchData)
+ } else if (value === '') {
+ setComponentsCredentials(dialogProps.componentsCredentials)
+ }
+ // scrollTop()
+ }, 500)
+ }
+
+ useEffect(() => {
+ if (show && dialogProps.componentsCredentials) {
+ setComponentsCredentials(dialogProps.componentsCredentials)
+ }
+ }, [show, dialogProps])
+
+ const component = show ? (
+
+ ) : null
+
+ return createPortal(component, portalElement)
+}
+
+CredentialListDialog.propTypes = {
+ show: PropTypes.bool,
+ dialogProps: PropTypes.object,
+ onCancel: PropTypes.func,
+ onCredentialSelected: PropTypes.func
+}
+
+export default CredentialListDialog
diff --git a/packages/ui/src/views/credentials/index.js b/packages/ui/src/views/credentials/index.js
new file mode 100644
index 000000000..bcd641ed9
--- /dev/null
+++ b/packages/ui/src/views/credentials/index.js
@@ -0,0 +1,274 @@
+import { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+import moment from 'moment'
+
+// material-ui
+import { Button, Box, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard'
+import { StyledButton } from 'ui-component/button/StyledButton'
+import CredentialListDialog from './CredentialListDialog'
+import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
+import AddEditCredentialDialog from './AddEditCredentialDialog'
+
+// API
+import credentialsApi from 'api/credentials'
+
+// Hooks
+import useApi from 'hooks/useApi'
+import useConfirm from 'hooks/useConfirm'
+
+// utils
+import useNotifier from 'utils/useNotifier'
+
+// Icons
+import { IconTrash, IconEdit, IconX, IconPlus } from '@tabler/icons'
+import CredentialEmptySVG from 'assets/images/credential_empty.svg'
+
+// const
+import { baseURL } from 'store/constant'
+
+// ==============================|| Credentials ||============================== //
+
+const Credentials = () => {
+ const theme = useTheme()
+ const customization = useSelector((state) => state.customization)
+
+ const dispatch = useDispatch()
+ useNotifier()
+
+ const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
+ const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
+
+ const [showCredentialListDialog, setShowCredentialListDialog] = useState(false)
+ const [credentialListDialogProps, setCredentialListDialogProps] = useState({})
+ const [showSpecificCredentialDialog, setShowSpecificCredentialDialog] = useState(false)
+ const [specificCredentialDialogProps, setSpecificCredentialDialogProps] = useState({})
+ const [credentials, setCredentials] = useState([])
+ const [componentsCredentials, setComponentsCredentials] = useState([])
+
+ const { confirm } = useConfirm()
+
+ const getAllCredentialsApi = useApi(credentialsApi.getAllCredentials)
+ const getAllComponentsCredentialsApi = useApi(credentialsApi.getAllComponentsCredentials)
+
+ const listCredential = () => {
+ const dialogProp = {
+ title: 'Add New Credential',
+ componentsCredentials
+ }
+ setCredentialListDialogProps(dialogProp)
+ setShowCredentialListDialog(true)
+ }
+
+ const addNew = (credentialComponent) => {
+ const dialogProp = {
+ type: 'ADD',
+ cancelButtonName: 'Cancel',
+ confirmButtonName: 'Add',
+ credentialComponent
+ }
+ setSpecificCredentialDialogProps(dialogProp)
+ setShowSpecificCredentialDialog(true)
+ }
+
+ const edit = (credential) => {
+ const dialogProp = {
+ type: 'EDIT',
+ cancelButtonName: 'Cancel',
+ confirmButtonName: 'Save',
+ data: credential
+ }
+ setSpecificCredentialDialogProps(dialogProp)
+ setShowSpecificCredentialDialog(true)
+ }
+
+ const deleteCredential = async (credential) => {
+ const confirmPayload = {
+ title: `Delete`,
+ description: `Delete credential ${credential.name}?`,
+ confirmButtonName: 'Delete',
+ cancelButtonName: 'Cancel'
+ }
+ const isConfirmed = await confirm(confirmPayload)
+
+ if (isConfirmed) {
+ try {
+ const deleteResp = await credentialsApi.deleteCredential(credential.id)
+ if (deleteResp.data) {
+ enqueueSnackbar({
+ message: 'Credential deleted',
+ options: {
+ key: new Date().getTime() + Math.random(),
+ variant: 'success',
+ action: (key) => (
+
+ )
+ }
+ })
+ onConfirm()
+ }
+ } catch (error) {
+ const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
+ enqueueSnackbar({
+ message: `Failed to delete Credential: ${errorData}`,
+ options: {
+ key: new Date().getTime() + Math.random(),
+ variant: 'error',
+ persist: true,
+ action: (key) => (
+
+ )
+ }
+ })
+ onCancel()
+ }
+ }
+ }
+
+ const onCredentialSelected = (credentialComponent) => {
+ setShowCredentialListDialog(false)
+ addNew(credentialComponent)
+ }
+
+ const onConfirm = () => {
+ setShowCredentialListDialog(false)
+ setShowSpecificCredentialDialog(false)
+ getAllCredentialsApi.request()
+ }
+
+ useEffect(() => {
+ getAllCredentialsApi.request()
+ getAllComponentsCredentialsApi.request()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ useEffect(() => {
+ if (getAllCredentialsApi.data) {
+ setCredentials(getAllCredentialsApi.data)
+ }
+ }, [getAllCredentialsApi.data])
+
+ useEffect(() => {
+ if (getAllComponentsCredentialsApi.data) {
+ setComponentsCredentials(getAllComponentsCredentialsApi.data)
+ }
+ }, [getAllComponentsCredentialsApi.data])
+
+ return (
+ <>
+
+
+ {inputParam.label}
+ {!inputParam.optional && *}
+ {inputParam.description &&
+
+ {inputParam.type === 'string' && inputParam.rows && (
+ onExpandDialogClicked(data[inputParam.name] ?? inputParam.default ?? '', inputParam)}
+ >
+
+ )}
+
+ {inputParam.warning && (
+
+
+ )}
+
+ {inputParam.type === 'boolean' && (
+ Credentials
+No Credentials Yet
+