Implementation:FlowiseAI Flowise CredentialListDialog

Knowledge Sources	FlowiseAI Flowise
Domains	Credentials, Dialogs
Last Updated	2026-02-12 07:00 GMT

Overview

CredentialListDialog is a React dialog component that displays a searchable, grid-based list of available credential types, rendered via a portal, allowing users to select which credential to create.

Description

This component renders a Material UI Dialog through createPortal into the #portal DOM element. It receives a list of credential components via dialogProps.componentsCredentials and displays them in a 3-column grid layout. Each credential type is shown as a ListItemButton with a circular icon (loaded from the API endpoint /api/v1/components-credentials-icon/{name} with a fallback to a key SVG) and its label. A sticky search bar at the top filters credentials by name with a 500ms debounce. The component dispatches SHOW_CANVAS_DIALOG/HIDE_CANVAS_DIALOG Redux actions on open/close to manage canvas interaction state.

Usage

Use this component when a node requires a new credential and multiple credential types are available. It is opened from the CredentialInputHandler on the canvas when the user clicks "Create New" and the node accepts more than one credential type, presenting the user with a selection grid before proceeding to the specific credential creation form.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/credentials/CredentialListDialog.jsx
• Lines: 1-185

Signature

const CredentialListDialog = ({ show, dialogProps, onCancel, onCredentialSelected }) => { ... }

export default CredentialListDialog

Import

import CredentialListDialog from '@/views/credentials/CredentialListDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	boolean	Yes	Controls dialog visibility
dialogProps	object	Yes	Dialog configuration containing title (string) and componentsCredentials (array of credential component objects with name and label)
onCancel	function	Yes	Callback invoked when the dialog is closed/cancelled
onCredentialSelected	function	Yes	Callback invoked with the selected credential component object when a credential type is clicked

Outputs

Name	Type	Description
Rendered JSX (portal)	React Element	A Dialog rendered via createPortal containing a searchable 3-column grid of credential type buttons
onCredentialSelected callback	void	Called with the full credential component object when the user clicks a credential type

Usage Examples

Basic Usage

import CredentialListDialog from '@/views/credentials/CredentialListDialog'

<CredentialListDialog
  show={showDialog}
  dialogProps={{
    title: 'Add New Credential',
    componentsCredentials: [
      { name: 'openAIApi', label: 'OpenAI API' },
      { name: 'pineconeApi', label: 'Pinecone API' }
    ]
  }}
  onCancel={() => setShowDialog(false)}
  onCredentialSelected={(credential) => handleCredentialSelected(credential)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Credential_Management